모달 store 관련 질문입니다.

안녕하세요 cupshop123님 이정환입니다.네 맞습니다. 현재 구조상으로는 새로운 모달을 관리하는 Store가 필요하다면 새로운 파일로 생성하여 관리하는게 좋을 것 같습니다.그러나 물론 말씀하신대로 모든 모달들을 하나의 Store에서 관리하는 방안도 좋은 방법이 될 수 있습니다. 다만 이렇게 작업할 경우 관리해야 할 데이터의 복잡도가 증가할 수 있고, 같은 이유로 액션 함수들의 타입 정의도 복잡해 질 수 있어 이 점은 고려해봐야 할 부분인 것 같아요

로컬스토리지 토큰 저장 시 보안문제

안녕하세요 박선우님 이정환입니다.우선 말씀하시는 보안적인 문제가 혹시 어떤 부분에서 발생하는건지 구체적으로 알 수 있을까요? 보안적인 문제의 종류에 따라 해결책과 대응 방법이 각각 다 다르기 때문에 답변에 앞서 말씀해주신 보안 문제가 구체적으로 어떤 것인지 궁금합니다.아! 물론 Local Storage에 저장하는 경우, 스크립트 기반 공격(XSS 등)을 통해 토큰이 탈취될 수 있다는 보안상의 우려가 있는건 사실입니다. 이에 HTTPOnly 쿠키를 사용하는 방식이 상대적으로 더 안전한 선택이 된다고 알려져있기도 합니다.다만 React.js는 기본적으로 XSS 공격을 방지하는 설계가 적용되어 있습니다. 예를 들어, JSX로 문자열을 렌더링할 경우 내부적으로 textContent를 사용하기 때문에, 악성 스크립트가 자동으로 실행되지 않습니다. 즉, 개발자가 dangerouslySetInnerHTML을 직접 사용하거나, 외부 입력을 검증 없이 그대로 DOM에 삽입하는 등의 명백한 실수를 하지 않는 한, React 자체만으로도 대부분의 XSS 공격은 방어할 수 있습니다.또 Supabase처럼 클라이언트 중심의 인증 구조를 사용하는 서비스의 경우, 서버가 존재하지 않기 때문에 HTTPOnly 쿠키를 설정하거나 읽을 수 있는 환경이 아닙니다. 따라서 이 경우에는 로컬 스토리지를 사용하는 방식이 구조적으로 더 적합합니다.실제로 앞서 말씀드렸듯이 Supabase의 공식 문서나 클라이언트 초기화 예제에서도, 토큰을 localStorage에 저장하고 이를 바탕으로 인증 상태를 유지하는 방식을 사용하고 있습니다.또한, SPA(Single Page Application) 환경에서는 새로고침 후에도 로그인 상태를 유지하거나 자동 로그인을 구현해야 하는 UX 측면에서, Local Storage가 더 나은 선택지가 되는 경우도 많습니다.

[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache

안녕하세요 박주연님 이정환입니다.15 버전의 최신 버전으로 확인해보니, 이 버전에서는 말씀해주신대로 cache 옵션이 없는 fetch가 페이지를 Dynamic 페이지로 전환시키지 않는군요강의를 제작하는 시점에서는 분명히 영상에서 보여드렸던 것 처럼 "no-store" 옵션이 적용된 것과 동일하게 동작하여 페이지를 Dynamic 페이지로 전환시켰는데 버전 차이로 인해 뭔가 변화가 발생한 것으로 보입니다. 결과적으로는 직접 확인하신 결과가 맞습니다.이 부분은 최대한 빠르게 최신화 해 두도록 하겠습니다. 그나저나 auto no cache로 동작한다고 하면서 페이지를 Dynamic 페이지로 전환시키지 않는 동작방식은 다소 아이러니 하네요...

배포후 동일한 url 다른 기기 접속

안녕하세요 최어진님 이정환입니다.12.17 웹 스토리지 사용하기 챕터에서 설명해 드리고 있듯 로컬스토리지에 보관된 데이터는 "웹 브라우저" 내부에 보관됩니다. 노트북의 웹 브라우저에 보관된 데이터와 휴대폰의 웹 브라우저의 데이터는 공유되지 않기에 다른 기기로 접속하시면 데이터가 유지되지 않는 것 입니다. 따라서 이것은 버그가 아닌 의도적인 동작입니다.(사진)참고로 다른 기기간의 데이터 공유를 원하신다면 웹 스토리지(로컬 스토리지)가 아닌 실제 데이터베이스를 사용하셔야 합니다.

supabase foreign key relation 설정이 안돼요

안녕하세요 진상우님 이정환입니다.아래에 첨부한 그림처럼 외래키 설정이 가능한 테이블 목록이 잘 보이지 않는다는 말씀이실까요?!(사진)만약 그렇다면 높은 확률로 Supabase 서비스의 문제일것으로 추정됩니다. 첨부해주신 스키마 비주얼라이저 살펴보니 테이블 구조에는 전혀 문제가 없어보이네요 ...!일시적인 Supabase의 오류일 수 있으니 혹시 지금도 그런 현상이 발생하는지 다시 테스트 부탁드리며 다시 문제가 발생하면 바로 답글 부탁드립니다!!

나름 중요하다고 생각하는 강의에 대한 궁금점 질문 드려요~

안녕하세요 Ehtan님 이정환입니다.금번 강의의 스킬셋에 Next.js를 포함시키지 않은 이유는 여러가지 인데요 그 중 몇가지만 간추려서 답변드리자면 다음과 같습니다. 1) 본 프로젝트를 구현하는데에 Next.js의 기능이 그닥 필요하지 않았습니다.본 강의에서 제작하는 프로젝트 "한입 로그"에는 서버사이드 렌더링이나 데이터 캐시, 이미지 최적화 등의 Next.js가 제공하는 기능이 그닥 필요하지 않습니다. 따라서 닭 잡는데 소 칼 쓸 필요 없다는 격언 처럼 Next.js까지 사용하지 않고도 멋진 프로젝트를 구현할 수 있다는 점을 보여드리고 싶었습니다. 2) TanstackQuery와 Zustand 등의 상태 관리 라이브러리 사용 경험을 드리고 싶었습니다.Next.js App Router 버전에서도 물론 Tanstack Query나 Zustand를 사용해야 하는 상황이 있지만 대다수의 경우 App Router의 기능 만으로도 처리가 되기에 Next.js를 채택하지 않았습니다. 3) Next.js는 현재 매우 큰 격동기를 겪고 있어 정확한 표준을 정하기 어려웠습니다.아시다시피 Next.js는 현재 매우 큰 격동기에 있습니다. 매 버전마다 API의 사용법이 조금씩 달라지거나 상세한 동작 방식이 조금씩 달라지고 있어 정확한 표준을 정하기 어려웠습니다. 이에 우선 리액트 판 프로젝트 강의를 먼저 만들고 향후 Next.js가 안정적인 스펙으로 제공될 때 Next.js를 활용한 프로젝트 강의를 만들고자 결심하게 되었습니다.

