프론트엔드 개발자 클론 프로젝트 후기...4

돌아온 프론트엔드 프로젝트 ...4  

 

저번 시간에는 git을 통해 우리의 프로젝트 버전 관리.

그리고 호스팅을 해서 직접 사이트를 올려 보기도 했다.

 

못 봤다면 다시 보기! 

sosatang.tistory.com/42

프론트엔드 개발자 클론 프로젝트 후기...3

 

 

오늘은 노드 js 라는것을 알아보고자 한다. 

 

Node JS 란? 

 

흔히 백엔드로도 알고 있기도 한데 node js 

프론트엔드 개발자 백엔드 개발자 둘다 한테 아주 유용한 것이다.

그리고 우리의 프론트엔드 프로젝트에도 유용 할 것이다.....

 

출처: 패스트 캠퍼스 

 

여기서 궁금한점 

런타임은 무엇이고 그래서 런타임으로 무엇을 하는가? 

Node js 는 백엔드가 아닌가? 

 

이분이 내가 처음 node를 접했을 때 느낌 그대로 잘 설명해주셨으니 한번 보고 오는 것도 좋을 거 같다

medium.com/@yeon22/node-js-node-js%EB%9E%80-410ae3749c56

(Node.js) Node.js란?

 

Node.js 설치 방법

 

공식 홈페이지 가서 설치 버튼을 누른다

 

** 주의할점 

1 . 최신 버전은 오른쪽이다

2 . 하지만 왼쪽에 있는 LTS 를 깔기를 권장한다

3 . 이유는 왼쪽은 안정성 신뢰도가 보장되어있다

4 . 오른쪽의 최신버전은 최신인 만큼 아직 확인이 안된 버그가 있을수도 있다. 

nodejs.org/en/

Node.js

설치가 다 끝났다면 비주얼 스튜디오 or CMD 를 켜서 잘 설치가 되어있는지 확인해주자 

 

자 그럼 여기서 NPM 이라는 건 무엇일까?

 

출처 : 패스트 캠퍼스 

전 세계 개발자들이 만들 모듈을 올리고 사용하고 할 수 있는 곳이다.

 

정말 어마무시한 정보를 담고 있는 곳이기도 하다 원하는 기능이 필요한데 구현하기가 좀 벅차다 혹은 할 수 있는데 

귀찮다 하는것 이미 올라와 있을 확률이 많다. 

 

www.npmjs.com/

npm

npm 공식 홈페이지 

 

여기서 원하는 모듈을 찾을수도 있다 예를 들어

나는 opencv 를 js에서 사용하고 싶은데 그걸 편하게 구현한 모듈이 있을까? 

 

당연히 있다. 그리고 스크린샷으로는 안보이지만 

밑으로 엄청난 양의 소스 들이 보인다

그럼 이걸 사용하는 방법을 알아보자 

 

제일 먼저 당연한거겠지만 일단 들어간다 

 

install 이라고 써져 있을것이다 저게 그밑에 있는 

npm i opencv4nodejs << 이 명령어를 vs 코드를 열고 우리가 작업하던 환경에서

터미널에 저 명령어를 써주면 설치가 되는걸 확인 할 수 가있다.

 

보면 1주에 얼만큼 다운로드가 되었는지 

버전은 몇인지

 

밑에 스샷과 함꼐 보면 설명도 잘 해놓은걸 알수있다 

근데 어찌 사용하는지 모르겠다??? 

걱정마라 계속 읽으면서 내려가면 사용 방법 까지 친히 알려주니 얼마나 좋은가?

 

이제 우리의 프론트엔드 프로젝트에 필요한 모듈들만 쫘자작 받으면 된다. 

 

 

그리고 이 소스코드들을 보면 

정말 고마움을 느낄수 있다.

할수없음 or 귀찮음을 한번에 날려주는.... 

 

여러모로 너무 편리한 기능이다.

 

하지만 git 을 사용해서 우리가 버전관리를 저번시간에 같이했다.

여기서 꼭 필요하진 않지만 알아두면 좋은것은

gitignore 를 사용해 nodemodule를 제외하고 푸쉬하는것이다

왜냐하면 저 친구들도 같이 푸쉬하게 되면 용량도 많아 질뿐더러 푸쉬 시간도 길어진다.

어? 그렇다면 모듈없으면 또 다시 하나하나 일일이 설치해야 하는가?

 

우리가 하고 있는 프론트엔드 프로젝트 폴더에서 package.json 에 들어가면 우리가 여태 설치했던 

모듈들의 버전과 이름이 적혀있을것이다.

 

나중에 다른 컴퓨터에서 클론을 하더도 터미널에서 npm install 혹은 npm i 만 하면 우리가

사용하던 모듈들을 한번에 설치 할 수 있을것이다

 

자 다들 좋은 프론트엔드 개발자가 되었으면 좋겠다

20,000

http://abit.ly/5lc7dz9

한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online. | 패스트캠퍼스