본문 바로가기
  • 하고 싶은 일을 하자

nextjs7

덕업일치하며 즐겁게 일했던 회사에서의 퇴사 회고 2024년 8월을 마지막으로 다니던 회사에서 퇴사했다. 그래서 이를 돌아보는 회고록을 써보고자 한다. 덕업일치의 힘크래프트 맥주로 술의 세계에 입문하여 이제는 모든 종류의 술을 좋아했다. 매달 전통주를 보내주는 서비스를 구독하고 있었는데 그 회사에서 채용 공고가 떴다. 이력서와 포트폴리오, 회사에 가서 하고 싶은 업무를 30여 장의 문서로 정리했다. 자기 전에도 아이디어가 떠올라 자다가 일어나 핸드폰에 메모를 하곤 했다. 서류 마감이었던 크리스마스 이브 날 밤까지 열심히 작성해 보냈다. 그런데 웬걸, 이미 사람을 채용했다는 소식을 들었다. 다행히 회사에서 좋게 봐서 없던 TO가 생겨 입사하여 일할 수 있었다. 전통주 구독 서비스와 쇼핑몰 플랫폼, 어드민의 프론트엔드를 개발했다. 이 회사에서 일했던 건 단.. 2024. 11. 22.
2024년 주류 이커머스 플랫폼 프론트엔드 개발 상반기 회고 벌써 8월이다. 푹푹 찌는 더위에 힘들지만 이게 또 여름이 매력 아닐까. 시원하고 구름 한 점 없는 하늘을 보면 내 마음도 같이 파랗게 물든다. 올해 상반기에는 어떤 일을 했었나? 굵직한 프로젝트 위주로 얘기해 보겠다. 1. 앱 다운로드 유도 팝업 개발술담화에서는 23년 12월 AOS 앱 배포, 24년 2월 IOS 앱을 배포하였다. 앱은 특별히 크게 홍보를 하지 않아도 다운로드 수가 꾸준히 늘어나는 효자 프로덕트였다. 배포 이후 어느 정도 안정화 단계에 진입했다고 판단하여 프로덕트 팀에서는 모바일 웹으로 접속한 경우 앱 다운로드 유도 팝업을 보여주는 기능을 만들기로 했다. 웹을 잘 쓰고 있는데 앱을 사용하도록 유도할 필요가 있는 걸까? 이에 대한 대답은 "앱을 사용하는 것이 더 좋다."이다. 앱이 없던 .. 2024. 8. 9.
Nextjs Middleware로 redirect하여 UX 향상하기 내가 개발하고 있는 술담화 전통주 쇼핑몰을 서핑하고 있었다.로그인이 필요한 페이지로 접속시 고객 경험이 불편한 부분이 있었다.예를 들어, 장바구니 페이지 라면(우리 서비스는 로그인 하지 않은 상태면 장바구니를 볼 수 없다) 1. 장바구니 페이지로 이동2. 장바구니 정보 조회하는 API 호출3. 서버에서 권한이 없다는 에러가 발생하면 login 페이지로 이동이러한 흐름으로 동작하고 있었다. 이 방식의 불편함은 미로그인 상태에서 로그인이 필요한 장바구니 페이지로 이동하는 것이 별로다.네트워크 느린 상황이라면 장바구니 페이지가 보이거나, 불필요한 URL 이동을 체감할 수 있다.미로그인 상태에서 장바구니 정보를 조회하는 API를 호출하는 것은 트래픽 낭비다."로그인이 되어있지 않은 상태일 때 로그인이 필요한 페.. 2024. 3. 5.
2023년 하반기 회고 - 이커머스 프론트엔드 개발, 애자일, 스토리북, 테스트 코드, 사이드 프로젝트 2023년이 벌써 이렇게 지나갔구나. 올 하반기에도 많은 일들이 있었다. 이번 글은 회사 개발 일 뿐만 아니라 다른 일들도 회고를 해볼까 한다. 개발개발이라는 직업은 나에게 애증의 존재 같다. 좋기도 하고, 싫기도 한데, 다시 태어나면 또 개발자를 할 것 같다. 물론 다른 직업을 경험해보지 못해서 익숙한 것을 하고 싶은 마음도 있을 것이다. 그렇지만 하나의 주제를 탐구하고, 공부하고, 논리를 쌓는 행위가 나에게 잘 맞는 것 같다. 올 하반기 개발했던 것을 정리 해보겠다.  기디개 프로덕트팀 창설하반기부터 기획팀, 디자인팀, 개발팀이 모인 프로덕트팀이 만들어졌다. 가장 큰 변화는 일주일에 한 번씩 기디개가 모여 정기 미팅을 가지고, 스프린트가 끝날 때 회고 미팅도 다같이 하게 된 점이다. 원래는 개발팀 내.. 2023. 12. 28.
useEffect로 Race Condtions 해결하는 방법 React 개발을 하는데 있어 useEffect 는 필수이다.정말 많이 쓴다.그런데 공식 문서를 읽다보니 몰랐던 것을 알게되어 정리 해보겠다. 먼저 useEffect 에 대한 정의부터 예상과 달랐다.나는 컴포넌트가 마운트/언마운트 되었을 때 실행할 로직을 정의하는 Hook 이다 라고 생각하고 있었는데공식 문서의 정의에는"외부 시스템을 사용하는 컴포넌트를 동기화하는 Hook 이다." 라고 설명하고 있다. 외부 시스템은 무엇이고, 동기화는 무엇일까? External Systemexternal system 이란 React 로 control 하지 않는 코드를 의미한다.이에 대한 예시로 setInterval(), clearInterval(), window.addEventListener(), window.remov.. 2023. 11. 22.
2023년 상반기 주류 이커머스 스타트업 프론트엔드 개발 회고 내가 다니는 회사(술담화)에서는 스프린트가 끝나거나 프로젝트가 끝나면 다 같이 회고하는 문화가 있다. 개발 블로그에도 올해 상반기를 회고해보고 앞으로도 꾸준히 올려보려고 한다. 굵직한 개발 프로젝트 [ 관리도구에서 사용자의 리뷰를 숨기거나 댓글을 달 수 있는 기능 개발 ] 목적 1 : 쇼핑몰 랜딩 페이지 최하단에 "실시간 베스트 리뷰"가 있다. 이곳에 구매한 상품이 아닌 이상한 사진이나, 부적절한 내용의 리뷰가 올라오는 경우가 있었다. 이때 매번 DB를 변경해서 내려줘야 했는데, 관리도구에서 관리자가 댓글을 달거나 숨김 처리할 수 있도록 하였다. 목적 2 : 또한 상세 페이지에 상품에 대한 문의 리뷰를 달았을 때, 적절히 답변하여 상품에 대한 신뢰도를 높여 구매로 이어지도록 하는 효과도 있었다. 기획 단.. 2023. 6. 13.
스타트업 개발팀의 React Next.js 마이그레이션 도전기 나는 술담화라는 스타트업 회사에 다니고 있다. 2021년 초에는 php 기반의 웹 페이지에서 React를 도입했고, 이번 2022년 5월부터 NextJs를 도입했다. React에 NextJs를 Migration 하는 과정은 쉽지 않았다. 기존에 진행하던 회사 매출에 중요한 프로젝트도 동시에 진행해야 했고, 폴더 구조와 라우터가 완전히 바뀌기 때문에 버그가 없도록 유의해야 했다. 소규모 개발 인원으로 어떻게 성공적으로 Migration 했는지 이야기해 보겠다. 일단 먼저 시작하기에 앞서 NextJs가 무엇인지 간략하게 설명하겠다. (이 글은 술담화 프론트엔드팀 개발자 이병수, 정윤기 님과 함께 작성하였습니다.) NextJs란 무엇인가? 전통적인 웹 사이트는 글 위주의 페이지였다. 사진이나 영상은 거의 없었.. 2022. 12. 28.

티스토리툴바