inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

React 훅 구현 원리와 실무 패턴 관련 질문 (useState, useEffect 순서 및 핸들러 구조)

미해결

[React 2부] 고급 주제와 훅

안녕하세요, 강의에서 훅( useState , useEffect ) 사용 규칙과 내부 동작 원리를 공부하다가 궁금한 점이 있어 질문드립니다. React는 훅을 순서 기반 으로 관리한다고 배웠습니다. 그래서 다음과 같은 규칙이 있는 걸로 알고 있습니다: 훅은 컴포넌트 최상위에서만 호출 해야 한다. 조건문, 반복문, 중첩 함수 안에서 훅을 호출하면 안 된다. 이와 관련해 궁금한 점은 다음과 같습니다: 개발하다 보면 상태가 많아지고 상태마다 핸들러도 많아지게 되어 코드가 길어지게 됩니다. 그러다 보니 소스코드를 한눈에 파악하기 어려워지는 것 같습니다. 실무에서는 상태별로 핸들러를 묶어서 작성하는 패턴을 많이 쓰나요? 예를 들어: const [count, setCount] = useState(0); const handleChangeCount = () => { ... }; const [name, setName] = useState(''); const handleChangeName = () => { ... }; 이런 방식으로도 구현을 하시는지, 아니면 useState는 최상단에서 묶어 관리하고 handler는 handler끼리 useEffect는 useEffect 끼리 작성하는 것이 일반적인지 궁금합니다.

  • javascript
  • react
  • 웹앱
  • React-Context
  • react-hooks
Jinhee Lee 댓글 2 좋아요 1 조회수 149

포트 3000에서 listen하는 곳까지 넘어가지 않습니다.

미해결

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

초기 세팅에서 "yarn start:dev"실행 시, Nest 앱이 포트 listen까지 잘 되어 '/' path 요청 시 'Hello World!' 문자열을 잘 응답하는 것을 확인했습니다. 하지만 app.module.ts에 타입 ORM 정보를 넣은 후, import { Module } from '@nestjs/common'; import { AppController } from './app.controller'; import { AppService } from './app.service'; import { TypeOrmModule } from '@nestjs/typeorm'; @Module({ imports: [ TypeOrmModule.forRoot({ type: 'postgres', host: '127.0.0.1', port: 5432, username: 'postgres', password: 'postgres', database: 'typeormstudy', entities: [], synchronize: true, }), ], controllers: [AppController], providers: [AppService], }) export class AppModule {} 실행을 시키면 다음에서 그냥 멈추어 버립니다. [Nest] 21556 - 2025. 11. 16. 오후 11:55:25 LOG [NestFactory] Starting Nest application... [Nest] 21556 - 2025. 11. 16. 오후 11:55:26 LOG [InstanceLoader] TypeOrmModule dependencies initialized +1036ms [Nest] 21556 - 2025. 11. 16. 오후 11:55:26 LOG [InstanceLoader] AppModule dependencies initialized +0ms 왜 타입ORM 설정을 하니 Nest 앱이 3000 포트에서 실행을 하지 못하고 멈추는지 원인을 못 찾겠네요 ㅠ 그래서 [RoutesResolver] 로그가 찍히지 않습니다. cf_sns 프로젝트에서는 잘 넘어갔는데, typeorm study 부분에서 이렇게 막히네요; 딱히 차이는 없는데 이유를 모르겠습니다 ㅠ

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
Mad Programmer 댓글 1 좋아요 0 조회수 102

11강 내용과 12강 내용이 충돌하는 것 같아요.

해결됨

이벤트부터 SPA까지, 상호작용 웹의 필수 엔진 - [DOM 완전 정복 Part 2]

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

  • HTML/CSS
  • javascript
  • react
  • web-api
  • dom
hans 댓글 2 좋아요 0 조회수 119

개발자 모드 활성화 시 반응형 처리

미해결

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

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

  • javascript
  • react
  • node.js
  • 카카오공채-개발
임스헝 댓글 1 좋아요 0 조회수 90

