Node.js (Node.js설치, NPM, 모듈 )

타다닥·2023년 10월 12일
node.js
0
post-thumbnail
post-custom-banner

Node.js 란?

  • JavaScript 런타임 환경이다. 런타임은 프로그래밍 언어가 구동되는 환경을 의미한다.
  • 즉 브라우저를 열지 않아도 JavaScript를 실행할 수 있는 환경을 만들어준다.
  • 이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적이다.

Node.js 설치

  • 맥북을 사용하기 때문에 HomeBrew에서 설치한다. 터미널 들어가고, 명령어는 brew install node
  • 이런거 건드릴때마다 너무 떨린다. 집에서 혼자하는데 잘못건드려서 꼬일까봐 엔터 누를 때 마다 긴장하는중.
  • node -v 를 입력해 버전 확인 가능
  • npm -v 를 입력해 npm의 버전 확인 가능
    -npm은 js로 개발된 모듈들 설치, 업데이트 등의 동작을 관리해주는 패키지. 아래에서 자세히!

Node.js 특징

▶️ 자바스크립트 언어 사용

  • js는 원래 웹 브라우저 환경에서만 동작했다.
  • 하지만 Node.js 덕분에! 브라우저 없이 터미널에서도 실행이 가능해졌다.
  • js 한가지 언어로 프론트엔드, 백엔드(서버)를 모두 만들 수 있다. 짱이다.

▶️ Single Thread, Call Stack

  • 하나의 스레드를 사용하기 때문에 에러를 처리하지 못하면 아예 중단이 되어버린다.
  • 그래서 예외 처리가 중요하다!
  • 그리고 Call Stack ! 얘는 LIFO (Last-in, First-out)구조이다. 말그래도 마지막에 들어온게 먼저 빠져나가는 방식이다. 레고를 아래에서 부터 착착 쌓아가고 맨위부터 분리시켜서 빼내는 걸로 생각하자.

▶️ Non-blocking Input, Output

  • 블로킹 (Blocking)
    • 해당 작업이 끝나야만 다음 작업을 진행 (유도리 없음)
  • 논 블로킹 (Non-Blocking)
    • Node.js는 논 블로킹 (Non-Blocking) 방식으로 작업을 진행한다.
    • 작업이 끝날 때까지 기다리지 않고 작업을 진행한다. 빨리 끝난 순으로 쭉쭉 진행되는 것.
    • 그래서 같은 작업일 때 블로킹보다 작업시간이 더 빠르다.

▶️ 비동기적 이벤트 기반 (Event-Driven) 아키텍처

  • 어떤 이벤트를 실행했을 때 어떤 행동을 할 건지 미리 정해놓고, 그대로 진행하는 것.
  • 그러니 이벤트 기반 아키텍처에서는 특정 이벤트가 발생할 때 무엇을 할 지 미리 등록해놓아야 한다.
    • 이벤트리스너와 콜백함수가 필요하다!
    • 이벤트 리스너 (Event Listener): 이벤트 등록 함수
    • 콜백 함수 (Callback Function): 이벤트가 발생했을 때 실행되는 함수

NPM 사용하기

▶️ NPM?

  • 노드 패키지를 관리해주는 틀이다. 노드에서 사용되는 것들을 관리해주는 것!
  • npm inint 프로젝트를 시작할 때 사용하는 명령어. package.json에 기록될 내용을 문답형식으로 입력한다.
  • 여기서 버전은 노드의 버전이 아니라 프로젝트 자체의 버전을 의미한다. 그리고 아래 진행을 완료하면 package.json 파일이 생성된다.
    • package.json 파일은 Node.js에서 패키지들이 서로 의존되어 있어 문제가 발생할 수 있는데 이를 관리하기 위한 파일이다.

모듈 (Module)

  • 특정한 기능을 하는 함수나 변수들의 집합을 모듈이라고 한다.
  • 작은 부품들을 만들어 필요한 기능을 할 수 있도록 모아놓은 것이라고 보면 된다.
  • 그래서 재사용이 가능하다! 코드를 추상화하기에도 좋고 의존성을 관리하기에도 좋다.
    • 코드들이 서로 연결되어 있어 영향력이 크면 서로 의존성이 높다고 한다. 이렇게 되면 코드 하나를 수정하거나 삭제했을 때 연결된 모든 부분들에 영향이 가고 꼬이게 될 수 있다.
    • 모듈은 특정한 기능을 하는것들을 모아놓은 것이기 때문에 의존성을 관리하기에도 좋은 것!

▶️ 체크포인트!

  • 내용이 적을 때에는 html 파일 내에 js, css 를 한 번에 작성하기도 한다.
  • 하지만 내용이 많아지고 복잡해지면 js에서 js를 호출하는 등 엮이는 문서들이 많아진다.
  • 이 때 하나의 문서에 한 번에 작성하면 코드도 길어지고 원하는 내용을 찾기에도 힘들어진다.
  • 그래서 기능별로 js파일을 분리하게 된다. (예를 들어 시계를 동작시키는 js파일, 로그인을 동작시키는 js파일 등)
  • 하지만 결론적으로 실행되는 파일은 하나이다! 하나의 파일에서 여러 파일들을 불러오는 것이기 때문!
  • 이 부분에서 모듈의 개념을 이해해야 한다. 하나의 파일에 모든 걸 작성할 수 없으니 쪼개어서 관리한다고 생각하자! 메인문서가 있고 필요한 기능들이 있다면 파일들을 각각만들어서 사용하게 되는 셈.
  • 이렇게 해서 만들어진 파일이 여러개라면 어떤 파일부터 열어아 할 까?
    • 메인파일부터 읽으면 된다! 메인 파일에서 require 가 보인다면 다른 파일을 불러온다는 의미이기 때문에 따라서 이동하면 된다.

