Namu Study

JWT를 사용하는 이유 JSON 객체 데이터를 안전하게 전송할 때 JWT는 데이터를 키로 서명해서 토큰을 생성한다. 사용자의 Authorization 헤더 정보로 인증과 정보 조회를 진행할 때 SWT(Simple Web Token), SAML(Security Assertion Marup Language Tokens)과 비교 SAML에 비해 사이즈가 작습니다. SWT는 대칭키를 이용한 서명만 가능합니다. JWT와 SAML은 공개키/비공개키를 이용한 인증이 가능합니다. JWT 구조 Header 일반적으로 헤더는 두 영역(토큰 타입, 암호화 알고리즘)을 포함합니다. 헤더는 Base64로 인코딩되어 JWT에 포함됩니다. Payload 페이로드에는 사용자가 작성한 데이터를 포함합니다. 페이로드는 Base 64로 ..

Routing은 클라이언트의 요청 조건에 대응해 응답하는 방식을 결정하는 것 입니다. Router는 클라이언트의 요청을 쉽게 처리할 수 있게 도와주는 Express의 기본 기능입니다. app.js에서 routing을 바로 수행해도 되지만 router를 사용하면 기능별로 route를 쪼갤 수 있고 app.js의 코드가 길어지는 것을 방지할 수 있다. Router는 미들웨어 기반으로 구현된 객체이므로 미들웨어와 동일한 방식으로 작동됩니다. 사용방법 별도의 js파일 생성 미들웨어 사용과 유사한 형식으로 router 사용을 위한 코드작성 app.js에서 router를 사용할 수 있게 exports app.js에서 router코드를 받기 특정 경로를 통한 요청은 router를 이용해서 응답

웹 서버에서 클라이언트의 모든 요청에 대해 공통적인 처리를 하고싶을 때 사용합니다. (파이프 역할) 브라우저가 보낸 데이터를 쉽게 사용할 수 있게 변경하기 위해 사용합니다. (전처리, 에러 처리 역할 도 같이 수행) Apache, Nginx 같은 웹 서버에도 모듈이라는 매우 유사한 개념이 있습니다. 미들웨어의 기본 형태 app.use((req, res, next) => { // 필요한 코드 }); req: request HTTP Headers, Query Parameters, URL 등 브라우저가 서버로 보내는 정보들이 담겨 있습니다. res: response 어떤 HTTP Status Code로 응답 할지, 어떤 데이터 형식으로 응답 할지, 헤더는 어떤 값을 넣어 응답 할지 다양한 기능을 제공합니다. ..

Express.js란? Express.js는 node.js로 서버를 빠르고 간편하게 만들 수 있게 도와주는 웹 프레임워크 입니다. 터미널에서 express 설치하기 npm i express express를 이용한 간단한 app.js 서버 코드 const express = require("express"); const app = express(); const port = 3000; app.get('/', (req, res) => { res.send("Hello World"); }); app.listen(port, () => { console.log(port, "포트로 서버가 켜졌어요!") }); //실행은 powershell 터미널에서 node app.js Express 미들웨어: https://expre..

웹 서버란? 인터넷에서 HTTP를 이용한 클라이언트의 요청에 응답하는 컴퓨터 이메일, 웹 사이트 등 대부분의 인터넷을 이용한 서비스는 웹 서버를 통해 사용할 수 있습니다. 웹 서버의 기본 동작 원리 브라우저를 통해 HTTP request로 웹사이트를 웹서버에 요청합니다. 웹 서버는 요청을 승인하고 HTTP response를 통해 웹 사이트 데이터를 브라우저에 전송합니다. 브라우저는 서버에서 받은 데이터를 이용해 웹사이트를 브라우저에 그립니다. 자세한 내용은 브라우저의 개발자 도구의 네트워크 탭에서 확인할 수도 있습니다.

HTTP 데이터를 주고 받는 양식을 정의한 프로토콜(통신규약)입니다. 매우 범용적인 양식을 가지고 있어 전 세계에서 제일 널리 쓰이는 프로토콜입니다. HTTP가 데이터를 주고 받는 방법 Request, Response라는 개념이 존재합니다. request하면 response가 있어야합니다. 서버와 브라우저의 관계 브라우저(클라이언트)는 서버에게 자신이 원하는 페이지(URL 등의 정보)를 요구(Request)합니다. 서버는 브라우저가 원하는 페이지가 있는지 확인하고, 있다면 해당 페이지에 대한 데이터를 반환(Response)해줍니다. 없다면 없는 페이지에 대한 데이터를 반환합니다. (404에러 관련 페이지) 브라우저는 서버에게 전달 받은 데이터를 기반으로 브라우저에 그려줍니다. 상태를 저장하지 않습니다.(..

Application Programming Interface 서버와 클라이언트가 상호 작용하기 위한 도구, 네트워크 상에서 데이터를 주고 받으며 개발자가 원하는 기능을 구현하기 위해서 사용된다. API는 웹에서 주로 사용하는데 클라이언트가 서버에 요청을 보낼 때는 HTTP 요청 메서드를 주로 사용한다. 이 중에 가장 자주 사용하는 것이 GET과 POST다. 클라이언트의 GET 요청은 서버에서 데이터를 받아오고 POST 요청은 서버의 상태에 변화를 줄 수 있다. API 작성 웹 APP(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미 작성 할 API에서 원하는 데이터를 받아 데이터베이스에 데이터를 저장하고, 저장되어 있는 데이터를 읽어서 프론트엔드에 데이터를 제공해서 사용자가 원..

Jason Web Token Jason 또는 평문을 서명(JWS)하거나 암호화(JWE) 한다. [RFC7519] 이번 프로젝트에서는 패스워드를 SHA256으로 암호화해서 DB에 저장하고, 서명이 들어간 토큰을 클라이언트에게 전달하기 위해서 JWT를 사용했습니다. Flask에 JWT를 사용했습니다. PyJWT를 설치했습니다. 로그인이 성공한 경우 저장된 쿠키(토큰) //JWT import import jwt //JWT 서명 과정에서 키를 사용합니다. 키 값은 자유롭게 지정할 수 있습니다. SECRET_KEY = 'SPARTA' //로그인은 POST 방식으로 진행합니다. $.ajax({ type: "POST", url: "/sign_in", data: { //username을 user_give로 전달 use..

Bulma 링크 https://bulma.io/documentation/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free. bulma.io

HTTP는 connectionless, stateless 특성을 가지고있음 쿠키와 세션은 이 특성으로 인한 문제를 보완하기 위해서 사용한다. connectionless 클라이언트가 요청에 응답을 받으면 연결을 끝는 특성 Keep-alive라는 값을 헤더에 넣어서 연결을 재활용 할 수 있다. Keep-alive는 HTTP1.1에서 디폴트(현재 버전은HTTP2와 HTTPS) stateless 연결(클라이언트와 서버의 통신)이 끝나면 상태 정보를 유지하지 않는 특성 쿠키 클라이언트의 브라우저에서 지정한 로컬 경로에 파일로 저장됩니다. 쿠키가 유효한 기간을 명시할 수 있습니다. 유효 시간을 명시하면 브라우저가 종료되도 쿠키가 유효하며 인증이 가능합니다. Response Header에 Set-Cookie 속성을 ..