CSR, SSR 렌더링 방식 문의

안녕하세요 이정환입니다.순서대로 답변드리겠습니다 😃질문1) 네 TTI를 기준으로는 CSR과 SSR의 방식의 큰 차이는 없습니다. 다만 기존 리액트 앱의 경우 JS Bundle을 페이지 단위로 스플리팅 하는 기능이 자동 제공되지 않기 때문에 페이지 단위로 코드가 자동 스플리팅 되는 Next.js가 조금 더 빠를 가능성이 있습니다. 질문2)네 맞습니다. CSR에서 코드스플리팅 전략을 채택해 초기 접속 속도를 높일 수 있습니다. 그러나 이럴 경우 이후의 페이지 이동시 추가적으로 JS Bundle을 불러와야하기 때문에 향후의 페이지 이동이 오히려 느려지게 될 수 있습니다. 따라서 이런 문제까지 해결하시려면 프리페칭 기능도 함께 적용해주셔야 합니다. 그러나 코드스플리팅만 채택한 CSR이 단점만 남는 렌더링 전략 이냐고 물으신다면 그렇다고 말씀드리기에는 조금 애매합니다. 페이지 이동 속도보다 초기 접속 속도가 훨씬 중요한 서비스의 경우 (이를 테면 인덱스 페이지에서 거의 모든 기능을 처리하는 등의 서비스...) 좋은 전략이 될 수 있습니다.

ES Lint 9에서의 rule 설정

안녕하세요 이정환입니다.eslint.config.mjs 에서는 다음과 같이 rules를 설정하시면 됩니다.import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), { rules: { "@typescript-eslint/no-unused-vars": "off", "@typescript-eslint/no-explicit-any": "warn", }, }, ]; export default eslintConfig; 만약 설정한 rule이 제대로 적용되지 않을 경우 VSCode 에디터 설정에 문제가 있을 수 있습니다.이럴 경우 다음 그림과 같이 ESLint 서버를 다시 시작해보시기 바랍니다.그래도 안되면 답글 부탁드립니다. (사진)

filter return 문제

안녕하세요 박선우님 이정환입니다.AI 인턴의 답변대로 화살표 함수 뒤에 중괄호를 사용하실 경우 명시적으로 return 키워드를 적어주셔야 합니다. 이는 자바스크립트의 기능으로 리액트의 버전과는 무관합니다.화살표 함수의 본문이 중괄호 없이 한 줄로 작성되면 반환값이 자동으로 반환됩니다. todos.filter(todo => todo.isCompleted); 중괄호를 사용하면 명시적으로 return 문을 써야 반환값이 설정됩니다. todos.filter(todo => { return todo.isCompleted; });강의의 코드에서는 화살표 뒤에 중괄호를 사용하지 않았기에 return을 사용하지 않아도 값이 반환됩니다. 화살표 함수의 구체적인 사용법에 대해서는 우리 강의의 1.12 챕터 함수 표현식과 화살표 함수를 참고하시면 좋겠습니다.

클라이언트 컴포넌트의 사전 렌더링 질문

안녕하세요 이정환입니다.결론부터 말씀드리자면, 사전 렌더링 과정 중 클라이언트 컴포넌트는 초기 UI를 렌더링 하는 방향으로만 동작해요 useState를 통해 만든 State는 초기값으로 사용되고, useEffect 등은 마운트 이후에만 동작하니 아예 동작하지 않게 됩니다. 로컬 스토리지나 DOM 조작 등의 브라우저 API를 이용하는 경우에는 오류가 발생해요! 이런 코드는 서버 측에서는 접근 자체가 불가능 하기 때문에 조건문 등을 통해 브라우저 환경에서만 실행되도록 막아두셔야 합니다.

서버 액션을 트리거하는 방법

안녕하세요 이정환입니다.버튼 방식을 사용하셔도 됩니다! 기능 자체에는 전혀 문제는 없어요! 그러나 Form의 Submit 이벤트를 활용하는 방향으로 작업하시면 하이드레이션 이전에도 서버액션을 트리거링 할 수 있다는 차이점이 있습니다.구체적으로 말씀드리자면 Button의 onClick과 달리 Form 태그의 제출 이벤트는 HTML 고유의 기능이므로 하이드레이션 이전에도 실행 자체는 가능합니다! 따라서 요런 차이점을 인식하고 사용하시면 문제 없을 것 같습니다.

