수업질문 12.15)Edit 페이지구현하고 useEffect 관련

안녕하세요 강정빈님 이정환입니다.해당 경고 메세지는 ESLint(코드 정적 분석 도구)가 제공하는 것으로 기능 동작에는 아무런 지장을 주지 않으니 무시하셔도 괜찮습니다.해당 메세지가 발생하는 이유는 useEffect 내에서 setState 메서드를 호출하게 될 경우 아래와 같은 상황에 무한 루프를 발생시킬 수 있기 때문인데요useEffect(()=>{ setState(state + 1); }, [state])우리 강의에서는 위 예제코드처럼 무한 루프를 발생시키는 useEffect를 작성하지 않으므로 무시하고 지나가셔도 괜찮습니다. 다만 이 오류 메세지가 거슬리신다면 eslint.config.js 파일에 다음 rules를 추가하시면 됩니다. "react-hooks/set-state-in-effect": "off",

강의 들으면서 궁금한 부분 질문드립니다.

안녕하세요 혜빈님 이정환입니다.순서대로 답변 드리겠습니다. 1) 무조건 이렇게 하실 필요는 없습니다. 말씀하신대로 프로젝트를 생성해 시작하셔도 됩니다. 대신 macOS 기준으로 프로젝트가 생성되는 경로가 Documents로 고정됩니다. 직접 해보시면 차이를 느끼실 수 있을겁니다. 2) 자바스크립트에서는 보통 불변하는 값을 담는 변수를 선언할 때 let 대신 const를 사용합니다. router 객체나 쿼리스트링 q 같은 값들은 불변하기에 let 대신 const를 이용하는게 좋습니다. 그러나 이는 어디까지나 컨벤션일 뿐 기능적인 오류까지 발생하지는 않습니다. 따라서 현재 발생하는 오류는 ESLint의 문법 검사 기능에서 발생하는 오류인 것 같습니다. 3) 구체적으로 어떤 에러를 말씀하시는건지 모르겠습니다 🥲 구체적으로 말씀해주시면 다시 답변드리겠습니다. 참고로 이처럼 대괄호를 두번 사용하는 경로 설정 방법인 옵셔널 캐치 올 세그먼트에 대해서는 해당 강의의 19분에 설명해드리고 있습니다. 4) 페이지 라우팅 설정을 위해서는 index.js 라는 이름의 파일을 생성해야 합니다. 페이지 라우팅 설정이 필요하지 않다면 안하셔도 됩니다.참고로 이 부분에 대해서는 아래 그림처럼 2.1 챕터 2분 15초 경에 설명해드리고 있습니다. 해당 챕터를 처음부터 다시 수강하시는걸 권장드립니다.(사진) 이어서 쿼리 파라미터를 받는 동적 URL인 경우에만 해당 쿼리 파라미터 이름을 대괄호에 적는것이냐 질문 주셨는데요 우선 말씀하시는게 쿼리 스트링인지, 혹은 URL 파라미터인지 정확히 구분할 필요가 있을 것 같습니다. 쿼리 스트링과 URL 파라미터의 차이를 잘 모르신다면 아래의 링크를 먼저 참고해주세요https://velog.io/@gth1123/%EC%BF%BC%EB%A6%AC-%EC%8A%A4%ED%8A%B8%EB%A7%81Query-string-URL-%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0 URL 파라미터의 경우 아래 그림처럼 2.1 챕터의 4분 51초 경에 설명해드리고 있듯, 파일명에 대괄호를 통해 URL 파라미터의 이름을 명시해 주시면 됩니다. 예를 들어 [id].jsx라면 URL 파라미터를 id라는 이름으로 전달 받도록 설정하는 것이죠(사진) 이어서 다중 쿼리 파라미터 설정을 할 것을 대비해서 일반적으로 ... 설정을 하는지도 궁금하다고 질문주셨는데요. "일반적으로 ... 설정" 이 무엇을 말씀하시는건지 잘 모르겠습니다. 구체적으로 다시 질문주시면 답변드리겠습니다. 다중 URL 파라미터 역시 [id].jsx 와 같은 형식으로 대응 가능합니다. 5) 404 페이지를 이미지로 설정하고 싶으시다면 404 페이지 컴포넌트에 return (사진) 형태로 (사진) 태그를 렌더링 하시면 됩니다. 404 페이지 컴포넌트 또한 리액트 컴포넌트이기에 리액트에서 하시던 그대로 하시면 되겠습니다. 이미지를 보관하는 폴더는 public 폴더에 하셔도 되고 src 폴더 내에 하셔도 됩니다. 6) 네 맞습니다. 7) 작업 스타일은 사람에 따라 다를 것 같습니다. 저는 보통 직접 작성하는 편 입니다.

Header 컴포넌트 리렌더링 질문

안녕하세요 bit2580님 이정환입니다.결론부터 말씀드리자면 new Date 함수로 인해 컴포넌트가 리렌더링 되지는 않습니다. 컴포넌트의 리렌더링은 앞선 챕터에서 말씀드렸듯 다음 2가지 상황에서만 유발됩니다.자신이 관리하는 State가 업데이트 되었을 때부모 컴포넌트가 리렌더링 되었을 때

서버 배포 에러입니다.

안녕하세요 alswns1285님 이정환입니다.앗! Swagger는 서버리스 환경(Vercel 호스팅 배포 등)에서는 정상적으로 작동하지 않는 이슈가 있는 것 같더라구요 ... 🥲 로컬에서는 잘 접속되지만 배포시에는 접속이 어려운건 정상입니다.

10.3 TodoItem 부모 재랜더링

안녕하세요 flamewizkey님 이정환입니다.TodoItem의 체크박스를 클릭했을 때, TodoItem의 부모 컴포넌트들(TodoList, App 등)이 리렌더링 되는 현상은 버그가 아닌 자연스러운 현상입니다. 아래는 강의 화면 캡쳐인데요 아래 화면에서도 부모 컴포넌트들은 리렌더링 되고 있는것을 확인하실 수 있습니다.(사진)본 챕터의 핵심 포인트는 특정 TodoItem 컴포넌트의 체크박스가 클릭되었을 때, 다른 TodoItem 컴포넌트가 불 필요하게 리렌더링 되지 않도록 최적화 하는 작업입니다. 따라서 다른 TodoItem이 아닌 부모 컴포넌트의 리렌더링 여부는 핵심이 아닙니다. 참고로 부모 컴포넌트들이 렌더링 되는 이유는 간단합니다. TodoItem의 체크박스가 클릭이 되면 App 컴포넌트의 todos State 값에 변화가 발생하게 되고 이로 인해 App 컴포넌트가 리렌더링 되어 App 아래의 모든 컴포넌트가 리렌더링 되기 때문입니다.

모달 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의 오류일 수 있으니 혹시 지금도 그런 현상이 발생하는지 다시 테스트 부탁드리며 다시 문제가 발생하면 바로 답글 부탁드립니다!!