강사님께서 말씀주신대로 년월 증가처리에 대해서동일하게 코드를 작성하였습니다.<div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} /> <DiaryList/> </div>(질문)Home.jsx에서 Button 구성요소 ">" 클릭시에onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다.rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}Button 구성요소에는 전달받은 onClick 전달받은함수객체에 대해서 별도 처리가 없어도 되는것인가요?const Button = ({text, type, onClick}) => { console.log("Button onClick : ", onClick) return ( <button onClick={onClick} className={`Button Button_${type}`}> {text} </button> ) }

📢 질문을 작성하기 전에 꼭 읽어주세요! 📢질문 전에 준비할 것스스로 먼저 확인하기같은 문제를 겪은 사람이 있는지 인터넷에서 검색해보세요. 대부분의 경우 비슷한 사례를 쉽게 찾을 수 있습니다.오류와 코드를 다시 한번 점검하기간단한 실수나 오타가 없는지 확인해보세요. (예: 변수 이름, 함수 호출 방식 등)문제 상황 정리하기본인이 겪고 있는 문제를 정확히 이해하고, 어떤 상황에서 발생하는지 메모해보세요.질문 작성 시 유의할 점간결하고 명확한 제목문제를 한눈에 이해할 수 있도록 제목을 작성하세요. ("React에서 상태값 초기화 문제"처럼 구체적으로!)상황 설명 포함문제가 발생한 맥락과 이미 시도했던 해결 방법을 간략히 정리해서 알려주세요.코드 공유문제가 발생한 코드를 첨부하여 보여주세요.강의 관련 질문강의 내용과 관련된 질문이라면 문제가 발생한 강의의 시간이나 챕터를 반드시 적어주세요.추가 안내사항답변을 받으면 꼭 확인하고 감사 인사를 남겨주세요. 작은 반응도 답변자에게 큰 동기부여가 됩니다!질문 게시판에서는 서로를 존중하며 커뮤니케이션해주세요.강의 외적인 문의(예: 계정 문제, 결제 등)는 고객센터를 이용해주세요.여러분의 꼼꼼한 질문이 더욱 빠르고 정확한 답변으로 이어질 수 있습니다. 😊

안녕하세요~ 커스텀훅을 만들 때, 커스텀훅 안에도 스프레드 연산자를 넣어서 통합핸들러처럼 사용하면 되는걸까요? 커스텀훅을 훅 파일로 만들어 놓으면, 다른 컴포넌트에서도 비슷한 함수면 가져다 쓰는 용도라고 이해했는데 맞는걸까요? 감사합니다.

home으로 들어가서 보이는 화면에는 Home이라고 잘 보이는데주소뒤에 /new나 /diary를 붙여서 검색해봐도 계속 Home으로 고정되어있습니다코드는 밑에와 같은 방식으로 작성하였습니다. import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' import { BrowserRouter } from 'react-router-dom'; createRoot(document.getElementById('root')).render( <BrowserRouter> <App /> </BrowserRouter> ) const Diary=()=>{ return <div>Diary</div>; }; export default Diary; import './App.css' import {Routes,Route} from "react-router-dom"; import Home from './pages/Home'; import Diary from './pages/Home'; import New from './pages/Home'; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 function App() { return <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary" element={<Diary />} /> </Routes>; } export default App

심플 팩토리에서 chrome, safari 등등 if문을 통해서 브라우저환경에 맞는 그림판 인스턴스를 가져올 수 있도록 한 코드가 있었는데, 팩토리 메서드가 그 역할을 대신한다고 이해했습니다. 궁금한점은 결국 크롬이든 사파리든 브라우저환경을 알아내서 main함수에 넘겨줄 수 있어야하는데 그 분기는 어디서 해야하는걸까요?function clientCode(creator: Creator) { creator.someOperation() } clientCode(new ConcreteCreator1())아래의 코드라면 new ConcreteCreator1()를 판단할 수 있는 조건 분기를 결국 어디서는 해야하지 않는가에 대한 고민입니다! 

강의중 설명에서 알려주시는노션 사이트는 어떻게 접속해야 하나요?

질문삭제

