노드 시작하기

JS
node

사건의 발단

발단… 이라고 까지는 뭐하지만 내가 요즘 회사 내 프로젝트를 하느라고 정신이 없음…맨날 포토샵하고 제플린, 필요하면 인비전까지 손대고 있기는 한데 시간이 없어서 개발까지 살펴보지 못함….

그래서 회사에서 개발하는 것 손가락만 빨며 보기 일쑤인데 그것마저도 회사 전체가 바빠서 개발자들한테 물어보기도 뭣함…그런데 나도 개발이란 것을 해보고 싶음. 그래서 간단하게 노드부터 시작해보기로 함.

앞으로 배울 것들

하지만 배울 것은 아직 엄청엄청 많음.
인비전, 피그마, BEM, OOCSS 등등. 뭐 이렇게 보니 다 다 방법에 관한 것들이라 프로젝트 들어갈 때 하나씩 스터디 해가면서 적용해보면 될듯.

참고 링크 [CSS방법론] SMACSS, BEM, OOCSS

일단 node

node가 뭔가요

간단히 들은 설명으로는 인터넷 서버(브라우저)에서 결과를 볼 수 있던 자바 스크립트를 로컬서버(내 컴터)에서도 간단히 볼 수 있도록 하기 위해 노드를 쓰는 것이라고 한다. 서버에 올리지 않고도 볼 수 있는 것.
노드는 또한 모듈로 각 부분을 쪼개 놓는 것을 가능하게 한다. 모듈로 쪼개면 보기도 편해지고, 가벼워지고, 관리도 쉬워지는 장점이 있다.

Hello node

노드를 실행하는 방법은 생각보다 간단했다.
일단 뭔가 볼 수 있는 자바 스크립트 파일을 만든다. 

1
console.log('Hello Node');

노드를 깔고 명령 프롬프트에 node + 해당 파일 이름을 입력한다. 

1
node index.js

그럼 명령 프롬프트에서 결과를 볼 수 있음.

node 기초

내부 모듈 만들기

내부 모듈을 함 만들어 보겠음. calc.js 라는 이름으로 파일을 하나 만듦니다.

1
2
3
4
5
6
7
var calc = {};
clac.add = function(a,b){
    return a+b;
}
module.exports = calc;

얘가 모듈, 더하기 기능을 밖으로 뺐다고 생각하자…
그리고 이것을 다른 파일에서 불러다 써보도록 하자

1
2
3
4
var calc = require('./calc.js');
//내부 모듈은 모듈의 위치를 적어준다.
console.log(calc.add(20, 45));
//65

외부 모듈 가져다 써보기

외부 모듈을 만들기 전에 일단 어떻게 외부 모듈을 가져와서 쓸 수 있는지 알아보자.

  1. 폴더를 만들어서 노드 프로젝트로 등록하자.
    mymoment라는 폴더를 생성. 이 위치에 npm init라는 명령어로 package.json 파일을 생성. 패키지 제이슨 파일에서 이 프로젝트에 쓰이는 외부 패키지들을 관리(?)할 수 있다.(“dependencies”) 이 패키지 파일을 프로젝트 별로 생성하게 되는데 그 이유는 프로젝트별로 사용하는 패키지와 버전이 각기 다르기 때문
    script에서는 특정 동작에 대한 명령어를 만들 수 있다. ex)hexo s

  2. moment.js 를 설치해보자.
    mymoment 폴더 위치에 npm install moment --save 를 입력. 그럼 자동으로 모멘트 js가 깔린다. 참고로 모멘트는 날짜 계산을 쉽게 도와주는 모듈. 모듈을 설치하면 package.json 파일의 dependencies에 "moment": "^2.21.0" 가 추가된 것을 확인할 수 있다. 

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    {
      "name": "mymoment",
      "version": "1.0.0",
      "description": "",
      "main": "01.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "moment": "^2.21.0"
      }
    }

  3. moment.js불러오기

    1
    2
    3
    4
    5
    6
    7
    var moment  = require('moment');
    function nextMonth(){
        return moment().add(1, 'M');
    }
    module.exports = {nextMonth};

모멘트를 불러온 후, 다음달을 계산하는 함수를 생성해서 내보내는 모듈
이렇게 하면 이제 외부 모듈을 가져와서 사용할 수 있다.

재미지당!!!

모듈을 만들어보자

  1. .gitignore 파일 만들기
    git에 올려야 하는데 node_modules은 제외하고 올려야 하니 .gitignore파일 만들어서 /node_modules적어주기

  2. git에 새로운 repository 만들어서 올리기
    그리고 주소 복사.

  3. 설치하는 방법은 아까와 마찬가지로 해당 파일 위치로 가서 npm install git주소(복사한 것)을 입력하는 것.

  4. 그러면 package.json 에서도 mymoment 라는 외부 모듈이 깔린 것을 확인 할 수 있다.

내가 만든 모듈을 사용해 볼까.

아까 다음달을 구하는 모듈을 만들었었다.
그러면 그것을 불러와서 사용해 보자. 

1
2
3
var my = require('mymoment');
console.log(my.nextMonth());
//moment("2018-04-12T00:18:43.070")

이렇게 파일을 작성하고 노드를 실행하면 결과를 볼 수 있다.

공유하기 댓글