[개별 멘토링] 2024.11.09 고동우

이번주 문제 해결 경험

1. 주식 차트를 라이브러리를 사용하지 않고 어떻게 구현할까?

   웹브라우저 자체에서 제공하는 canvas API를 사용해 구현할 수 있다.

   canvas의 (x,y) 좌표를 잡고 라인을 그릴 수 있다.

   라인을 그리기 위해 다음과 같은 함수들이가 주로 사용된다.

   • moveTo(x,y) - (x,y)로 이동
   • lineTo(x,y) - 이전 (x,y)에서 매개변수로 받은 (x,y)로 이동
   • stroke() - 선을 그리기

   https://developer.mozilla.org/ko/docs/Web/API/Canvas_API

2. 컴포넌트의 특정 요소를 getElementById로 접근하면 생기는 문제점

   getElementById로 접근할 경우 컴포넌트가 여러 개 사용될 때 문제가 발생할 수 있다.

   getElementById 는 고유한 id에 해당하는 DOM 요소를 찾으면 바로 반환하기 때문이다!

   이를 해결하기 위해 react에서 제공하는 hook 중 하나인 useRef를 사용하면 해결할 수 있다!

   [React에서의 DOM 요소 접근 (useRef vs getElementById)](https://www.notion.so/React-DOM-useRef-vs-getElementById-e52cfa6dc3c243759e543e0bf8ba1256?pvs=21)

3. 로그인 인증 관련

   로그인 API 호출하면 accessToken(jwt)를 반환

   이후 accessToken을 api header에 담아서 요청해야 함

   accessToken은 어떻게 저장할까?

   1. localStorage
      • 브라우저가 닫히거나 새로고침되어도 accessToken을 가지고 있을 수 있음
      • XSS 공격에 취약
   2. 프론트엔드 메모리 (전역 상태)
      • 브라우저가 닫히거나 새로고침되면 accessToken을 잃어버림
      • XSS 공격 위험 감소

   보안적으로 좋은 인증을 가지기 위해 두가지 방법 중 프론트엔드 메모리에 관리하기로 결정!

   메모리에 저장해도 탈취당할 위험이 있으므로 accessToken의 유효기간을 짧게 해서 보안 강화

   그럼 브라우저가 닫히거나 새로고침되면 accessToken을 잃어버리거나 accessToken의 유효기간이 만료되었을 경우의 문제를 어떻게 해결할 수 있을까?

   → refreshToken을 추가로 발급받으면 된다!

   refreshToken은 http only cookie로 전달하고 이는 XSS를 방지한다.

피어세션 기록

react-router말고 tanstack rotuer도 있다.

tanstack router는 폴더 기반 라우팅

애니메이션 추천

• numberflow
• Framer-motion

가격 세자리수 끊어 놓으면 좋을 것 같아요!

<추가 기능 추천>

• 주식 추천 기능
• AI랑 대결하기

실시간 데이터를 어떻게 처리할 것인가?

소켓으로 관리하기 vs tanstack query로 일정시간마다 api 쏴서 가져오기

소켓에 특정 데이터들을 어떻게 관리할 것인가?

• 세션 관리
• 페이지마다 소켓 관리

개별 멘토링 기록

1. props 전달 관련에 대해 a. 객체 속성을 각각 props로 전달하는 방법

   // List.tsx
   
   data.map((stock: StockData, index) => (
      <li key={index} className='transition-colors hover:bg-gray-50'>
          <Card
             name={stock.hts_kor_isnm}
             price={stock.stck_prpr}
             changePercentage={stock.prdy_ctrt}
             changePrice={stock.prdy_vrss}
             index={index}
          />
      </li>
   ))}
   
   ---------------
   // Card.tsx
   
   export default function Card({
     name,
     price,
     changePercentage,
     changePrice,
     index,
   }: CardProps) {
   
   	return(
   		// ...
   	)
   }

   b. 객체 자체를 props로 넘기고 그 자식 컴포넌트에서 구조 분해 할당 하는 방식

   // List.tsx
   
   data.map((stock: StockData, index) => (
      <li key={index} className='transition-colors hover:bg-gray-50'>
          <Card
        stock={stock}
            index={index}
          />
     </li>
   ))}
   
   ---------------
   // Card.tsx
   
   export default function Card({
     stock,
     index,
   }: CardProps) {
       const { name, price, changePercentage, changePrice } = stock;
    
       return(
       	// ...
       )
   }

   이 둘 중에 멘토님은 어떤 방식을 선호하시는지.
   현업에서는 주로 어떻게 하는 지 궁금합니다!

2. api response 방식에 대해

   현재 구현된 login API를 예로 들면 response값은 다음과 같습니다.

   성공 시

   { accessToken : 'eyJ....' }
   

   실패 시

   {
     message: 'Please check your login credentials',
     error: 'Unauthorized',
     statusCode: 401
   }
   

   다음과 같이 성공과 실패할 시의 각각의 response 값이 다릅니다.

   지금 현 상황으로 성공인지 실패인지 구분하는 공통적인 속성이 없어서 프론트엔드에서 각 응답에 따라 구분하기가 어려운데 공통적인 속성을 두도록 백엔드한테 요청하는 것이 좋을까요?

   현업에서는 어떻게 주로 진행하는 지 궁금합니다!

   공통적인 속성을 두지 않고 구분할 수 있는 방법이 있는지도 궁금합니다.

3. 현업에서 인상적으로 볼만한 기술적 도전이 무엇이 있을 지

   현재 저희 프론트엔드에서는 다음과 같은 기술적 도전이 있어보입니다.

   • 차트 라이브러리 사용하지 않고 canvas 사용해서 직접 주식 차트 그려보기
   • 웹소켓을 통한 실시간 상태 관리

   이 정도 기술적 도전이면 충분할까요??

   추가로 시도해 볼 기술적 도전이 있으면 말씀해주시면 감사겠습니다!

멘토님 답변

<인증 관련>

보안레벨이 비슷한 느낌이 든다

accessToken http only 쿠키로 하는 방법은 어때??

지금 하고자 하는 방법은 호눅스님한테 여쭤바도 좋을 듯하다.

<자바스크립트 map method>

key는 단순히 index말고 고유하게 가지는 게 좋다!

가장 단순히 “컴포넌트명+index” 처럼 고유하도록 설정해보기!

<props 전달 관련>

취향 차이

spread operator로 간단하게 있을 수도 있을 것 같은데 한 번 알아보기!

<기술적 도전 적합 관련>

차트 구현을 더 깊숙히 들어가면 여러 가지 이슈가 생길 수 있음

화면이 버벅 거린다거나 애니메이션이 매끄럽지 않다거나..

→ 이런 것들을 최적화해보는 과정에서 기술적 도전이 되지 않을까 싶다.

차트 관련해 공통 컴포넌트를 만들어서 구현해봐도 좋다.

• axios interceptor 알아보기