8/29 TIL : JSDoc, 프레임워크 없이 CRUD 구현, JS module

🔎 JSDoc /** */

• 특정 형태로 주석을 달면 주석 내용을 통해 함수의 기능, 매개 변수 타입 등을 미리 알려줄 수 있음
• 거의 표준화가 되어서 vsCode, webstorm 등에서 기본으로 기능 제공

/**
 * @param {string} name 이름
 * @param {number} age 나이
 * @returns 이름과 나이를 받아서 문자열로 출력합니다.
 * @todo 새로운 매개변수 추가
 * @deprecated
 */
function hello(name, age) {
  return `내 이름은 ${name}이고 나이는 ${age}세 입니다.`;
}

 

🚩 JSDoc 부가 기능

• @todo : 메모처럼 사용
• @deprecated : 더 이상 해당 기능을 사용하지 않을 때
• @type { 타입 형태 } : 변수에 특정
• @typedef : JSDoc의 내용을 변수처럼 선언해 놓고 @type { }로 다른 곳에서 사용 가능

/** @type {string} */
const test = 'hy';

/**
 * @typedef Post
 * @property {number} id
 * @property {string} title
 * @property {string} content
 */

/** @type {Post} */
const post = {
  id: 1,
  title: '제목',
  content: '내용',
};

---

🔎 프레임워크 없이 블로그 CRUD 구현하기

// @ts-check
const http = require('http');

// DB 없으므로 데이터 변수 선언
const posts = [
  {
    id: 1,
    title: 'first',
    content: 'hello, back-end',
  },
  {
    id: 2,
    title: 'second',
    content: 'hello, back-end',
  },
  {
    id: 3,
    title: 'third',
    content: 'hello, back-end',
  },
];

// 서버 정의
const server = http.createServer((req, res) => {
  res.setHeader('Content-Type', 'application/json; charset=utf-8');

  const urlArr = req.url ? req.url.split('/') : [];
  let id = -1;
  if (urlArr.length > 2) id = parseInt(urlArr[2], 10);

  /**
   * 블로그용 서버 API 구성
   *
   * GET /posts 목록 가져오기
   * GET /posts/:id 글 내용 가져오기
   * POST /posts 새로운 글 올리기
   * PUT /posts/:id 기존 글 수정하기
   * DELETE /posts/:id 기존 글 삭제하기
   */
  if (req.url === '/posts' && req.method === 'GET') {
    const result = {
      posts: posts.map((post) => ({
        id: post.id,
        title: post.title,
        content: post.content,
      })),
      totalCount: posts.length,
    };

    res.statusCode = 200;
    res.end(JSON.stringify(result));
    console.log('블로그의 글 목록을 가져오는 API 입니다.');
  } else if (id !== -1 && req.method === 'GET') {
    const result = posts.find((post) => post.id === id);

    if (result) {
      res.statusCode = 200;
      res.end(JSON.stringify(result));
      console.log('블로그의 특정 글 내용을 가져오는 API 입니다.');
    } else {
      res.statusCode = 404;
      res.end('포스트를 찾을 수 없습니다.');
      console.log('해당 id를 가지는 포스트를 찾을 수 없습니다.');
    }
  } else if (req.url === '/posts' && req.method === 'POST') {
    req.setEncoding('utf-8');
    req.on('data', (data) => {
      const newPost = JSON.parse(data);
      posts.push({
        id: posts[posts.length - 1].id + 1,
        title: newPost.title,
        content: newPost.content,
      });
    });

    res.statusCode = 200;
    res.end('새로운 글이 등록되었습니다.');
    console.log('블로그의 글을 올릴 때 호출할 API 입니다.');
  } else if (id !== -1 && req.method === 'PUT') {
    const result = posts.find((post) => post.id === id);

    if (result) {
      req.setEncoding('utf-8');
      req.on('data', (data) => {
        const modiPost = JSON.parse(data);
        if (modiPost.title) posts[id - 1].title = modiPost.title;
        if (modiPost.content) posts[id - 1].content = modiPost.content;
      });

      res.end('글이 수정되었습니다.');
      res.statusCode = 200;
      console.log('블로그의 글을 수정할 때 호출할 API 입니다.');
    } else {
      res.statusCode = 404;
      res.end('포스트를 찾을 수 없습니다.');
      console.log('해당 id를 가지는 포스트를 찾을 수 없습니다.');
    }
  } else if (id !== -1 && req.method === 'DELETE') {
    const result = posts.find((post) => post.id === id);

    if (result) {
      posts.splice(id - 1, 1);

      res.statusCode = 200;
      res.end('글이 삭제되었습니다.');
      console.log('블로그의 글을 삭제할 때 호출할 API 입니다.');
    } else {
      res.statusCode = 404;
      res.end('포스트를 찾을 수 없습니다.');
      console.log('해당 id를 가지는 포스트를 찾을 수 없습니다.');
    }
  } else {
    res.statusCode = 400;
    res.end('NOT FOUND');
    console.log('해당 API를 찾을 수 없습니다.');
  }
});