안녕하세요이전 memo 강의에서 useCallback를 들고 context 듣다 보니 궁금한 사항이 있습니다.리로딩 방지를 위한 onCreate, onUpdate, onDelete에 이전 강의에 useCallback이 되어있는 상태에서 TodoDispatchContext하는 과정에서 useMemo로 리턴해서 전달하는데  context를 사용시 한번만 리로딩 방지를 위해서는 useMemo와 useCallback를 중복으로 사용 되어야하는걸까요?? 아님 useMemo를 사용하여 useCallback는 사용해도 안해도 무방한지 영상을 보다가 궁금합니다...! 추가적으로 이건 아주 소소한 궁금증인데함수를 쓰실때 카멜표기법과 파스칼표기법을 번갈아가면서 쓰시는데 어떤 용도에 따라서 사용하시는지 궁금합니다..ㅎㅎㅎ 

아래 질문들을 보던 중 Editor 부분이 리렌더링 된다는 글을 보고 제 화면도 확인한 결과 리렌더링 된 걸 확인해서 Editor.jsx 또한 아래와 같이 memo메서드를 감싸줬더니 리렌더링 되지 않는 것을 확인했습니다.import "./Editor.css"; import { useState, useRef, memo } from "react"; const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeContent = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content.trim() === "") { contentRef.current.focus(); return; } onCreate(content.trim()); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeContent} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default memo(Editor); Editor.jsx의 props가 onCreate 메서드인데 이를 App.jsx에서 useCallback 처리를 해줘서 그냥 export default memo(Editor); 을 해줘도 리렌더링 방지가 가능했던 것인지 궁금해서 질문 남깁니다! App.jsx 코드입니다!import "./App.css"; import { useState, useRef, useReducer, useCallback } from "react"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; const mockData = [ { id: 0, isDone: false, content: "운동하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "풋살하기", date: new Date().getTime(), }, { id: 2, isDone: false, content: "게임하기", date: new Date().getTime(), }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => item.id === action.targetId ? { ...item, isDone: !item.isDone } : item ); case "DELETE": return state.filter((item) => item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []); return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App;

useState는 componet의 구성요소의 상태값일 관리하고상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다.반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다.mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등)update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다.질문)실무에서 useEffect의 어떻게 활용하나요?지금은 hook을 배우는 단계라 실무에서 어떻게사용될지도 많이 궁금합니다. 

터미널에서 npx expo start 하면...아래의 오류가 납니다.휴대폰 화면은 뜨는데요.빨간색오류가 뜨면서 Welcome! 화면이 뜨질 않습니다.무엇일까요?   

터미널에서 npm install -g create-react-app 작성 후에아래와 같은 메세지가 뜹니다.이럴 경우 어떻게 해야 하나요??adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-appnpm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.npm warn deprecated uid-number@0.0.6: This package is no longer supported.npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated fstream@1.0.12: This package is no longer supported.npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.changed 64 packages in 968ms4 packages are looking for funding run npm fund for detailsadminui-MacBook-Pro:grab-market-web admin$

function solution(s) { const dic = {} s.split("").forEach((el) => { if (dic[el]) { dic[el]++ } else { dic[el] = 1 } }) const newStr = [...new Set(str.split(""))] return newStr .map((el) => { if (dic[el] && dic[el] !== 1) { return (el += dic[el]) } else { return el } }) .join("") } let str = "KKHSSSSSSSE" console.log(solution(str)) 먼저 오브젝트에 몇 개의 문자가 몇 번 등록되어있는지 저장한 후 set으로 중복을 제거해서 뼈대를 만들었습니다.그 다음으로 반복문을 이용해서 오브젝트를 탐색해 뼈대에 문자열을 합성해주는 방식으로 풀었습니다. 답안에 비해 좀 복잡한 것 같은데 놓치거나 시간,공간복잡성에서 손해가 클까요?

npx eas build --platform android --profile development위의 명령을 치면...장시간 build 작업후에 도스창 같은 것이 2개 뜨다가 오류가 납니다. 그래서 휴대폰 창이 뜨지 않습니다.어떤 상황 일까요?  

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.) const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => { todo.content.includes(search) }); } const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => todo.content.includes(search) ); }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요  안녕하세요 버튼이 안 떠서 질문드립니다 오타는 없는 것 같은데 버튼이 안 나오네요    

