리액트 공부하기 - node.js / NPM / NPX

또 새로운 ! 과목이 열렸습니다 - 

프론트 엔드의 꽃 이라고 하네요 .. 

뭔가 기대가 되면서도, 긴장도 됩니다만

얼른 익숙해지길 기대하면서 화이팅. ✨

---

Node.js 가 뭘까 ? 왜 생긴건데 !

기존에는 자바스크립트가 브라우저 내에서만 실행 되었기 때문에, 클라이언트(사용자 화면)을 만들 때만 사용 되었다.

주로 HTML, CSS, JavaScript로써 화면을 만들었다.

 

하지만 웹사이트 서버를 PHP, Java, Python과 같은 언어로 만들었기 때문에 이렇게 될 경우, 양쪽 두 언어를 다 배워야 하고, 양쪽 데이터 교환이 번거로웠다.

이 때, “그렇다면.. 자바스크립트를 브라우저 밖에서도 가능하게 하면 어떨까?” 와 같은 의견으로 Node.js가 등장하게 되었고, 덕분에 서버에서도 실행 가능하게 됐다.

---

🖥️ 쉽게 알아볼까 ?

💬 원래 자바스크립트는 브라우저에서만 실행되었어

• 크롬, 사파리 같은 브라우저 안에서만 실행 가능했음
• 그래서 **웹페이지의 동적인 요소(클릭 이벤트, 애니메이션 등)**를 만드는 데만 사용됨

내가 궁금했던 것 : 아무튼 저런 기능을 만드는 것도 브라우저 밖이 아닌가 . . ? 뭘 새삼스럽게, 밖에서 가능해졌다고 ..?

💡 하지만 여기서 중요한 포인트!
👉 코드는 밖에서(개발자의 컴퓨터에서) 작성하지만, 실행은 브라우저에서 일어남.
즉, 사용자가 웹사이트를 열었을 때 브라우저가 HTML, CSS, JavaScript를 다운로드하고 실행하는 거야.

💬 서버(백엔드)는 원래 PHP, Python, Java 같은 언어로 개발했어

• 프론트엔드(사용자 화면) → 자바스크립트
• 백엔드(서버) → PHP, Python 등

💬 Node.js가 등장하면서 변화가 생김!

• 자바스크립트를 브라우저 바깥에서도 실행 가능하게 만들어줌
• 즉, 서버에서도 자바스크립트를 사용할 수 있게 됨

💬결과적으로 Node.js 덕분에?

• 자바스크립트 하나로 프론트엔드 + 백엔드 개발 가능!
• 즉, 클라이언트(브라우저)와 서버(백엔드) 모두 자바스크립트로 개발 가능

---

NPM은 뭘까 ? 왜 생긴건데 !

🖥️ NPM ?

npm(Node Package Manager)은 Node.js에서 사용하는 프로그램을 관리하는 도구야.
예를 들어, 웹사이트를 만들 때 필요한 기능(예: 버튼 애니메이션, 달력, 차트 등)을 직접 만들기 어렵잖아?
그럴 때 다른 개발자들이 미리 만들어둔 기능(패키지)을 쉽게 다운받아서 사용할 수 있게 해주는 게 npm이야.

 

💡 비유:
npm은 앱스토어 같은 거야!
스마트폰에서 필요한 앱을 다운로드하는 것처럼, npm을 사용하면 필요한 기능을 쉽게 설치할 수 있어.

 

🖥️ npm에서 패키지란?

**npm 패키지(package)**란 Node.js에서 사용할 수 있는 코드(모듈) 묶음이야.
패키지는 특정 기능을 가진 코드들이 모여 있는 작은 프로그램이라고 생각하면 돼!

💡 쉽게 말하면:

• 패키지는 앱스토어에서 다운로드하는 앱 같은 거야!
• 예를 들어, 웹사이트에서 버튼 애니메이션을 넣고 싶다면, 직접 만들 수도 있지만, 이미 만들어진 패키지를 가져와서 쓰면 더 편하겠지?
• npm을 이용하면 이런 패키지를 쉽게 설치하고 사용할 수 있어.

🤍패키지 관련 개념 및 명령어🤍

 

1) 패키지 설치 하기 : npm install <패키지이름>

→ 원하는 패키지를 프로젝트에 설치함.
→ node_modules 폴더 안에 설치됨.

 

 

2) 패키지 목록 확인 하기 : npm list 또는 직접 확인 하기

→ 설치한 패키지는 package.json 파일의 "dependencies" 부분에 저장돼!

 

3) 패키지 삭제 하기 : npm uninstall <패키지이름>

🖥️ 배포(Deployment)란 ?

배포는 내가 만든 프로그램(웹사이트, 앱 등)을 실제로 사람들이 사용할 수 있게 공개하는 과정이야.
예를 들어, 너가 웹사이트를 만들었다면, 다른 사람들이 인터넷에서 볼 수 있도록 서버에 올려야겠지?
그 과정을 배포라고 해!

💡 비유:
네가 가게를 열었다고 생각해봐.

• 아직 공사 중이라면 사람들이 들어올 수 없겠지? (개발 중 🚧)
• 공사가 끝나고 가게 문을 열어야 손님들이 들어올 수 있어! (배포 🎉)

배포를 하면 사람들이 인터넷에서 네 웹사이트를 볼 수 있게 돼!

 

🖥️ package.json 란 ?

package.json 파일은 프로젝트의 설명서 같은 파일이야.
이 파일에는 프로젝트 이름, 버전, 그리고 어떤 npm 패키지를 사용하고 있는지가 적혀 있어.

💡 비유:

• package.json은 레시피(조리법) 같은 거야!
• 요리를 할 때 레시피에 재료 목록(npm 패키지)과 요리 방법(스크립트)이 적혀 있는 것처럼,
  package.json 파일에는 프로젝트에 필요한 정보가 정리되어 있어.

📌 예시 (package.json 파일 내용)

{
  "name": "my-project",   // 프로젝트 이름
  "version": "1.0.0",     // 프로젝트 버전
  "dependencies": {       // 사용하는 npm 패키지 목록
    "express": "^4.18.2"
  },
  "scripts": {            // 실행할 명령어 목록
    "start": "node app.js"
  }
}

---

🖥️ 프로젝트 초기화 & package.json 파일 생성하는 명령어 : npm init 

💭 npm init ?

npm init은 새로운 Node.js 프로젝트를 시작할 때 사용하는 명령어야.
이걸 실행하면 package.json 파일이 생성돼!

💡 비유:

• npm init은 새로운 프로젝트를 위한 다이어리를 만드는 것이야.
• 다이어리를 만들면 제목(프로젝트 이름), 날짜(버전), 내용(설명) 같은 걸 적어야 하잖아?
• 마찬가지로, npm init을 실행하면 프로젝트 이름, 버전, 설명 같은 걸 입력하라고 물어봐.

💭npm init -y는 뭐야?

npm init -y를 실행하면 질문 없이 기본 설정으로 package.json을 자동 생성해줘!

💬  비교

• npm init → 하나하나 질문하면서 package.json을 설정함
• npm init -y → 모든 질문을 기본값(Yes)으로 설정하고 바로 생성함

📌 nmp init-y 실행 시, 자동으로 아래와 같은 package.json 파일이 생성됨:

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "dependencies": {},
  "devDependencies": {},
  "license": "ISC"
}

---