🎉 FE_2_기본세팅) FE 프로젝트 세팅 - next.js

[kay0829]

이슈번호

• FE_2_기본세팅 #2

작업 내용

• 프로젝트 세팅
• 화면 구현
• 라이브러리 세팅
• 버그 수정
• 리팩토링

진행 화면

• next.js 로 프로젝트 세팅을 진행하였습니다.
  • 사용한 커맨드: npx create-next-app@latest --experimental-app
    • App Router가 베타테스트 단계였을 때 app 을 사용할 경우 --experimental-app 옵션 추가

App Router

• 5월 5일 이후 App Router가 Stable 단계에 들어섰음을 공식 발표하였으며 현재는 해당 옵션을 추가할 필요가 없음
• App Router는 Next.js에서 라우트를 처리하고 뷰를 렌더링하기 위한 새로운 전략
• App Router에 대한 자세한 설명
• layout.js와 page.js 등 예약 파일에 대한 설명: 애플코딩 next.js 강의 3:44
• File Conventions 공식 문서

그 외 설정

• typescript: No
• ESLint: Yes
• Tailwindcss(atomic 디자인 라이브러리): No
• src/ directory (단순 src 폴더를 쓸지 여부입니다!) : Yes
• App Router: Yes
• import alias (절대경로) : Yes

recoil

• 세팅 참고 링크

결과 화면

default.mp4

• 공용 컴포넌트 적용: root 에 있는 page.js 파일에 components/common/Gnb.jsx 경로의 Gnb 컴포넌트를 import 하여 사용하였습니다.
• /: "use client"를 선언한 Gnb 컴포넌트에 recoil value가 잘 적용되는 부분을 확인할 수 있습니다.
• /users: users 폴더 안의 page.js 파일이 렌더링 되는 부분 확인할 수 있습니다.
• /users/signup: users/signup 폴더 안의 page.js 파일이 렌더링 되는 부분 확인할 수 있습니다.
• /users/:nickname: users/[nickname] 폴더 안의 page.js 파일이 렌더링 되는 부분 확인할 수 있습니다.

절대경로

규칙 정리

• 컴포넌트는 대분자로 시작해야 해요!
• 컴포넌트는 function으로 선언하고 하단에 export default 해주세요!

function Home() {
    return (
        <div>hello</div>
    );
}

export default Home;

• prettierrc 취향 알려주시면 수정하도록 하겠습니다!
• 컴포넌트의 경우 확장자 jsx로 통일 부탁드립니다!
• 경로는 절대 경로로 사용해주세요!

작업 중 이슈 사항 또는 TODO 로 남겨둔 부분

• api fetch 하는 부분

[prinzusseugen]

확인했습니다! 프론트엔드 분들 파이팅~!!

[schani3]

고생많으셨습니다!

[tyrue]

확인했습니다!

[PeterAhnn]

확인했습니다!