▶️ 모듈을 만들고 내보내기.

  • 원하는 동작을 가진 함수를 만들어주고 module.exports = 내보낼 것; 이렇게 해준다.
  • 작성한 함수를 모듈로 내보내겠다는 의미이다. 여기서 내보내지 않으면 다른파일에서 사용할 수 없다.
  • 내보내기를 할 때 함수는 실행시키면 안된다! () 는 제외하고 함수명만 작성해야한다!
  • 나는 이해하기 편하기 위해 메인파일, 쪼개놓은파일로 구분해놓았다.
//쪼개놓은 파일
const add = (a, b) => a + b;
module.exports = add;

▶️ 모듈 불러와서 사용하기.

  • require 은 파일(모듈)을 불러오겠다는 의미이다.
//❗️메인 파일
const add = require("./math.js");
//add 라는 변수를 선언하겠다. add의 내용(동작)은 math.js 파일에 작성되어있다.

//사용할 때에는 형식을 맞춰주어야 한다.
//쪼개놓은 파일에 작성해놓은 함수는 (a, b)두 개의 값을 넣어주어야한다.
//메인파일에서 사용 할 때에도 동일하게 해줘야 한다. 
console.log(add(5,6));

▶️ 모듈을 내보내고 사용하는 다양한 방식.

  • 여러 객체를 내보내고 불러올 때.
//쪼개놓은 파일

//아래처럼 선언하고
const add = (a, b) => a + b;
const minus = (a, b) => a - b;
const PI = 3.14;

//이렇게 내보내기
module.exports = {
  add,
  minus,
  PI,
};

//얘는 결국 이러한 값이 내보내기가 되는 것
module.exports = {
  add: add,
  minus: minus,
  PI: PI,
};

//❗️메인 파일
//파일에서 여러개의 식별자를 객체 형태로 내보내는 경우에는
//모듈을 받아올 때 math로 선언하고 해당 파일을 불러온다.

//그리고 선언한 해당 파일에 있는 add라는 함수를 이용하겠다. 이거는 sum으로 선언.
//결국 sum은 math안에 있는 add라는 함수를 사용하는 것이다.
//위에서 math를 선언했으니까 거기서 add를 빼오게 되는 것.

//쪼개놓은 파일에서 만든 함수와 동일하게 매개변수 값을 두개 넣어준다.
const math = require("./math.js");
const sum = math.add(3, 5);

//console해보면 8 출력.
console.log(sum);
  • 여러 객체 중 원하는 부분만 가져오고 싶을 때 (객체구조 분해 할당)
    • const {가져올거} = require(”파일위치”);
//쪼개놓은 파일은 위와 동일하고 그 결과값도 동일하다.
//함수를 선언한 파일을 가져오고 그 파일 중 원하는 부분을 가져올 것이냐
//함수를 선언한 파일에서 특정한 부분만 빼오느냐의 차이! (이게 객체구조 분해 할당)

//쪼개놓은 파일

//아래처럼 선언하고
const add = (a, b) => a + b;
const minus = (a, b) => a - b;
const PI = 3.14;

//이렇게 내보내기
module.exports = {
  add,
  minus,
  PI,
};
//❗️메인 파일
//모듈을 만들고 파일별로 내보낼때는 한번에 내보내야한다.
//근데 만들어진것들이 다 필요하지 않을 수 있다.
//필요한것만 가져올 때 객체구조분해할당을 해서 가져온다.
//아래와 같은 구조가 객체구조분해할당.
//메모리 효율상 이렇게 필요한것만 가져오는걸 추천한다!

//가져오고싶은 것만 가져올 때 key값 그대로 가져오면 된다.

//아래는 내보낸 모듈 중 add만 할당해서 가져오겠다는 의미.
//객체를 분해해서 가져오는거기 때문에 이름은 꼭 동일해야한다!
const { add } = require("./math.js");

//이런식으로 필요한 여러개를 가져올 수도 있다.
// const { add, minus } = require("./math.js");

//여기서 체크! 아래 내용을 console 해보면 아래 두가지는 출력되지 않는다.
console.log(sum); //sum을 가져오지 않았기 때문.
console.log(math.PI); //math가 뭔지 선언하지 않았기 때문에 PI도 가져올 수 없다.

//결국 위와의 차이점은 타고 들어갈 필요가 없이 원하는 부분만 딱 가져올 수 있는 것!
  • 선언과 동시에 내보내기
module.exports.add = (a, b) => a + b;
module.exports.minus = (a, b) => a - b;
module.exports.PI = 3.14;

터미널창에서 확인하기

  • 코드를 작성한 후 아래 터미널창에서 node 를 불러오고 작성한 파일명을 적어주면 출력된 값을 확인할 수 있다. (참고로 단축키는 ctrl + ~ )

💬

  • console.log 를 하고 웹사이트에 들어가 개발자도구를 확인하는게 좀 번거롭다고 생각하기는 했는데 이렇게 vscode에서도 바로 보여지니 신기했다.
  • 여기까지는 괜찮았다. 이정도면 나쁘지않은데? 라고 생각했다. 그리고 오늘 수업을 듣고 또 와르르가 되었다. 아주아주 복잡한놈이었다. 맘에 안든다 ㅎㅎ 오늘 수업내용은 내일 복습 후 다시 정리해야겠다. 내일이 기대된다!;;
profile
타다닥
프론트엔드 ㄱH발ㅈr ㅎH보ㅈr - ☆
이전 포스트

반응형웹 -Media Query, css변수 설정

다음 포스트

Node.js -es6모듈

post-custom-banner

0개의 댓글