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의 버전 업데이트로 인해 중요하지 않은(앱을 당장 중단시키지는 않는) 오류로 처리되어 에디터 상에는 나타나지 않는걸로 보입니다. 그러나 브라우저 콘솔에서는 아래와 같이 동일한 오류를 확인하실 수 있습니다.(사진)해당 문제를 제보해주셔서 감사합니다. 더 정확한 원인이 파악되면 답글 추가로 남겨드리겠습니다!

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

안녕하세요 eachan님 이정환입니다.소스코드 위치에 에러 메세지가 바로 나타나는 기능을 이용하시려면, 우리 강의의 1.2) VSCode 설치하기 챕터의 8분 51초 경에 설명드리고 있는 Error Lens 라는 확장 프로그램을 설치하셔야 합니다.혹시 설치하셨음에도 안된다면 다시 답글 부탁드립니다 😀

SSR 2.실습 14:35초 /search 파일 내부의 서버 사이드 함수 관련 질문드립니다.

안녕하세요 박영현님 이정환입니다.우선 본 강의에서 사용하는 서버는 총 2개 입니다. 첫번째는 Next.js 웹을 localhost:3000 주소로 호스팅하는 Next.js 웹 서버이구요두번째는 onebite-books-server-main 폴더로 제공해드리고 있는 백엔드 API 서버입니다. 따라서 말씀하신 14:35초 경의 context의 내용이 서버측 콘솔에서 출력된다는 말은, Next.js 서버의 콘솔에 출력된다는 이야기 입니다.