17. [토이프로젝트 따라하기] 블로그-2

API 작업

axios : REST API 웹 요청을 프로미스 기반으로 간편하게 할 수 있는 라이브러리

moment : 날짜를 텍스트 형태로 보여주는 편한 라이브러리

query-stinrg : 문자열 형태의 URL 쿼리를 객체 형태로 변환할 수 있고, 반대로 객체 형태를 문자열 형태로 변환가능하게 해주는 라이브러리 (v6 이상은 구형 웹 브라우저에 호환되지 않기 때문에 v5 버전을 설치 @5 라고 뒤에 붙이면됨)

remove-markdown : 마크다운 html이 변환지 않으므로 마크다운에서 사용하는 #, **, ```, > 등 특수 문자가 고스란히 보이는 문제점이 있다. 마크다운에서 사용한 특수 문자를 제거해주는 라이브러리

 

인증시스템 : 이 기능은 서버에서 세션과 인증된 쿠키를 사용하여 구현. 인증된 쿠키는 쿠키를 설정할 때, 쿠키 내용과 사전 설정한 비밀 키를 가지고 HMAC(해시 메시지 인증코드)를 생성하여 함께 보관. 이것으로 유저가 쿠키를 변조하지 않았음을 검증할수 잇다.

koa-session : 인증 라이브러리(관리자 비밀번호 : ADMIN_PASS 에서 설정 / 환경변수 : COOKIE_SIGN_KEY 에서 설정)

 

HTML의 localStoreade : localStoreage에 값을 넣으면 페이지를 새로고침하거나 웹 브라우저를 닫았다 열어도 값을 유지하기때문에 로그인 상태 유지에 사용될수 있다. 하지만 주의할점은 값이 문자열 형태로 들어가므로 객체, 숫자, Boolean 등 값을 넣으면 JSON, stringify/JSON.parse 를 사용하거나 문자열로 취급해야 한다는 것이다.

 

yarn add axios
yarn add moment
yarn add query-string@5
yarn add remove-markdown

// 아래꺼는 백엔드
yarn add koa-session

 

package.json 하단에 추가

webppack의 프록시(proxy) 기능을 사용하면 개발 서버로 들어온 요청을 백엔드 서버에 전달하, 응답을 그대로 반환할 수 있다.

"proxy": "http://localhost:4000"

 

현재까지 책보고 만든 파일구조를 마인드맵으로 구성해보았습니다.