프로그래밍/NextJS

NextJS - NextJS 수동설치 하는 방법

Cian 2024. 10. 25. 14:59

오늘은 NextJS 프로젝트를 생성하고 설정하는 방법에 대해 알아보자.

자동, 혹은 수동으로 설치하는 방법이 있는데 그 중 수동으로 설치하는 방법을 소개하겠다.

 



먼저, 터미널에서 Document나 설치하고 싶은 위치로 이동하여 mkdir명령어를 사용해 폴더를 생성해준다. 본인은 nextjs-setting로 설정

mkdir (원하는 폴더명)

 

 

생성한 폴더로 이동

cd (생성한 폴더명)

 

 

생성한 폴더로 이동하였다면 해당 위치에서 code .를 입력해 vscode를 띄워주면 된다.

code .

 

 

혹시 여기서 code .를 입력했는데 'command not found' 응답을 받게 된다면 당황하지 말고, vscode에 들어가 커맨드 파레트 (cmd+shift+p)를 열고 Shell Command: Install 'code'를 선택해 설치해주면 이전에 되지 않았던 code .명령어가 잘 실행될 것이다.

 

 

올바르게 열었다면 터미널을 열고, 해당 위치에서 npm init -y를 입력.

해당 명령어는 Node.js 프로젝트를 위한 기본 설정을 자동으로 생성해주는 역할을 하며, package.json 파일을 기본으로 생성한다.

-y 옵션을 이용해 매개변수를 하나씩 입력할 필요 없이 기본 설정을 수락한다는 의미로 이해하면 좋겠다.

npm init -y

 

 

그럼 앞서 말했듯이 package.json 파일이 생성된 것을 볼 수 있다.

 

 

이번엔 npm install을 실행해줄 건데, react/latest, next/latest, react-dom/latest로 최신 버전을 설치할 것이다.

react는 UI와 다른 모든 것들을 구성하는 부분이고, react-dom은 그것을 브라우저의 Document Object Model(DOM)에 렌더하는 역할을 한다.

Npm install react@latest next@latest react-dom@latest

 

 

설치가 완료되었다면, package.json파일로 돌아와 script를 수정해줄 건데 기존에 입력된 것들을 지우고, "dev"란 script를 만들어 "next dev"라는 명령어를 지정해준다. (dev 명령어를 실행하면 NextJS실행)

 

 

이 작업을 마쳤다면 NextJS가 나의 코드를 찾게 된다.

NextJS는 사용자가 프레임워크를 호출하는 것이 아닌, 프레임워크가 코드를 호출하는 프레임워크이기 때문이다. (우리의 코드를 사용)

 

 

이제 NextJS는 Page라는 폴더를 찾으려고 할 것이다. 그리고 그 폴더는 app이라는 폴더 안에 존재해야 한다.

폴더를 한번 생성해보자. (주의할 점은 프레임워크의 규칙을 따라야 하기 때문에 폴더명을 다르게 설정하면 안된다.)

 

 

다음으로 page를 tsx(TypeScript)나 jsx(React)중에 하나의 확장자를 선택해야 하는데, 본인의 개발 환경에 맞춰 선택하면 된다. (본인은 tsx선택)

 

 

파일을 생성하였다면, 기본적인 컴포넌트를 export해보도록 하자. 당장은 vscode의 붉은 줄이 신경쓰이겠지만 명령어만 실행시켜볼 목적이라 불안은 잠시 내려놓기로..

export default function Tomato() {
  return <h1>NextJs Setting</h1>;
}

 

 

만약 확장자를 tsx로 선택하고 여기에 에러가 있다고 표시 된다고 하더라도, 우리가 프레임워크를 시작하는 순간 TypeScript를 원한다고 알아내어 그 뒤에 필요한 TypeScript 설정을 자동으로 설치해주기 때문에 걱정말고 놀라기나 하자.

 

 

이제 npm run dev로 실행시켜 보자.

그럼 본인이 TypeScript를 사용하려는 것을 추측하는 메시지(노란 폰트)를 볼 수 있다. 놀랍지 않은가..!

그리고 NextJs 서버가 만들어지고 "localhost:3000"이라는 주소에서 실행시킬 수 있다는 것까지 확인할 수 있다.

npm run dev

 

 

생성된 주소로 들어가보면 이전에 작성한 NextJs Setting라는 컴포넌트가 렌더되어 있다

 

 

다시 콘솔로 돌아와 보면, "당신의 app/page.tsx에 root layout가 존재하지 않아 만들어 주었다"라는 메세지가 있다. 이게 뭘까?

(어느새 나도 모르게 만들어져 있는 layout.tsx)

 

 

export default를 한번 잘 살펴보자

 

 

RootLayout이 자식 객체를 받는 걸 확인할 수 있고,

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
})

 

 

이 자식 객체는 children을 위한 하나의 shell을 구성하고 있다.

{
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

 

 

쉽게 말하면, RootLayout은 앱이나 웹페이지의 큰 틀을 만들어 주는 상자 같은 것이다. RootLayout 안에 여러 자식 요소들(=children)을 넣을 수 있고, 이 자식들은 페이지에 보여줄 각각의 내용들을 의미한다.

RootLayout은 여러 내용을 하나로 묶어서 보기 좋게 정리하고, 디자인이나 배치가 일정하게 적용되도록 도와주는 역할을 한다.

웹페이지에서 위쪽에 항상 메뉴가 있고 아래쪽에 콘텐츠가 정리되도록 기본 구조를 만들어 주는 것을 예로 이해하시면 되겠다.

 

결론적으로 layout.tsx 파일은 각 페이지의 공통 레이아웃을 정의하는 역할을 하고, 그 덕분에 페이지마다 동일한 구조를 작성할 수고를 덜어주는 역할을 하게 된다.

 

 

 

※참고자료: 노마드코더 | Next.js 시작하기

저작자표시 비영리 변경금지