isLoading 기능 추가했는데, 존재하지 않는 일기 입니다.

미해결

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

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;

  • javascript
  • react
  • node.js
  • 카카오공채-개발
padohy 댓글 3 좋아요 0 조회수 101

클래스 vs 인라인 스타일 성능 질문

해결됨

구조 탐색과 조작의 모든 것 - [DOM 완전 정복 Part 1]

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

  • HTML/CSS
  • javascript
  • react
  • dom
  • frontend
hans 댓글 2 좋아요 0 조회수 113

[재질문][그랩님 답변 부탁드립니다]101강

미해결

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 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 입력 후 포워딩 주소 를 크롬브라우저에 복사 후 붙여넣으면 , 이전 밑에 질문에서는 정상 작동되었으나 지금 은 아래와 같이 바뀐 에러 가 발생 하였습니다. 해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다. 그랩님의 답변 부탁 드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 201

전자책 목차 오류

미해결

[4주 과정] <밑바닥부터 시작하는 웹 브라우저> 완독 챌린지

안녕하세요. 목차를 살펴보다가 이상한 점을 발견해서 문의합니다. (책 맨 앞의 목차가 아니라 "목차 메뉴"의 출력이 이상해서 문의합니다.) 저는 알라딘에서 전차잭으로 구매했는데 홈페이지 상세 페이지에서는 순서가 제대로 잘 나와있는 것 같은데... 제 전자책에서는 목차가 이상하게 출력됩니다. 챕터10 -> 파트4(300페이지) 챕터14~17까지 순서대로 나오다가 -> 챕터 11~13까지 나옵니다. 이건 해당 구매처로 문의해야 하는 걸까요?

  • javascript
  • python
  • 네트워크
  • frontend
  • web-browser
김구리 댓글 2 좋아요 1 조회수 88

저 강의 들으면서 작성한 코드를 github에 올려도 되나요?

해결됨

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

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

  • javascript
  • react
  • node.js
  • 카카오공채-개발
김동욱 댓글 2 좋아요 0 조회수 102

[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문

해결됨

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

그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 그랩님의 답변을 기다립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 158

감정일기장 최종완성본 링크는 어디에있나요??

해결됨

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

감정일기장 최종완성본 링크는 어디에있나요??

  • javascript
  • react
  • node.js
  • 카카오공채-개발
yuljeonjw 댓글 2 좋아요 0 조회수 79

web api 에 대해 질문이 있습니다.

해결됨

AI시대의 웹개발 : 비동기 프로그래밍과 데이터 통신 최적화(프롱트 특강)

자바스크립트는 싱글 스레드 언어라고 알고 있습니다. 자바스크립트 자체적으로 실행하지 못하고 Node나 브라우저에서 실행해야 되는데 브라우저에서 실행할 경우 선생님께서 가르쳐주신 콜스택, Callback Queue, WebpAPI 모듈이 EventLoop를 통해 멀티스레드처럼 동작한다고 이해했습니다. 여기서 질문이 있는데요. SetTimeout에서의 콜백이 WEB API에게 던져놓고 시킬 때, 싱글스레드 녀석은 CallStack에서 일한다고 바쁜데 언제 SetTimeout 콜백을 처리하나요? WEB APIs가 콜백을 따로 처리한다는 건 또 다른 스레드가 존재한다는 의미인가요? 그러면 싱글스레드인척하는 멀티스레드인셈인가요?? ㅎㅎ;

  • javascript
  • promise
  • frontend
  • fetch-api
이동훈 댓글 2 좋아요 0 조회수 134

const 배열에서 pop() 사용시 삭제되는 값 문의

해결됨

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

const arr배열에 push로 값 5를 넣은 후 pop을 했어요. 제 생각에는 push로 넣은 값이 배열 마지막에 존재하니까 5가 삭제될 거라 생각했어요. 그런데 4가 삭제되었더라구요. 왜 5가 아닌 4가 삭제되었는지 궁금합니다.

  • javascript
keepgoingje 댓글 2 좋아요 0 조회수 68

const 배열에 값 추가, 삭제, 변경 문의

해결됨

[코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

강의 ID 330604 22.배열에 요소 추가/제거하기 - push, pop, unshift, shift 위 강의 내용에 질문있습니다. 배열에 const를 사용했는데, const는 상수라 값 변경이 안되는 걸로 아는데 값을 넣고 빼고 변경할 수 있더라구요. 왜 그런지 알 수 있을까요? 블로그를 찾아봐도 딱히 잘 이해가 안되요

  • javascript
keepgoingje 댓글 1 좋아요 0 조회수 85

마지막 강의가 안되요

미해결

Vue.js 시작하기 - Age of Vue.js

마지막 강의가 안되서 99%..수료가 안되요. 어떻게 이런일이?

  • javascript
  • vue.js
Richard Lee 댓글 1 좋아요 0 조회수 84

2.2) 단락 평가 활용 사례에서 질문

해결됨

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

2.2) 단락 평가 활용 사례에서 9:59 Truthy, Falsey 사용 관련 질문입니다. person && person.name 수업 예시에서 person이 아예 undefined이면 person이 false니까 person.name을 아예 호출도 하지 않고, 따라서 오류가 발생하지 않는다고 이해했습니다. 그런데 person에 object만 선언하거나, object는 있지만 name 프로퍼티는 없는 경우 person은 true가 되지 않나요? 그렇다면 뒤에 있는 person.name을 호출하고 오류가 발생해야 할 것 같은데 코드를 돌려보니 오류가 발생하지 않고 undefined라고 표시됩니다. 왜 이런지 알 수 있을까요?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
qkrgusdl95 댓글 1 좋아요 0 조회수 76

