TypeScript와 Next.js를 사용하여 니콘내콘의 모바일 웹페이지를 클론하였습니다.
프로필 |
이름 |
담당 기능 |
---|---|---|
|
우종원 | 브랜드 페이지, 전반적 리팩토링 |
|
박중섭 | 카테고리 페이지, 배포 |
|
이태림 | 상품 상세 페이지, 마이페이지, 고객센터 |
|
임수영 | 메인 페이지, 헤더 |
React
typescript
Next.js
emotion
# clone the project
$ git clone https://github.com/console-lo9/messenger.git
# install modules
$ cd ncnc-app
$ npm install || yarn install
# start
$ npm run dev || yarn dev
⠀
⠀ You can now view this project in the browser.
⠀ http://localhost:3000/
⠀
"dependencies": {
"@emotion/react": "^11.7.1",
"@emotion/styled": "^11.6.0",
"@reduxjs/toolkit": "^1.7.2",
"@types/react-redux": "^7.1.22",
"axios": "^0.26.0",
"next": "12.0.10",
"next-redux-wrapper": "^7.0.5",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "^7.2.6"
},
├── components
│ ├── Brand
│ ├── Carousel
│ ├── Category
│ ├── Contact
│ ├── Deal
│ ├── ItemLists
│ │ ├── styled
│ │ └── types
│ ├── Main
│ └── Mypage
├── cypress
│ ├── fixtures
│ ├── integration
│ ├── plugins
│ └── support
├── hooks
├── layout
├── pages
│ ├── api
│ ├── brands
│ ├── categories
│ ├── contacts
│ └── items
├── public
├── store
├── styles
├── types
└── utils
└── functions
-
Next.js
와Typescript
사용 -
니콘내콘 모바일 웹 페이지와 같은 라우팅
-
3분 이내의 E2E 테스트 구현
-
재사용 가능한 Container
-
Header
- 홈인 경우 햄버거 버튼, 홈이 아닐 경우 왼쪽 상단에 뒤로가기 버튼
- 카테고리, 브랜드 페이지에서 선택한 메뉴를 중앙에 출력
-
홈
- 배너 캐러셀 라이브러리 없이 랜덤 이미지로 직접 구현
- 브랜드 메뉴 출력 (API)
- 땡처리 리스트 출력 (API)
-
브랜드 페이지 /categories
- 카테고리 상단 메뉴바는 슬라이드가 되도록 구현
- 카테고리 내에서 브랜드 리스트 출력
- 땡처리콘, 까페 등 각 카테고리 페이지 생성
- 브랜드 클릭 or 터치 시 해당 브랜드 상세로 이동
-
상품 리스트 /brands
- 상품 리스트 출력 (API)
- 상품 개수 좌측 상단에 출력
- 이미지, 상품명, 할인율, 할인가,
정가
-
상품 상세 /items
- 옵션 미선택 시 옵션 선택하기 버튼 렌더링
- 옵션 선택 버튼 클릭 시 옵션 선택 창 노출
- 옵션 선택 시 옵션 창 닫히고 선택 옵션과 구매하기 버튼 렌더링
- 옵션 선택 창 백그라운드 클릭 시 창 닫힘
- 선택한 옵션 클릭 시 옵션 선택 창 노출
-
고객 센터 /contacts
- 홈 화면의 좌측 상단 햄버거 메뉴 눌렀을 때 고객 센터 페이지로 이동하는 메뉴 노출
- 왼쪽에서 오른쪽으로 화면을 100% 덮는 애니메이션
- 상담 시간 안내
- 구매 / 판매 탭 구현
- 구매 / 판매 탭에 맞는 QnA 리스트 조회
- 메인 및 카테고리, 브랜드, 상품 상세 페이지
- 마이페이지와 고객 센터
트랜디한 React 개발자라면 관심을 가질 TypeScript와 Next.js의 조합으로 멋진 프로젝트를 완성시킬 수 있어 좋았습니다. 특히, 빈번한 API호출과 JSON파일 렌더링을 고민해보면서 앞으로 이 부분에 있어서는 더 자신있게 구현할 수 있을 것 같습니다.
CSR과 SSR에 대한 개념을 프로젝트를 진행하며 직접 체감하며 배울 수 있었습니다. 또한 왜 SSR이 SEO에 적합한 렌더링 방식인지 Next js를 활용하며 공부할 수 있었습니다. 또한 CRA와 다르게 라우팅이 디렉토리 구조를 통해 구현된다는 점이 굉장히 흥미로웠습니다.
검색 노출, 라우터 등 React의 불편한 점을 개선시킬 수 있는 Next.js를 처음 사용한 프로젝트였기 때문에 의미 있었습니다. Typescript 또한 런타임 전에 에러를 잡을 수 있는 등 Javascript의 한계를 잡아 줄 수 있기 때문에 깊이 공부하면 도움이 될 것이라 생각합니다. SSR, CSR에 대해 더 자세히 공부해 보고 싶습니다.
처음 next.js를 사용하였는데 CSR 방식과 SSR 방식의 차이를 체험할 수 있었던 프로젝트였던 것 같습니다.