Js, Immersive 1- 1

Fabian·2020년 3월 18일
0

Immersive

목록 보기
1/4

CodeStates Immersive Course

All-in-one Course 를 마치고, 드디어 immersive 과정을 시작하게 되었다. 올인원 과정도 경영학을 전공으로 코딩을 처음 접한 나에게는 상당히 힘들었던 과정이였다. 아침 9시부터 오후 6시까지의 정규시간 이외에도 개인공부를 하였고, 주말에도 항상 4시간 이상을 복습하고 공부했지만 여전히 힘들었다. 나중에 시간이 생긴다면 이전 과정에서 공부했던 내용 또한 정리하여 올려야겠다.


Immersive Coures 1 - 1

Javascript Runtime & Node.js

RunTime
프로그래밍 언어가 구동되는 환경으로, 자바스크립트의 대표적인 런타임으로는 브라우저가 있다.

Node.js
이전까지의 자바스크립트는 런타임이 브라우저 뿐이였기 때문에 브라우저에서만 실행이 가능했지만,
Node.js 라는 새로운 자바스크립트의 런타임이 나오게 되었고, 자바스크립트는 브라우저가 아닌 곳에서도 실행이 가능하게 되어, 우리는 자바스크립트를 통해 웹페이지와 서버와 같은 다른 프로그램을 만드는 것이 가능해졌다.


NVM , NPM , Package.json

NVM , [ Node Version Manager ]
Node 를 자바스크립트에서 실행시키기 위해서는 Node를 설치해야하는데, 모든 프로그램에 버전이 있는 것처럼 Node에도 버전이 있다. 만약 버전이 다른 Node 에서 작업을 해야할 시, 버전을 지우고 다시 받아오고 하는 불편한 이슈가 생기는데 이를 NVM을 통하여 버전을 옮겨다닐 수 있도록 해결할 수 있다.

NVM 설치 가이드 링크

NPM , [Node Pakage Manager ]
NPM은 Node Package Manager로 일종의 앱스토어라고 할 수 있다. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어로, 앞으로 필요한 모듈은 대부분 NPM에서 다운로드해서 할 수 있다.

node 모듈을 사용하는 프로젝트에서 npm이라는 키워드는 하나의 명령어처럼 사용되기도 하는데, npm start처럼, 프로젝트를 실행시킬 때 npm 키워드를 사용할 수 있다.

Package. Json

만약, 내가 만든 프로젝트라면 어떤 모듈이 필요하고, 어떤 프로그램을 실행할지 잘 알고 있을 것이다. 하지만 다른사람과 함께 개발을 할 경우에는 내 프로젝트를 알려줘야 할 것이다. 이때 사용하는 것이
Package.json 이다.

package.json에는 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지, 프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시되어 있다. 즉, 전자제품을 사러 갔을 때 , 카탈로그가 package.json이라고 생각하면 된다.

Package.json의 또 한가지의 장점으로는, 프로젝트 코드를 전달할 때, 모든 모듈의 전부를 전달하지 않아도 된다.
"우리 코드는 여기있고, 필요한 모듈은 package.json에 적어 놨으니 너가 직접 다운받아서 쓰면 돼" 라고 하면 되기 때문이다.


Package.Json

1. dependencies

이 프로젝트가 돌아가기위해 반드시 필요한 모듈들이 무엇인지가 적혀있다.

"dependencies": {
   "react": "^16.8.6",
}

2. devDependencies

이 프로젝트를 개발하는 환경에서 필요한 모듈들이 무엇인지가 적혀 있다.. 예를 들면 코드 모양을 잡아주는 lint나 테스팅 모듈처럼, 실제 프로젝트 동작에 직접적으로 영향을 주지 않는 모듈들을 명시한다.

"devDependencies": {
    "jest": "^2.3.0",
  	"eslint" : "^2.0.0"
  }

3. scripts

npm 으로 실행시킬 수 있는 명령어를 정의한다. 명령어를 입력하면 어떤 동작을 해야하는지가 적혀 있있다. 예를들면 npm test 명령어를 입력하면 "test파일을 node 에서 실행시켜라!" 하는 내용들이 들어있다. 만약 npm test와 같은 명령어를 실행시켰는데 정의되지 않은 명령어 라는 오류 메시지가 나오면, package.json 파일 scripts 에 해당 명령어가 정의되어 있는지를 확인해 보면 된다.

"scripts": {
    "start": "node app.js",
    "test": "node test.js",
  }


오늘은 런타임과 Node.js 그리고 NPM, NVM , Package.Json 에 대한 내용을 정리하였고, 추가적인 내용은 주말을 통해 다시 공부하여 작성하고자 한다.
오늘은 여기까지.

profile
코린이의 Frontend & Backend

0개의 댓글