프로젝트/WAVED

구글 애널리틱스, 누구세요?https://analytics.google.com/구글에서 무료로 제공하는 웹 분석 서비스 Google Analytics(GA)구글 애널리틱스를 활용한다면 일일 사용자 수부터 페이지 별 사용자 수, 사용자의 이벤트 등 여러가지 지표를 얻을 수 있다.  우리는 웨이브드를 단기간 직접 운영해볼 예정이였고, 구글 애널리틱스를 활용한다면 유의미한 운영 지표를 얻어볼 수 있을거란 기대가 있었기에 리팩토링 스프린트 중 우리 서비스 내에 도입해보았다.   (1) GA 계정 생성하기(+ 우리는 관리자용 구글 계정을 하나 갖고 있었기 때문에 이 계정에서 아래 과정을 진행하고,추후 개인 계정을 초대해 각자가 지표를 볼 수 있도록 설정했다.) 홈페이지에서 좌측 하단 톱니바퀴(⚙️)를 눌러 계정 ..

어쩌다 내가 PWA를 맡게 되었을까?는 모바일 기반 웹 서비스. 기획 의도 상 사용자가 모바일 디바이스를 기반으로 서비스를 접근하는 것이 더 적절하다고 판단했고, 화면 역시 모바일 디바이스를 기준으로 제작하고 있었다. 그러다 보니 디자이너분들 눈에 특히 아쉬운 것이다. "앱으로는 못할까요?" 죄송합니다 제가 웹 개발자예요.. 그래도 찾아보니 PWA라는 기술이 있는데 이걸 도입하면 웹을 앱처럼 사용하는 것이 가능하다는 내용을 확인. 문제는 PWA를 사용해 본 인원은 고사하고 뭔 지조 차도 다들 잘 모른다는 사실. 솔직히 처음 들었다. 이 당시 우리는 MVP 모델 완성이라는 목표만으로도 굉장히 쥐어 짜이고 있었기 때문에 "일단은 우선순위를 뒤로 미루고 우리 여유 생기면 도입해요 🥺"라는 마법의 문장으로 일..

이거 가로 스크롤 안되는데요?UI 작업 중 가로 스크롤 컴포넌트에 대한 이야기다.담당하고 있던 홈과 챌린지 상세 정보 페이지에는 각각 가로로 스크롤을 필요로 하는 컴포넌트가 존재했다.  처음에는 이 컴포넌트들에 대해 굉장히 단순하게 스타일링 해두었었는데(1) 컴포넌트를 감싸는 너비는 100%로 지정하여 화면 크기 만큼 채워주고(2) 해당 너비 이상 넘치는 부분은 overflow-x: auto; 를 통해 접근을 허용한 뒤(3) 모든 브라우저에서 스크롤바가 노출되지 않도록 display: none; 을 지정해주었다.const SSectionScrollX = styled.div` display: flex; gap: 0.625rem; width: 100%; height: 254px; overflow-x..

때는 Sprint1. 웨이브드의 대략적인 기획이 완료되어 프로토타입 디자인을 기다리던 중이었다. 이 기간 동안 프로젝트 스케폴딩을 하고 기술 스택을 확정하는 시간을 가졌다. 프론트엔드 3명이 모두 다룰 수 있는 React는 확정인 상태였기 때문에 React의 개발 도구 선택지로 Vite와 Next.js 중에서 고민했다.  Vite vs Next.jshttps://ko.vitejs.dev/ ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.devVite는 React 등 다양한 프레임워크를 지원하는 빌드 도구로 '차세대 프론트엔드 개발 도구'라는 슬로건을 걸고 있다. CRA(create-react-app)과 비교하여 빠른 응답 속도와 개발 편의성을 지원한다. 우리 팀의 모든 프론트엔드 개발자들은 ..