Elice SW 2/TIL

DAY 31 - TIL

자이구 2022. 5. 19. 01:33

Controller 

기존의 코드를 다음 페이지의 모듈 형태로 구현

// index.js
const express = require('express');
const router = express.Router();
const mainController = require('../controller/main');

/* GET home page. */
// router.get('/', function(req, res, next) {
//   res.render('index', { title: 'Express' });
// });

//controller 적용
router.get('/',mainController.mainscreen);

module.exports = router;
// ../controller/main.js

const mainscreen = (req,res) => {
    res.render('index', { title: 'Express' });
}

module.exports = {
    mainscreen
}

 

REST API

  • 일반적인 웹 방식의 호출에선 html 데이터를 반환
  • 브라우저가 아닌 다른 기기에선 html을 읽을 수 없음
  • 모든 기기에서 호응 가능한 데이터만을 주고 받을 수 있도록 제작한 API
  • HTTP URI를 통해 자원을 명시하고, HTTP METHOD를 통해 해당 자원에 대한 CRUD를 적요하는 것을 의미

 

REST 구성 

  • 자원(RESOURCE) - URI
  • 행위(Verb) - HTTP METHOD
  • 표현(Representations)

REST 의 특징

 

Uniform (유니폼 인터페이스)

  • URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일

 

Stateless (무상태성)

  • 작업을 위한 상태정보를 따로 저장하고 관리하지 않음
  • 세션 정보나 쿠키정보를 별도로 저장하고 관리하지 않으므로  API 서버는 들어오는 요청만을 처리
  • 서비스의 자유도가 높고 서버에서 불필요한 정보를 관리하지 않음으로써 구현이 단순

 

Cacheable (캐시 가능)

  • HTTP를그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능(캐싱 기능이 적용)
  • HTTP 프로토콜 표준에서 사용하는 Last-Modified태그나 E-Tag를 이용하면 캐싱 구현이 가능

 

Self-descriptiveness (자체 표현 구조)

  •  REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있음

 

Client - Server 구조

  • API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조
  • 각각의 역할이 확실히 구분
  • 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어듦

 

계층형 구조

  • REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 가능
  • PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용 가능

 

REST API 디자인 가이드

  • URI는 정보의 자원을 표현
  • 자원에 대한 행위는 HTTP Method(GET, POST, PUT, DELETE)로 표현

참고 문헌 : REST API 제대로 알고 사용하기 : NHN Cloud Meetup (toast.com)

 

REST API 제대로 알고 사용하기 : NHN Cloud Meetup

REST API 제대로 알고 사용하기

meetup.toast.com

 

데이터 속성 사용하기

  • HTML5 특정 요소와 연관되어 있지만 확정된 의미는 갖지 않는 데이터에 대한 확장 가능성을 염두에 두고 디자인
  • data-* 속성은 표준이 아닌 속성이나 추가적인 DOM 속성, 
  • Node.setUserData()과 같은 다른 조작을 하지 않고도, 의미론적 표준 HTML 요소에 추가 정보를 저장
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <a data-doc="hi" class="delete">지우기</a>
</body>
<script>
    const trashcan = document.querySelector('a.delete');
    trashcan.addEventListener('click', (e) => {
      const endpoint = `/expost/del/${trashcan.dataset.doc}`;
      fetch(endpoint, {
        method: 'DELETE',
      })
      .then(response => response.json())
      .then(data => window.location.href = data.redirect)
      .catch(err => console.log(err));
    });

  </script>
</html>

 

COLS

참고 문헌 : https://inpa.tistory.com/entry/WEB-%F0%9F%93%9A-CORS-%F0%9F%92%AF-%EC%A0%95%EB%A6%AC-%ED%95%B4%EA%B2%B0-%EB%B0%A9%EB%B2%95-%F0%9F%91%8F

 

[WEB] 📚 CORS 개념 💯 완벽 정리 & 해결 방법 👏

CORS(Cross Origin Resource Sharing) CORS 정책은 우리가 가져오는 리소스들이 안전한지 검사하는 관문이다. 웹개발을 하는 사람들은 이 CORS 정책위반으로 인해 에러가 나는 상황을 많이들 겪어봤을것이라

inpa.tistory.com