// 서버 실행
const PORT = 4000;
server.listen(PORT, () => {
  console.log(`해당 서버는 ${PORT}번 포트에서 작동 중입니다.`); // 서버 콘솔
});

 

🔎 Code Refactoring: 프로그램의 동작은 변화시키지 않고 내부 구조를 개선하는것

• 원시기술 -> 새로운 기술
• 코드 비효율 -> 효율(반복문 줄이기, 중복 기능 제거, 메모리 효율 증대)
• 코드 가독성, 확장성 높이기

 

🔎 JS Module

🚩 CommonJS 방식

• node.js에서 사용되는 모듈 방식
• require / exports

1. 전체 모듈로써 내보내고, 전체를 하나의 obj로 받아서 사용하는 방법

// animal.js
const animals = ['dog', 'cat'];
function showAnimals() {
  animals.map((el) => console.log(el));
}
module.exports = {
  animals,
  showAnimals,
};

// module.js
const animals = require('./animals');
console.log(animals.animals);
animals.showAnimals();

2. 내보내고 싶은 것(변수, 함수, 클래스 등)에 exports를 붙여서 내보내고, 각각을 따로 선언해서 가져오는 방법

// animal.js
const animals = ['dog', 'cat'];
exports.animals = animals;
exports.showAnimals = function showAnimals() {
  animals.map((el) => console.log(el));
};

// module.js
const { animals, showAnimals } = require('./animals');
console.log(animals);
showAnimals();

 

🚩 ES6방식

• 2015년에 ES6가 업데이트되면서 추가된 방식
• 브라우저에서 구동되는 js에 대한 문법이기 때문에 node.js에서 사용하려면 별도 처리 필요
• package.json에 "type": "module" 추가하면 사용 가능
• import / export

1. 선언부에 export 사용

// animal.js
export const animals = ['dog', 'cat'];
export function showAnimals() {
  animals.map((el) => console.log(el));
}

// module.js
import { animals, showAnimals } from './animals.js';
console.log(animals);
showAnimals();

2. 마지막에 export 사용

// animal.js
const animals = ['dog', 'cat'];
function showAnimals() {
  animals.map((el) => console.log(el));
}
export { animals, showAnimals };

// module.js
import { animals, showAnimals } from './animals.js';
console.log(animals);
showAnimals();

• 가져올 것들이 많으면 * as를 사용

import * as animals from './animals.js';
console.log(animals.animals);
animals.showAnimals();

• 모듈이름을 바꾸고 싶으면 모듈이름 as 새로운모듈이름 으로 변경

// import
import { animals as ani, showAnimals as show } from './animals.js';
console.log(ani);
show();

// export
const animals = ['dog', 'cat'];
function showAnimals() {
  animals.map((el) => console.log(el));
}
export { animals as ani, showAnimals as show };

1. 복수의 export가 있는 라이브러리 형태의 모듈

2. 파일 하나에 하나의 개체(obj, class)만 있는 모듈 - export default

// animal.js
export default class Animal {
  constructor() {
    this.animals = ['dog', 'cat'];
  }

  showAnimals() {
    this.animals.map((el) => console.log(el));
  }
}

// module.js
import Animal from './animals.js';
const ani = new Animal();
console.log(ani.animals);
ani.showAnimals();