공부/Javascript

[Youtube 클론코딩] 시작하기 ~ 셋업

도리암 2022. 9. 28. 21:54

1. Node.js

원래 JavaScript는 웹 브라우저 상에서만 동작하던 언어였지만,

Ryan이란 사람이 이걸 데스크탑 환경에서도 동작할 수 있도록 분리한  것.

이를 통해 React Native(모바일 앱)나 Electron(데스크탑 앱)과 같은 프레임워크들이 개발될 수 있었다.

 

2. npm

nodeJS와 상호작용할 수 있는 패키지 매니저.
npm은 nodeJS와 같이 설치된다.

페이스북에서 제작한 yarn이라는 매니저도 있는데 npm과 기능 차이가 거의 없다.

사람들이 제작한 패키지들을 설치해주는 역할을 한다.

 

3. 시작하기

nodeJS 프로젝트를 시작할 때는 package.json 파일부터 생성해야 한다.

하지만 package.json 파일을 직접 작성하면 오류가 발생할 확률이 높으므로 다음의 명령어를 사용한다.

npm init

몇가지 질문과 함께 package.json과 package-lock.json을 생성한다.

4. 파일 실행하기

기본적으로 node 명령어를 이용해 파일을 실행할 수 있지만 잘 사용하지 않는다.

node index.js

대신에 package.json의 scripts 항목에 명령어를 등록해서 사용한다.

npm run 스크립트명

package.json이 들어있는 폴더에서 명령어를 실행해야 동작하는 점을 명심하자.

 

5. express 패키지 설치하기

npm i express

express - npm (npmjs.com)

 

express

Fast, unopinionated, minimalist web framework. Latest version: 4.18.1, last published: 5 months ago. Start using express in your project by running `npm i express`. There are 64901 other projects in the npm registry using express.

www.npmjs.com

express는 서버와 라우팅을 지원하는 패키지 모듈이다.

 

이걸 설치하면 node_modules폴더가 자동 생성되며 여러가지 하위 폴더들이 마구 생성된다.

이는 express 폴더 내부의 package.json을 찾아보면 알 수 있는데,

다음과 같이 express는 dependencies로 여러 다른 패키지들을 가지고 있다.

dependencies는 해당 모듈이 실행되기 위해 필요한 패키지들이므로 express가 설치될 때 같이 설치되는 것이다.

dev-dependencies의 모듈들은 설치되지 않는다.

만약 실수로 패키지를 dev-dependencies에 잘못 설치했다면, 그냥 dependencies로 옮겨주기만 하면 된다.

 

express를 설치하면 /package.json의 dependencies에 express가 표시되므로 

node_modules와 package-lock.json이 삭제되어있더라도 npm i 한번에 다시 모든 모듈을 다운받을 수 있다.

 

package-lock.json은 패키지들의 버전 등이 바뀌지 않도록 해시 값을 이용해 따로 저장해두는 곳이다.

따라서 패키지를 업데이트 할 때는 버전 충돌이 발생하지 않도록 package.json과 package-lock.json을 저장 후 닫아둔 상태에서 진행하는 것이 좋다.

6. .gitignore 설정하기

node_modules는 크기가 매우 크고, npm i 를 통해 언제든지 다시 설치할 수 있으므로,

github에는 올리지 않도록 설정해주는 게 좋다.

 

7. babel 설치하기

최신 javascript 코드문법을 보편적으로 사용 가능한 안정적인 문법으로 변형시켜주는 컴파일러다.

Babel · The compiler for next generation JavaScript (babeljs.io)

 

Babel · The compiler for next generation JavaScript

The compiler for next generation JavaScript

babeljs.io

위 페이지에서 Node 항목을 선택한 후 아래의 설치 과정을 잘 따라가면 된다.

 

사용법은 다음의 함수를 실행시켜주면 되는데, 모든 파일에 이 함수를 적용하기는 어렵다.

require("@babel/core").transform("code", {
  presets: ["@babel/preset-env"],
});

babel-node는 이를 명령어로 바꾸어 실행할 수 있게 해준다. (@babel/node 설치 필요)

"dev": "babel-node 파일명"

Nodemon 을 사용하면, 자동으로 모든 파일의 변경점을 찾아서 다시 빌드해준다.

Nodemon 설치

npm i --save-dev nodemon

package.json 수정

    "dev": "nodemon --exec babel-node index.js"

이제 콘솔 창에서 npm run dev를 하게 되면 nodemon이 동작한다.