Eden의 새로운 한걸음

💻 과제 이번 과제는 쿠팡의 상품페이지를 직접 구현해보는 미션이었다. 상품 정보 영역 다른 상품 영역 상품 상세 영역 SEO를 위한 메타태그 추가(MetaTag Component 추가) next api routes를 이용한 BFF를 활용하여 데이터 가공 💡 해결방법 BFF 제공된 데이터를 실제 페이지에 적용하기 힘든 부분이 존재 ex) html tag로 이루어진 데이터 등 → 4개의 제공된 엔드포인트에 맞추어 api route를 만들어 데이터를 가공 ProductService와 useRequest 1회 차에서 받았던 피드백을 적극 수용하여 구현 requestService에 axios의 추상화하여 각각 Service에서 상속함 useQuery를 useRequest로 분리하여 사용 공용 컴포넌트 추출 공통으..

넘블챌린지의 두번째 미션이 끝나가고 있다. 이번주에 회사에서 급하게 프로젝트를 진행하느라 참여를 못하다가 10일정도지난 월요일에 챌린지를 시작할 수 있었다. 4일이라는 짧은 기간동안만 참여하여 시간이 엄청 부족했지만 나름대로 구현은 할수있어서 다행이었다. 💻 과제 이번과제는 아래 컴포넌트들을 만드는 미션이었다. Button Component 일반적인 button element form의 submit a tag를 이용한 페이지 라우팅 (next/link 사용) Input Component react-hook-form의 register를 사용할 수 있어야 한다. focus시 border-bottom이 파란색으로, error시 빨간색으로 바뀐다. 좌측에 icon이 표시된다. invalid한 값 입력 시 적절한..

넘블챌린지의 1주차 미션이 끝나가고 있다. 이번주 미션은 로그인을 위해 필요한 Data Fetching 모듈을 만드는 미션이었다. 💻 과제 가이드에 따르면 이번 미션의 포인트는 아래 두가지 이다. 주어진 AuthService 와 UserService 의 공통부분을 추상화하여 부모 클래스로 추출하고 리팩터링 react-query에 의존성 역전 원칙을 적용하기 위해 useRequest라는 API request를 보내주는 모듈구현 🤔 고민한 부분 미션을 진행하면서 가장 크게 고민했던 부분은 어떻게 하면 최대한 OOP스럽게 코드를 작성할수 있을까 였다. 그러다 보니 Service단을 리팩터링 하는 작업을 가장 오래 진행했었다. Class가 익숙하지도 않아 어떤 기능이 공통적인 기능이고 어떤기능을 추출해서 부모클..

1. 챌린지 주제 이번 주제는 숏폼(15분미만)영상 서비스 플랫폼 제작이었다. 이전에 토이프로젝트로 sns를 만들어 보았지만 영상플랫폼을 만들어 보는건 처음이라 굉장히 설레였다 2. 챌린지 기간 3. 프로젝트 자신이 정한 목표 카테고리에 영상을 올리고 사람들과 공유함 7일 연속 영상을 업로드하면 뱃지(보상)를 받을 수 있고, 혼자 하는 것보다 사람들과 영상을 공유하면서 함께 의지를 다지기위한 목적을 가지고있다. 4. 기술스택 1. Next.js 2. Typescript 3. React-query 4. React-hook-form 5. Docker, Docker-compose 5. 주요로직 - Infinite Scroll 처음 무한 스크롤을 offset과 page를 사용하여 구현하였는데 스크롤을 할 때 영..