삭제하기 질문 드립니다.

안녕하세요 문제의 원인을 추가 확인하여 답글 달아드립니다!===문제의 원인은 3주 전에 이루어진 React Router V7 업데이트로 인해 navigate 함수의 동작 방식이 변경되어 발생하는 문제로 확인되었습니다.기존 React Router V6 버전에서는 navigate 함수가 동기적으로 동작하였기 때문에, 페이지가 이동할 때에 기존 페이지의 리액트 훅이나 이펙트가 동작하지 않았는데요V7 버전부터는 이제 navigate 함수가 비동기적으로 동작하여, 페이지 이동중에도 기존 페이지의 리액트 훅이나 이펙트 들이 동작한다고 합니다.따라서 이 문제를 해결하시려면 설치된 React Router의 버전을 V6로 다운그레이드하시는 방법과 V7에 맞도록 코드를 수정하는 방법이 있는데요, 다운그레이드는 무언가 후퇴하는것 같은 느낌이 있으니 이보다는 전진하는 방식으로 코드 수정 방법을 안내드리겠습니다.방법은 간단합니다 useDiary.js 파일 안에 작성되어 있는 useDiary의 useEffect 함수의 Deps(의존성 배열)을 아래와 같이 변경하시면 됩니다. useEffect(() => { (...) }, [id]); // 변경 사항!!기존에는 [id, data] 요렇게 설정되어 있던 의존성 배열의 값을 [id]로 변경하시게 되면 이제 data State의 변화로 인해 useDiary 훅이 다시 호출되지 않습니다. 이로인해 페이지에 처음 진입하는 상황에서만 "존재하지 않는 일기입니다" 얼럿이

사용중인 Theme 문의

안녕하세요 이정환입니다.우선 저는 VSCode 기본 테마를 사용하고 있습니다. 정확한 기본 테마의 이름은 "Deafult Dark +" 라고 하네요! 요거 적용하시면 될 것 같습니다.(사진) 추가로 Material Icon Theme 라는 파일 아이콘을 이쁘게 꾸며주는 익스텐션을 함께 사용하고 있는데요 요것도 확인해보시면 좋을 것 같습니다.(사진)

input 안에 value를 넣어주는 이유가 궁금합니다!

안녕하세요 이정환입니다.우선 말씀하신대로 단순 입력 기능으로만 한정 했을 때에는 value={name}을 설정하지 않아도 괜찮습니다. 그러나 State의 초기값을 에 설정한다거나, 입력 외의 수단으로 인해 변경되는 State의 값을 에 동기화 하기 위해서는 value={name}가 필요합니다. 따라서 이처럼 State로 사용자의 입력을 관리하는 상황에서는 value Props에 State 값을 설정하게 됩니다.

배열에서도 for in 사용이 가능한 것 같습니다!

안녕하세요 이정환입니다.네 말씀하신대로 문법적으로 오류가 발생하는 것은 아니지만, 방문의 순서가 중요한 배열의 반복에는 for in 을 사용하시지 않는게 좋습니다.일반적으로 배열은 순차적으로 자료를 저장하는 자료형으로, 이를 반복한다는 것은 이 순서에 맞게 요소를 방문하는 것을 의미하는데요 for in 문법으로는 일관된 순서대로 방문하지 못할 가능성이 있기에 이런 의미에서 배열의 반복이 불가능하다고 이해하시면 되겠습니다.

슈퍼베이스 커넥션 셋팅이 없어서 주소 복사를 못하고 있는 상황입니다.

안녕하세요 이정환입니다.앗 Supabase 업데이트로 인해 커넥션 스트링의 위치가 변경되었네요올려주신 사진에 나와있듯 Connection String는 이제 top bar의 Connect 버튼을 누르면 찾을 수 있다고 합니다. (사진) 직접 확인해보니 아래 그림처럼 화면 우측 상단의 Connect 버튼을 클릭하면(사진) 다음과 같은 Modal 창이 나타나는데요 여기서 Session Pooler의 값을 복사하시면 됩니다(사진) 업데이트 사항 빠르게 반영해두겠습니다!