글 수정기능을 추가하고 useReducer로 바꿔서 했는데 글을 추가해도 새로운 내용이 나타나지 않고, 마지막 요소가 다시 추가되었습니다. [{content:"To1"}, {content:"To1"}] 확인해보니 컴포넌트에서 받은 props를 useState초기화값으로 넣으면 바뀌지 않는 사실을 알게되었습니다. 하지만 이부분을 useEffect형식으로 바꿔 적어주니 새로운 내용으로 바뀌는 것을 확인했습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } //////////////////////////////////////////// // useEffect 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(""); useEffect(() => { if (content) { setUpcontent(content); } }, [content]); ... } useReducer를 적용하지 않을때 props를 useState초기화값을 넣어도 잘 구동되었습니다. // props content를 useState 초기화값으로 적용 const TodoItem = ({ content, id, isDone, date, onUpdate, onDelete }) => { const [upContent, setUpcontent] = useState(content); ... } 이것이 리액트 라이프 사이클 때문에 이러한 현상이 발생한것인가요?
주기적으로 업데이트한다고 강의 소개에 크게 적어놓으셨는데, 왜 2023년 초 이후로 업데이트가 없나요? 그리고 새로운 버전 강의가 나왔던데, 이전 버전 수강자들에게는 무료로 제공되나요? 이 강의가 저렴한 것도 아니고 몇십만 원이나 하는데, 그 정도 보상은 해주셔야 한다고 생각합니다.
안녕하세요 현재 useReducer를 이용하여 투두리스트 업그레이드 부분중에 몇가지 질문이 있습니다. useReducer에 대해서 어느정도 이해는 했지만 dispatch는 어느 부분에 작성을 해야되는지 조금 헷갈리는데 이 강의에서는 onCreate 함수안에 dispatch를 작성했는데 이 함수에 dispatch를 사용한 이유가 조금 헷갈립니다. 그리고 useRudcer는 비슷한 기능을 하는 함수들을(업데이트, 삭제) 좀 더 간단하게 만들기 위해 사용한다라고 이해하고 있으면 되는지도 궁금합니다. 마지막으로 리덕스와 조금 비슷한것같은데 useReducer와 리덕스는 완전 다른 개념인건가요?
투두리스트를 만들고 있는데 여기서 만약 삭제버튼 옆에 수정버튼을 추가하여 todo list에 입력한 content 내용을 수정할 수 있는 기능을 추가하려면 todolist 내용 요소를 div요소에서 input text 요소로 바꾸고 보이기는 input value사용하고, 수정은 OnChange 이벤트를 사용하면 될까요?
안녕하세요. 작성한 일기를 언제 작성했는지 필터링 하기 위한 getMonthlyDate 함수에 대해 질문이 있습니다. 강의 내용에서는 작성한 일기가 언제 작성했는지를 알기 위해서 beganTime, endTime을 두고 시간까지 비교를 하였는데요. 간단하게 getMonth()를 활용해서 작성한 일기를 해당하는 '월'로만 비교를 할 수는 없는 건지 궁금합니다!
const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; 2.5로 수정햇는데 오류가 뜨네요 어떠한 오류인 지 모르겠습니다 밑 코드는 // DOM 요소 선택 const todoInput = document.querySelector("#todo-input"); // 할 일 입력 필드 const todoList = document.querySelector("#todo-list"); // 할 일 목록 // localStorage에서 저장된 데이터를 불러오기 const savedTodoList = JSON.parse( localStorage.getItem("saved-items") ); /* 문자열로 저장된 데이터를 JSON.parse를 통해 배열로 변환 */ // 새로운 할 일을 생성하는 함수 const createTodo = function (storageData) { let todoContents = todoInput.value; // 입력 필드에서 가져온 값 if (storageData) { todoContents = storageData.contents; // 저장된 데이터가 있으면 그 내용을 사용 } // 할 일을 나타내는 DOM 요소 생성 const newLi = document.createElement("li"); // li 요소 생성 const newSpan = document.createElement("span"); // span 요소 생성 (할 일 내용 표시) const newBtn = document.createElement("button"); // 완료 버튼 생성 // 완료 버튼 클릭 시 해당 할 일을 완료 상태로 변경 newBtn.addEventListener("click", () => { newLi.classList.toggle("complete"); // 완료된 상태를 토글 saveItemsFn(); // 변경 내용을 저장 }); // 할 일을 더블클릭하면 삭제 newLi.addEventListener("dblclick", () => { newLi.remove(); // li 요소 제거 saveItemsFn(); // 변경 내용을 저장 }); // 저장된 데이터가 완료 상태면 완료 표시 추가 if (storageData?.complete) { // 옵셔널 체이닝 사용 newLi.classList.add("complete"); // 완료 클래스 추가 } // 할 일 내용을 span에 추가 newSpan.textContent = todoContents; // li 요소에 버튼과 span을 자식으로 추가 newLi.appendChild(newBtn); newLi.appendChild(newSpan); // 할 일 목록에 li 추가 todoList.appendChild(newLi); // 입력 필드를 비우기 todoContents.value = ""; // 변경된 목록 저장 saveItemsFn(); }; // Enter 키를 눌렀을 때 할 일 추가 const keyCodeCheck = function () { if (window.event.keyCode === 13 && todoInput.value !== "") { createTodo(); // 입력값이 있으면 할 일을 생성 } }; // 전체 삭제 기능 const deleteAll = function () { const liList = document.querySelectorAll("li"); // 모든 li 요소 선택 for (let i = 0; i < liList.length; i++) { liList[i].remove(); // 모든 할 일 제거 } saveItemsFn(); // 변경 사항 저장 }; // localStorage에 저장하는 함수 const saveItemsFn = function () { const saveItems = []; // 저장할 데이터를 담을 배열 // 현재 목록의 할 일들을 객체로 변환하여 저장 for (let i = 0; i < todoList.children.length; i++) { const todoObj = { contents: todoList.children[i].querySelector("span").textContent, // 할 일 내용 complete: todoList.children[i].classList.contains("complete"), // 완료 상태 }; saveItems.push(todoObj); // 객체를 배열에 추가 } // 배열이 비었으면 localStorage에서 데이터 제거, 아니면 저장 saveItems.length === 0 ? localStorage.removeItem("saved-items") // 데이터가 없으면 키 삭제 : localStorage.setItem( "saved-items", JSON.stringify(saveItems) // 배열을 문자열로 변환 후 저장 ); }; // 저장된 데이터가 있으면 불러와 화면에 표시 if (savedTodoList) { for (let i = 0; i < savedTodoList.length; i++) { createTodo(savedTodoList[i]); // 저장된 데이터로 할 일을 생성 } } const weatherSearch = function (position) { console.log(position); fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${position.latitude}&lon=${position.longitude}&appid=9756434244216c3d2f9c08591b54bede`) } // 위치 정보를 처리하는 함수 const acessToGeo = function (position) { const positionObj = { latitude: position.coords.latitude, // 위도 longitube: position.coords.longitude // 경도 (오타: longitube → longitude) }; console.log(positionObj); // 위치 정보 출력 console.log(position); // 전체 위치 데이터 출력 weatherSearch(positionObj) }; // Geolocation API로 사용자 위치 요청 const askForLocation = function () { navigator.geolocation.getCurrentPosition( acessToGeo, // 위치 정보를 가져오면 실행할 콜백 (err) => { console.log(err); // 에러가 발생하면 에러 정보를 출력 } ); }; // 위치 요청 실행 askForLocation();
10.3) React.memo와 컴포넌트 렌더링 최적화 강의를 보고, 투두 리스트 아이템에 체크박스를 클릭했을 때, Header 컴포넌트 외에 Editor 컴포넌트도 불필요하게 리렌더링이 되고 있어 리렌더링 되지 않도록 코드를 수정하였습니다. 코드를 수정해서 더 이상 리렌더링이 되지 않고 있는데 이러한 성능 최적화가 정말 필요한 건지에 대한 의문이 듭니다. 거대한 컴포넌트의 경우 불필요한 리렌더링을 막는 것은 정말 필요하고 좋을 것 같은데 Editor 컴포넌트나 Header 컴포넌트 정도의 작은 컴포넌트의 리렌더링도, 불필요하게 일어난다면 막는 것이 좋은 건지 아니면 굳이 최적화가 필요 없는 지 실무 관점에서 궁금합니다.
kakao is not defined 오류가 나서 kakao 개발자 서버에 들어가서 https:// localhost:3000 등록했는데도, 계속 오류가 나네요. F12 눌러서 Network 들어가보니 Status Code 에 401 unauthorized 뜨는데.. 해결방법좀 알려주세요 ㅠ java script key/ rest api key 둘다 적용해봤는데도 안되네요 혹시 웹등록하는데 시간이 좀 필요할까요
docker-compose build가 안되요!ㅠㅠㅠㅠㅠ 도커라 도커컴포즈 삭제하고 다시 까는거는 5시간동안 했는데... 챗gpt가 하라는데로 5시간동안 했는데 해결이 안되네요! Traceback (most recent call last): File "urllib3/ connectionpool.py ", line 677, in urlopen File "urllib3/ connectionpool.py ", line 426, in make request File "<string>", line 3, in raise_from File "urllib3/ connectionpool.py ", line 421, in make request File "http/ client.py ", line 1369, in getresponse File "http/ client.py ", line 310, in begin File "http/ client.py ", line 271, in read status File " socket.py ", line 589, in readinto ConnectionResetError: [Errno 104] Connection reset by peer During handling of the above exception, another exception occurred: Traceback (most recent call last): File "requests/ adapters.py ", line 449, in send File "urllib3/ connectionpool.py ", line 727, in urlopen File "urllib3/util/ retry.py ", line 410, in increment File "urllib3/packages/ six.py ", line 734, in reraise File "urllib3/ connectionpool.py ", line 677, in urlopen File "urllib3/ connectionpool.py ", line 426, in make request File "<string>", line 3, in raise_from File "urllib3/ connectionpool.py ", line 421, in make request File "http/ client.py ", line 1369, in getresponse File "http/ client.py ", line 310, in begin File "http/ client.py ", line 271, in read status File " socket.py ", line 589, in readinto urllib3.exceptions.ProtocolError: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer')) During handling of the above exception, another exception occurred: Traceback (most recent call last): File "docker/api/ client.py ", line 214, in retrieve server_version File "docker/api/ daemon.py ", line 181, in version File "docker/utils/ decorators.py ", line 46, in inner File "docker/api/ client.py ", line 237, in _get File "requests/ sessions.py ", line 543, in get File "requests/ sessions.py ", line 530, in request File "requests/ sessions.py ", line 643, in send File "requests/ adapters.py ", line 498, in send requests.exceptions.ConnectionError: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer')) During handling of the above exception, another exception occurred: Traceback (most recent call last): File "docker-compose", line 3, in <module> File "compose/cli/ main.py ", line 81, in main File "compose/cli/ main.py ", line 200, in perform_command File "compose/cli/ command.py ", line 70, in project_from_options File "compose/cli/ command.py ", line 153, in get_project File "compose/cli/docker_ client.py ", line 43, in get_client File "compose/cli/docker_ client.py ", line 170, in docker_client File "docker/api/ client.py ", line 197, in init File "docker/api/ client.py ", line 222, in retrieve server_version docker.errors.DockerException: Error while fetching server API version: ('Connection aborted.', ConnectionResetError(104, 'Connection reset by peer')) [119730] Failed to execute script docker-compose 챗 gpt에 물어보고 똑같이 해봐도 해결이 안됩니다. ㅜㅜㅜㅜㅜ
<input value={name} onChange={onChangeButton} placeholder={"이름"} /> 안녕하세요! 이번 강의 내용에서 return되는 부분에서 텍스트 박스를 형성하는 부분에 있는 위에 코드 부분에 대한 질문입니다! value={name}이 들어가는 이유는 무엇인가요?? 이 부분이 없어도 지장이 없는 것 같아 여쭤봅니다!
현재 실무에서 ORM(Prisma)을 채택해서 백엔드를 만들고 있어요. ORM으로 할 수록 Repository패턴과 조합이 좋지않다고 생각이 들고 실제 팀리더도 Repository패턴을 같이 쓰는거에 부정적이고 실제로 사용하지 않아요. 그렇다고 service 하나에 몰아 넣으니 저는 코드 읽기가 점점 힘들어지는거 같아요. 대체할만한걸 검색해보니 CQRS패턴이나 Query Object가 나오는데 아니면 서비스파일을 여러개 두거나... 강사님 같은 경우에는 실무에서 어떻게 대처하시는지 궁금합니다.
강의대로 eslint 설정한 후 { "extends" : [ "react-app" ] } npm run dev 하면 아래와 같은 에러가 납니다. VITE v6.0.3 ready in 354 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help 오후 4:41:35 [vite] Internal server error: C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved ✖ 1 problem (1 error, 0 warnings) Plugin: vite-plugin-eslint File: C:/Dev/fullstack-app/frontend/src/main.jsx at TransformPluginContext._formatError (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47158:41) at TransformPluginContext.error (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47153:16) at TransformPluginContext.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite-plugin-eslint/dist/index.mjs:1:1989) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async EnvironmentPluginContainer.transform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:47001:18) at async loadAndTransform (file:///C:/%EC%94%A8%EC%97%94%ED%8B%B0%ED%85%8C%ED%81%AC/Dev/fullstack-app/frontend/node_modules/vite/dist/node/chunks/dep-yUJfKD1i.js:40852:27) 오후 4:41:35 [vite] Pre-transform error: C:\Dev\fullstack-app\frontend\src\main.jsx 1:1 error Parsing error: The keyword 'import' is reserved 파싱 오류 같은데 어느 설정파일을 수정해야 할까요?
11:42 아래와 같이 for in을 배열에서도 사용이 가능한 것 같습니다! 다만 권장되지는 않는 방법이라고 하네요. let arr = [1, 2, 3]; for (let i in arr) { console.log(arr[i]); } 권장되는 방법: for...of, 일반 for 루프, forEach() 메서드 등
많은 분들이 memo 기능 관련하여 문의 주신것 같은데 내용이 다 동일하네요.. 영상을 보면 변경 전/후 전부다 하이라이트가 표시가 되어서 리렌더링이 발생하는지 시각적으로 확인이 안됩니다. 문의 남기신 글에는 console.log로 확인을 하라고 하시는데.. 그럴것 같으면 강의 내용 자체가 바껴야 되는거 아닌가요?? 이 부분이랑 context 설명하는 부분도 마찬가지인데요.. context 설명할때 onUpdate, onDelete, onCreate는 useCallback을 사용하여 재생성을 방지하게 이미 설정되어있는데, 왜 memo 기능을 써야하나요?? 이 부분도 설명할때 화면상에 하이라이트가 전과 후 다 발생하는데.. 강사님 혼자 뭐 없어진거 확인하는데.. 화면상으로 전혀 확인이 안되는데.. 혼자 진행하시니 혼란스럽네요.. 확실하게 딱 표시가 나는게 아니라면 그에 대한 설명이 있어야 하지 않을까 싶습니다.
안녕하세요. 컴포넌트 최적화 하는 부분에서 질문있습니다. 10.3강에서 대략 5분 40초쯤에 Header 컴포넌트에 memo 기능을 사용해서 최적화 한 뒤에, 체크박스를 클릭하면서 헤더 컴포넌트가 리렌더링이 일어났는지에 대해 확인하는 부분이 있습니다. 질문사항은 memo 기능을 통해 최적화를 하던 안하던 개발자 도구에서 Header 컴포넌트가 항상 리렌더링이 일어나는것 같은데 어떻게된걸까요? 헤더부분이 계속 노란색으로 뜨면 리렌더링이 일어났다는걸로 보이는데 강의 영상에서도 다른 컴포넌트와 동일하게 노란색으로 변경됩니다. 강의에서 TodoItem을 커스텀한 부분은 강의대로 적용됐습니다.(이부분은 리렌더링이 발생하지 않습니다.)
