설치방법

# npx create-next-app@14 section02

npx: Node Package eXcute (설치 없는 실행)
create-next-app: next app을 생성
@14 : 14Version 설치 (@15시 15버전)
section02: 패키지 이름

Would you like to use TypeScript? ... No / Yes
 - TypeScript 사용 유/무 : 사용

Would you like to use ESLint? ... No / Yes
 - ESLint란? JavaScript 코드에서 발견되는 문제시 되는 패턴들을 시별하기 위한 정적 코드 분석 도구
 - 사용여부: 사용

Would you like Tailwind CSS? ... No / Yes
 - Tailwind CSS란? CSS를 작성하지 않고 클래스명을 제공해 CSS가 적용될 수 있도록 도와주는 CSS 프레임워크
 - 사용여부: 사용해도 좋고 안해도 상관X

Would you like to use 'src/' directory? ... No / Yes
 - src 디렉터리? 소스코드를 별도로 보관할 디렉터리로 보면 좋을듯?
 - 사용여부: 상관 없음

Would you like to use App Router? ... No / Yes
 - Next 14 부터 나온 방식인데 앱라우터 방식유무는 본인이 판단
   사용안하는경우 pages route 방식을 사용함
 - 사용여부: 니 알아서~   

Would you like to customize the default import alias (@/*)? ... *No* / Yes
 - 다른 모듈을 불러올때 절대경로로 값을 불러올지 "@" 를 쓰면 src 설정되고
   이후 좀 더 간결하게 작성 가능
 - 사용여부: 니 알아서 ~
   
   
이후 생성되면

# npm run dev (or yarn run dev)
실행시 localhost:3000으로 접속 가능

파일 구조 (ver 14 기준)

public/ 자주 사용되는 정적인 파일을 보관 src/

• pages: 페이지의 역할을 할 파일들을 경로에 맞게 설정
  • _document.tsx: 모든 페이지의 공통적으로 적용될 로직이나 레이아웃, 데이터를 다루기 위한 파일 (react의 index와 동일)
  • _app.tsx: (root) 모든 컴포넌트의 부모 컴포넌트
    • Component: 현재 페이지의 역할을 할 페이지 역할을 받는 컴포넌트
    • pageProps: Component에 전달할 Prop을 객체로 보관
• styles: 앱의 전체적인 스타일을 담당하는 css 파일이 위치

next.config.mjs

• reactStrictMode: (켜져있는경우 개발시 두번 실행됨 off권장)