ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Node.js & npm
    카테고리 없음 2020. 6. 3. 17:55

    Node.js는 무엇인가?

     

    우리는 많은 브라우저에서 자바스크립트를 사용하고 있다.

    이렇게 우리가 자바스크립트를 웹페이지에서 사용할 수 있는 이유는 브라우저 내에 자바스크립트를 

    컴파일해서 실행할 수 있는 엔진이 장착되어 있기 때문이다.

    그리고 자바스크립트의 엔진은 브라우저마다 다르다. 

     

    chrome = V8

    사파리 = 웹킷 ... 등등

     

     

     

    Node.js 는 이 많은 엔진들 중에, 

    가장 잘나가는 구글 크롬의 엔진인 V8엔진을 기반으로 동작하는 서버사이드 런타임이다. 

     

    브라우저 안에서만 돌아가던 JS가 서버사이드로 이동하게 된 것이다.

    또한 서버에서 여러가지 JS 모듈을 받아오기 위한 저장소인 npm(Node Package Manager)라는 것도 생겼다.

    node.js는 common JS문법 체계를 기반으로 동작한다.

     

     

    CommonJS는 자바스크립트의 문법을 브라우저 뿐만 아니라,

    서버사이드에서도 사용할 수 있게 하려고 하는 목적을 가지고 자발적으로 만들어진 그룹이다.

    바스크립트의 범용성을 넓히기 위한 목적도 가지고 있다.

     

     

     

    npm scripts


    nodejs의 모듈을 다운로드 받거나 재 다운로드를 하거나, 

    모듈의 버전을 기록해야만 다른 개발자간의 협업도 가능한데, 

    nodejs에서는 package.json이라는 버전관리파일 하나를 기준으로 관리한다.

     

    이 파일이 프로젝트 내에 없다면 굳이 생성할 필요는 없다. 

    모듈 하나만 설치해도 package.json이 생기기 때문이다. 

    그런데 이 package.json의 역할을 버전관리 말고도 특정 명령어를 매크로로서 간단하게 실행할 수 있게 해준다.

     

     

     

    개발 할때 필요한 모듈이 기록되어 있고, 어떤 버전인지도 기록되어 있다.

    지금 scripts json 안에 start 라는 객체가 보이는가? 이 문자열은 node index.js로 되어 있다.

    만약 저 프로젝트 내에서 npm 명령어를 이용해서 프로젝트 루트 폴더 콘솔에서 npm start 라고 타이핑 하게 된다면, node index.js가 실행되도록 할 수 있다. 이런식으로 npm scripts는 관리되어지고 있다.

     

     

    아아 이제 package.json 알겠어, 그런데 이 모듈 어디에 저장해?

     

     

    모듈 파일들의 저장 공간은 node_modules라는 폴더이다.

    만약 개발을 위해서 여러가지 모듈을 설치하고 사용하는 경우에 모든 모듈 파일 내은 node_modules 안에 있게 된다.

    이 모듈들은 수정하지 않는 것을 원칙으로 한다.

    내가 로컬에서 특정 모듈의 에러를 수정 했다고 할 지라도

    그게 다른 사람이 받은 모듈의 버그는 아직 남아있는 상태일 것이고,

    그렇게 되면 원하던 동작과 다르게 동작하는 웹 or 서버가 될 수도 있다.

     

     

    근데 이게 왜 리액트에 필요해 ?

     

    리액트는 라이브러리 이다.

    다른 여타 프레임워크 (앵귤러, 뷰)처럼 리액트를 제대로 활용하기 위해서는 정말 많은 라이브러리 간 상호작용이 필요합니다. 또한 이 모듈들로 구성된 리액트 앱을 빌드해야 한다.

    개발 서버를 만들때에도 Node.js 없이 혼자서 많은 라이브러리를 다운받아서 설치하고 하는 일들은

    꽤나 골치 아픈 일일 거다. 그래서 리액트 개발자들도 모듈 같은 것들을 npm에서 편하게 받아서 설치하고, 개발서버를 띄우는 일도 서버 런타임인 nodejs를 이용해서 개발 시 작업환경을 구성하고 있다. (Creact-react-app 기준)

     

     

     

    출처 : https://ljh86029926.gitbook.io/coding-apple-react/undefined/node.js-npm#node-js

    댓글

Designed by Tistory.