동영상 화면만 보면서 강의 자료를 확인하기에는 제가 원하는 부분을 실시간으로 확인하기가 어려운 점도 있고, 이후 복습하기도 어렵습니다. 강의 자료를 제공해주신다면 학습 하는 데에 시간을 많이 아낄 수 있을 것 같습니다.

(6. 5) 소셜 로그인 구현하기 부분 보고 질문 드립니다. 현재는 사전에 자신 Github의 OAuth 정보를 입력해야 로그인 되는 것으로 보입니다.혹시 이 정보를 사전에 등록하지 않고, github 로그인 버튼을 눌렀을 때, 아이디 비밀번호를 입력해, 그 때 인증을 유도하는 방법은 없나요??각기 다른 사용자들이 이 정보를 매번 등록할 수는 없지 않을까 싶어서 그렇습니다 !

11강에서는 removeEventListener 함수로 리스너를 명시적으로 제거하지 않는 한 요소가 사라지더라도 메모리에 계속 남아 있다고 설명하셨는데요. 12강에서는 요소를 제거하는 방식으로도 리스너를 제거할 수 있다고 해서 내용이 충돌하는 것 같아요.

문득 강의 수강 중에 강사님께서 개발자모드를 활성화하면 전체적인 화면이 반응형으로 되어있는데 쭉 수강하다가 제꺼에서는 지정이 안되있어 어느 챕터를 놓쳤는지 감이 안옵니다ㅜㅜ 혹여나 다른 분들도 비슷한 사례가 있을까싶어 여쭈어봅니다.

7:33 초 타입스크립트 버전 선택 ctrl + shift + p 입력후select type 로 하면 검색 결과가 안나오고TypeScript: Select 검색해야버전선택이 가능하니 안되시는분 참고하시길.. 처음 하는 분들은 안되고한번 검색한 적이 있는경우최근에 사용한 항목으로 검색이되는듯하네요..

깔끔하니 좋네요. 배포 과정 추가되면 좋을것같아요. 

isLoading 기능을 추가했는데 수정하기, 다이어리 페이지에서 새로고침하면 존재하지 않는 일기입니다. 라고 나오네요.https://github.com/pdh9311/onebite-react 작성했던 코드 입니다.import { Route, Routes } from "react-router-dom"; import "./App.css"; import { createContext, useEffect, useReducer, useRef, useState } from "react"; import Diary from "./pages/Diary"; import Edit from "./pages/Edit"; import Home from "./pages/Home"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": nextState = [action.data, ...state]; break; case "UPDATE": nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; case "DELETE": nextState = state.filter( (item) => String(item.id) !== String(action.data.id) ); break; default: nextState = state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispathContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; if (isLoading) { <div>데이터 로딩중입니다....</div>; } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispathContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispathContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiaryStateContext } from "../App"; //커스텀 훅 const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currDiaryItem, setCurrDiaryItem] = useState(); const nav = useNavigate(); useEffect(() => { console.log("useDiary"); const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrDiaryItem(currentDiaryItem); }, [id]); return currDiaryItem; }; export default useDiary;

 강의자료 다운로드시 위의 메시지로 다운이 되질 않습니다.

안녕하세요 선생님이 shadcn을 설치하고 있는데요 tsconfig.app.json에서 위와 같은 에러가 발생합니다.혹시 몰라서 선생님이 올려두신 자료로 해봤지만 똑같네요...그냥 "ignoreDeprecations": "6.0" 이걸 추가할까요?