import './App.css' import Header from './components/Header'; import Editor from './components/Editor'; import { useState, useRef,useReducer } from 'react'; import List from './components/List'; const mockData=[ { id:0, isDone: false, content : "React 공부하기", date: new Date().getTime(), }, { id:1, isDone: false, content : "빨래하기", date: new Date().getTime(), }, { id:2, isDone: false, content : "노래 연습하기", date: new Date().getTime(), }, ]; function reducer(state,action){ switch(action.type){ case 'CREATE': return [action.data, ...state]; case 'UPDATE': return state.map((item)=>item.id===action.targetId?{...item, isDone: !item.isDone}:item); case "DELETE": return state.filter((item)=>item.id !==action.targetId); default: return state; } } function App() { // const [todos,setTodos]=useState(mockData); const [todos,dispatch]=useReducer(reducer,mockData); const idRef=useRef(3); const onCreate=(content)=>{ dispatch({ type:"CREATE", data:{ id:idRef.cureent ++, isDone:false, content: content, date: new Date().getTime(), }, }); }; const onUpdate=(targetId)=>{ dispatch({ type:"UPDATE", targetId:targetId }) }; const onDelete=(targetId)=>{ dispatch({ type:"DELETE", targetId:targetId }); }; return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App 강의 10.2를 보던 중 '123'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.

[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] CommonController {/common}: +1ms[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RouterExplorer] Mapped {/common/image, POST} route +0ms[Nest] 39177 - 2025. 01. 23. 오후 2:27:12 LOG [RoutesResolver] ChatsController {/chats}: +0ms/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153 throw new TypeError(`Missing parameter name at ${i}: ${DEBUG_URL}`); ^TypeError: Missing parameter name at 9: https://git.new/pathToRegexpError at name (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:153:13) at lexer (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:171:21) at lexer.next (<anonymous>) at Iter.peek (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:188:32) at Iter.tryConsume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:195:24) at Iter.text (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:213:26) at consume (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:285:23) at parse (/Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:320:18) at /Users/hjlee/Documents/projects/node_study/nestjs_server/node_modules/path-to-regexp/src/index.ts:503:40 at Array.map (<anonymous>)yarn add하여 위 에러가 발생해서 찾아보니 express 5.0.0일때 나타나는 에러라고 하네요.25년 1월기준 yarn add 커맨드 입력당시 nestjs 10.x.x -> 11.x.x로 되면서 발생한 에러라서 다운그레이드하니 해결되긴 했습니다.다른 수강생들에게 도움이될까 하여 남깁니다.

"devDependencies": { "@nestjs/cli": "^10.4.9", "@nestjs/schematics": "^10.2.3", "@types/express": "^4.17.17", "@types/jest": "^29.5.2", "@types/node": "^20.3.1", "@types/pg": "^8", "@types/supertest": "^6.0.0", "@yarnpkg/pnpify": "^4.1.3", "dotenv": "^16.4.7", "dotenv-cli": "^8.0.0", "jest": "^29.5.0", "source-map-support": "^0.5.21", "supertest": "^7.0.0", "ts-jest": "^29.1.0", "ts-loader": "^9.4.3", "ts-node": "^10.9.1", "tsconfig-paths": "^4.2.0", "typescript": "~5.3", "webpack": "^5.97.1" },dotenv랑 dotenv-cli 설치하고"start:dev": "dotenv -e .env nest start --watch", "start:debug": "dotenv -e .env -- yarn dlx @nestjs/cli start --debug --watch",하면 정상적으로 동작합니다!  

질문 주실 때 항상 2가지를 지켜주세요.오류가 나는 부분이나 궁금한 부분의 브라우저 화면 캡쳐해서 올리기HTML+SCSS+JS 코드 캡쳐 말고 텍스트로 붙여넣기 하기만약 코드를 캡쳐해서 올리시면 제가 코드의 오류를 찾는게 너무 어렵습니다. 반드시 텍스트로 붙여넣기 해주세요. 수업 내용에는 없는 질문이긴 한데ㅠㅠSCSS 에서 @keyframes 사용은 어려운건가요? 구글링한 정보로는 적용이 안되서요ㅠㅠ