토큰 관리에 대해 질문을 드리고 싶습니다.

안녕하세요 이헨님 이정환입니다.우선 토큰을 Zustand와 localStorage를 함께 사용해 저장하고 다루는 방식이 일반적이지 않다고 말씀해주셨는데요, 사실 이 방식은 꽤 보편적으로 사용되는 패턴이며, 일반적이지 않다고 보기는 어렵습니다.대표적으로 Supabase에서도 이러한 방식을 공식 예제에서 소개하고 있으며, 실제로 Supabase의 JavaScript 클라이언트는 기본적으로 localStorage를 사용하도록 설계되어 있습니다. 별도의 설정 없이도 로그인 세션이 localStorage에 자동으로 저장되고 복구되도록 되어 있기 때문에, Supabase 나 Firebase 등의 클라우드 백엔드 서비스를 사용하는 대부분의 프론트엔드 환경에서는 이 구조를 그대로 따릅니다. 또한 메모리에 저장하는 방식이 더 안전하다고 말씀해주셨는데요, 여기서 말하는 "메모리에 저장한다"는 표현은 보통 브라우저의 일시적인 실행 컨텍스트, 즉 런타임 중 유지되는 변수나 상태관리 라이브러리(Zustand, Redux 등)의 상태로 토큰을 관리한다는 의미입니다. 결국 Zustand로 토큰을 저장하는 것도 메모리에 저장하는 방식에 해당됩니다. 추가로 “전역 상태로 보관하는 것은 안전하지 않을 것 같다”라고 말씀해주셨는데요, 혹시 그렇게 생각하신 이유가 있을까요?Zustand와 같은 상태 관리 라이브러리를 통해 전역 상태로 토큰을 보관하든, 지역 상태나 일반 변수에 보관하든, 모두 런타임 메모리 내에서만 유지되는 정보입니다. 즉, 브라우저가 새로고침되거나 페이지가 종료되면 사라지는 데이터이며, 외부에서 직접 접근하거나 탈취하기는 현실적으로 어렵습니다.물론 예외적으로, 개발 중에는 Redux DevTools 같은 디버깅 도구나 브라우저 확장 기능 등을 통해 상태가 노출될 가능성도 존재합니다. 하지만 이러한 리스크는 프로덕션 환경에서 디버깅 도구를 비활성화하거나, 민감한 정보를 DevTools에 출력하지 않도록 설정함으로써 충분히 방지할 수 있습니다.따라서 메모리에만 저장된 전역 상태는 실질적인 보안 취약점으로 보기 어렵습니다. 혹시 걱정하셨던 부분이 이런 개발 환경에서의 노출 가능성일까요? 아니면 다른 관점에서 우려하신 걸까요? 아! 물론 Local Storage에 저장하는 경우, 스크립트 기반 공격(XSS 등)을 통해 토큰이 탈취될 수 있다는 보안상의 우려가 있어서 많은 경우, HTTPOnly 쿠키를 사용하는 방식이 상대적으로 더 안전한 선택이 될 수는 있습니다다만 React.js는 기본적으로 XSS 공격을 방지하는 설계가 적용되어 있습니다. 예를 들어, JSX로 문자열을 렌더링할 경우 내부적으로 textContent를 사용하기 때문에, 악성 스크립트가 자동으로 실행되지 않습니다. 즉, 개발자가 dangerouslySetInnerHTML을 직접 사용하거나, 외부 입력을 검증 없이 그대로 DOM에 삽입하는 등의 명백한 실수를 하지 않는 한, React 자체만으로도 대부분의 XSS 공격은 방어할 수 있습니다.또 Supabase처럼 클라이언트 중심의 인증 구조를 사용하는 서비스의 경우, 서버가 존재하지 않기 때문에 HTTPOnly 쿠키를 설정하거나 읽을 수 있는 환경이 아닙니다. 따라서 이 경우에는 로컬 스토리지를 사용하는 방식이 구조적으로 더 적합합니다.실제로 앞서 말씀드렸듯이 Supabase의 공식 문서나 클라이언트 초기화 예제에서도, 토큰을 localStorage에 저장하고 이를 바탕으로 인증 상태를 유지하는 방식을 사용하고 있습니다.또한, SPA(Single Page Application) 환경에서는 새로고침 후에도 로그인 상태를 유지하거나 자동 로그인을 구현해야 하는 UX 측면에서, Local Storage가 더 나은 선택지가 되는 경우도 많습니다.

fetch api의 상태값 유지

