node.js, package.json, 짝수 생성기

node.js vs. 브라우저

 

node.js 란?

Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임

런타임이란? => 프로그래밍 언어가 구동되는 환경

 

 

브라우저와 차이점

  - DOM이 존재하지 않는다.

  - window, document 객체가 존재하지 않는다

  - node.js에는 window 대신 global 키워드 존재

  - 완전 똑같지는 않다.

  - fetch API가 존재하지 않는다.

  - 서버 요청할 때에는 다른 방법을 사용

 

 

프론트엔드 영역에서 node.js는 어떤 의미?

  - 현대의 프론트엔드 개발은 다양한 node.js 모듈을 활용하며, npm 생태계를 활용

  - CLI에서 다양한 형태의 자동화 과정(빌드, 패키징, 배포 등)을 처리하는 경우가 많으므로,  node.js 학습은 필수! 

 

 

Package.json

남이 만들어 놓은 모듈을 node.js 에서는 npm 모듈이라는 이름으로 부르고

이에 대한 정보를 package.json 에 담아둔다

즉, 프로젝트 전반에 관한 정보가 들어있다.

 

 

npm 은?

  - Node Package Manager로 일종의 앱스토어입니다. 필요한 모듈을 다운로드할 수 있는, 모듈들이 모여있는 모듈 스토어입니다.

  - node.js 생태계의 패키지 매너지는 npm이다

 

package.json 에는 이 프로그램을 실행시키기 위해 필요한 모듈들이 무엇인지,

프로그램을 실행시키는 방법, 프로그램을 테스트하는 방법 등이 명시 되어있다.

 

** 헷갈리면 안되는 점

  - 이 프로그램을 실행시키기 위해 필요한 실제 모듈은 따로 node_modules 에 저장

  - package.json 에는 어떤 모듈인지 적혀 있다.

 

전자제품을 보러 갔을 때 제품 카달로그가 package.json 이라 생각할 수 있다

package.json 만 보면 어떤 모듈인지 알 수 있다.

출처: 코드스테이츠 강의 중

왜 package.json 에 기술해야 할까?

내가 만든 프로그램을 나 혼자만 개발하고 사용한다면 큰 문제가 되지 않을 수 있지만,

우리는 대부분 다른 사람과 함께 개발하고 사용하게 된다.

그럼 다른 사람에게 이 프로젝트에 대해 알려주기 위해 하는 것이 바로 package.json

 

 

 

 

**** 짝수 생성기 과제 진행과정 ****

1. 먼저 터미널에서 레파지토리를 저장할 폴더로 들어간다.

2. 내 로컬에 clone 해온다.

3. 저장한 폴더 안에 들어간 터미널에서 클론 해온 폴더로 들어간다

4. npm install 을 해준다

5. node_modules 폴더와 package.json 이 생긴다

6. ur class에 과제 제출프로그램 사용버(1)에 나오는 명령을 터미널에 입력한다

7. node index.js 를 입력하면 range모듈이 없다고 에러나 나온다

8. npm install range를 해주고 다시 node index.js 를 입력하면 아래와 같이 나온다

9. npm run start 를 입력하면 아무것도 뜨지 않는다

 

10. package.json 을 실행해 start에 "" 을 "node index.js"로 변경하고 저장

11 index.js 를 실행하면 아래와 같이 나오는데

난.. index.js.에서 함수를 넣어 줘야한다고 생각해 계속 여기서 삽질을 했다..

require 하고.. getListMultiplesOfTwo 를 불러온다고 한다.. 왜.. 이걸 몰랐지...? ㅡㅡ

(require 는 다음에 공부해보고자 함.)

getListMultiplesOfTwo.js 에서.. 작성해줌..

하아......😩 정말.. 어이가 없었다.. 이걸 못 찾고 .. 유튜브랑 구글링 하면서 왜 안되는지.. 헤맸는데..😓

역시.. 모든.. 답은 문제 안에 있다..

 

12. 이후 npm run start를 하면 아래와 같이 찾고자 하는 결과 값이 나온다

 

13. 이제 테스트를 진행한다 npm run test -> 모두 pass

 

14. 이제 과제를 제출해야 한다. 제출하기 전 dependency에 @codestates-cc/submission-npm을 포함 되어 있는지 확인

15. npm run submit을 통해 제출하면 된다.

16. 그런데.. report를 직접 실행할 필요는 없지만 없으면 제출이 되지 않는다고 한다.

17. 그래서 npm run report를 해주고 npm run submit을 통해 제출

18. 화면에 나오는 깃헙 코드를 입력해주고 나면 터미널 출력 화면에 이름과 제출 성공 여부가 나옴!