포스트를 티스토리로 이전했습니다. 아래 링크로 접속해 주세요.
--
개발할 Concept를 잡았다면 이제 개발할 수 있는 환경을 설정해 보겠습니다.
코드 편집기
코드 편집기는 사실 큰 상관도 없고 손에 익은 편집기나 IDE를 사용하면 됩니다. 여기서는 일단 대중적으로 많이 사용하는 JavaScript 개발 도구인 VSCode를 사용하도록 하겠습니다.
아래의 링크에서 각자의 환경(Windows, MAC)에 맞는 버전을 다운로드 받아서 설치하시면 됩니다.
https://code.visualstudio.com/
NPM
NPM은 JavaScript 애플리케이션의 Package 의존성을 관리하기 위한 도구입니다. 우리는 NPM 보다는 YARN으로 의존성 관리를 하겠지만, YARN을 설치하기 위해서 일단 NPM을 설치합니다.
아래의 링크에서 각자의 환경(Windows, MAC)에 맞는 버전을 다운로드 받아서 설치하시면 됩니다.
https://nodejs.org/ko/download/
NPM과 YARN의 차이에 대해서는 toss tech의 아래 아티클에서 재미나게 설명하고 있으니 참고하시면 될 듯 합니다.
https://toss.tech/article/node-modules-and-yarn-berry
YARN
NPM까지 설치했으면 아래의 명령어로 패키지 관리도구인 YARN을 설치합니다.
npm install -g yarn
workspace
YARN까지 설치했다면 프로젝트 workspace를 하나 생성합니다. 본인이 편한 경로에 디렉토리를 하나 생성합니다.
네이버 API를 통해서 검색하는 기능이므로 큰 생각없이 searchNaverApi 라고 명명하겠습니다.
mkdir searchNaverApi
cd searchNaverApi
디렉토리를 하나 생성하고 생성한 디렉토리로 이동합니다.
프로젝트 초기화
yarn init
해당 디렉토리를 프로젝트 Root로 사용하기 위해 yarn init 명령을 수행하면 몇 가지 질문이 표시됩니다. 답을 해도 되고, 아니면 모두 Enter를 눌러 Skip한 후 나중에 package.json 파일을 수정해도 됩니다.
name (searchNaverApi) :
version (1.0.0) :
description :
entry point (index.js) :
repository url :
author :
license (MIT) :
private :
일단 모두 입력 or Skip하게 되면 프로젝트 경로 하위에 package.json 파일이 하나 생성됩니다. 현재 상태는 아래와 같습니다.
searchNaverApi
└── package.json모듈 설치
React 개발에 필요한 모듈을 설치합니다. 중간 과정에서 필요한 모듈들도 일단 모두 설치하겠습니다. 각 모듈의 버전 별로 호환성이 맞지 않아 동작하지 않을 수도 있으므로 모두 버전을 지정해서 설치하도록 하겠습니다.
모듈을 설치할 때는 yarn add 명령으로 설치합니다. yarn add 명령의 형식은 아래와 같습니다.
yarn add [packages ...][flags]
yarn help COMMAND를 입력하면 flags에 대한 상세한 내용을 조회할 수 있지만 이번에는 의존성에 대한 부분만 간략하게 짚어 보겠습니다. 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와 아무것도 입력하지 않을 경우인 일반 의존성으로만 구분해서 설치를 진행하겠습니다. 간략하게 설명을 하자면 일반 의존성은 runtime에서 사용하는 package를 설치할 때 사용하도록 하고, 개발 의존성(--dev) 설치 flag는 babel이나 webpack 등 개발 workflow 중 한 곳에 필요하지만 runtime에는 사용하지 않는 package를 설치할 때 사용하겠습니다.
이번 프로젝트에 필요한 package를 설치해보겠습니다.
yarn add react@17.0.2
yarn add react-dom@17.0.2
yarn add --dev babel-core@6.26.3
yarn add --dev babel-loader@8.2.3
yarn add --dev babel-preset-react-app@10.0.1
yarn add --dev webpack@5.66.0
yarn add --dev webpack-dev-server@4.7.3
yarn add --dev webpack-cli@4.9.1기본적인 React package 및 complie, bundling을 위한 도구는 설치했고 이제는 부가적으로 http 통신을 위한 모듈, 일자 처리를 위한 모듈, React 상태 관리를 위한 모듈 package를 설치하겠습니다.
yarn add axios@0.24.0
yarn add moment@2.29.1
yarn add react-redux@7.2.6
yarn add redux-actions@2.6.5
yarn add redux-devtools-extension@2.13.9
yarn add redux-logger@3.0.6설치를 완료한 후 package.json을 보면 일반 의존성으로 설치한 package들은 "dependencies"에, 개발 의존성으로 설치한 package들은 "devDependencies" 하위에 관리되고 있음을 확인할 수 있습니다.
{
"name": "searchNaverApi",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"axios": "0.24.0",
"moment": "2.29.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-redux": "7.2.6",
"redux-actions": "2.6.5",
"redux-devtools-extension": "2.13.9",
"redux-logger": "3.0.6"
},
"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.9.1",
"webpack-dev-server": "4.7.3"
}
}설치까지 완료하면 프로젝트 경로의 디렉토리 구조는 아래와 같습니다.
searchNaverApi
├── node_modules
│ ├── ...
├── package.json
└── yarn.locknode_modules 하위의 경로는 자동으로 관리되는 영역이므로 굳이 표현하지 않습니다.
프로젝트에 필요한 모듈까지 설치를 완료했으므로 다음 아티클에서는 개발을 진행해보도록 하겠습니다.
