1.개발환경

Node.js

1995년 이후 JavaScript가 탄생하면서 많은 브라우저들이 JavaScript Engine을 탑재하기 시작했다.

Safari(JavaScriptCore)
Firefox(SpiderMonkey)
IE(Chakara)
Edge(Chakara -> V8)
Chrome(V8)

2009년 Ryan Dahl이 Node.js를 개발하여 JavaScript로 브라우저 밖에서 서버를 구축하는 등의 코드를 실행할 수 있게 해주는 런타임 환경이다.

Node.js가 설치된 환경에서는 아래와 같은 작업이 가능하다
- Backend & Server
- Front-end
- Scripting & Automation

NPM(Node Package Manager)

Node.js의 패키지를 관리할 수 있는 도구 이다
현재 나는 npm대신 yarn을 사용하고 있다.

yarn

npm 패키지 관리자의 대안
npm의 알려진 단점으로는 패키지 종속성 해결이 쉬운 만큼, 패키지가 중복 설치된다는 문제가 있다.
yarn은 이 문제를 해결하기 위해 중복 패키지 발견 시 링크(바로가기) 방식으로 해결한다.
Yarn은 로컬 캐시로부터 패키지를 설치할 수 있다. Yarn은 패키지 버전을 강력하게 바인딩한다. Yarn은 데이터 무결성 보장을 위해 체크섬을 사용하는 반면 npm은 SHA-512를 사용하여 다운로드된 패키지의 데이터 무결성을 검사한다. Yarn은 병렬로 패키지를 설치하는 반면 npm은 한 번에 하나의 패키지를 설치한다 wiki-Yarn

package.json

  npm init -y

터미널에서 위의 명령어로 실행하면 기본적으로 아래와 같은 package.json 이 생성된다.

{
  "name": "frontend-survival-week01",
  "version": "1.0.0",
  "description": "프론트엔드 생존코스 1주차 과제",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

패키지를 게시할 계획이라면 name과 version이 제일 중요한 항목이다. 그렇지 않다면 name과 version은 선택사항이다.

기본적인 package.json 설명은 npm-package.json에서 참고하면 된다.

참고로 기억해둬야 할 부분

npm i <설치 할 모듈>

위와 같이 모듈를 설치하면 package.json에 dependencies 항목이 추가된다.

dependencies: 프로그램에서 직접적으로 사용하는 모듈

npm i -D <설치 할 모듈> or npm install --save-dev <설치 할 모듈>

devDependencies: 프로그램에서 사용하지는 않고 개발 환경에서 사용하는 모듈

package-lock.json

npm이 node_modules 트리 또는 package.json을 수정하는 모든 작업에 대해 자동으로 생성된다.

node_modules

모듈 설치 시 프로젝트가 의존하고 있는 모듈 및 설치된 모듈이 의존하고 있는 모듈이 전부 가지고 있는 폴더

디렉터리가 없는 경우 외부 패키지를 다운로드 하면서 자동으로 생성된다.

npx

npx는 새로운 패키지 관리 모듈이 아닙니다.

자바스크립트 패키지 관리 모듈인 npm(Node Package Module)의 5.2.0 버전부터 새로 추가된 도구이다.

따라서 npm과 비교대상이 아닌 npm을 좀 더 편하게 사용하기 위해서 npm에서 제공해주는 하나의 도구이다.

따라서 npm@5.2.0 이상 버전만 깔려 있다면 npx 명령어를 사용할 수 있다.

Aha Moment

현재 실무에서 작업을 하면서 dependencies 또는 devDependencies 모듈을 추가 할 때 어떤 것은 dependencies에 들어가고 어떤 것은 devDependencies에 들어가는지 깊게 생각해 본적이 없었던 것 같다. devDependencies에 들어가는건 대충 개발용이겠거니 생각했던 것 같다.

CRA를 통한 개발환경 자동 구축이 아닌 스탭 바이 스탭으로 하나씩 구축해가면서 프론트 개발환경에 필요한 설정을 직접 설정해보고 급격하게 변하는 상황에서 유연하게 적용 할 수 있도록 해야 겠다고 생각했다!

Previous1주차 Next2.Typescript

Last updated 1 year ago