[Next.js 14 강의] 3강 - 필수 패키지 설치 및 기본 설정

안녕하세요! 그레이해커 월횽입니다. 이 강의에서는 Next.js 프로젝트에서 자주 사용되는 필수 패키지들을 설치하고, 프로젝트의 기본 설정을 완료합니다. 이 과정에서 프로젝트를 보다 효율적이고 확장성 있게 관리할 수 있는 방법을 배울 수 있는 시간을 준비해봤습니다.

 

 

1. 패키지 설치의 필요성 이해하기

 

왜 패키지가 필요한가?

Next.js는 다양한 기능을 제공하지만, 프로젝트에 따라 추가적인 패키지가 필요할 수 있습니다. 예를 들어, 스타일링, 데이터 Fetching, 상태 관리 등을 위해 패키지를 추가하게 됩니다.

 

패키지 관리 도구

Next.js 프로젝트는 npm 또는 yarn을 사용하여 패키지를 관리합니다. 패키지 설치 전, npm install 또는 yarn install 명령어로 현재 프로젝트의 의존성을 확인하고 업데이트할 수 있습니다.

 

 

2. 필수 패키지 설치

 

styled-components

Next.js에서 CSS-in-JS를 구현하는 가장 인기 있는 라이브러리 중 하나입니다. 이를 사용하면 JavaScript 파일 안에서 CSS를 작성할 수 있으며, 컴포넌트 단위로 스타일을 관리할 수 있습니다.

npm install styled-components
npm install @types/styled-components # TypeScript를 사용하는 경우

 

728x90

사용 예시

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 2em;
  text-align: center;
  color: palevioletred;
`;

export default function Home() {
  return <Title>Welcome to My Next.js App</Title>;
}

 

 

axios

데이터 Fetching을 위해 자주 사용되는 라이브러리입니다. HTTP 요청을 간단하게 처리할 수 있습니다.

npm install axios

 

 

사용 예시

import axios from 'axios';
import { useEffect, useState } from 'react';

export default function Home() {
  const [data, setData] = useState(null);

  useEffect(() => {
    axios.get('/api/data').then((response) => {
      setData(response.data);
    });
  }, []);

  return <div>{data ? data.message : 'Loading...'}</div>;
}

 

 

react-icons

다양한 아이콘을 쉽게 사용할 수 있는 라이브러리입니다. 프로젝트에 필요한 다양한 아이콘을 제공하여 UI를 더욱 풍부하게 만들어 줍니다.

npm install react-icons

반응형

사용 예시

import { FaBeer } from 'react-icons/fa';

export default function IconExample() {
  return <div>Cheers! <FaBeer /></div>;
}

 

dotenv

환경 변수를 관리하기 위해 사용하는 패키지입니다. 민감한 정보를 .env 파일에 저장하고, 코드에서는 이를 불러와 사용합니다.

npm install dotenv

 

.env 파일 예시

API_KEY=api_key

 

 

사용 예시

// next.config.js
require('dotenv').config();

module.exports = {
  env: {
    API_KEY: process.env.API_KEY,
  },
};

 

 

3. 기본 설정

 

ESLint와 Prettier 설정

코드 품질을 유지하고 일관된 코드 스타일을 위해 ESLint와 Prettier를 설정합니다. 이 두 가지 도구는 코드 린팅과 자동 포맷팅을 제공합니다.

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier --save-dev

 

SMALL

프로젝트 루트에 .eslintrc.json 파일을 생성하여 ESLint 설정을 추가합니다.

{
  "extends": ["next", "prettier"],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

 

 

프로젝트 루트에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다.

{
  "singleQuote": true,
  "semi": true
}

 

TypeScript 설정 (선택사항)

TypeScript를 사용하는 경우, 기본 설정을 쉽게 추가할 수 있습니다. TypeScript를 설치한 후 Next.js에서 자동으로 설정을 생성해 줍니다.

npm install --save-dev typescript @types/react @types/node

tsconfig.json 파일이 자동 생성되며, 필요에 따라 추가 설정을 할 수 있습니다.

 

 

4. 프로젝트 초기화 및 테스트

 

설정 확인

모든 패키지가 올바르게 설치되었는지 확인하고, 예제 코드를 통해 설정이 정상적으로 작동하는지 테스트합니다.

개발 서버 실행

npm run dev 명령어로 개발 서버를 실행하고, 브라우저에서 페이지를 확인합니다. 모든 기능이 정상적으로 동작하는지 확인합니다.

 

이 강의를 통해 Next.js 프로젝트에서 필요한 필수 패키지를 설치하고, 프로젝트의 기본 설정을 완료할 수 있습니다. 이로 인해 프로젝트 개발 과정에서 더욱 효율적이고 체계적인 작업이 가능해집니다.

 

 

- 이전 수업 목록