묻고 답해요

/, /new, /diary 관련 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

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

• javascript
• react
• node.js

팩토리 메서드에 대해서 궁금증이 생겨서 질문드려봅니다!

미해결

TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기

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

• javascript
• typescript
• 객체지향
• 디자인-패턴
• canvas

회사 사이트 설명(노션) 사이트 접속 문의

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

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

• HTML/CSS
• javascript
• react
• node.js
• mongodb

객체가 함께 반환되는데 왜 그럴까요

미해결

트렐로 개발로 배우는 Vuejs, Vuex, Vue-Router 프론트엔드 실전 기술

질문삭제

• javascript
• vue.js

context 강의를 들으면서 이해가 안가는 부분이 있습니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

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

• javascript
• react
• node.js

Editor 컴포넌트 리렌더링

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

아래 질문들을 보던 중 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;

• javascript
• react
• node.js

useState vs useEffect 활용관련 문의

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

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

• javascript
• react
• node.js

npx expo start 오류건...

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

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

• javascript
• react
• node.js
• react-native
• typescript

터미널 npm install -g create-react-app 작성 후 오류

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

터미널에서 npm install -g create-react-app 작성 후에 아래와 같은 메세지가 뜹니다. 이럴 경우 어떻게 해야 하나요?? adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-app npm 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 supported npm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported npm 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 968ms 4 packages are looking for funding run npm fund for details adminui-MacBook-Pro:grab-market-web admin$

• HTML/CSS
• javascript
• react
• node.js
• react-native
• 머신러닝
• express
• tensorflow

Object와 Set을 이용해 풀어봤습니다.

미해결

자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)

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으로 중복을 제거해서 뼈대를 만들었습니다. 그 다음으로 반복문을 이용해서 오브젝트를 탐색해 뼈대에 문자열을 합성해주는 방식으로 풀었습니다. 답안에 비해 좀 복잡한 것 같은데 놓치거나 시간,공간복잡성에서 손해가 클까요?

• javascript
• 코딩-테스트

명령 npx eas build --platform android --profile development 시 오류...

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

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

• javascript
• react
• node.js
• react-native
• typescript

콜백 함수에서 중괄호 사용 여부

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 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) ); }

• javascript
• react
• node.js

버튼이 안 뜹니다

미해결

처음 만난 리액트(React)

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

• HTML/CSS
• javascript
• react

체크박스 관련 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

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'을 리스트에 추가하고 체크박스를 누르는 과정에서 체크박스와 삭제 버튼이 작동하지 않습니다. 기존에 있던 리스트들은 체크와 삭제가 다 되는데 추가된 리스트에 대해서만 작동하지 않는데 틀린 부분이 있는지 궁금합니다.

• javascript
• react
• node.js

yarn add 후에 아래 에러가 발생하는것 같습니다.

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

[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로 되면서 발생한 에러라서 다운그레이드하니 해결되긴 했습니다. 다른 수강생들에게 도움이될까 하여 남깁니다.

• javascript
• typescript
• rest-api
• nestjs
• backend

yarn berry 사용하고 데이터베이스 설정 값 .env로 분리

미해결

[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core

"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", 하면 정상적으로 동작합니다!

• javascript
• typescript
• rest-api
• nestjs
• backend

SCSS에서 @keyframes 사용

미해결

SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma

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

• HTML/CSS
• javascript
• sass
• jquery
• scss

블록레벨 스코프, 스코프 체인과 관련해 궁금한 점이 있습니다.

미해결

if (true) { let y = 'hi'; function test() { console.log(y); } } console.log(y); // ReferenceError: y is not defined test(); // hi 위 코드 실행 시 console.log(y)는 참조 에러, test()는 'hi'가 출력되어집니다. 제가 알기론 자바스크립트는 코드 블럭이 아닌 함수에 의해서 지역 스코프가 생긴다(함수 레벨 스코프)고 알고 있습니다. 따라서 if문(블록문) 내에 정의한 test 함수를 전역에서 호출해도 에러가 발생하지 않는 것이고요. let, const 키워드로 선언한 변수의 경우 블록 레벨 스코프를 가지기 때문에 전역에서 y 변수 참조 시 참조 에러가 발생하는 것도 이해할 수 있습니다. 제가 궁금한 것은 test 스코프의 상위 스코프는 전역 스코프가 아닌지? test 스코프의 상위 스코프가 if문 블록 스코프라면 전역에서 test함수 호출 시 참조에러가 발생해야하는거 아닌가요?(엄격 모드일 경우 참조에러 발생, 비엄격 모드일 땐 위 처럼 'hi'출력) 그렇다면 test 함수 내에서는 y를 참조할 경우 test 함수 내부에 y가 있는지 찾은 후 없기 때문에 스코프 체인에 따라 전역에 y가 있는지 찾고 이 경우에도 없기 때문에 참조에러가 발생해야하는 것이 아닌지? 어떻게 블록 레벨의 'hi'를 찾을 수 있는지? 입니다. 잘못된 개념이 있다면 알려주시면 감사하겠습니다 ㅜㅜ

• 자바스크립트
• javascript
• scope
• 스코프
• 스코프체인

vsCode 저장 시 코드 정렬? 에 관한 질문

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

코드를 치고 control + s를 눌렀을 때 <button> 내부의 요소들이 정환님의 화면처럼 코드들이 세로 일렬로 되도록 세팅하고 싶은데 저는 가로 일렬로 배치가 돼요. 혹시 이 부분 세팅은 어떻게 하는지 알려주실 수 있으실까요?

• javascript
• react
• node.js

EsLint flat config format 으로 만들어질 때 참고

해결됨

Next.js 시작하기

import { dirname } from "path"; import { fileURLToPath } from "url"; import { FlatCompat } from "@eslint/eslintrc"; import prettierPlugin from "eslint-plugin-prettier"; const __filename = fileURLToPath(import.meta.url); const __dirname = dirname(__filename); const compat = new FlatCompat({ baseDirectory: __dirname, }); const eslintConfig = [ ...compat.extends("next/core-web-vitals"), ...compat.extends("plugin:prettier/recommended"), { files: ["**/*.js", "**/*.jsx"], plugins: { prettier: prettierPlugin, }, rules: { "no-undef": "error", "prettier/prettier": [ "error", { singleQuote: true, semi: true, tabWidth: 2, trailingComma: "all", printWidth: 80, bracketSpacing: true, arrowParens: "avoid", }, ], }, }, ]; export default eslintConfig;

• javascript
• react
• next.js
• eslint
• prettier