본문 바로가기

DEV_BACKEND/HTML, CSS

[멋쟁이사자처럼 부트캠프 TIL 회고] 백엔드 부트캠프 13기: Java 21일차 HTML, node(nvm, npm)

HTML

HTML (HyperText Markup Language)은 웹 페이지를 구조화하고 콘텐츠를 정의하는 마크업 언어.

브라우저가 웹 페이지를 렌더링하는 데 사용됨.

 

초기환경 설정

 

D:\workspace\bootcamp\practice1\HTML>code .

로 cmd에서 비쥬얼 스튜디오 코드를 열어주었다.

Visual Studio Code Extension에서 Prettier 다운받고 위와 같이 설정.


Node.js

Node.js(노드)는 브라우저 밖에서 자바스크립트를 실행할 수 있도록 만든 JavaScript 런타임 환경,

구글 크롬의 V8 JavaScript 엔진을 기반으로 구축되어 빠르고 효율적임.

(브라우저 밖에서도 자바스크립트를 실행할 수 있게 해주는 것이 node, 즉 자바엔 jvc가 있다면 자바스크립트엔 node가 있음 )

 

Node.js의 주요 특징

  1. JavaScript의 실행 범위 확장:
    • 기존에는 JavaScript가 브라우저 안에서만 동작했지만, Node.js는 이를 브라우저 밖에서도 실행할 수 있게 만듭니다.
    • 서버 애플리케이션, 파일 작업, 네트워크 통신, 데이터베이스 연결 등 다양한 작업이 가능합니다.
  2. 비동기 I/O:
    • Node.js는 비동기 입출력 방식(Non-blocking I/O)을 사용하여 많은 요청을 효율적으로 처리할 수 있습니다.
    • CPU 사용이 적고, 고성능 애플리케이션 개발에 적합합니다.
  3. 단일 스레드 이벤트 루프:
    • Node.js는 단일 스레드에서 동작하며, 이벤트 루프를 통해 동시에 많은 요청을 처리합니다.
    • 멀티스레드를 사용하지 않아도 동시성을 제공하므로, 가볍고 빠릅니다.
  4. npm(Node Package Manager):
    • Node.js에는 npm이라는 패키지 관리자가 포함되어 있습니다.
    • 전 세계 개발자들이 공유하는 오픈 소스 라이브러리를 쉽게 설치하고 사용할 수 있습니다.

Node.js의 장점

  • 빠른 실행 속도 (V8 엔진 덕분)
  • 비동기 처리로 높은 확장성
  • JavaScript를 사용하므로, 프론트엔드와 백엔드에서 동일한 언어 사용 가능
  • 풍부한 라이브러리와 커뮤니티 지원 (npm)

Node.js의 단점

  • 단일 스레드 기반이므로 CPU 집약적인 작업에 부적합
  • 비동기 코딩 스타일로 인해 복잡한 코드 구조가 발생할 수 있음 (콜백 지옥)
  • 성숙도가 낮은 패키지나 라이브러리가 있을 수 있음

 

cmd를 관리자권한으로 실행하고 아래와 같은 명령어로 테스트하면 됨.

nvm list : 현재 설치된 nvm 버전을 보여줌.

nvm list available : 설치가능한 nvm 버전들을 보여줌.

nvm install 22.12.0 : 22.12.0버전 nvm을 설치함

nvm use 22.12.0 : 해당 버전을 사용하게 셋팅.

 

크롬(브라우저)에서는 자바스크립트가 실행이 되는데 그 부분을 브라우저 밖에서 자바스크립트가 실행시키고 싶음

즉 자바엔 jvc가 있다면 자바스크립트엔 node가 있음.

 

NVM은 Node.js 버전을 효율적으로 관리하는 도구

 

NPM은 패키지 설치, 관리, 배포를 담당.

npm init : package 생성. npm init -y: 기본값으로 생성하기.

npm install lite-server --save-dev : lite-server라는 패키지를 설치하는 명령어.

npm start : package.json 파일에 정의된 start 스크립트를 실행.

ctrl+c로 종료

 

전체적인 흐름

  1. npm init: 프로젝트 환경을 정의하기 위해 package.json을 생성.
  2. npm install lite-server --save-dev: 개발 서버로 사용할 lite-server를 설치.
  3. npm start: lite-server를 실행하여 브라우저에서 개발 환경 확인