프로젝트

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

WAVED와 함께 챌린지의 파도를 넘어 취업으로!   안녕하세요!저희는 멋사로켓단 1기의 팀 세니티 입니다 🦁 🚀 멋사로켓단이란?프로그래밍 교육 업체 멋쟁이사자처럼에서 주관하는 실무 프로덕트 개발 프로그램입니다. 제가 소속된 팀 세니티는 UI/UX 디자이너 2명, 프론트엔드 개발자 3명, 백엔드 개발자 2명, 총 7명으로 구성되어 있습니다. 그리고 저는 이곳에 프론트엔드 개발자로 참여하게 됐어요 👩🏻‍💻   이번에 장장 2개월의 개발 기간을 거쳐개발 직군 취준생을 위한 챌린지 플랫폼 WAVED를 런칭(04/22)하게 되었습니다!! 이 기쁜 마음을 담아 제 블로그를 통해서도 웨이브드를 가볍게 소개해봅니다 🐋   🔗 서비스 링크 : https://waved-likelion.site WAVED챌..

어쩌다 내가 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)과 비교하여 빠른 응답 속도와 개발 편의성을 지원한다. 우리 팀의 모든 프론트엔드 개발자들은 ..

문제 발생파이어베이스를 사용한 프로젝트 진행 중 어려움을 겪고 있던 부분이 있었는데바로 Firestore 사용량...  Firebase를 무료로 이용하는 경우, 하루 데이터 read 수를 50,000회로 제어하고 있다.보통이라면 이 50,000회를 넘치게 사용하기는 쉽지 않고실제로 조금 더 대형 프로젝트인 감자마켓도 하루를 제외하고는 일일 5만 건을 넘긴 적이 없었다.  그런데 개인 프로젝트인 내 제트위터🍧가 어느순간부터24시간 계속 열어두고 작업한 것도 아닌데, 조금만 켜두어도 사용량을 순식간에 다 먹어버리는 거다.   제발.... 제발 그만해 다오.....😱😱😱해야 할 작업이 산더미인데 자꾸 저러니 프로젝트 진행에 큰 걸림돌이 됐다.  이 참에 전체적인 성능 개선이나 하자하고SEO 강화, 이미..

노마드코더에서 주관하는 트위터 클론코딩 챌린지에 참여하게 됐다! 2주 트위터 클론코딩 컨테스트 – 노마드 코더 Nomad Coders노마드 컨테스트nomadcoders.co 오랜만에 Firebase를 다루고 싶기도 하고새로 습득한 기술 스택들로 CRUD를 혼자서 완성도 있게 만들어보고자 챌린지에 임하게 됐다.  목표는 챌린지 참여에 그치지 않고 제대로된 개인 프로젝트로 발전시키기!제시하는 기능 외에 추가적인 기능 작업과 성능 개선까지 할 수 있는 만큼 완료 시키는 것이 목표로 한다   컨셉단순히 구twitter 현X 의 UI를 따라가는 것도 좋겠지만동작하지 않는 기능들까지 노출하는 것은 개인적으로 아쉽게 느껴져 컨셉과 디자인에 변화를 주었다. Z세대들을 타깃으로 한 레트로한 컨셉의 메신저!이름하여 Zwi..