React 기초 (목록 만들기) 02 - 프로젝트 생성

본 포스트에서는 리액트를 이용하여 네이버 API로 데이터를 검색해서 목록 화면을 구성해 보겠습니다.

 

 

 

개발할 내용을 설계해보았으니 개발에 필요한 환경을 구성하고 프로젝트를 생성해 보도록 하겠습니다.

코드 편집기

코드 편집기는 손에 익은 편한 도구를 사용하면 됩니다. 여기서는 요즘 가장 많이 사용하고 있는 듯 한 VSCode를 사용하겠습니다.

VSCode는 아래의 링크에서 각자의 환경 (Windows, MAC)에 맞는 버전을 다운로드 받아서 설치하시면 됩니다.

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

Node.js

JavaScript 애플리케이션의 Package 의존성을 관리하기 위해 npm이나 yarn을 사용합니다.  npm이나 yarn은 Node.js 기반으로 동작하므로 Node.js 인스톨러를 다운로드하여 설치합니다. 아래의 링크에서 각자의 환경 (Windows, MAC)에 맞는 버전을 다운로드 받아서 설치하시면 됩니다.

https://nodejs.org/ko/download/

다운로드 | Node.js

npm과 yarn의 차이, 장단점에 대해서는 TOSS의 기술 블로그에서 재미나게 설명하고 있으니 참고하시면 될 듯 합니다. 아래 링크 첨부합니다.

https://toss.tech/article/node-modules-and-yarn-berry

node_modules로부터 우리를 구원해 줄 Yarn Berry

Yarn

Node.js까지 설치를 했다면 터미널에서 아래 명령어를 실행하여 Yarn을 설치합니다.

npm install -g yarn

프로젝트 초기화

Yarn까지 설치했다면 프로젝트 루트로 사용할 workspace를 하나 생성합니다. 각자가 편한 경로에 디렉토리 하나를 생성하시면 됩니다. NAVER API를 통해 간단한 검색을 하는 프로그램이므로 searchNaverApi라고 명명하겠습니다.

 

workspace 하위에 아래 디렉토리를 생성하고 이동합니다.

mkdir searchNaverApi
cd searchNaverApi

해당 디렉토리에 프로젝트 설정 파일을 생성합니다. 프로젝트 설정 파일은 package.json이며 yarn init 명령을 수행해서 생성하시면 됩니다. yarn init 명령을 입력하면 아래 정보를 입력하라고 나오는데, 성실하게 입력하셔도 되고, 나중에 파일 생성 후 변경도 가능하니 그냥 모두 Enter로 넘어가셔도 상관 없습니다.

D:\workspace\searchNaverApi> yarn init

name (searchNaverApi) : 
version (1.0.0) :
description :
entry point (index.js) : 
repository url : 
author : 
license (MIT) :
private :

일단 모두 입력 or skip 하게 되면 프로젝트 하위 경로에 package.json 파일이 하나 생성됩니다.

기본 설정으로 만들고 싶을 경우 yarn init -y 명령으로 생성하면 별도 질문 없이 package.json이 기본 설정으로 생성됩니다.

 

현재까지 진행한 프로젝트 파일 구조는 아래와 같습니다.

searchNaverApi
 └── package.json

 

모듈 설치

현재 프로젝트 개발에 필요한 모듈들을 설치합니다. 각 모듈의 버전 별로 호환성 문제나 코드가 상이할 수 있으므로 설치할 버전을 지정하여 설치하겠습니다.

모듈을 설치할 때는 yarn add 명령으로 설치합니다. yarn add 명령의 형식은 아래와 같습니다.

yarn add [packages ...][flags]

yarn help 명령을 입력하면 flags에 대한 상세한 내용을 조회할 수 있지만 이번에는 의존성에 대한 부분만 간략하게 보고 넘어가겠습니다. yarn help add 명령으로 조회한 설명은 아래와 같습니다.

D:\workspace\searchNaverApi> yarn help add
...
-D, --dev         save package to your `devDependencies`
-P, --peer        save package to your `peerDependencies`
-O, --optional    save package to your `optionalDependencies`
...

위 내용 중 --dev (개발 의존성)와 아무것도 입력하지 않았을 경우인 일반 의존성으로만 구분하여 설치를 진행하겠습니다. 간단하게 일반 의존성은 런타임에서 사용하는 모듈을 설치할 때 사용하고, 개발 의존성 (--dev)은 빌드 타임 (babel이나 webpack 등 개발 workflow에서 사용)에서만 사용하는 모듈을 설치할 때 사용합니다.

 

이번 프로젝트에 필요한 모듈을 설치해 보겠습니다.

D:\workspace\searchNaverApi> yarn add react@17.0.2
D:\workspace\searchNaverApi> yarn add react-dom@17.0.2
D:\workspace\searchNaverApi> yarn add --dev babel-core@6.26.3
D:\workspace\searchNaverApi> yarn add --dev babel-loader@8.2.3
D:\workspace\searchNaverApi> yarn add --dev babel-preset-react-app@10.0.1
D:\workspace\searchNaverApi> yarn add --dev webpack@5.66.0
D:\workspace\searchNaverApi> yarn add --dev webpack-dev-server@4.7.3
D:\workspace\searchNaverApi> yarn add --dev webpack-cli@4.10.0

기본적인 React package 및 compile, bundling을 위한 도구를 설치하는 과정입니다. react 및 react-dom을 제외하고는 런타임에 필요한 모듈이 아니므로 개발 의존성으로 설치합니다. 개발 시에 필요한 모듈은 추가적으로 날짜 formatting을 위해 moment 정도만 설치합니다.

(나중에 추가적으로 필요한 모듈이 있으면 그때그때 설치하면 됩니다.)

yarn add moment@2.29.1

설치를 한 모듈은 package.json 파일에서 의존성 관리를 합니다. 설치를 완료한 후 package.json 파일을 확인해 보면 아래와 같이 개발 의존성으로 설치한 모듈들은 devDependencies 하위에, 일반 의존성으로 설치한 모듈들은 dependencies 하위에 관리되고 있음을 알 수 있습니다.

{
  "name": "searchNaverApi",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "moment": "2.29.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
  },
  "devDependencies": {
    "babel-core": "6.26.3",
    "babel-loader": "8.2.3",
    "babel-preset-react-app": "10.0.1",
    "webpack": "5.66.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.7.3"
  }
}

여기까지 작업을 완료했다면 현재 프로젝트 구조는 아래와 같습니다.

searchNaverApi
 ├── node_modules
 │    ├── ...
 ├── package.json
 └── yarn.lock

다음 편에서는 compile 및 bundling 대상인 source 경로와 정적인 resources를 관리하는 경로를 분할하여 프로젝트 구조를 잡아 보도록 하겠습니다.