윈도우환경에서 커서를 이용하여 강의를 따라가는중인데 cursor에서 커밋메시지를 작성하고 커밋을하면 한글 인코딩이 깨지는 현상이 발생합니다. ctrl-shift-p 로 select default profile을 통해 기본 터미널을cmd로 변경해도 적용이되지않는것같습니다 커서가 기본 cmd 또는 git bash를 터미널로 사용하도록 설정할수있을까요 ??

 import FirstCount from "./firstCount"; import SecondCount from "./secondCount"; import { useState } from "react"; export default function Main() { const [count, setCount] = useState(0); const handleSetCount = () => { setCount((prev: number) => prev + 1); }; return ( <> <h1>Main Component</h1> <FirstCount count={count} setCount={handleSetCount} /> <SecondCount count={count} setCount={handleSetCount} /> </> ); } import type { MouseEventHandler } from "react"; interface FirstCountProps { count: number; setCount: MouseEventHandler<HTMLButtonElement>; } export default function FirstCount({ count, setCount }: FirstCountProps) { return ( <> <h1>firstCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } import type React from "react"; interface SecondCountProps { count: number; setCount: React.MouseEventHandler<HTMLButtonElement>; } export default function SecondCount({ count, setCount }: SecondCountProps) { return ( <> <h1>secondCount Component</h1> {count} <button onClick={setCount}>increase</button> </> ); } 맨 위에 코드가 부모컴포넌트인데 부모컴포넌트에서 증가 함수를 정의하고 그 아래에 props로 내려주는 패턴은 잘 쓰이지 않는 패턴인가요? 강의에서는 각 자식 컴포넌트에서 카운트 증가 로직이 있어서 중복되는거 같아요 그래서 부모에 하나로 정의하고 props로 내려주었는데 어느게 맞는 패턴인가요?

안녕하세요. 좋은 강의 감사합니다!26. 클래스와 스타일을 다루는 가장 강력한 방법 – classList, style, 그리고 리플로우까지 에서 인라인 스타일로 스타일을 바꾸면 리플로우/리페인트가 자주 발생할 수 있어 성능에도 안 좋을 수 있다고 설명하셨는데요.예시로 들어주신 코드에서는 어차피 자바스크립트 엔진이 싱글 스레드라 클래스든 인라인 스타일이든 모두 반영된 후에, 리플로우/리페인트가 발생하기 때문에 성능적으로는 유의미한 차이가 없을 것 같은데요. 좀 더 구체적인 설명을 해주실 수 있을까요?ChatGPT 답변도 같이 첨부합니다.https://chatgpt.com/share/69181628-34d0-8007-8e81-02401c649370

그랩님, 강의 잘 듣고 있습니다.다름이 아니라 궁금한 사항(=에러 해결방법)이 필요해서 글을 남기게 되었습니다.101강에서 Axios 에러(400)가 안드로이드 스튜디오 에뮬레이터에서 발생하고이어 아래의 추가 사진2에서 보시다시피 502 Bad Gateway가 발생하여 어떻게 해결 할 수 있는지에 대해 알고 싶어서 질문 드립니다.일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후결과를 보려하는데,농구공 그림(세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아서 이것을 어떻게 하면 그랩님과 같은결과를 볼 수 있을지에 대해 여쭈어봅니다.사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다.어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다.이어서 중간에 아래 사진과 같은 절차를 겪었었는데요, 필요할 것 같아 참고로 스샷을 첨부합니다.axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용되고 있는데 8082 포트를 대신 쓸거냐는 질문에서 y or n 하라는데 y하게 되었는데요, 이 다음에 어떻게 해야그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소를 크롬브라우저에 복사 후 붙여넣으면,이전 밑에 질문에서는 정상 작동되었으나지금은 아래와 같이 바뀐 에러가 발생하였습니다.해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다.그랩님의 답변 부탁 드립니다.

안녕하세요, 선생님. 강의 잘 듣고 있습니다:)먼저 클린코드 작성 방법까지 알려주시면서 생각없이 따라 치지 않게 해주셔서 감사합니다.이번 챕터에서 useSignInWithPassword 에 넘기는 콜백을 통해 성공, 에러 등의 처리를 진행하셨습니다. 이걸 보고 이전에 진행했던 프로젝트 리팩토링 부분이 생각나서 잠시 보고왔는데, 당시에는 mutate 함수에서 자체적으로 제공하는 두번째 인자로 콜백을 넘겨주는 기능을 활용했더라구요.mutate: (variables: TVariables, { onSuccess, onSettled, onError }) => void선생님이 알려주신 방식과 이 방식의 차이점을 알고 싶습니다. 그리고 차이가 없다면 어떤 방식이 조금 더 효율적일지 선생님 의견이 궁금합니다.이 방식을 사용했을 때 콜백 타입 정의는 제대로 이루어집니다. 다만, 이렇게 하면 협업 시 코드 스타일 통일이 안될 것 같다는 생각이 들긴 합니다. 읽어주셔서 감사합니다.

안녕하세요.좋은 강의 들으며 많은 것을 배우고 있어서 감사히 생각하고 있습니다.그런데 강의 들으면서 작성한 코드 (예를 들면 감정 일기장 코드)를 제 github repository에public으로 올려도 되나요?답변해주시면 감사합니다.  

사용자 등록 번호가 없습니다. 거의 대부분의 수강생이 없을거라고 생각 되는데 이 경우는 어떻게 해야하는지 설명 부탁드립니다.

안녕하세요! 한입 타입스크립트부터 강의 잘 듣고 있습니다.현재 퍼블리셔로 일하고 있는데요, 선택자형 CSS(.container .section { ... }) 방식에 익숙하다 보니,reset-password와 forget-password처럼 UI가 거의 동일한 페이지에서 쓰이는 컴포넌트들을 분리해서 쓰고 싶다는 생각이 듭니다.예를 들어,function PageTitle({ children }: { children: ReactNode }) { return <div className="text-xl font-bold">{children}</div>; } 이런 식으로 스타일 관점에서 컴포넌트를 분리하는 것은리액트 환경에서는 지양되는 방식인지 궁금합니다.

OAuthAttributes와 CustomOAuth2User 간의 차이가 궁금합니다. OAuthAttribute는 google로부터 받은 사용자 정보를 우리가 원하는 대로 확장 가능하게 하는 DTO라고 말씀해주셨고, CustomOAuth2User도 google로부터 받은 데이터 외에 별도의 사용자 정보를 추가하는 용도라고 말씀해주셨는데, 두 설명이 같은 의미처럼 느껴집니다. 두 클래스가 어떤 차이가 있는 건가요?

강의 내용과는 별개로, 개인적으로 공부를 더 하고 싶은 부분이 있어 도움을 요청드립니다.현재 출퇴근 시간에 활용할 목적으로 실습보다는 내용이나 이론이 탄탄한 개발 서적을 찾고 있습니다. 예를 들면, JS Deep Dive처럼 언어의 원리나 깊은 내용을 다루는 책을 선호합니다.강의 영상이나 소리 대신 책으로 글을 읽으며 내용을 훑어보고, "이런 기능도 있구나, 이럴 땐 이렇게 하는구나" 하며 지식을 확장하는 용도로 활용하고 싶습니다.혹시 추천해주실 만한 서적이 있을까요?

TCP Port를 이미 쓰고있어서 다른 포트로 바꾸라고 하는데 포트를 바꿔도 문제가 없나요?