카테고리 없음

WIL 2023/08/27 (Sunday) - Week3

0to1ton 2023. 8. 27. 23:57

3주차 정리

 

강의내용

  • 사실 강의 노트를 가져다가 복붙을 할까 생각도 했는데 그러면 복습을 하는 느낌이 적게 들 것 같아서 강의 노트를 적었던 TIL 링크를 넣고 chatGPT랑 공부하면서 알게된 내용을 통해 일주일간 배운 내용을 복습하려고 한다.

Node.js

https://everyonehasadream.tistory.com/13

Express , 미들웨어, RESTful

https://everyonehasadream.tistory.com/14

 

Chat GPT 내용

 

Node.js

Node.js는 V8 JavaScript 엔진으로 빌드된 오픈 소스 서버 사이드 런타임 환경입니다. 주로 네트워크 애플리케이션의 개발에 사용되며, 비동기식 이벤트 기반 프로그래밍 모델을 사용하여 높은 처리량을 달성할 수 있습니다. 아래는 Node.js의 주요 특징과 사용 방법에 대한 간략한 설명입니다:

  1. V8 JavaScript 엔진: V8은 Google에서 개발한 오픈 소스 자바스크립트 엔진으로, 웹 브라우저나 서버 사이드 환경에서 JavaScript 코드를 실행하는 역할을 합니다. V8 엔진은 JavaScript 코드를 기계어로 변환하고 실행하는 역할을 담당합니다.
  2. 오픈 소스 서버 사이드 런타임: 서버 사이드 런타임은 서버 환경에서 JavaScript 코드를 실행할 수 있는 플랫폼을 의미합니다. 이는 클라이언트 사이드 브라우저 환경에서 실행되는 것과는 달리, 서버에서 웹 애플리케이션을 실행하기 위한 환경을 제공합니다. 오픈 소스는 소스 코드가 공개되어 누구나 자유롭게 사용하고 개선할 수 있는 소프트웨어를 의미합니다.

따라서 "V8 JavaScript 엔진으로 빌드된 오픈 소스 서버 사이드 런타임"은 Node.js가 V8 엔진을 사용하여 만들어진 오픈 소스 서버 사이드 환경을 의미합니다. Node.js는 서버 애플리케이션을 개발하기 위한 도구와 환경을 제공하며, JavaScript를 사용하여 서버 측에서 다양한 작업을 수행할 수 있도록 해줍니다.

 

V8 javascript 조금 더 파보고 싶으면 아래 링크로..

https://helloinyong.tistory.com/290

 

Node.js의 주요 특징:

  1. 비동기식 프로그래밍: Node.js는 비동기식 이벤트 루프와 함께 작동하여, 여러 작업을 동시에 처리할 수 있습니다. 이로써 블로킹되지 않고 많은 요청을 처리할 수 있습니다 Blocking/Non Blocking
  2. 이벤트 기반: Node.js는 이벤트와 콜백을 중심으로 동작합니다. 이벤트가 발생하면 콜백 함수가 실행되어 처리됩니다.
  3. 싱글 스레드: Node.js는 기본적으로 싱글 스레드로 동작하지만, 내부적으로 멀티 스레딩을 활용하여 여러 작업을 동시에 처리할 수 있습니다.
  4. 모듈 시스템: Node.js는 내장 모듈을 포함하여 외부 모듈을 사용할 수 있습니다. 이는 코드 재사용성과 개발 효율성을 높여줍니다.
    1. ESM(ES Modules)은 ECMAScript 6부터 도입된 자바스크립트 모듈 시스템입니다. CommonJS(CJS)와는 문법 및 동작 방식이 다르며, 브라우저 환경에서도 사용할 수 있는 모듈 시스템입니다. 
  5. 높은 확장성: Node.js는 수많은 연결을 동시에 처리할 수 있는 높은 확장성을 가지고 있습니다.
  6. 풍부한 패키지 생태계: Node.js의 npm(Node Package Manager) + yarn을 통해 수많은 오픈 소스 패키지를 사용할 수 있습니다.

 

CJS, ESM

 

CommonJS (CJS) 예제

