오늘 새로 배운 것
토큰 기반 인증
http 통신은 '단발성'이기 때문에 서버가 내가 이전에 로그인했는지 안 했는지 기억하고 있지 않는다(무상태성)
그래서 '토큰'이라는 나를 증명하는 인증서가 필요하다.
클라이언트가 로그인 요청(인증 요청)하고 응답을 받아올 때 access token을 받아오고, 이 토큰을 클라이언트는 저장소에 저장한다. 그리고 마이페이지같은 내 정보를 요청하는 등 이 토큰이 필요한 요청에 토큰을 header에 실어 서버로 보냄으로써 필요한 데이터를 받는다.
토큰 기반 인증 방법 중 하나인 OAuth는 외부 서비스의 인증 및 권한부여를 관리하는 프레임워크
서버는 헤더에 담긴 access token을 보고 유저를 판단한 뒤 데이터를 보내준다.
구글은 자원 서버(Resource Server)의 역할과 권한 서버(Authorization server)의 역할을 한다.
토큰 중 하나인 JWT(Json Web Token)은 데이터가 JSON 형태로 이루어져있는 토큰이다.header, payload, signature로 구성되어 있다.
클라에서 서버로 요청하면 서버는 어떤 암호화 방식을 사용할지 header에 넣고 payload에 넣고 signature도 넣고 해서 만들고 이 jwt 토큰을 클라가 받으면 저장소에 토큰을 넣어놓고 토큰이 필요한 요청 시 실어보내는 것.
웹 저장소
LocalStorage
HTML5에서 추가된 저장소. 브라우저를 닫아도 데이터를 별도로 삭제하지 않는 이상 데이터가 남아있음.
setItem, getItem으로 저장, 불러오기
removeItem(key값)으로 데이터 제거.
SessionStorage
HTML5에서 추가된 저장소. 브라우저를 종료하면 세션 스토리지 안에 데이터가 제거됨.
setItem, getItem으로 데이터 저장, 불러오기
removeItem(key값)으로 데이터 제거.
Cookie
토큰을 쿠키에 넣어서. 쿠키의 만료일(Expires)을 설정해서 삭제할 수 있다.
페이지 구성 방식
Routring - MPA 방식 / SPA 방식
MPA 페이지마다 여러 개의 html
SPA 한 개의 html를 페이지마다 다시 재조립해서 보여줌
Mock API
Mocking api 실제 REST API가 구축되어 있지 않더라도 있는 것처럼 테스트 환경을 만들어 주는 것.
url에서 /다음에 들어오는 부분을 앤드포인트라고 함.
비동기
XMLHTTPRequest
서버와 통신하기 위해 사용하는 객체. web API 명세에서 찾아볼 수 있음
Fetch API
XMLHTTPRequest의 대체재
Axios
XMLHttpRequest를 베이스로 한 promise 기반 HTTP Client library
나머지 학습한 것 메모
promise는 자체로 상태값을 가진다.(pending, rejected, rejected, settled)
contextAPI()
리액트 자체 상태 관리. props drilling 하지 않고 해당 자식 컴포넌트로 전달할 수 있게 해주는 것 같은데 얘보다는 Redux나 MobX를 주로 쓰는 것 같다. 나중에 기회가 된다면 좀더 살펴봐야겠다.
Redux 상태 관리
root Reducer랑 Middleware 여러 개 사용할 때 Middleware들이 엮인 인핸서. 이 root Reducer와 인핸서를 엮어서 Store를 만들고 이 Store를 가지고 Provider로 주입. useSelector와 useDispatch 훅을 통해 데이터 구독, 요청.
Action type, Action creator, Initial state를 한번에 묶은 slice.
하루를 돌아보며...
오늘 RN으로 구현했던 todo앱에 firebase를 붙였다.
test 도구인 Jest와 RTL을 처음 접했는데 아 이런 걸 단위, 통합테스트 / 컴포넌트 테스트할 때 사용해야하는구나 하는데 중요하다고 하는데 아직 이해도 잘 안가고 그 중요성이 아직은 별로 와닿지가 않는다. 뭐 it, expect, tobe, toStrictEqual, describe 이런 첨보는 용어들도 사용하고...
그리고 앱 성능 측정하는 webVital이라는 것도 있던데 나중에 프로젝트하고 성능 확인할 때 자세히 읽어봐야겠다.
내일은 일단 firebase 회원가입이랑 로그인 구현, 이미지 업로드 부분 좀 공부할 예정이다.
