#javascript #frontend

들어가면서

처음에 프로그래밍 언어를 배울 때 가장 필요한 것이 환경설정에 대한 부분 인 듯하다. 여태까지 스터디를 1번 정도 해보고 두개의 스터디를 진행 하고 있지만 희안하게도 심지어 제이쿼리를 사용하시는 퍼블리셔분들까지도 node와 npm에 대한 개념은 물론이고 사용을 안 하시는 분들이 많은 걸 보면 역시 환경설정이 중요하면서도 어느 정도 공부가 필요한 부분 이겠다는 생각이 들었다. 또 나역시도 리액트 네이티브에 대한 시뮬레이터가 계속 에러가 나서 살짝 내려놓고 리덕스 공부나 하자는 식이 되가고 있는 시점이고 또 파이썬을 공부하려 하는데 pip에 대한 환경설정도 어느 정도 필요 하다는 이야기를 들어서 곧 그거에 대한 환경설정을 직접 해보면서 글을 올릴 예정이다.

node.js의 개념

node.js의 공식사이트에서의 정의

Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 하다.

node.js는 자바스크립트 기반으로 구성된 서버 서비스를 자바스크립트로 구현 할 수 있게 만든 것이고 npm은 node.js기반으로 한 모듈 집합 저장소이다. npm은 Node Package Manger 라고 불린다.
npm은 자바스크립트로 개발된 수 많은 오픈 소스를 모듈로 올려놓은 곳이다. 웹개발자들은 개발에 필요한 온갖 모듈들을 npm을 통해 쉽게 다운 받고 쓸 수 있다.

node.js와 npm 설치

  1. 우선 node 공식 사이트가서 LST 버전을 클릭하여 다운 받는다.(현재 작성일 기준으로 8.11.3 LTS) 윈도우와 맥 모두 동일

  2. 설치가 완료되면 터미널에서 node --version을 치고 다운 받은 버전이 확인 되면 성공
    node

  3. 노드가 별 문제 없이 설치 되었다면 다시 터미널(배쉬)에서 npm -v를 타이핑 해 보면 현재 설치 되어있는 npm 버전이 확인 된다
    npm

  4. 업그레이드는 조금 복잡하므로 담 기회에..^^

나 같은 경우는 nvm(node version manager)을 사용하지만 설치 방식이 복잡해서 처음 접하는 경우에는 이 방법이 좋을 듯 하다.

ES6 개발환경 세팅

이제 node도 설치하고 npm도 설치 하였으니 ES6를 제대로 사용하기 위해 개발환경 세팅을 해보도록 하자.
우선 ES6 현재 모든 브라우저 환경에서 지원을 해 주지 않는다. 그래서 babel이라는 모듈을 이용하여 구형 브라우저에 맞게 ES5 버전으로 컴파일을 해줘야만 한다.

  1. npm으로 프로젝트 생성하기
    npm을 이용하여 프로젝트를 생성해야 한다. 

    1
    npm init- y

    위의 명령어를 치면 현재 폴더에서 npm 모듈을 사용할 준비들이 된것이다.

    1. babel 관련 모듈 설치
      1
      npm install babel babel-core babel-preset-env babel-cli --save

여기서 npm 설치시 붙는 –save 명령어는 현재 프로젝트 폴더 에서만 이 모듈을 사용하겠다는 옵션이다.

  1. .babelrc 작성
    • 바벨을 사용하기 전에 우선 .babelrc 라는 파일을 생성하여 ES2015 프리셋을 작성하여야 한다.
      1
      2
      3
      4
      5
      {
        "presets": [
          "env"
        ]
      }

  1. test

    • src 폴더를 생성하고 그 안에 index.js 를 만든다.

    • index.js에 ES6로 된 코드를 작성한다.

      1
      2
      const hello = 'hello'
      let arr = [1, 2, 3]

    • 프로젝트 폴더 내에 npm init -y로 생성된 package.json 파일을 다음과 같이 변환한다.
      package.json

    • 터미널에서 아래 명령어를 실행한다

      1
      npm run start

그럼 dist 폴더가 생성되면서 ES6 코드가 아래 ES5 코드로 변환된다.

1
2
3
4
5
'use strict';

var hello = 'hello';

var arr = [1, 2, 3];

정리

이상 프론트의 가장 기초적인 환경설정에 대한 정리글이었다.

#javascript #frontend