브라우저의 렌더링 과정 질문

안녕하세요 kmh880507님 이정환입니다.Vue.js에 관련해서는 잘 모르겠네요 😅 제가 Vue는 개인적으로 사용해 본 경험이 없어서 정확한 비교는 어려울 것 같습니다. 찾아보니 Vue.js도 Virtual DOM을 사용한다고 안내되어 있긴 한데 디테일한 동작 방식의 차이는 있을 수 있을 것 같습니다.

동적페이지 풀라우트 캐시 질문 있습니다.

안녕하세요 hinpuo님 이정환입니다.book/4 는 동적 페이지(Dynamic Page)가 아닌 동적 경로에 해당하는 페이지입니다. generateStaticParams에서 내보내주지 않았기 때문에 첫 접속시에는 동적 페이지로 생성되지만, 생성 이후에는 정적 페이지(Static Page)로 동작하여 Full Route Cache에 보관됩니다. npm run start로 프로모션 모드에서 테스트 하셨을 때에는 혹시 캐시 폴더를 초기화 한 상태로 실험해 보셨을까요?! 캐시는 한번 보관되면 쭉 남아 있을 수 있기에 정확한 응답 시간을 테스트 하시려면 캐시를 초기화 하신 상태에서 실험해 보셔야 합니다.

filter함수, map함수 등 중괄호를 썼을때의 문제점

안녕하세요 gogomini님 이정환입니다.해당 내용은 자바스크립트 화살표 함수 문법으로 우리 강의의 1.12) 함수 표현식과 화살표 함수의 4분 경에 이미 설명드리고 있습니다. 본 내용은 도서에도 동일하게 기재되어 있으니 자바스크립트 기초 문법 부분을 다시 복습하시는걸 권장드립니다. 화살표 함수는 => 옆에 값을 적어주면 해당 값을 바로 반환하는 특징을 가지고 있습니다. 예를 들면 다음과 같습니다.const arrayFunction = (a, b) => a + b; // a + b의 값을 바로 반환함그런데 만약 이런 화살표함수에서 함수 내부에 여러줄의 코드를 사용하고 싶다면 다음과 같이 중괄호를 사용합니다. 이때 반환하려는 값이 있다면 일반 함수 선언과 같이 return을 이용해야 합니다.const arrayFunction = (a, b) => { const resValue = a + b; return resValue; } // a + b의 값을 resValue에 저장해두었다가 반환함그런데 만약 객체값을 바로 반환하려고 하는 경우 다음과 같이 중괄호만 사용하면 함수 본문으로 이해됩니다.const arrayFunction = (a, b) => { a:a, b:b } // ??? 문법 오류이럴 때에는 소괄호로 중괄호를 묶어주면 이 중괄호 내부를 객체로 인지하여 객체 값을 바로 반환하는 화살표 함수를 만들 수 있습니다.const arrayFunction = (a, b) => ({ a:a, b:b }); // {a:a, b:b}를 반환함

투두 수정하기에서 onUpdate함수에 id를 넘겨줄때 왜 이벤트 핸들러로 하는게 아닐까요?

안녕하세요 gogomini님 이정환입니다.onChangeCheckBox 이벤트 핸들러 함수 내부에서 호출하는 onUpdate 함수에게 전달되는 id의 값은 TodoItem 컴포넌트에게 Props로 이미 전달 된 값 입니다. TodoList 컴포넌트에서 map 메서드를 이용해 TodoItem을 리스트로 렌더링 하는 부분을 참고해보세요또 이벤트 객체 e에는 현재 Todo 아이템의 id가 존재하지 않으므로 e.target.id와 같은 방식으로는 해당 Todo의 id에 접근할 수 없습니다.

favicon 변경이 안돼요 ㅠㅠ

안녕하세요 이정환입니다.보내주신 코드 살펴보니 src/index.html 파일이 아닌 dist/index.html 파일을 수정하신걸로 보입니다. 강의와 동일하게 src/index.html 파일의 내용을 수정하셔야 정상적으로 반영됩니다.참고로 dist 폴더는 빌드 결과물이 저장되는 폴더로 이 파일의 내용은 직접 수정하실 필요 없습니다. src 폴더 밑의 내용에 따라 자동으로 생성되는 파일이에요

혹시 일반적인 방법이 무엇일까요?

안녕하세요 이정환입니다.세션의 존재 유무에 따라 다른 ui를 렌더링해야 할 때에는 첨부하신 코드처럼 작업하셔도 충분합니다!다만 쿠키로부터 세션을 불러오는 코드가 RootLayout내에 있을 경우 이 앱 내부의 모든 페이지가 풀라우트 캐시가 적용되지 않는 동적 페이지로 강제 설정된다는 문제점이 있습니다.따라서 조금 더 좋은 방법으로는 TopNavigationMenu 컴포넌트를 클라이언트 컴포넌트로 설정하신 다음, 해당 컴포넌트 내부에서 쿠키에 보관된 세션 정보를 불러와 조건부로 렌더링 하도록 처리하시는게 좋을듯 합니다

Context 분리하기

안녕하세요 반승우님 이정환입니다.네 useMemo를 이용해서 감싸주신 시점에서는 useCallback은 다시 제거하셔도 무방합니다!

디스코드 채널 문의

안녕하세요 산독기님 이정환입니다.현재는 카페와 채팅방 위주로 운영되고 있어서 디스코드는 살짝 잠잠한 상태입니다 🌙디스코드 초대 링크 보내드릴게요!https://discord.gg/7skpGjpq

창조절 안됨

안녕하세요 최기범님 이정환입니다."npm run dev로 실행시키고 인터페이스를 중간으로 옮겼는데" 라고 말씀해주셨는데요, 여기서 인터페이스가 무엇을 말씀하시는건지 잘 모르겠습니다. 스크린샷으로 첨부해서 답글 달아주시면 정확히 답변 드릴 수 있을것 같아요

8.5) Read = 투두리스트 렌더링하기

안녕하세요 이정환입니다.보내주신 소스코드를 확인해보았더니 에디터 상에는 정말 오류가 표시되지 않네요, 이는 아마 Vite나 ESLint의 버전 업데이트로 인해 중요하지 않은(앱을 당장 중단시키지는 않는) 오류로 처리되어 에디터 상에는 나타나지 않는걸로 보입니다. 그러나 브라우저 콘솔에서는 아래와 같이 동일한 오류를 확인하실 수 있습니다.(사진)해당 문제를 제보해주셔서 감사합니다. 더 정확한 원인이 파악되면 답글 추가로 남겨드리겠습니다!