뉴발자의 성장통

🖥️Frontend/Next

[Next] 프로젝트 수동 설치하기

뉴발자 2024. 8. 20.

목차

728x90

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[Next] 프로젝트 수동 설치하기

 

 

React와 Next.js의 차이점

React는 라이브러리이고 Next.js는 프레임워크이다.

 

라이브러리

라이브러리는 코드 내에서 사용하려고 설치하는 것이지만 사용하는 주체는 사용자다.

 

라이브러리를 사용해서 우리가 코드 내에서 원하는 아키텍처를 사용해서 원하는 방식으로 코드를 작성할 수 있다.

 

파일을 어디에 저장할 지, 폴더 구조를 어떻게 할지 사용자가 모든 결정을 내린다.

 

예를 들어 그래프를 그리는 기능이 필요하면 우리는 라이브러리를 가져와서 해당 기능을 구현할 것이다.

 

이렇듯 라이브러리는 우리가 도움이 필요할 때만 가져와서 사용하는 것이다.

 

React 또한 UI 인터페이스를 build하는데 사용하는 라이브러리이다.

 

React가 반응형 사용자 인터페이스를 구축하는데 도움을 주지만 결국 이것에 대한 모든 결정은 사용자가 한다.

 

프레임워크

프레임워크는 라이브러리와 다르게 사용자가 작성한 코드를 프레임워크가 사용한다는 점이다.

 

프레임워크 내에서는 사용자에게 주도권이 없고, 프레임워크가 직접 주도하고 담당한다.

프레임워크는 사용자 대신 많은 일들을 한다.

 

여러가지 결정을 사용자 대신 해주고 자동화하도록 할 수 있다.

 

따라서, 사용자가 많은 결정을 내릴 필요가 없다.

 

 

Next.js는 아래와 같은 여러가지 feature를 가지고 있다.

Built-in Optimizations, Dynamic HTML Streaming, React Server Components, ...

 

feature를 통해 Next.js 제작자는 사용자에게 필요한 기능을 제공해준다.

 

하지만 위 기능들을 사용하기 위해서는 Next.js에서 제시하는 규칙을 모두 따라야한다.

 

사용자가 올바른 방법으로 올바른 위치에 파일을 넣는다는 전제하에 Next.js가 풀스택 웹 어플리케이션을 만들어준다.

 

Next.js를 사용자가 import하는 것이 아닌 Next.js가 사용자의 코드를 호출하는 것이다.

 

 

프로젝트 수동 설치하기

1. node.js 패키지 생성

터미널을 열고 원하는 폴더 경로로 이동한 후 아래의 명령어를 실행한다.

npm init -y

 

2. 라이브러리 설치

다음 명령어를 실행시켜 라이브러리를 설치해준다.

// @latest를 붙이면 최신 버전으로 설치한다.
npm install react@latest next@latest react-dom@latest

 

react-dom을 설치하는 이유

react로 작성한 UI를 브라우저의 DOM에 렌더하는 역할

 

3. package.json script 수정

npm init 명령어로 생성된 package.json 파일의 "script" 부분에 아래 코드를 추가해준다.

"scripts": {
    "dev": "next dev",
    ...
  },

 

npm run dev 명령어 실행 시 Next JS를 실행시켜준다.

 

Next JS가 실행되면 사용자가 작성한 코드를 사용한다.

 

4. 폴더 및 파일 생성

Next JS를 실행시키는 경우 제일 먼저 app 폴더 내의 page 파일을 찾는다.

 

폴더명과 파일명을 다른 이름으로 설정해도 안되고 대문자를 섞어서 사용해도 안된다.

 

page 파일을 생성할 때 react와 함께 사용할 언어에 맞춰서 생성해주면 된다.

TypeScript와 함께 사용하려면 page.tsx, JavaScript와 함께 사용하려면 page.jsx로 파일을 생성한다.

 

5. export

위에서도 언급했듯 NextJS는 프레임워크이기때문에 별도의 라이브러리를 import할 필요가 없다.

 

page.tsx 파일안에 아래와 같이 코드를 작성해준다.

export default function App() {
  return <h1>Hello, NextJS</h1>;
};

 

그리고 터미널에 다음 명령어를 입력한 후 엔터를 누른다.

npm run dev

 

6. 페이지 접속

브라우저를 열어 localhost:3000으로 접속해보면 다음과 같은 화면이 출력되는 것을 확인할 수 있다.

[Next] 프로젝트 수동 설치하기 - 프로젝트 수동 설치하기 - 6. 페이지 접속

 

페이지 접속 후 콘솔창을 확인해보면 메세지가 생성된 것을 확인할 수 있고 내용은 다음과 같다.

당신의 app/page.tsx에 root layout이 존재하지 않습니다.
우리는 app/layout.ts를 생성했습니다.

[Next] 프로젝트 수동 설치하기 - 프로젝트 수동 설치하기 - 6. 페이지 접속

 

 

폴더 구조를 확인해보면 app 폴더 내에 layout.tsx 파일이 생성된 것을 볼 수 있다.

 

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

 

7. 내용 수정 및 확인

page.tsx로 돌아가서 <h1> 태그 안의 내용을 'Hello!'로 변경한 후 페이지를 확인해보면 잘 변경된 것을 확인할 수 있다.

[Next] 프로젝트 수동 설치하기 - 프로젝트 수동 설치하기 - 7. 내용 수정 및 확인

 

 

참고 사이트

https://nomadcoders.co/nextjs-for-beginners

 

NextJS 14 시작하기 – 노마드 코더 Nomad Coders

NextJS 14 For Beginners...

nomadcoders.co

 

 

 

 

 

 

 

 

 

 

728x90
저작자표시

'🖥️Frontend > Next' 카테고리의 다른 글

[Next] Next에서 라우팅 구현하기  (0) 2024.08.21

댓글

티스토리툴바