1. 팀 소개
•
팀원 :
◦
프론트 : 김준혁, 김명준
◦
백엔드 : 송치원
2. 팀 주제
•
NextJS13 + ChatGPT 를 활용한 토너먼트 개최하기
3. 담당역할
•
공통 컴포넌트 개발
•
서비스 로직 구현
•
리스트 화면 구현
•
결과 화면 구현
•
트리 화면 구현
•
애니메이션 도입
•
라우팅 도입
•
Next 모달 도입 (9월… 진행중)
•
리펙토링 (9월… 진행중)
4. 주제 선정 이유
•
사이트 배포(vercel) + 커스텀 도메인
•
NextJS 13버전 활용한 프로젝트 진행
•
ChatGPT API 사용
•
광고 붙이기 + 수익내기
•
Analytics 붙이고 분석하기
•
마케팅 광고 해보기
5. Tech
•
NextJS13
•
React
•
Recoil
•
PostCSS, tailwindCSS
6. MVP
1.
선호 항목 입력 (ex. 여배우, 드라마, 만화책)
2.
chatGPT 로 선호 항목 키워드 16개 생성
3.
이미지 검색해서 16개 키워드에 해당하는 이미지 주소 얻기
4.
월드컵 16강 게임 진행
7. 디자인
•
Primary Color : #673AB7
•
Accent Color : #FF4081
•
Concept Reference : aplon
8. 프로젝트 사이트 바로가기
9. 느낀점
•
Next 13버전에서 사용하는 서버컴포넌트, 클라이언트 컴포넌트 기능을 최대한 살리려고 노력했습니다.
•
서버렌더링, 클라이언트 렌더링을 최대한 이용하여 성능 이슈 누락을 방지하고자 노력하였습니다.
•
폴더 라우팅 기능 중 [병렬라우팅, 라우팅가로채기] 기능에 대한 학습이 부족함을 느꼈습니다. (9월, 버그 수정중)
•
Vercel 을 통한 배포를 해보니, 편안함과 동시에, 위험할수도 있다고 느꼈습니다. (브랜치 전략이 별도로 필요함)
•
PostCSS가 아닌, styled-component를 사용하고 싶었으나, CSS-In-JS를 서버컴포넌트에서 지원하는게 PostCSS뿐인게 너무 아쉬웠습니다.
•
Recoil을 통한 상태관리를 경험해보았습니다. React에서 사용하던 Hook 방식을 그대로 채택한듯 하여 나름의? 편안함을 느꼈습니다.
•
이미지 로딩은 전부 서버컴포넌트에서 사용하도록 지정을 하였으나, 뭔가 렌더링 속도가 느린 느낌을 자주 받고 있습니다. (데이터를 SSR 방식으로 불어와서 그런 것 같은데 해당 부분은 검토중입니다.)