진도표 질문

안녕하세요 이정환입니다.인프런에서 자체적으로 매기는 섹션 넘버링과 제가 설정해둔 섹션 넘버링이 달라져서 혼란이 있으신 것 같습니다 🥲 분명히 인프런은 과거에 0번부터 섹션 넘버링을 시작했었는데 갑자기 1번부터 시작하게 변경되었네요아래 그림처럼 제 모든 영상 클립에는 1.1) 혹은 1.2) 요런식으로 섹션번호.챕터번호) 형태의 넘버링이 매겨져 있습니다. 요 넘버링에 맞춰 수강하시면 되겠습니다.(사진)

라우터 사용하고부터 모든 컴포넌트에 리액트를 임포트해야 해요

안녕하세요 이정환입니다.보내주신 깃허브 링크에서 소스코드를 다운로드받아 확인해보았습니다. 제가 직접 확인해 본 결과 아래 그림처럼 import React를 제거해도 별다른 문제가 발생하지 않았습니다. (사진) 이에 원인은 아마 실습 환경에서의 타입스크립트 버전 차이가 아닐까 의심됩니다..! 이에 다음과 같이 현재 사용중이신 타입스크립트 버전 확인 방법을 안내드리겠습니다.먼저 VSCode 에서 Ctrl + Shift + P를 눌러 select typescript version 이라고 검색합니다. 그럼 아래 그림처럼 TypeScript 버전 선택 이라는 항목이 나오는데 여기서 엔터를 눌러주세요(사진) 그럼 다음 그림처럼 선택 가능한 여러개의 (혹은 하나의) 타입스크립트 버전이 나타납니다. 이때 사용하고 계신 타입스크립트 버전이 몇 버전인지 확인해보시면 되겠습니다!(사진)

백엔드 prisma 연결

안녕하세요 Lerna님 이정환입니다.방금 직접 확인해 본 결과 아래 스크린샷 처럼 정상적으로 npx prisma db push가 이루어지는 것을 확인했습니다. 혹시 네트워크 이슈나 Supabase 서버 측의 이슈가 잠시 있었지 않을까 싶은데 다시 한번 시도해 봐 주시면 감사하겠습니다.(사진) 그래도 진행이 잘 되지 않는다면 .env 설정이나 Supabase 프로젝트 생성과정에서 문제가 생겼을 수 있습니다. .env의 내용을 다시 한번 점검해 보신 다음에 최후의 수단으로 Supabase 프로젝트를 삭제하신 다음 새로운 프로젝트를 생성해 진행해 보시길 추천드립니다!만약 그럼에도 문제가 발생한다면 답글 부탁드립니다!

vercel 배포 이후 제대로 데이터 패칭이 되지않고 있습니다.

안녕하세요 백승민님 이정환입니다.우선 정확한 원인 파악을 위해서는 배포가 완료되신 프로젝트의 주소와 전체 프로젝트 코드를 깃허브 혹은 구글 드라이브 링크 형태로 전달해주셔야 할 것 같습니다.현재까지 말씀해주신 증상들로 짐작해보자면 먼저 네트워크 탭에서 백엔드 서버의 응답이 제대로 돌아오고 있는지 먼저 파악해 봐야 할 것 같습니다. 상태 코드 200 외에도 response 탭에 정상적으로 도서 데이터가 응답되고 있는지 확인 부탁드립니다!