week5 멘토링

5주차 멘토링 질문 사항

질문 목록

• 토큰을 사용한 인증.. 페이지 전환 이외의 순간에는 어떻게 확인?? 결국 세션을 사용해야하나??

  • 현재 oauth2.0 인증을 완료한 뒤에 사용자의 id와 서버의 salt값을 이용해 jwt를 만들고, 이에 대한 refrash token도 따로 만들어서 redis에 저장합니다. 그리고 jwt를 클라이언트의 쿠키에도 저장해둡니다. 이후 사용자가 페이지를 요청하면 그 jwt를 서버로 보내어 유효한 토큰인지 인증합니다. 이러한 방식으로 개인 인증을 하다보니, 하나의 페이지를 로드했을때 다른 페이지를 추가적으로 요청하지 않는다면 jwt와 refrash token이 모두 만료되어도 재인증 요구를 받지 않게됩니다. 이런 경우, 결국 세션을 사용한 인증으로 전환하는게 맞을까요?

• Fetch와 socket 통신. socket통신이 열려있다면 socket으로 하는 것이 더 좋을지.

  • socket이 열려있는 상태에서 socket.emit으로 원하는 데이터를 넘겨줄 수 있을 때 굳이 fetch를 써야할지.
    • socket이 열려있으면 socket을 사용하는게 낫다.

• closest DOM 접근에 대한 고민

  • DOM을 useRef 외의 방법으로 직접 접근하는 것을 지양
  • 이벤트 타겟의 closet DOM에 접근해, 해당 DOM의 하단에 HTML 요소를 추가하고 싶다면?

답변(멘토링)

• 비디오 태그의 동시 실행을 막고 싶다

  • 비디오 태그를 하나만 사용할 필요는 없어 보임
  • 상태를 통해, 하나가 재생 중이면 다른 재생을 취소하는 비즈니스로직을 구현해볼 것
  • 좋은 코드는 이해하기 쉬운 코드
  • 후에 개선을 하더라도, 쉬운 코드로 동작을 우선하는 것을 염두에 둘 것
  • closest를 통해 다른 DOM의 의존성을 가지게 되는 동작은 React에 바람직하지 않음

• 스플래쉬 이미지

  • 만약 비동기 인증 함수의 실행에 의해 잠시동안 원하지 않는 페이지가 보여진다면, 스플래쉬 이미지를 잠시동안 보여줌으로써 페이지가 동작중이라는것을 사용자에게 알려줌과 동시에 원하지 않는 페이지를 감출 수 있다.

• 렌더링와 상관 없는 비즈니스 로직 분리

  • 컴포넌트 내부의 데이터를 클로저 형태로 보유하거나, 직접적으로 접근할 필요가 없는 비즈니스 로직은 컴포넌트 바깥으로 빼서 관리하는것이 좋다.

• 리액트 라우터 사용 방안

  • 현재는 isAuthenticate 함수가 route 내부에서 지속적으로 실행되는데, 이는 route에 적합한 컨셉은 아닌듯하다. 따라서 route에서 비동기 함수 혹은 렌더링에 사전조건이 되어야 할 함수를 호출하는 best practice를 찾아보는걸 추천

• 함수 작성 가이드

  • 함수를 작성할때, 특정 조건에 따라 반환값이 있을수도 있고 없을수도 있는 함수는 나중에 버그를 발생시킬 수 있다. 따라서 이를 명확하게 설정해줄 필요가 있다.

• socket.emit vs fetch

  • 소켓이 연결되어 있는 상태라면 소켓을 이용하는게 낫다.
  • fetch는 매 순간 tcp 3-hand-shaking 등의 통신 준비과정을 거쳐서 통신 가능 상태를 만들어야 하지만, 소켓은 연결되는 순간에만 준비과정을 거치고 그 이후에는 데이터를 수신 및 송신할 준비가 항상 되어있기 때문에 지속적인 비용을 생각하면 열려있는 socket을 이용하는게 유리하다.

• IntersectionObserve

  • 무한스크롤에서 강제 reflow를 막기위해 IntersectionObserve를 사용하였는데, 이것을 사용함으로써 얻는 장점과 reflow의 정확한 정의, 왜 강제 reflow가 좋지 않은지에 대해 학습하면 더 좋을 것 같다.

장표? 프로젝트 소개 내가 어떤 역할.
기술적인 어려움 어떻게 극복했는지.