개발/Java Script

[JS] Visual Studio Code 에서 모듈 설치하기 (Underscore 를 예시로)

hojak99 2017. 11. 24. 00:46

Visual Studio Code 에서 Underscore.js 설치하기


npm 사용은 처음이라서 간단한 부분이여도 많이 힘들었다.. 조금 많이 하기 싫었는데 그래도 재밌게 코딩하는 상상하면서 설치했다.  


우선 우리는 npm 이라는 것을 사용할 것이다



## npm?


글을 쓰다보니 npm 이 뭔지 모른다는 것이 생각났다. 


>> npm 이란 Node Package Modules 의 약자로 Node.js 에서 사용가능한 모듈들을  패키지화시켜 모아놓은 것.  

이라고 한다. 그래서 npm 을 통해 일일이 개발하지 않아도 누군가 올려놓은 모듈을 다운로드 받아서 모듈에 대한 기능을 사용할 수 있는 것이다.  



npm 설치는 알아서 하자. 이 글은 Underscore 모듈을 설치하는데 의의를 둔 글이니까..★




[사진 1: visual code]


[사진 1]은 visual code 창이다. 터미널을 띄우는 방법은 Ctrl + ~을 누르면 터미널 창이 나온다. 우선 우리는 cmd 가 아니라  Power-Shell 을 사용할 것이다. 


이 또한 친절하게 알려주겠다. Ctrl + Shift + P 를 누르며 다음 사진 같이 뜰 것이다.


[사진 2: Ctrl + Shift + P]

창에 Terminal Select 라고만 쳐도 자동완성으로 >Terminal: Select Default Shell 이 나올 것이다. 거기서 Power Shell 을 선택해주자.


그리고 [사진 1] 에 터미널 창 오른쪽 상단에 + 버튼을 클릭하면 Power Shell 로 터미널 창이 설정될 것이다.


그리고 npm 을 입력하면 [사진 3] 과 같이 출력되야 정상이다.



[사진 3: npm 입력 시]


그러면 npm init 을 입력해보자.



[사진 4: npm init 입력 시]


npm init 시에 저런 식으로 출력되고 package name 을 입력하라고 한다. [사진 4] 에서 (underscore-test) 는 기존의 package name 이다. 즉, 여기서 입력한 값으로 application name으로 정한다. 하고 싶은 걸로 하자.


npm init 이란 npm 에서 사용하는 package.json 을 생성시켜주는데, 이 json 으로 프로젝트 관리를 해준다.  그래서 package.json 으로 의존성 라이브러리에 대한 정보를 관리해준다. 


한마디로, package.json 으로 라이브러리를 관리한다라고 생각해도 될 것 같다.


[사진 5: package.json 정보 입력]


[사진 5] 처럼 package name 을 입력하면 저런 version 입력하라, description 입력하라 하는데 난 뭐 딱히 쓸 생각이 없어서 엔터만 쳤다. 그러면 Is this ok? (yes) 이런 식으로 물어보는데 그냥 엔터치면 package.json 이 해당 경로에 생성될 것이다. 



[사진 6: 생성된 package.json]


[사진 6] 은 생성된 package.json 이다. 여기서 우리는 dependencies 를 이용해 설치할 모듈을 입력하면 된다.



[사진 7: dependecies 입력]


그냥 [사진 6] 에서 "depenedcies" 부분만 추가해줘도 된다. 우선 난 직접 1.8.0 버전을 설치할 수 있도록 해줬는데 또 다른 옵션을 부여할 수 있다. 그 부분은 직접 알아보길..


이제 다시 visual studio code 로 넘어가자.


그 뒤 npm install 을 입력해주면 해당 package.json 을 통해 모듈을 설치한다.


반응형