Next.js 기본 코드 구성과 데이터 호출 🎢

DevSheryl·2023년 5월 23일
0
  • Next.js가 인기를 끄는 요인
    • 리액트 페이지를 클라이언트가 아닌 서버에서 렌더링 가능
  • 특정 컴포넌트의 경우는 API나 DB와 같은 외부 소스에서 데이터를 가져와야 함

Next.js 앱 폴더 구조

create-next-app 실행 이후 기본 폴더 구조

  • node_modules/
    • 의존성 패키지를 설치하는 폴더
  • pages/
    • 웹앱의 페이지 파일 저장, 라우팅 시스템 관리
  • public/
    • 컴파일된 CSS 및 자바스크립트 파일, 이미지, 아이콘 등의 정적 자원 저장 및 제공
  • styles/
    • 스타일링 포맷(CSS, SASS 등)과 관계없이 스타일링 모듈 저장

public/과 node_modules/를 제외한 다른 폴더들은
모두 src/ 폴더 아래로 옮길 수 있음

  • 이렇게 하면 최상위 폴더 구조가 좀 더 간결해짐
  • pages/와 src/pages 폴더가 둘 다 있는 경우 Next.js가 src/pages/ 폴더를 무시하고 최상위 pages/를 기준으로 사용

컴포넌트 구성: 아토믹 디자인 원칙

atoms

  • 코드의 가장 기본적인 컴포넌트
  • 예: button, input, p, 애니메이션, 컬러 팔레트

molecules

  • atoms에 속한 컴포넌트 여러 개를 조합하여 만들어진 좀 더 복잡한 컴포넌트
  • 예: input과 label 컴포넌트를 합쳐 새로운 컴포넌트를 만듦

organisms

  • molecules와 atoms를 섞어서 만든 더 복잡한 구조의 컴포넌트
  • 회원 가입 양식(form), footer, 캐러셀(carousel)

templates

  • 어디에 organisms, atoms, molecules를 배치할지 결정
  • 사용자가 접근할 수 있는 페이지

새 컴포넌트를 만들 때는 최소한 3개의 파일 필요

  • 컴포넌트 파일
  • 스타일 파일
  • 테스트 파일

=> 이렇게 컴포넌트를 구성하면 필요할 때 컴포넌트를 찾아 수정하기 쉬움

유틸리티 구성

  • 컴포넌트를 만들지 않는 코드 파일
  • 목적에 맞게 다른 파일로 구분하고 컴포넌트에서 유틸 함수를 호출해서 사용
  • 예: 현재 시각 계산, localStorage 작업 처리, JWT(JSON Web Token) 처리, 애플리케이션 로그(log) 기록

정적 자원 구성

  • Next.js에서는 정적 파일을 public/ 폴더 아래에 두면 알아서 제공해줌

  • 정적 자원 예

    • 이미지
    • 컴파일한 JS 파일
    • 컴파일한 CSS 파일
    • 아이콘
    • 폰트
    • manifest.json
    • robot.tsx
  • public/ 폴더에서 정적 자원 구성

  • public/

    • assets/
      • /js -> 컴파일한 JS 파일
      • /css -> 컴파일한 CSS 파일
      • /icons -> manifest.json의 icon 파일 제공
      • /images
  • 이미지는 내장 Image 컴포넌트를 사용해서 처리하는 것이 좋음

manifest.json

  • JSON 파일
  • Progressive 웹앱에 관한 정보 기록
    • 예: 앱 이름, 모바일 기기에 앱 설치 시 표시할 아이콘 등
  • 위치: public/ 바로 아래
{
	"name": "My Next.js App",
    "short_name": "Next.js App",
    "description": "A test app made with next.js",
    "background_color": "#a600ff",
    "display": "standalone",
    "theme_color": "#a600ff",
    "icons": [
    	{
        	"src": "/assets/icons/icon-192.png",
            "type": "image/png",
            "sizes": "192x192"
        },
        {
        	"src": "/assets/icons/icon-512.png",
            "type": "image/png",
            "sizes": "512x512"
        }
    ]
}

HTML에서 불러오기

<link rel="manifest" href="/manifest.json" />

스타일 파일 구성

  • styles/ 폴더
  • 코드 여러 곳에서 사용하는 공통 스타일 관리
    • 예: 컬러 팔레트, 테마(theme), 미디어 쿼리 등

lib 파일 구성

  • third-party 라이브러리
  • 유틸리티 파일과의 차이
    • 유틸리티는 범용적
      • 다른 컴포넌트나 라이브러리에서 가져다 쓸 수 있음
    • lib 파일은 특정 라이브러리에 특화

서버에서 외부 데이터를 불러오는 2가지 방법

  • getStaticProps 함수를 사용
    • 빌드 시점에 데이터 호출 (SSG, ISR)
  • get ServerSideProps 함수를 사용
    • 실행 도중에 데이터 호출 (SSR)
profile
2024 가보자고~!

0개의 댓글