핸드북 light/dark mode 관련 이슈가 있는 것 같습니다.

안녕하세요 이지민님 이정환입니다아이고..! 이런 실수가 있었군요 수정 마쳤습니다 ㅠㅠ 감사합니다(사진)

풀라우트캐시 동작 원리에서 데이터 캐시 관련 질문

안녕하세요 스트로베리님 이정환입니다.앗 그렇네요 😧 말씀하신대로 데이터캐시에 보관되지 않는 API 요청이 있다면 해당 페이지는 일반적으로 다이나믹 페이지로 설정됩니다. 개인적으로 풀 라우트 캐시의 개념 설명중에 데이터캐시의 동작까지 함께 언급할 경우 혼란이 있을 수 있을 것으로 예상되어 SKIP 처리 해 두었는데 생각해보니 스트로베리님의 말씀이 맞네요 ..! 강의 수정해 두도록 하겠습니다 감사합니다 🙇‍♂

제네릭 클래스 핸드북 페이지가 undefined라고 나옵니다.

안녕하세요 이지민님 이정환입니다.아이코 ...! 현재 노션의 API Rate Limit 정책이 변경되어 핸드북 서비스에도 문제가 발생하는 걸로 보입니다. 24시간 내로 수정하여 다시 배포해 두도록 하겠습니다!!

next.js 프로젝트

안녕하세요 imhj11777님 이정환입니다넵 ㅠㅠ 아직 해당 커리큘럼의 강의는 계획에 없습니다. 워낙 변경사항이 많은 Next.js인 만큼 아직은 좀 더 안정된 버전이 나오길 기다리고 있습니다. 향후에 제작이 시작될 경우 바로 안내 드리겠습니다!

명시적 타입 선언(콜론 타입 선언)과 as 타입 단언 차이

안녕하세요 이민진님 이정환입니다.우선 타입 단언 문법(as) 대신 타입 정의를 사용하셔도 무관합니다. 두 방식 모두 동일하게 동작합니다. 제가 강의에서 as를 사용한 이유는 초기값을 의도적으로 느슨하게 정의하기 위함입니다. 예를 들어 아래와 같은 상황을 가정해보겠습니다. type State = { isLoaded: boolean; session: Session | null; user: User | null; // 이후 추가된 필드 preferences: Preferences; // 이후 추가된 필드 }; // 타입 정의(:) — 엄격 // State에 필드가 추가될 때마다 initialState에도 반드시 기본값을 채워야 컴파일 통과 const initialState: State = { isLoaded: false, session: null, user: null, // 의무적으로 추가 preferences: { ... }, // 의무적으로 추가 }; // 타입 단언(as) — 느슨 // State에 필드가 추가되어도 initialState는 그대로 두고, 액션에서 채워 넣을 수 있음 const initialState = { isLoaded: false, session: null, } as State; 핵심은 "초기값이 State의 모든 필드를 가질 필요가 있는가?" 입니다. Zustand 스토어처럼 일부 값은 초기 렌더 시점이 아니라 로그인 액션, fetch 응답, 사용자 인터랙션 등을 통해 나중에 채워지는 구조에서는, 모든 필드를 미리 의미 없는 기본값으로 채워두는 것이 오히려 부자연스러울 때가 있습니다. 이때 as를 사용하면 초기값을 꼭 필요한 필드만으로 간결하게 유지할 수 있습니다.

Next.js + Tanstack Query BFF 구조 질문

안녕하세요 김수로님 이정환입니다.1) 넵 당연 분리하는게 일반적입니다 👍만약 Tanstack Query를 사용하고 계시지 않았다면 어짜피 useEffect나 useState를 사용해 직접 클라이언트 측에서 fetching 하도록 레이어를 별도로 구성하셔야 합니다. 그렇다고 서버측에서 모든 API 요청을 수행하게 만들수도 없으니 당연 분리가 되어야 합니다.개인적으로는 api 폴더 밑에 user.client.ts, user.server.ts로 더 명확히 파일명을 분리해 사용하면 좋을 것 같습니다. 2) 외부 API 키를 숨겨야 한다면 BFF는 필수 사항인 것 같습니다. 보안 요구사항이나 백엔드의 명세를 변경하지 않는 이상, 클라이언트측에서는 해결할 방법이 딱히 떠오르지 않네요 3) 네 보통은 공통의 데이터는 Next.js의 데이터 캐시로 관리하는게 좋을듯 합니다. 그러나 만약 데이터 캐시의 용량이 너무 과해져(보통 이럴 일은 없지만...) Next.js 서버 메모리상에 문제가 될 경우 차라리 캐시와 응답속도를 조금 포기하는 방향도 선택은 가능합니다.데이터 캐시로 저장된 데이터를 클라이언트측에서 사용할 때에는 말씀하신 것 처럼 적용하시면 깔끔할 것 같습니다. 다만 무결성이 크게 중요하지 않은 휘발성 데이터라면 클라이언트 측 낙관적 업데이트 만으로도 해결이 가능할 수 있을듯 합니다. 4) 혼란이 오셨다고 말씀하셨지만 이미 스스로 잘 정리하신것 같습니다. 모든 상황에 단순하게 적용할 수 있는 베스트 케이스는 없다고 생각합니다. 은탄환은 없다 라는 유명한 격언도 있죠 그래서 어느정도 복잡성은 탄탄한 기초 지식으로 잘 컨트롤하는 편이 더 빠르고 좋은 길이 될 수 있다고 생각합니다.김수로님께서 남겨주신 질문을 읽어보면 사실 이정도 복잡성은 충분히 잘 컨트롤 하고 계신것으로 보입니다. 아마 이런 케이스를 처음 겪어보셔서 불안함이 있으시지 않을까 싶은데요 걱정하실 필요는 없지 않을까 싶습니다 😀

