전체 글

[ Network ] 토큰 기반 인증 방식에 대하여

토큰 기반 인증 시스템 토큰 기반 인증이란 사용자가 자신의 아이덴티티를 확인하고 고유한 액세스 토큰을 받을 수 있는 프로토콜을 말한다. 사용자는 토큰 유효 기간 동안 동일한 웹페이지나 앱, 혹은 그 밖에 해당 토큰으로 보호를 받는 리소스로 돌아갈 때마다 자격 증명을 다시 입력할 필요 없이 토큰이 발급된 웹사이트나 앱에 액세스할 수 있다. 토큰 기반 시스템 작동 원리 유저가 로그인 서버에서 계정정보 검증 계정 정보가 정확하다면 Signed 토큰을 발급 클라이언트측에서는 발급받은 토큰을 저장, 서버에서 요청을 할 때마다 토큰을 전달 서버는 토큰을 검증하고, 요청에 응답 웹서버에 토큰을 서버에 전달할땐, HTTP 요청의 헤더에 토큰값을 포함시켜 전달 토큰 기반 시스템의 장점 1. 무상태성 & 확장성 토큰은 클..

[ React ] useEffect 와 useLayoutEffect 의 차이점

useEffect useEffect 는 컴포넌트들이 비동기적으로 render 와 paint 된 후 실행된다. paint 된 후에 실행되기 때문에, useEffect 내부의 dom 에 영향을 주는 코드가 있을 경우, 사용자 입장에서 깜빡거림을 감지할 수 있다. useLayoutEffect useLayoutEffect 는 컴포넌트들이 동기적으로 render 된 후 실행, 그 후 paint 된다. paint 가 되기전에 실행되기 때문에, dom 조작하는 코드가 있더라도 깜빡임이 없다. 결론 두 코드의 차이점은 실행 시점이다. useLayoutEffect 는 동기적으로 실행되고, 내부의 코드가 모두 실행된 후 painting 작업을 거치기 때문에 레이아웃이 복잡하면 복잡할 수록 화면을 보기까지 시간이 오래걸린다..

[ React ] state 를 직접 수정하지 않고 setState 를 사용하는 이유

왜 State 를 직접 수정하면 안되는 걸까? immutable ( 불변성 ) 을 유지해야하기 때문이다. 리액트 컴포넌트는 한번 Render 를 실행한 후, shouldComponentUpdate 상태로 들어가게 된다. 이 라이프 사이클 메서드를 사용하게 되면 아래 상태가 되었을때 Update 가 되어서 render 를 실행한다. props, state 가 변경 부모 컴포넌트가 렌더링 되었을 때 forceUpdate 가 실행될 때 그런데 직접 state 를 고치면 왜 update 상태가 되지 않는 것일까? 그건 React 가 값이 바뀜을 판단하는 기준이 메모리 주소이기 때문에 객체의 주소가 바뀌지 않고 내부 값만 바뀐다면 바뀌지 않은 것으로 인식하기 때문이다. 즉 "불변성" 을 지키지 않아서 일어난 일이..