컴포넌트 선언시 const vs function

미해결

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

컴포넌트 선언시에 const 선언이 function 선언에 비해서 얻는 이점이 있나요? 실무에서는 어떤 방식을 더 많이 쓰나요?

  • javascript
  • react
  • node.js
  • 카카오공채-개발
이진섭 댓글 2 좋아요 0 조회수 131

claude에 hook 적용안되는 문제

해결됨

The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요 구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Claude에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요 스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요 커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요! 서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다 바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요 진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요 실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 1-7강에서 hook을 배우고 있는데 window 환경에서 cursor를 이용해서 선생님 수업 따라가는 중에 전달자료대로 세팅을 해도 claude가 setting.json을 일고 실행한 뒤에 실행 되는 게 아니고 그냥 hook 자체가 적용이 안되는데 이 문제에 대한 해결 방법을 알려주시면 감사드리겠습니다

  • spring-boot
  • next.js
  • 인공지능(ai)
  • ai-활용-(ax)
  • claude
terry8987 댓글 3 좋아요 0 조회수 226

Ngrok 설치 후 forwarding Url 에러

해결됨

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

그랩님 강의 잘 듣고 있습니다. 다름이 아니라, 강의를 들으면서 Ngrok를 설치 후forwarding Url로 크롬브라우저에서 치고 들어가면 , 아래와 같은 에러 가 떠서 어떻게 해결 해야 하는지 답변 을 듣고 싶어 글을 작성하게 되었습니다. 에러 화면은 아래와 같습니다 그리고 올려 달라고 하신 사진 역시 첨부합니다. 상황은 아래와 같습니다. [사진2] [마지막 사진] 어떻게하면 그랩님의 강의 결과 화면과 똑같이 나올 수 있을까요? 답변 부탁드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 174

연습문제 정답 없죠?

미해결

[4주 과정] <밑바닥부터 시작하는 웹 브라우저> 완독 챌린지

이건 4주안에 못풀거같아서요. github 에 찾아보니 사람들이 다양한 방법으로 풀긴하네요.

  • javascript
  • python
  • 네트워크
  • frontend
  • web-browser
newcat 댓글 2 좋아요 0 조회수 119

인기 태그

인프런 TOP Writers

주간 인기글