알고 넘어가자 : jwt

* Json Web Token(JWT)란? 토큰 기반의 인증 시스템이다. json객체를 사용하며, 자가수용적인(self-contained) 방식으로 정보를 안정성 있게 전달해준다. jwt는 웹 표준이며, 수 많은 프로그래밍 언어에서 지원된다. 주로 회원인증 및 권환 등에서 사용한다. # self-contained 방식 : 독립적인, 자기 완결적 방식. # jwt 구조 : Header.Payload.Signautre 의 형태로 구성(.포함)되어 있다. Header(헤더) : alg는 Signautre를 해싱하기 위한 알고리즘 지정하는 곳이다. { 'typ' : JWT, // 토근의 타입 'alg' : 'HS256' // HMAC SHA256 or RSA 사용 } # Payload(정보) : 토큰에서 사용 할 클레임(Claim)이 담겨있다. registered(등록), public(공개), private(비공개) 클레임 조각으로 구성되어 있다. ## registered claim options : - iss(Issuer) : 발행자 - sub(Subject) : 제목 - aud(Audience) : 대상자 - exp(Expiration Time) : 만료 시간 - nbf(Not Before) : 토큰 활성 유효 날짜 - iat(Issued At) : 토큰 발급 시간 - jti(JWT ID) : 토큰 식별자(중복방지, 일회용 토큰 사용시) ## public claim : 충돌이 방지된 이름을 사용해야하며, 이를 위해 URI를 이용한다. ## private claim : 서버와 클라이언트 사이의 임의로 지정한 사용자 정의 클레임이다. 정의된 이름이 중복 될 수 있으므로, 주의한다. # Signautre(서명) : 토큰을 인코딩하거나 유효성 검증을 할 때 사용하는 고유한 암호화 코드이다. 헤더의 인코딩 값과 정보의 인코딩 값을 합친 후 주어진 비밀 키로 해싱하여 코드를 생성한다. # JWT 주의사항 - 정보 자체는 암호화 된 것이 아니라 BASE64로 인코딩 된 것이다. 중간에 정보를 탈취하여 디코딩하면 데이터를 볼 수 있으므로, JWE로 암호화 하거나 Payload에 중요 데이터를 넣지 않아야 한다. - 토큰은 한번 만들어지면 삭제하는 것이 불가능하므로, 토큰의 만료 시간을 꼭 넣어주어야 한다.

알고 넘어가자 : router

* Router 란? 리액트는 SPA (Single Page Application) 방식이다. 여러개의 페이지로 구성 된 MPA(Multi Page Application) 방식과는 다르게 SPA 방식은 하나의 페이지 안에 필요한 데이터만 다시 렌더링 한다. MPA 방식은 새 페이지 요청시 정적 리소스가 다운로드 되고, 전체 페이지를 다시 렌더링 하기때문에 페이지 이동시 화면 깜빡임이 존재한다. 리액트 라우터를 사용하면 페이지 깜빡임 없이 필요한 내용만 다시 그려줄 수 있고 페이지 이동도 가능하다. # router, router-dom, router-native React-router 웹,앱 개발 컴포넌트 React-router-dom 웹 개발 컴포넌트 React-router-native 앱 개발 컴포넌트 # DOM Router HashRouter : 주소 사이에 Hash(#)가 붙는다 'www.000.com/#/login'. 해시 이전의 주소에 대한 요청을하기 때문에 서버 요청이 필요하지 않은 페이지에 주로 사용한다. HashRouter 사용시 링크 에러가 발생할 수 있고, 검색엔진에서 탐색되지 않는다. 새로고침시 에러가 발생하지 않는다. BrowserRouter : HTML5의 history API를 활용하여 UI를 업데이트 한다. request와 _response로 구성되기 때문에 동적인 페이지에 적합하다. 새로고침시 경로를 찾지 못해 에러가 발생한다. # 리액트에서 라우트 사용시 유의사항 : 1. Route 태그는 BrowserRouter 태그 안에 작성되어야 한다. 2. path 지정시 "/"로 설정된 값은 exact를 사용하여 중복을 방지한다. 3. link 태그 사용시 path를 공유하는 Route태그가 존재해야 한다.

