[KAKAO.GG] 기술 스터디 2022년 12월 26일

Session, Token 어느 경우에 사용해야 적합한지, 장점과 단점은 무엇인지 아는만큼 설명해주세요.

웹 사이트는 쿠키를 사용한 세션 인증, 모바일 앱, SPA은 헤더와 함께 토큰 인증을 사용한다는 관념이 있다. 두 방법 모두 취약점이 있고, 사용자 요구, 응용 프로그램에 더 적합한 방법을 선택하는 것이 좋다.

장점과 단점
1. Session의 경우 Token과 비교했을 때 용량이 작다.
2. Session의 경우 Server에 저장/관리된다. Token과 비교했을 때 비교적 안전하다. 하지만 Server Cost가 부과된다.
3. Session의 경우 확장성이 떨어진다. 예를들면 Server1, Server2, Server3이 있을 때, Server1에 로그인 한 경우 Server1에서 제공하는 서비스는 받을 수 있지만, Server3에 있는 서비스를 이용하고자 할 때 Server1에서 로그인했더라도 Server3에서 로그인을 한 번 더 해야하는 문제가 발생한다. 로그인 서버(세션용 서버)를 별도로 둘 수 있지만, Server 과부하, Cost가 발생한다.

Session 작동방식

1. Client가 Server에 요청을 보낸다.
2. Server는 Session을 생성 저장한다.
3. Server는 Cookie에 Session ID를 담아 응답한다.
4. Client는 요청마다 Session ID와 함께 전달한다.
5. Server는 Request와 Session ID를 검사한다.
6. Server는 Session ID가 옳바른 경우 Response한다. (실패의 경우 실패를 응답)

Token 작동방식

1. Client는 Server에 요청을 보낸다.
2. Server는 Token을 생성하고 Client에 응답한다.
3. Client는 Reqeust와 함께 Token을 전달한다.
4. Server는 Request와 Token이 옳바른지 확인한다.
5. Server는 Token이 맞는 경우 Client 요청에 응답한다.

React 렌더링 최적화 하는 방법

1. State 선언 위치
   하위 Component에 선언 될 State를 상위 Component에서 선언할 경우 하위 Component까지 모두 리렌더링 시킵니다. 따라서 State 선언할 곳을 미리 잘 설계하는 것이 중요합니다. (상위 Component에 선언 될 경우 더 많은 Component가 불필요한 리렌더링을 겪게 됩니다.)
2. Key값으로 index를 사용하지 않는다.
   Component Mapping 시 Key값으로 index를 사용하지 않는다. React는 반드시 고유 Key를 부여하도록 권장하고 있습니다. 배열 중간 특정 요소가 삽입된다면 이후 위치한 요소들 전부 Index 변화가 일어납니다. 따라서 Key값을 기본 index 값보다 고유 key값을 부여해 리마운트를 막는 것이 좋습니다.
3. useMemo 사용
   useMemo는 종속 변수들이 변하지 않으면 함수를 다시 호출하지 않습니다. 이전 반환한 참조값을 재사용합니다. 즉 함수 호출 시간을 절약할 수 있고 같은 값을 props로 받는 하위 Component 리렌더링도 방지할 수 있습니다.
4. useCallback
   렌더링 최적화에 많이 사용됩니다. 상위 Component에서 하위 Component로 props로 넘겨줄 때 상위 Component가 리렌더링 될 때마다 상위 Component안에 선언된 함수를 새로 실행하기 때문에 새 참조 함수를 하위 Component로 계속 넘겨주게 됩니다. 이런 이유로 하위 Component는 props를 통해 함수를 전달 받고 계속 리렌더링 합니다. useCallback 함수를 선언하면 종속 변수들이 변하지 않는다면 굳이 함수를 재생성하지 않고 이전에 있던 참조 변수를 그대로 하위 Component에 props로 전달, 하위 Component는 props가 변경되지 않습니다.