Node.js

J-silver·2026년 1월 6일

리액트 들어가기전 간단한 node정리!
강의는 한 입 크기로 잘라 먹는 리액트

node는 “자바스크립트 파일 실행기”

node는 파일을 직접 실행하는 명령어.

자바스크립트를 구동하는 구동기 역활, 코드를 브라우저 밖에서 실행할 수 있게 해주는 런타임 환경이다.
ctrl+` ⇒ 터미널


->현재 경로

새로운 node.js 패키지를 생성하기 위해 새로운 패키지를 초기화 or 새로 만들어 달라 ⇒ npm init

패키지 이름이 뭐냐(자동값) ⇒바꾸고싶으면 바꾸기

일단 엔터만 클릭해서 정보 입력해주고 패키지 생성하기

그럼 기본적으로 넣어준게 파일 만들어줌

js파일 만들어서 node랑연결시켜주는방법

node index.js(파일이름,경로)
“Node로 src/index.js 파일 실행해줘”라는 뜻.

잘 실행된걸 확인

인덱스파일이 src파일 안에 있었다면 node src/index.js 경로를 반드시 명시해줘야함 ‘src폴더 안에 인덱스 파일 실행하라~ 하는것’

🔸파일이 여러개일때 scripts

🔹npm은 “명령어를 저장해두고 실행하는 관리자”

스크립트 안에 있는 매크로들!

🔹npm run start

"scripts": {
  "start": "node src/index.js"
}

그럼

npm run start

= npm이 start라는 이름을 찾아서

= 그 안에 적힌 "node src/index.js"를 대신 실행해줘요.

일종의 매크로 역활을 하는것 경로를 지정!

그래서 start에 경로를 지정해 놓고 npm run start 라고 하면 연결된걸 확인할수있음

  • node = “파일 실행기” → node 파일경로
  • npm run = “단축명령 실행기” → npm run 별칭

🔸모듈 시스템

하나의 스크립트에 모든 기능을 넣으면 코드 줄이 너무 길어지니까 나눠쓰는

일단 이 2개만 배울것임

🔹 CJS(Common JS 모듈 시스템)

  • 두개를 연동시켜볼꺼얌

모듈(module)은 “파일 하나”라고 생각

module.exports는 이 파일에서 밖으로 내보낼 것 목록

벨류값으로 사용되는 변수의 이름과 키값이 똑같을 경우 변수나 함수의 이름만 사용해도 됨

모듈이라는 내장객체에 export(내보내기)라는 프로퍼티에 객체를 저장해주는

각각 내보내고 싶은 값을 넣어주면 댐

⇒

  • 객체(object) = {} 처럼 생긴 “값 묶음”
  • 프로퍼티(property) = 객체 안의 “칸/이름표(키)”

const obj = { key: value };

키(key): 왼쪽 이름표(속성 이름)

벨류(value): 오른쪽에 실제로 들어가는 값(데이터)

예시:

const user = {name:"지지",age:20 };
  • 키: name, age
  • 벨류: "지지", 20

예를 들어:

const person = {name:"지지",age:20 };

여기서

  • person = 객체
  • name, age = person 객체의 프로퍼티
  • "지지", 20 = 그 프로퍼티에 들어있는 값

그럼 강의 문장으로 돌아가서

Node에서는 module이라는 “내장 객체”가 있고,

그 안에 exports라는 프로퍼티(칸)가 있음.

즉 이런 구조:

  • module (객체)
  • exports (프로퍼티)

그리고 이 코드:

module.exports = { add, sub };

이건 말 그대로

module 객체의 exports라는 칸에

{ add, sub } 라는 객체를 넣어준다

라는 뜻.

“넣어준다”를 눈으로 보이게 하면

module.exports// 처음엔 비어있거나 기본값

module.exports = { add, sub };// 이제 exports 칸에 이 객체가 저장됨

처음에 require()함수로 불러오는것

require(”./math”);로 하면 불러와짐. 이걸 변수로 담기

const moudleDate = require(”./math”);

add,sub가 잘 출력된걸 확인할수있음

그럼 moudleDate 함수안에는 {add: [Function: add], sub: [Function: sub]}가 담겨있는것임.

3과-1이 잘 출력되었음

const moudleDate = require(”./math”);을 그대로 쓸필요는 없음 const { add, sub }= require(”./math”);로 해도 동일함

🔸필요한 것만 바로 꺼내 받기 (구조분해 할당)

const { add, sub } =require("./math");

add(1,2);
sub(1,2);

👉 “상자에서 필요한 물건(add, sub)만 바로 꺼내서 손에 쥐는 방식”

🤔왜 둘이 동일해?

사실 방법 B는 내부적으로 이런 뜻:

const moduleData =require("./math");
const add = moduleData.add;
const sub = moduleData.sub;

이걸 한 줄로 줄인 게

const { add, sub } =require("./math");

🔸ESM (ES 모듈 시스템)

좀 더 최신식

이걸 쓰려면 package.json 에서 es모듈 시스템을 쓰겟다고 해줘야함

그래서 es를 쓴다고 해놓고 common꺼를 쓰면 오류가 남

⇒ 기본적으로 함께 쓸 수 없음

math.js부분을

module.exports = { add, sub };를
//

export { add, sub }; 로 바꿔줘야함

또한 index.js부분을

const moduleData =require("./math");를
//

import mul, { add, sub } from "./math.js"; 로 바꿔야함.

여기서 주의할점은 확장자를 반드시 적어줘야함. (ㅇㅇ.js말하는거)

// math 모듈

export function add(a, b) {
  return a + b;
}

export function sub(a, b) {
  return a - b;
}

//로 한번에 적어주면 더 간편하게 작성가능!

🔹default ⇒ 이름 내맘대로 정하기✨

⇒ 대표 1개만 내보낼때 이름 맘대로 가넝

// math 모듈
export default function multiply(a, b) {
  return a * b;
}

이 파일에서 multiply 함수 하나를 기본(default)으로 내보낼게 라는 뜻

//index.js
import multiply from "./math.js";
import mul from "./math.js";

mul이라고 적어도 알아먹음.

✅ 여러 개 내보낼 땐 named export를 쓰고, 이름이 기본적으로 고정

  • export const add = ... 처럼 이름 붙여서 내보내면
  • import { add } from ... 처럼 그 이름으로 가져와야 해.
//동일한 경로로 부터 import문이 여러개라면 합쳐서 사용도 가넝
import mul, { add, sub } from "./math.js";

🤔그럼 왜 default는 이름을 자유롭게 해놨을까?

“이 파일에서 대표로 하나만 내보내는 거니까”

가져오는 사람이 원하는 컨벤션에 맞게 이름을 맞출 수 있게 해준 거.

라이브러리 사용

🔸Day.js

https://www.npmjs.com/

install에 적힌 명령어를 내 터미널에 적어주면 댐

그럼 라이브러리가 잘 설치 되었다고 알람이 뜨면서

랜덤컬러라는 라이브러리의 버전이 표시댐

  • node_modules

    • 라이브러리가 저장되는곳

  • package-lock.json
    • 패키지가 사용하는 정확한 정보를 저장하고있음

package.js(기존) 과 package-lock.json(라이브러리생성후)의 차이는??

⇒package-lock.json는 정확한 버전이 올라감

//package.js
"dependencies": {
    "randomcolor": "^0.6.2"
  }

  //package-lock.json
"node_modules/randomcolor": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/randomcolor/-/randomcolor-0.6.2.tgz",
      "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
    }

^ → Version Range(버전 범위) 대략적인 버전이라는 뜻

✅응용하기

라이브러리에서 가져올때는 from 뒤에 경로를 적는게 아니라 라이브러리 이름을 적어야함.

//randomcolor 라이브러리에 있는 기본값 불러오기
import randomcolor from "randomcolor";

const color = randomcolor();
console.log(color);

그러면 랜덤컬러가 잘 나옴

🔸npm instal라이브러리 지워졌을때

//package.js
"dependencies": {
    "randomcolor": "^0.6.2"
  }

package.js에 정보만 가지고 있다면 원래 다시 설치 가넝

터미널에 npm instal 혹은 npm i 입력하면

package.js에 설치된 버전을 기준으로 다시 등록해줌 → 파일 생성 완!

⇒ 다른사람과 공유하거나 업로드할때는 node_modules 파일을 공유하지 않음! 파일 크기도 크고 재설치가 가능하기때문에~

profile
J-silver
달리는 거북이
이전 포스트

Javascript 기초2

다음 포스트

리액트

0개의 댓글