알고 넘어가자 : typescript

* typescript 란? typescript는 MicroSoft에서 만든 javascript의 확장언어이다. javascript의 특성을 침범하지 않고 ECMA Script(ES)의 최신 표준을 지원한다. typescript는 정적언어(static type language)로 컴파일 속도가 빠르지 않지만 타입 안정성이 보장되고 javascript는 동적언어(dynamic type language)로 컴파일 속도가 빠르지만 타입 안정성이 보장되지 않는다. # 특징 javascript의 var 같은 자료형 대신, string, number와 같은 자료형을 지정함으로써 안정성을 확보한다. typescript를 설치할 때 같이 설치되는 tsc(TypeScriptCompiler)는 컴파일 과정에서 타입 검사를 통해 에러 없이 안정성이 확보되면 타입들을 제거하고 최종적으로 자바스크립트 코드를 생성한다. # 장점 1_기존 자바스크립트 엔진의 최적화를 돕고, ECMA 표준을 지원한다. 1_타입에 대한 예외 처리를 하지 않아도 된다. 타입스크립트는 타입이 지정 될 시 예외처리 코드가 필요하지 않다. 3_React는 javascript 프레임워크지만 typescript를 옵션으로 사용할 수 있다.

알고 넘어가자 : middleware

* middleware 란? by Express 최소한의 기능을 갖춘 미들웨어. 라우팅 웹 프레임워크이다. # 미들웨어 오브젝트 및 함수 : (req, res, next) 1_req : 요청 오브젝트 2_res : 응답 오브젝트 3_next() : 다음 미들웨어 함수에 대한 엑세스 권한을 갖는 함수 # next() 호출 : 1_모든코드실행. 2_요청/응답 오브젝트 변경. 3_요청/응답 주기 종료. (종료하지 않는 경우 반드시 next()를 전달해야 한다.) 4_그 다음 미들웨어 함수를 호출. # 미들웨어 유형 : expressjs.com 1_애플리케이션 레벨 미들웨어 : app.use() 및 app.METHOD() 함수를 이용해 미들웨어를 앱 오브젝트의 인스턴스에 바인드. 이때의 METHOD는 미들웨어 함수가 처리하는 요청 (GET, PUT, POST 등) 2_라우터 레벨 미들웨어 : router.use() 및 router.METHOD 함수를 이용해 미들웨어를 로드. 3_오류 처리 미들웨어 : 오류처리 함수는 인자 4개를(err, req, res, next) 받는다. 4_기본 제공 미들웨어 : express.static은 Express의 유일한 기본 제공 미들웨어 함수. express.static(root, [options]) 5_써드파티 미들웨어 : Express 앱에 기능 추가하기. (필참) https://expressjs.com/ko/resources/middleware.html # app app.get('/', (req, res, next) => {...}) : get요청에 대한 라우트 app.post('/', (req, res, next) => {...}) : post요청에 대한 라우트 res.status(200) : 성공 res.status(400) : 잘못된 요청으로 인한 실패 res.status(403) : 서버에 클라이언트 요청이 전달됐는데 서버가 접근을 거부함 res.status(404) : 클라이언트가 서버와 통신할 수 있지만 서버가 요청한 내용을 찾을 수 없음

알고 넘어가자 : Express

* Express 란? node.js의 핵심 모듈이며 middleware이다. 보통 메인 파일에 진입점이 있고, 다음과 같은 단계로 역할을 수행한다. 1_자체적인 모듈과 서드파티 모듈을 인클루드한다. 2_템플릿 엔진, Express 앱 설정을 구성한다. 3_오류핸들러, 정적파일폴더, 쿠키 및 기타 파서와 같은 미들웨어를 정의한다. 4_라우팅을 정의한다. 5_DB에 연결한다. 6_앱을 구동한다. 앱 실행시 Express가 요청을 대기한다. 7_순서대로 정의된 소스코드를 실행한다. # 쿠키 인증시 다음과 같은 단계로 역할을 수행한다. 1_쿠키 정보 파싱 후 next. 2_URL로부터 매개변수를 파싱 후 next. 3_사용자가 인증 및 DB에서 정보 일치여부 확인 후 next. 4_데이터를 표시하고 응답을 마친다.