쿠폰 문의 드립니다.

안녕하세요 이정환입니다.키트 가격만큼 차감된 쿠폰을 말씀하는게 맞으실까요!?그렇다면 아래의 이메일로 king199777@gmail.com 수강중이신 인프런 닉네임 보내주시면 쿠폰 발급 해 드리겠습니다 감사합니다 😀

useEffect와 lifecycle문의

안녕하세요 공부하는이님 이정환입니다.1) 어떤 값이든 다 넣을 수 있습니다.2) 마운트란 엄밀히 말하자면 React.js 컴포넌트가 화면에 등장한 시점을 뜻합니다. 말씀하신대로 JavaScript 코드가 실행이 완료되어 HTML로 화면에 렌더링이 된 상태와 같은 의미로 볼 수 있겠습니다.3) 네 백엔드 서버로부터 데이터를 불러오거나 Console이 아닌 기타 로거 서비스를 이용해 특정 상황에서 로그를 기록해야 할 일이 있을때 사용합니다.

Next.js 사전렌더링 이해하기 부분

안녕하세요 kaeuhy님 이정환입니다.1.2 챕터에서의 서버는 React.js 웹 서버를 말합니다. 좀 더 구체적으로는 JavaScript로 작성해 둔 React.js 관련 파일들을 localhost:5173 혹은 localhost:3000번 주소로 제공하는 서버를 뜻 합니다.이에 대해서는 선수 강의인 한입 리액트에서 더 자세히 다루고 있으니 참고해보시면 좋을 것 같습니다 😀

프론트엔드 학습 수준 문의

안녕하세요 @V님 이정환입니다.우선 취업시장에서 요구하는 역량은 회사마다 매우 격차가 큽니다 🥲 따라서 회바회 일 수 있다는 점 미리 말씀드립니다.개인적인 제 생각으로는 강의에서 알려드리는 내용 이상의 학습과 프로젝트를 경험하셔야 경쟁력이 있을 것으로 예상됩니다. 제 React, TS 강의는 어디까지나 기초 핵심 개념을 위주로 다루고 있을 뿐 실전 상황에서 발생할 수 있는 다양한 케이스 까지는 소개해 드리고 있지 않습니다. 따라서 강의를 통해 기본기를 충분히 다지신 이후 해당 기본기를 이용하여 실제 유저가 사용 할 수 있는 상용 서비스를 만들어 꼭 운영까지 해 보시길 권장드립니다. 이런 실전의 경험에서 실제 프로덕트를 운용하고 유지보수하는 지식들을 알게 됩니다. 더불어 프론트엔드 지식 뿐만 아니라 백엔드, 인프라, DB, 디자인 등의 다양한 분야의 지식도 함께 섭렵하시길 권장드립니다. 물론 프론트엔드 지식 수준 만큼은 당연히 어렵겠지만 AI를 활용해 함께 프로젝트를 진행하고 꾸려나갈 만큼의 지식 수준은 꼭 필요하다고 생각합니다.