트위터 클론코딩

서론 실무에서 next 12를 사용하고 있던 와중에 next13 과 14버전이 출시되었다. 업데이트 내용을 찾아보니 12 > 13 을 기점으로 많은 점이 변경되어 학습의 필요성을 느꼈고 현재 프로트에 적용해보고 싶었지만 여러 이유로 불가능하다고 판단되어 개인적으로 공

폴더 구조 설명 폴더 구조 이번 프로젝트에서는 Group Folder를 사용해 로그인 전/후 화면들을 분리하고 Private Folder를 만들어 페이지에서 사용하는 컴포넌트들을 넣어두었다. 또한, Parallel Routes와 Intercepting Route 를

프론트 개발자가 임시로 API를 만들 수 있도록 도와주는 라이브러리이다. 현재 Next14 버전을 완벽하게 지원하는 것은 아니지만 사용할만한 수준이다.백앤드 API가 완성되지 않은 상태에서 화면 개발을 해야하거나, API 에러가 발생한 경우를 만들어 테스트 할 때 주로

회원가입 화면main 페이지에서 계정 만들기 버튼을 클릭하면 /signup 페이지로 라우팅 이동 시키고 /signup 페이지에서 @modal/(.i)/flow/signup 으로 Parallel Routes & Intercepting 시켜야 한다.하지만 서버 컴포넌트(/

로그인 화면 로그인 화면 로그인 기능은 Next-Auth 라는 라이브러리를 사용해 개발했다. 로그인에 성공하면 Cookie 에 authjs.session-token 이 추가되며 인증 정보는 next-auth 의 훅을 통해 클라이언트에서 사용할 수 있다. main 페

홈 화면 구성 로그인에 성공하면 가장 처음 보여지는 화면이다. 크게 3개의 섹션으로 나누어져 있으며, 좌측에서 메뉴 변경을 할 경우 중앙 섹션만 변경되는 구조이다. 홈 화면 Left & Right 영역은 고정되어 있어 바뀌지 않지만, Center 부분은 {child