// 간단한 웹 서버 생성 예제
const http = require('http');

const server = http.createServer((req, res) => {
  res.writeHead(200, { 'Content-Type': 'text/plain' });
  res.end('Hello, Node.js!');
});

const port = 3000;
server.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});


예제2 -- 투두리스트

const express = require('express');
const app = express();
app.use(express.json());

const todos = [];

// 목록 조회
app.get('/todos', (req, res) => {
    res.json(todos);
});

// 상세 조회
app.get('/todos/:id', (req, res) => {
    const id = req.params.id;
    const todo = todos[id];
    res.json(todo);
});

// 생성
app.post('/todos', (req, res) => {
    const newTodo = req.body;
    todos.push(newTodo);
    res.status(201).json(newTodo);
});

// 수정
app.put('/todos/:id', (req, res) => {
    const id = req.params.id;
    const updatedTodo = req.body;
    todos[id] = updatedTodo;
    res.json(updatedTodo);
});

// 삭제
app.delete('/todos/:id', (req, res) => {
    const id = req.params.id;
    todos.splice(id

ESM 모듈 예제

// math.js
export function add(a, b) {
  return a + b;
}

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



// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 출력: 8
console.log(subtract(10, 4)); // 출력: 6


-- 예제2: 투두리스트
import express from "express";
import joi from "joi";
import Todo from "../schemas/todo.schema.js ";

const router = express.Router();

/* Joi유효성 검사 */
// - value 데이터 - 필수적으로 존재
// - value 데이터 - 문자열
// - value 데이터 최소 1글자, 최대 50글자
// - validate 실패했을 때 error

const createdTodoSchema = joi.object({
  value: joi.string().min(1).max(50).required(),
});

/** 할일 등록 API */
router.post("/todos", async (req, res, next) => {
  try {
    // 1. 클라이언트로부터 받아온 value 데이터를 가져온다.
    // const { value } = req.body;

    const validation = await createdTodoSchema.validateAsync(req.body);
    const { value } = validation;

    // 1-5. 만약 클라이언트가 value 데이터를 전달하지 않았을 때, 클라이언트에게 에러 메시지를 전달한다.
    if (!value) {
      return res
        .status(400)
        .json({ errorMessage: "해야할 일(value) 데이터가 존재하지 않습니다." });
    }

    // 2. 해당하는 마지막 order 데이터를 조회한다.
    // todo.schema.js 의 model 을 통해서 가져왔다.
    // findOne 은 1개의 데이터만 조회.
    // sort 은 정렬한다. -> 어떤 컬럼을?
    const todoMaxorder = await Todo.findOne().sort("-order").exec();

    // 3. 만약 존재한다면 현재 해야할 일을 +1 하고, Order 데이터가 존재하지 않다면 1로 할당한다
    const order = todoMaxorder ? todoMaxorder.order + 1 : 1;

    // 4. 해야할 일 등록
    const todo = new Todo({ value, order }); // instance
    await todo.save(); // 실제로 데이터 베이스에 저장

    // 5. 해야할 일을 클라이언트에게 반환한다.
    return res.status(201).json({ todo: todo });
  } catch (error) {
    // * error-handler.middleware.js 로 이동 */
    // console.error(error);
    // // 예상한 에러인지 아닌지 검증
    // if (error.name === "ValidationError") {
    //     return res.status(400).json({ errorMessage: error.message });
    // }

    // return res.status(500).json({ errorMessage: "서버에서 에러가 발생했습니다." }); // 서버에서 문제가 발생

    // router 다음에 있는 에러 처리(error-handler middleware) 미들웨어를 호출한다.
    next(error);
  }
});

/** 해야할 일 목록 조회 API */
router.get("/todos", async (req, res, next) => {
  // 1. 해야할 일 목록 조회
  // todos.schema.js의 Todo 모델을 사용함
  const todos = await Todo.find().sort("-order").exec();

  // 2. 해야할 일 목록 조회 결과를 클라이언트에게 반환한다.
  return res.status(200).json({ todos });
});

// const TodoSchema = new mongoose.Schema({
//     // 해야할 일
//       value: {
//       type: String,
//       required: true, // value 필드는 필수 요소입니다.
//     },
//     // 할일의 순서
//     order: {
//       type: Number,
//       required: true, // order 필드 또한 필수 요소입니다.
//     },
//     // 완료 시점 timestamp
//     doneAt: {
//       type: Date, // doneAt 필드는 Date 타입을 가집니다.
//       required: false, // doneAt 필드는 필수 요소가 아닙니다.
//     },
//   });

/** 해야할 일 업데이트 (할일 순서, 완료/해제, 할일 변경) API */
router.patch("/todos/:todoId", async (req, res, next) => {
  // Todo ID를 가져온다.
  const { todoId } = req.params;
  const { order, done, value } = req.body;

  // 현재 나의 order가 무엇인지 알아야한다.
  const currentTodo = await Todo.findById(todoId).exec();
  // error message - 클라이언트가 전달한 투두가 없을 경우 에러메시지 반환
  if (!currentTodo) {
    return res
      .status(404)
      .json({ errorMessage: "존재하지 않는 해야할 일 입니다." });
  }
  // order가 존재한다면
  if (order) {
    const targetTodo = await Todo.findOne({ order }).exec(); // 바꾸길 희망하는 order에 데이터가 존재하는지 확인
    // 희망 order에 데이터가 존재한다면, swap을 해라.
    if (targetTodo) {
      targetTodo.order = currentTodo.order;
      await targetTodo.save();
    }
    currentTodo.order = order;
  }

  // 2. 완료/해제, 시간 추가
  // 완료가 없는 것이 아니면 UTC 포맷의 현재 시간을 할당한다.
  if (done != undefined) {
    currentTodo.doneAt = done ? new Date() : null;
  }

  // 3. 할일 내용 변경
  if (value) {
    currentTodo.value = value;
  }

  // 변경된 투두를 보낸다.
  await currentTodo.save();

  return res.status(200).json({});
});

/** 해야할 일 삭제 API */
router.delete("/todos/:todoId", async (req, res, next) => {
  const { todoId } = req.params;
  const todo = await Todo.findById(todoId).exec();
  // todo가 없다면 에러 메시지
  if (!todo) {
    return res
      .status(404)
      .json({ errorMessage: "존재하지 않는 해야할 일 정보입니다." });
  }
  await Todo.deleteOne({ _id: todoId });

  return res.status(200).json({});
});

export default router;

위 예제에서 math.js 파일은 ESM 모듈로 작성되었습니다. export 문을 사용하여 함수를 내보내고, main.js에서 import 문을 사용하여 해당 모듈을 불러옵니다. 이와 같이 ESM 모듈은 import와 export를 통해 모듈을 관리하며, 더욱 간결하고 효율적인 모듈 시스템을 제공합니다.

 

<ES Modules>
모듈을 비동기 환경에서 다운로드하며, import export 구문을 찾아서 파싱한다.
따라서 ES modules는 실행해보지 않아도 import, export 에러를 감지할 수 있다.
config를 type="module" 로 set 해주어야 사용할 수 있다.
top-level await가 가능하다.
 
 <Common JS>
require가 동기로 이루어지므로 promise를 return 하지 않는다.
따라서 CommonJS는 실행해보아야 import, export 에러를 감지할 수 있다.
기본 값이다.
top-level await가 불가능하다.

 

대표적인 두 가지의 모듈 시스템 중 CommonJS가 처음에 등장하였으나, 현재는 ES modules 모듈 시스템이 많이 사용되고 있다. CommonJS와 비교하여 ES modules는 비동기로 동작하여 속도가 빠르고 실제 사용되는 부분만을 import(tree shaking) 하여 메모리를 적게 차지하며, 가독성이 좋고 순환 의존성을 지원한다는 이점이 있다.

 

CJS, ESM 자세히 공부하기 위한 레퍼런스 블로그

https://hini7.tistory.com/226 

https://mong-blog.tistory.com/entry/JSModule-CommonJS%EC%99%80-ES-Modules%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C

 

Express.js

Express.js: Express.js는 Node.js 기반의 웹 프레임워크로, 웹 애플리케이션과 API를 더 쉽게 구축할 수 있도록 도와줍니다. Express.js는 Node.js의 강력한 기능을 기반으로 하면서, 라우팅, 미들웨어, 템플릿 엔진과 같은 다양한 기능을 제공합니다. 이렇게 함으로써 개발자는 웹 애플리케이션의 라우팅 및 기능 구현에 더 집중할 수 있습니다.

즉,Node.js 위에서 웹 앱플리케이션을 빠르고 효율적으로 개발하기 위한 웹 프레임워크

 

Express.js는 Node.js 기반의 웹 프레임워크로, 웹 및 API 애플리케이션을 더 쉽게 개발할 수 있도록 도와주는 도구입니다.

아래에서 Express.js의 주요 특징과 개념을 자세히 설명해보겠습니다:

  1. 라우팅 (Routing): Express.js는 라우팅을 통해 URL과 해당 URL에 연결된 함수(핸들러)를 매핑합니다. 이를 통해 클라이언트 요청이 어떤 경로로 들어오는지에 따라 적절한 응답을 생성할 수 있습니다.
  2. 미들웨어 (Middleware): 미들웨어는 Express.js의 중요한 개념 중 하나로, 클라이언트 요청과 서버 응답 사이에서 동작하는 함수입니다. 미들웨어를 사용하여 요청 데이터를 가공하거나 응답 데이터를 처리하며, 라우팅 핸들러에서 공통적으로 사용되는 로직을 분리할 수 있습니다.
  3. 템플릿 엔진 (Template Engine): Express.js는 템플릿 엔진을 통해 동적인 HTML을 생성할 수 있습니다. 대표적인 템플릿 엔진으로는 EJS, Pug(이전의 Jade), Handlebars 등이 있습니다.
  4. 정적 파일 서비스: Express.js는 정적 파일(이미지, 스타일시트, 자바스크립트 파일 등)을 서비스하는 기능을 내장하고 있습니다. 이를 통해 클라이언트에게 정적 파일을 직접 제공할 수 있습니다.
  5. 세션 관리와 쿠키: Express.js는 세션 관리와 쿠키 처리를 위한 미들웨어를 제공하여 사용자 상태 및 로그인 정보 등을 관리할 수 있습니다.
  6. HTTP 메서드 지원: Express.js는 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 서버와 클라이언트 간의 통신을 처리할 수 있습니다.
  7. 라우터 모듈화: Express.js에서는 라우터를 모듈화하여 각 기능별로 라우터를 작성하고, 이를 메인 애플리케이션에 마운트할 수 있습니다. 이를 통해 코드의 가독성과 유지 보수성을 높일 수 있습니다.
  8. RESTful API 지원: Express.js는 RESTful API를 개발하기 위한 기능과 패턴을 지원합니다. 이를 활용하여 클라이언트와 서버 간의 데이터 통신을 처리할 수 있습니다.
  9. 데이터베이스 연동: Express.js는 다양한 데이터베이스와 연동하여 데이터를 읽고 쓰는 작업을 처리할 수 있습니다. 대표적으로 MongoDB, MySQL, PostgreSQL 등을 사용할 수 있습니다.

위에서 나열한 9개의 항목 중에서 가장 중요한 개념들은 다음과 같습니다: 이 중에서도 라우팅, 미들웨어는 Express.js의 주요 특징이며 이를 통해 애플리케이션의 구조와 기능을 조직하고 확장할 수 있습니다.

  1. 라우팅 (Routing): Express.js의 핵심 기능 중 하나로, 클라이언트 요청의 경로에 따라 적절한 핸들러를 연결해주는 것입니다. 라우팅을 통해 애플리케이션의 다양한 기능을 분리하고 모듈화할 수 있습니다.
  2. 미들웨어 (Middleware): 미들웨어는 Express.js의 가장 강력하고 중요한 개념 중 하나입니다. 클라이언트 요청과 서버 응답의 중간에서 동작하는 함수로, 데이터 변환, 로깅, 에러 처리 등 다양한 작업을 수행할 수 있습니다.
  3. 템플릿 엔진 (Template Engine): 동적인 HTML 생성을 위해 사용되는 템플릿 엔진은 사용자에게 동적 콘텐츠를 제공하는 데 중요한 역할을 합니다.
  4. 정적 파일 서비스: 클라이언트에게 정적 파일(이미지, 스타일시트, 스크립트 등)을 제공하기 위한 기능으로, 웹 애플리케이션의 리소스 관리에 중요합니다.
  5. RESTful API 지원: Express.js는 RESTful API 개발을 위한 기능과 패턴을 지원하여 클라이언트와의 데이터 통신을 효율적으로 처리할 수 있습니다.

 

HTTP 메서드와 RESTful API의 관계는?

HTTP 메서드와 RESTful API는 서로 밀접한 관계를 가지고 있습니다. RESTful API는 HTTP 메서드를 활용하여 클라이언트와 서버 간의 통신을 처리하는 웹 서비스 디자인 패턴 중 하나입니다. HTTP 메서드는 RESTful 아키텍처의 구현에 중요한 역할을 합니다. 아래는 두 개념 간의 관계를 설명한 내용입니다:

  1. HTTP 메서드 (HTTP Methods): HTTP 프로토콜은 여러 종류의 메서드를 제공하는데, 각 메서드는 서버와 클라이언트 간의 특정 동작을 수행합니다. 가장 널리 사용되는 HTTP 메서드에는 GET, POST, PUT, DELETE 등이 있습니다. 예를 들어, GET은 리소스의 조회, POST는 리소스의 생성, PUT은 리소스의 수정, DELETE는 리소스의 삭제를 나타냅니다.
  2. RESTful API: RESTful 아키텍처는 Representational State Transfer의 약자로, 웹 애플리케이션 개발에서 사용되는 아키텍처 디자인 패턴입니다. 이 패턴은 클라이언트와 서버 간의 통신을 자원(resource)과 HTTP 메서드를 이용하여 설계합니다. 각 자원은 고유한 URI를 갖고, HTTP 메서드를 사용하여 해당 자원에 대한 작업을 수행합니다. 이렇게 하면 API의 구조가 일관되고 예측 가능하며, 리소스와 메서드 간의 매핑이 명확해집니다.

HTTP 메서드는 RESTful API 디자인에서 어떤 작업을 수행하는지를 정의하며, 이를 통해 클라이언트가 서버에 요청을 보내고 서버는 응답을 제공하는 프로세스를 구현합니다. 따라서 RESTful API의 각 엔드포인트는 해당 리소스와 연결된 특정 HTTP 메서드에 대한 동작을 정의하게 됩니다.

 

동적 데이터 정적 파일

"동적 데이터"와 "정적 파일"은 웹 애플리케이션에서 사용되는 두 가지 주요 요소를 나타내는 용어입니다.

  1. 동적 데이터 (Dynamic Data): 동적 데이터는 웹 페이지가 서버에서 생성되고 사용자의 요청에 따라 실시간으로 변경되는 데이터를 의미합니다. 예를 들어, 사용자의 로그인 정보, 게시글 목록, 댓글 등이 동적 데이터에 해당합니다. 서버 측에서 데이터베이스와 연동하여 정보를 가져와 웹 페이지에 동적으로 표시하는 것이 특징입니다. 이렇게 동적 데이터를 사용하면 사용자에게 맞춤화된 콘텐츠를 제공하거나 상호작용하는 웹 페이지를 구현할 수 있습니다.
  2. 정적 파일 (Static Files): 정적 파일은 웹 서버에 미리 저장되어 있는 파일로서, 서버 측에서 추가적인 가공 없이 클라이언트에게 바로 전송되는 파일을 의미합니다. 이러한 파일은 웹 페이지의 디자인, 스타일 시트(CSS), 클라이언트 사이드 스크립트(JS), 이미지, 폰트 등을 포함합니다. 정적 파일은 사용자 요청에 따라 변하지 않으며, 웹 서버에서 바로 전송되므로 빠르게 로딩되어 웹 페이지를 구성하는 데 기여합니다.

간단히 말하면, 동적 데이터는 서버 측에서 동적으로 생성되고 처리되는 데이터이며, 정적 파일은 이미 생성된 파일들로 웹 서버에 저장되어 클라이언트에게 전달되는 파일들입니다. 이 두 가지 요소는 현대 웹 애플리케이션에서 중요한 역할을 하며, 사용자에게 다양한 기능과 콘텐츠를 제공하는 데 활용됩니다.

 

 

템플릿 엔진(template engine)

  • 아직 배우지 않은 내용

템플릿 엔진(Template Engine)은 웹 애플리케이션에서 동적으로 생성되는 HTML, XML, 텍스트 등의 문서를 생성하기 위해 사용되는 도구나 라이브러리입니다. 템플릿 엔진은 정적인 HTML 문서 내에 동적인 데이터를 삽입하거나, 반복문, 조건문과 같은 제어 구조를 사용하여 동적인 컨텐츠를 생성하는 데 도움을 주는 도구입니다.

 

주요 목적은 웹 애플리케이션에서 데이터와 마크업을 분리하여 유지보수성을 향상시키고, 템플릿 코드의 재사용성을 높이는 것입니다. 템플릿 엔진은 특정 문법을 사용하여 템플릿과 데이터를 결합하여 최종적인 출력 문서를 생성합니다.

일반적으로 템플릿 엔진은 다음과 같은 기능을 제공합니다:

  1. 변수 삽입: 템플릿 내에서 데이터 값을 쉽게 출력할 수 있도록 변수를 삽입할 수 있습니다.
  2. 조건문 및 반복문: if문, for문과 같은 제어 구조를 사용하여 동적인 컨텐츠를 생성할 수 있습니다.
  3. 뷰 로직 분리: 템플릿 엔진을 사용하면 프론트엔드와 백엔드의 역할을 명확하게 분리할 수 있습니다.
  4. 템플릿 상속: 공통된 레이아웃을 정의하고, 여러 페이지에서 해당 레이아웃을 확장하여 사용할 수 있습니다.
  5. 필터 및 함수: 텍스트 포맷팅이나 데이터 가공을 위해 필터(Filter)나 함수(Function)를 사용할 수 있습니다.

주요 템플릿 엔진에는 Mustache, Handlebars, EJS, Jade/Pug, Nunjucks, Jinja 등이 있으며, 각각 다양한 문법과 기능을 제공합니다. 이러한 템플릿 엔진은 웹 프레임워크나 라이브러리와 함께 사용되어 동적인 웹 페이지의 생성과 효율적인 코드 관리를 도와줍니다.

 

Handlerbars -> mustache -> pug 순으로 많이 사용되는 것 같다.

handlerbars를 좀 찾아서 공부해봤는데... 아직 모르는게 너무 많아서 이해가 잘 안되기 때문에 템플릿 엔진이 있다는 것을 알게된 상태에서 2보전진을 위한 1보후퇴를 한다.

 

RESTful API

 

기본 개념 이해:

  • HTTP 메서드 (GET, POST, PUT, DELETE)의 역할과 사용법을 이해합니다.
  • 리소스와 URI의 개념을 이해하고, 리소스를 어떻게 표현할지 결정합니다.
  • 상태 코드 (HTTP status code)의 의미와 사용법을 파악합니다

RESTful API는 Representational State Transfer의 약자로, 웹 서비스에서 리소스를 표현하고 해당 리소스에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행하기 위한 아키텍처 스타일입니다. REST는 클라이언트와 서버 간의 통신을 위한 규칙과 제약을 정의하여 상호작용을 가능하게 합니다.

RESTful API는 몇 가지 핵심 원칙을 따르며, 이를 통해 간단하고 일관된 인터페이스를 제공합니다.

  1. 리소스(자원): 모든 것을 리소스로 표현합니다. 예를 들어, To-Do 애플리케이션에서 할일은 하나의 리소스로 간주됩니다.
  2. HTTP 메서드: HTTP 동사(메서드)를 사용하여 리소스에 대한 동작을 나타냅니다.
    • GET: 리소스 조회
    • POST: 리소스 생성
    • PUT: 리소스 전체 수정
    • PATCH: 리소스 일부 수정
    • DELETE: 리소스 삭제
  3. URI (Uniform Resource Identifier): 각 리소스를 고유한 식별자인 URI로 표현합니다. 예를 들어, /todos는 할일 목록을 나타냅니다.
  4. 표현(Representation): 클라이언트와 서버 간에 주고받는 데이터는 JSON 또는 XML과 같은 형식으로 표현됩니다.
  5. 상태 전이(Stateless): 서버는 클라이언트의 상태를 관리하지 않습니다. 각 요청은 독립적이며, 요청 간에 정보가 공유되지 않습니다.
  6. 캐시 가능(Cacheable): 서버 응답은 캐시될 수 있어야 합니다. 클라이언트는 캐시된 데이터를 재사용하여 성능을 향상시킬 수 있습니다.
  7. 계층화(Layered System): 클라이언트는 서버와 직접 통신하며, 중간에 레이어(로드 밸런서, 캐시 등)를 사용하여 확장성과 보안을 개선할 수 있습니다.

 

기본 예시 

  1. 할일 생성 (POST /todos):
    • 요청: { "value": "Buy groceries" }
    • 응답: { "id": 1, "value": "Buy groceries", "done": false }
  2. 할일 목록 조회 (GET /todos):
    • 응답: [{ "id": 1, "value": "Buy groceries", "done": false }, ...]
  3. 할일 상세 조회 (GET /todos/:id):
    • 응답: { "id": 1, "value": "Buy groceries", "done": false }
  4. 할일 업데이트 (PATCH /todos/:id):
    • 요청: { "value": "Buy vegetables" }
    • 응답: { "id": 1, "value": "Buy vegetables", "done": false }
  5. 할일 완료 처리 (PATCH /todos/:id):
    • 요청: { "done": true }
    • 응답: { "id": 1, "value": "Buy vegetables", "done": true }
  6. 할일 삭제 (DELETE /todos/:id):
    • 응답: { "message": "Todo deleted successfully" }

 

회고

  • 항해99 본 코스가 시작되고 2주일이 지났다.
  • 2주차인 알고리즘 마치고 3주차에 (주특기 Node.js 1주)에 돌입했다.
  • 알고리즘 문제를 풀면서 조건문, 반복문 그 외 여러가지 문법 등에 익숙해져서 너무 좋다. 앞으로도 코드카타를 하면서 스시 장인이 생선 손질하듯이 능수능란하게 코드를 짤 수 있게 되게 연마하고 싶다.
  • 금요일부터 금,토, 일에 걸쳐서 Node.js 주특기 1주차에 주어지는 2강 (1,2주차) 을 완료했다.
  • API를 만들고 AWS를 이용해서 실제로 세상에 공개되는 제품을 만들 수 있다는 생각에 마음이 들떠 꽤 빠른 속도로 강의를 완료했다
  • 사실 일요일 밤까지 개인과제 Lv1을 마치고 싶었는데.. 일요일 오후에 약간 머리를 식히고 운동도 하면서 보내기로 결정하였다.
  • 그래도 강의를 통해서 예전에 구매해두었던 도메인에 API + backend 코드를 붙이는 경험을 해보니 기분이 좋았다.
  • 물론 backend 코드가 완전히 몸에 체득 된건 아니지만 내일 개인 과제를 하고 그 후 또 만들고 싶은 제품도 가능한 범위내에서 한번 만들어보면서 API 짜는 것 등을 최대한 눈과 몸에 익혀야겠다.

http://43.201.115.242:3000/

http://everythingstudygroup.xyz:3000/

 

React App

 

everythingstudygroup.xyz:3000

 

  • 8월1일 시작했던 것 같은데 벌써 8월도 끝나가고 끝없이 더울 것만 같았던 여름도... 이제 아침/밤으로는 쌀쌀해지기 시작한 가을이 되가고 있는 것 같다. 2주란 시간동안 정말 다들 열심히 하시는것같아서 나도 자극받고 무언가에 열중해서 깊게 파볼 수 있다는게 너무 감사한 경험인 듯 싶다. 
  • 처음 시작할 때 했던 마음인 "나중에 후회하는 시간의 양을 minimize하자" 를 다시 한 번 remind 하면서 글을 마친다.