2. Next.js 설치하기 – 프로젝트 시작을 위한 Next.js 설치 과정

 Next.js는 React 기반의 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)을 지원하는 프레임워크로, 웹 애플리케이션을 빠르고 효율적으로 개발할 수 있게 도와줍니다. 이번 글에서는 Next.js 프로젝트를 시작하기 위한 설치 과정에 대해 단계별로 설명하겠습니다. 초보자도 쉽게 따라할 수 있도록 상세히 안내드리겠습니다.

1. Node.js와 npm 설치하기

Next.js는 Node.js 환경에서 실행되기 때문에, 먼저 Node.js가 설치되어 있어야 합니다. Node.js는 JavaScript 런타임으로, npm(Node Package Manager)은 자바스크립트 라이브러리와 패키지를 관리하는 도구입니다.

Node.js 설치 방법:

1. Node.js 공식 웹사이트에 접속합니다.
2. 최신 LTS(Long Term Support) 버전을 다운로드합니다.
3. 다운로드한 설치 파일을 실행하여 설치를 완료합니다.

설치가 완료되면, 터미널에서 아래 명령어로 설치된 버전을 확인할 수 있습니다.

node -v
npm -v

이 명령어를 실행하여 Node.js와 npm이 정상적으로 설치되었는지 확인합니다.

2. Next.js 프로젝트 생성하기

이제 Next.js를 설치하고 프로젝트를 생성할 준비가 되었습니다. Next.js는 create-next-app이라는 도구를 사용하여 간편하게 프로젝트를 생성할 수 있습니다.

Next.js 설치 및 프로젝트 생성 방법:

1. 터미널을 열고, 프로젝트를 생성할 디렉토리로 이동합니다.
2. 아래 명령어를 입력하여 create-next-app을 통해 새로운 Next.js 프로젝트를 생성합니다.

npx create-next-app@latest my-next-app

위 명령어에서 my-next-app은 프로젝트 이름입니다. 원하는 이름으로 변경할 수 있습니다.

3. 프로젝트 생성이 완료되면, 해당 디렉토리로 이동합니다.

cd my-next-app

4. 이제 프로젝트를 실행할 준비가 되었습니다. 아래 명령어로 개발 서버를 실행합니다.

npm run dev

이 명령어를 실행하면, http://localhost:3000에서 Next.js 프로젝트가 실행됩니다.

3. 프로젝트 구조 이해하기

Next.js 프로젝트를 생성하면, 몇 가지 기본적인 파일과 디렉토리가 생성됩니다. 주요 파일은 다음과 같습니다.

• pages: Next.js에서 페이지를 생성하는 디렉토리입니다. 이 디렉토리 안에 있는 파일들은 자동으로 라우팅됩니다.

  • index.js: 기본 홈 페이지입니다.
  • about.js: 예시로 추가한 페이지입니다.

• public: 프로젝트에서 사용하는 정적 파일을 저장하는 디렉토리입니다. 이미지, 폰트, 아이콘 등을 이곳에 두고 사용할 수 있습니다.

• styles: CSS 파일을 관리하는 디렉토리입니다. 기본적으로 제공되는 스타일을 수정하거나 새로운 스타일을 추가할 수 있습니다.

• 
  

4. Next.js에서 첫 페이지 만들기

이제 Next.js 프로젝트에서 첫 번째 페이지를 만들어 보겠습니다. pages 디렉토리 안에 새로운 파일을 추가하여 라우팅을 구현할 수 있습니다.

예를 들어, about.js라는 파일을 pages 디렉토리에 추가하고, 다음과 같이 작성합니다.

// pages/about.js
export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>This is the about page of our Next.js project.</p>
    </div>
  );
}

이제 브라우저에서 http://localhost:3000/about로 접속하면 About Us라는 제목과 간단한 텍스트가 표시된 페이지를 볼 수 있습니다.

5. Next.js 프로젝트 실행 확인

Next.js 프로젝트가 제대로 설정되었는지 확인하려면, 다시 한번 npm run dev 명령어로 개발 서버를 실행하고, 브라우저에서 http://localhost:3000을 열어보세요. 기본 홈 페이지와 about 페이지를 확인할 수 있습니다.

결론

이번 글에서는 Next.js를 설치하고 첫 번째 프로젝트를 설정하는 방법을 알아보았습니다. create-next-app을 사용하여 빠르게 프로젝트를 시작할 수 있으며, 기본적인 파일 구조와 라우팅 방법도 함께 배웠습니다. 이제 여러분도 Next.js를 활용한 React 애플리케이션 개발을 시작할 준비가 되었습니다.

