Front End/Web
REST API
🌐REST APIREST API 성숙도 모델0단계 : HTTP 프로토콜 사용1단계 : 개별 리소스와의 통신 준수2단계 : HTTP 메서드 원칙 준수3단계 : HATEOAS 원칙 준수Open APIAPI KeyREST APIREST API에서 REST는 Representational State Transfer의 약자로, 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고 HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 의미한다. HTTP 프로토콜을 기반으로 요청과 응답에 따라 리소스를 주고 받기 위해서는 API를 알아보기 쉽게 잘 작성하는 것이 중요하다. REST는 이를 위한 리소스 중심의 일종의 방법론이자 아키텍처(API를 설계하고 구축하는데 사용하는 패턴과 기술)이라 볼..
웹 어플리케이션 아키텍쳐
🌐클라이언트와 서버클라이언트-서버 아키텍쳐 (2-Tier Architecture)3티어 아키텍쳐 (3-Tier Architecture)프론트엔드와 백엔드클라이언트와 서버의 종류클라이언트-서버 통신과 API프로토콜웹 어플리케이션 프로토콜 : HTTPAPI (Application Programming Interface)HTTP API 디자인을 잘 하는 법클라이언트와 서버클라이언트-서버 아키텍쳐 (2-Tier Architecture)(실제로 존재할 수는 없지만)서버와 존재하지 않는 쇼핑몰 어플리케이션이 있다고 가정해보자. 이 어플리케이션은 서버와 통신하는 것이 아닌, 상품의 가격, 상세 정보, 목록 등 모든 데이터가 어플 내에 내장되어 있다. 이런 경우라면 끊임없이 업데이트가 진행되어야 할 것이다. 새로운 상..
HTTP
🌐HTTP (HyperText Transfer Protocol)HTTP MessagesHTTP RequestsStart lineHeadersBodyHTTP ResponsesStatus lineHeadersBodyHTTP (HyperText Transfer Protocol)HTTP는 HTML과 같은 문서를 전송하기 위한 프로토콜이며, 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. 전통적인 클라이언트-서버 모델(2-Tier 아키텍쳐)에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면 서버도 HTTP Messages 양식에 맞춰 응답한다.HTTP MessagesHTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이며, 요청(Requests)과 응답(Response..
[Web Server] CORS
🌐SOPSOP가 생긴 이유SOP는 보안을 위한 정책. 하지만…CORSCORS의 동작 방식1. 프리플라이트 요청 (Preflight Request)2. 단순 요청 (Simple Request)3. 인증정보를 포함한 요청 (Credentialed Request)CORS 설정 방법Node.js 서버Express 서버SOPSOP는 Same-Origin Policy의 줄임말로, 동일 출처 정책을 뜻한다. 한 마디로 ‘같은 출처의 리소스만 공유가 가능하다’는 정책으로 여기서 출처는 프로토콜, 호스트, 포트의 조합으로 되어 있다. 이 중 하나라도 다르다면 동일한 출처로 보지 않는다.ex. https://ninefloor.com :e http://ninefloor.com → 프로토콜이 다르기 때문에 동일 출처가 아님 ..
[Web Server] Express
Express설치 및 간단 사용법설치간단 사용법라우팅라우트 메서드 METHOD라우트 경로 PATH라우트 핸들러 HANDLER응답 메서드 res.미들웨어미들웨어 함수미들웨어 사용서버 작성에 필요한 APIexpress.json()req.queryreq.paramscorsExpressExpress는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크이다. Node.js HTTP 모듈로 작성한 서버와 달리 미들웨어를 추가 할 수 있고, 라우터를 제공하기 때문에 서버를 작성하는 측면에서 편의성이 증대되고 효율적이다.🌟MERN stack? JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB(데이터베이스), Express(서버), React(SPA), Node.js..