패스트캠퍼스 데브캠프 19일차 [Node.js]

Su Min·2024년 6월 14일

패스트캠퍼스 데브캠프

목록 보기

17/68

🔗 Node.js

node.js는 구글 ChromeV8 JavaScript엔진으로 빌드된 JavaScript런타임(프로그래밍 언어가 동작하는 환경)으로 컴퓨터와 브라우저 둘 다 사용되며 비동기식 이벤트 방식을 통해 높은 성능을 제공한다. Node.js를 사용하면 JavaScript를 사용하여 서버 측 애플리케이션을 개발 할 수 있고 이를 통해 웹 서버, RESTful API, 웹 애플리케이션, 등을 개발할 수 있다. Node.js는 많은 패키지와 모듈을 포함하고 있으며, npm(Node Package Manager)을 통해 전세계의 개발자들이 만든 다양한 라이브러리와 도구를 손쉽게 설치하고 관리할 수 있다.

🔗 RESTful

RESTful은 Representational State Transfer(표현 상태 전송)

HTML, JSON과 같은 표현으로 사용된 자원을 고유한 URI로 식별하여 CRUD 작업을 수행한다. CRUD(Create, Read, Update, Delete)작업은 표준 HTTP (Get, Post, Put, Delete)를 사용한다. 서버는 이러한 작업을 통해 클라이언트가 요청하는 리소스를 쉽게 찾고 탐색 할 수 있도록 도와준다.
RESTful은 클라이언트로부터의 요청을 처리하고 제공하며 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 웹 서비스이다.

🔗 Express

Express는 node.js 웹 프레임워크로 클라이언트의 요청에 핸들러 함수를 호출해주는 간단한 라우팅과 HTTP메서드를 쉽게 처리를 해주고 RESTful API를 서버 측에서 쉽게 구축할 수 있도록 도와준다.
Express 애플리케이션에서 app.get() app.post() app.put() app.delete() 의 메서드를 사용하여 특정 URL 경로에 대한 요청을 처리할 핸들러 함수를 매핑한다. 핸들러 함수 내에 request(요청), response(응답)을 인자로 받아서 클라이언트 요청에 대한 응답을 생성하고 반환한다.

🔗 번들러

다양한 기능들이 웹에서는 직접적으로 동작하지 않고 변환 과정을 통해 HTML,CSS,JS로 바꿔서 웹에서 동작을 시켜줄 수 있다. 번들러 자체가 이해해서 변환을 해주는 것은 아니고 외부 패키지의 도움을 받아서 변환을 해줄 수 있다. 즉, 실질적인 변환은 외부 패키지로 수동 작업을 해야 하는데 수동의 작업을 번들러가 처리해준다. 대표적으로 webpack 과 vite가 있다.

🔗 Vite

공식 문서(https://ko.vitejs.dev/)에 따르면 프랑스어로 빠르다를 의미하여 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초첨을 맞춰 탄생한 빌드 도구이다.

개발 시 네이티브 ES Module을 넘어 더욱 다양한 기능을 제공한다.
번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하여 미리 정의된 설정(Pre-configured)을 제공한다.

제공하는 기능 중 개발하는데에 정말 좋다고 생각한 기능은 CSS, JSON, 이미지파일, 등도 Import가 가능한 것과 HTTP헤더를 이용해 요청한 디펜던시를 브라우저에서 캐싱하는 것이였다. 캐싱한다는 것은 이후에 같은 리소스를 필요할 때 서버로부터 다시 요청하지 않고 캐시된 버전을 사용하여 성능을 향상시킨다는 의미이다.

📖 vite 시작하기

npm create vite@latest 명령어를 사용하여 자동으로 구성하기

PS C:\Users\eaaha\OneDrive\바탕 화면\연습> npm create vite@latest
Need to install the following packages:
  create-vite@5.2.3
Ok to proceed? (y) y
√ Project name: ... vite-project
√ Select a framework: » Vanilla
√ Select a variant: » JavaScript

이후 npm install 명령어를 통해 package.json 에 있는 의존성 패키지를 설치하면 아래와 같은 파일 목록들이 생성된다.

npm run dev 명령어로 vite를 실행한다.

🔗 Fetch 와 Axios

fetch는 네트워크를 통해 리소스를 가져오기 위한 API이다. 주로 비동기 함수 내에서 사용되어 네트워크에 요청을 보내고 응답을 처리하기 위해 Promise를 반환하고 acync와 await구문을 사용한다.
axios는 HTTP 클라이언트 라이브러리로 HTTP에 요청을 보내고 응답을 처리하는 데에 도움을 준다. axios는 get과 같은 메소드를 사용할 때 간단히 점표기법axios.get()으로 사용하고 JSON 형식을 객체로 가져올 때 await을 사용하지 않아도 된다.

📌 fetch

function fetchData() {
  const log = async () => {
    try {
      const response = await fetch("/api/")
      if (!response.ok) {
        throw new Error("not ok")
      }
      const data = await response.json()
      console.log(data)
    } catch (e) {
      console.error("not not ok")
    }
  }
  log()
}

📌 axios

function axiosData() {
  const log = async () => {
    try {
      const res = await axios.get("https://velog.io/@tnalsdl2046/posts")
      if (res.status === 200) {
        const data = res.data
        console.log(data)
      }
    } catch (e) {
      console.error("not ok")
    }
  }
  log()
}

Su Min

성장하는 과정에서 성취감을 통해 희열을 느낍니다⚡️

이전 포스트

패스트캠퍼스 데브캠프 18일차 [JavaScript, 비동기 처리]

다음 포스트

패스트캠퍼스 데브캠프 19일차 [Node.js]