안녕하세요 shoncg님 이정환입니다.네 일반적으로 특정 값이 존재할 경우에만 쿼리를 실행시키고 싶다면 enabled 옵션을 이용합니다. 옵션 하나만 설정해도 원하는 조건을 표현할 수 있어 지금으로써는 가장 좋은 해결 방법으로 보입니다.PS. 강의 내용에 대한 질문이 아닌, 개인 프로젝트 관련된 질문이므로 정확한 맥락 파악이 어려워 답변의 범위가 제한적일 수 있다는 점 양해 부탁드립니다.

함수나 변수 작성(선언?) 위치 선택 기준

안녕하세요 keeenco님 이정환입니다.AI의 인턴의 답변대로 컴포넌트가 리렌더링 될 때 마다 재생성 할 필요가 없거나, State 등의 컴포넌트 내부에서만 접근할 수 있는 변수를 사용하지 함수나 변수는 컴포넌트 외부에 두는게 성능적으로 유리합니다.리액트 컴포넌트 역시 함수이므로 리렌더링 될 경우 내부적으로는 다시 호출되는 과정을 겪는데요, 특정 함수가 재 호출되면 해당 함수 내부에 있는 변수나 함수가 모두 재 생성(초기화)되는 과정을 겪기 때문에 이렇다고 이해하시면 되겠습니다.

one과 two의 값지정

안녕하세요 고민지님 이정환입니다.혹시 아래와 같은 형태를 말씀하신 걸까요?! 다음과 같이 one, two에만 값을 전달하는 것 또한 가능합니다.const arr1 = [1, 2, 3]; function funcB(one, two, ...rest) { console.log(rest); } funcB(1, 2, ...arr1);

댓글 수정, 삭제 시 캐시 수정

안녕하세요 rladbstjd96님 이정환입니다.댓글 수정, 삭제시에는 프로필 정보는 변경되지 않기 때문에 굳이 프로필 데이터를 불러올 필요가 없기 때문입니다. 캐시에 저장되어 있는 프로필 정보를 그대로 이용하고, 댓글 정보 중 변경이 있는 프로퍼티만 수정하는 식으로 코드를 작성해 두었기 때문에 오류가 발생하지 않습니다.

7:17초 업캐스팅 질문이있습니다!

안녕하세요 이상민님 이정환입니다.c = d에서 말씀드린 업캐스팅은, 함수 타입 전체가 아닌 매개변수의 타입 관계를 기준으로 설명 드린 것입니다. 함수 타입간의 업, 다운 캐스팅 관계를 말씀 드린것은 아니었습니다

[staleTime 설정] 새로고침 시 로딩 중 대신 에러 메세지 출력

안녕하세요 이정환입니다.아래에 설정하신 이 조건문 대로라면 로딩중일 때 !data 조건이 참이되어 "로딩 중 입니다..."라는 텍스트가 렌더링 되지 않게 됩니다.(사진) 따라서 강의에서 안내해 드린 것과 같이 그 아래에 수정하신 조건문으로 사용하시는걸 권장드립니다!

Zustand 사용 중 컴포넌트 리렌더링 관련 질문

안녕하세요 이정환입니다,.네 전반적으로 맞게 이해하셨습니다. 여기서 한가지 중요한 포인트는 Store 전부를 가져다 쓸 경우 Store중 하나의 값이라도 변경되면 리렌더링 되지만, Store로부터 하나의 값만 불러다 쓰는 경우 해당 값이 변경될 때에만 리렌더링이 발생한다는 점 입니다!이를 이용해 불필요한 값은 불러다 쓰지 않게 함으로써 불필요한 리렌더링을 방지할 수 있습니다

forget-password 이후 reset password 이메일이 오지 않네요.

안녕하세요 억수님 이정환입니다.네트워크 탭에서 이메일 발송 API가 성공적으로 처리 되었나요?그렇다면 우선 해당 이메일의 스팸이나 프로모션 함을 확인해보시면 좋을 것 같습니다.그래도 안되면 전체 프로젝트 코드를 깃허브 혹은 구글 드라이브로 전달해주시면 살펴보겠습니다.PS. localhost:3000이 아닌 localhost:5173으로 설정해보셔도 도움이 될 것 같아요!

tailwind css / sass 사용율? 에 대해서 궁금합니다

안녕하세요 이정환입니다.우선 국내 현업에서 어떤 도구가 더 많이 사용되는지는 정확히 알기 어렵습니다 ㅠㅠ워낙 팀마다, 사람마다 다르기 때문에 ...통계를 통해 답변드리자면 StateofCSS의 조사 결과 2024년 가장 많은 사용률을 기록한 CSS도구는 TailwindCSS라고 하더라구요!(사진) 국내에서도 아마 해외와 비슷한 추세이지 않을까 추정됩니다!