Next.js는 서버 사이드 렌더링과 정적 사이트 생성을 지원하여, 웹 애플리케이션을 최적화된 상태로 개발할 수 있게 도와주는 강력한 도구입니다. Next.js를 잘 활용하면, 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다.

1 React 시작하기: React란 무엇인가? 설치 및 개발 환경 설정

React란 무엇인가?

React는 **페이스북(Facebook)**에서 개발한 오픈 소스 프론트엔드 라이브러리입니다. React는 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성이 뛰어난 UI(User Interface, 사용자 인터페이스)를 개발할 수 있도록 도와줍니다.

오늘날 많은 기업들이 React를 사용하여 웹 애플리케이션을 개발하고 있으며, 특히 **싱글 페이지 애플리케이션(SPA, Single Page Application)**을 만들 때 많이 활용됩니다.

React의 주요 특징

1. 컴포넌트 기반 구조: 작은 단위의 컴포넌트(Component)로 UI를 구성하여 개발이 용이합니다.

2. 가상 DOM(Virtual DOM) 사용: DOM을 직접 조작하지 않고 가상의 DOM을 활용하여 성능을 최적화합니다.

3. 단방향 데이터 흐름: 데이터의 흐름이 예측 가능하며, 유지보수가 편리합니다.

4. JSX(JavaScript XML) 지원: HTML과 JavaScript를 결합하여 코드의 가독성을 높입니다.

5. React 훅(Hook) 지원: 상태(state)와 생명주기 메서드를 간편하게 관리할 수 있습니다.

React는 이러한 특징 덕분에 많은 개발자들에게 사랑받고 있으며, 현재 네이버, 카카오, 페이스북, 인스타그램과 같은 글로벌 기업에서도 널리 사용하고 있습니다.

React 개발 환경 설정하기

React를 사용하려면 먼저 개발 환경을 설정해야 합니다. React 프로젝트를 생성하는 방법은 여러 가지가 있지만, 가장 일반적인 방법은 **Create React App(CRA)**을 사용하는 것입니다.

1. Node.js 설치하기

React를 사용하려면 Node.js가 필요합니다. Node.js는 JavaScript 실행 환경이며, npm(Node Package Manager)과 함께 패키지를 관리할 수 있도록 도와줍니다.

Node.js는 공식 웹사이트에서 다운로드할 수 있습니다.

Node.js 다운로드

설치 후, 터미널이나 명령 프롬프트에서 다음 명령어를 입력하여 설치가 완료되었는지 확인합니다.

node -v  # Node.js 버전 확인
npm -v   # npm 버전 확인

2. Create React App으로 프로젝트 생성하기

Node.js를 설치했다면 이제 React 프로젝트를 생성할 수 있습니다. 터미널에서 다음 명령어를 실행하세요.

npx create-react-app my-app

위 명령어는 npx를 사용하여 최신 버전의 Create React App을 실행하고, my-app이라는 폴더에 React 프로젝트를 생성합니다.

설치가 완료되면 프로젝트 폴더로 이동합니다.

cd my-app

그리고 개발 서버를 실행합니다.

npm start

정상적으로 실행되면 웹 브라우저에서 http://localhost:3000 주소로 접근하여 React 애플리케이션이 실행되는 것을 확인할 수 있습니다.

3. 프로젝트 폴더 구조 이해하기

React 프로젝트를 생성하면 다음과 같은 폴더 구조가 생성됩니다.

my-app/
├── node_modules/      # 설치된 패키지
├── public/            # 정적 파일 폴더
├── src/               # 소스 코드 폴더
│   ├── App.js         # 메인 컴포넌트
│   ├── index.js       # 진입점 파일
├── package.json       # 프로젝트 설정 파일
├── .gitignore         # Git에서 제외할 파일 목록
└── README.md          # 프로젝트 설명 파일

4. 첫 번째 React 컴포넌트 수정하기

React 프로젝트가 정상적으로 실행되었다면, 기본 컴포넌트를 수정해 보겠습니다. src/App.js 파일을 열고 다음과 같이 수정하세요.

import React from 'react';

function App() {
  return (
    <div>
      <h1>안녕하세요! 첫 번째 React 앱입니다.</h1>
      <p>React를 배우고 있어요.</p>
    </div>
  );
}

export default App;

파일을 저장한 후 브라우저를 새로고침하면 변경된 화면이 표시됩니다.

마무리

이제 React가 무엇인지 이해하고, 개발 환경을 설정하여 첫 번째 React 애플리케이션을 실행해 보았습니다.

React 설치, Create React App을 통한 프로젝트 생성, 개발 서버 실행 방법 등을 익혔다면, 다음 장에서는 JSX와 기본 문법에 대해 알아보겠습니다.

React를 활용하여 점점 더 멋진 웹 애플리케이션을 만들어 보세요!