inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

Context 분리하기 강의 내용 중에 궁금한 것이 있습니다!

해결됨

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

Context 분리하기 강의 중 3분 55초에 나오는 컴포넌트의 계층 구조 표를 보면, 기존의 Context를 TodoStateContext와 TodoDispatchContext로 분리하면서 TodoDispatchContext가 TodoStateContext의 하위에 존재하는 것을 봤는데요, 이 부분에서 의문이 생긴 것이 TodoStateContext와 TodoDispatchContext가 형제 위치에 존재하면 안되는걸까요..? 제 생각에는 TodoDispatchContext가 하위에 존재하지 않고 StateContext와 형제 위치에 있다면 DispatchContext가 todos에 영향을 받지 않아 리랜더링도 발생하지 않을 것 같은데, 해당 방법이 안되는 이유가 있을까요?

  • javascript
  • react
  • node.js
이지 댓글 2 좋아요 0 조회수 200

교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.

미해결

처음 만난 리액트(React)

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요. 이제 못 듣게 된건가요?

  • HTML/CSS
  • javascript
  • react
윤상아 댓글 1 좋아요 0 조회수 169

이미지 동시성 다루기

해결됨

함수형 프로그래밍과 JavaScript ES6+ 응용편

C.takeAll에서 궁금한 점이 있습니다. C.takeAll가 추가되기 전에 지연평가를 통해 배열에서 하나씩 fade-in 클래스를 달아주고 있었다면 추가한 후에는 배열의 지연평가가 모두 끝난 뒤에 달아주는 동작으로 보이더라구요. 시작은 다같이 하지만, 먼저 끝나는 것부터 fade-in 클래스를 달아주는 방식은 어떻게 해야할지 감이 안옵니다. 혹여나 앞에 이해가 잘못된 것이 있다면 편하게 알려주세요. 감사합니다!

  • javascript
  • 함수형-프로그래밍
khs0783 댓글 2 좋아요 0 조회수 165

소스코드 다운로드 링크의 접속이 안됩니다

해결됨

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

노션에 있는 소스코드 다운로드 링크의 접속이 안됩니다. 구글과 네이버 두개의 링크로 접속했을때의 사진을 첨부해드립니다. 혹시 코드를 받을 다른방법이있을까요? 깃허브를 알려주시면 거기서라도 다운로드하겠습니다

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
Hagro 댓글 4 좋아요 0 조회수 253

Bottom tabs navigator 설정

해결됨

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

class MainActivity : ReactActivity () { // ... override fun onCreate ( savedInstanceState : Bundle ?) { super . onCreate ( null ) } // ... } 공식문서와 강의에는 위의 코드로 진행해주셨는데 수업노트에 override fun onCreate (savedInstanceState: Bundle ?) { if (savedInstanceState == null ) { SplashScreen.show ( this ) } super .onCreate(savedInstanceState) } 이렇게 코드가 적혀있어서 문의드립니다. 수업노트 부분의 코드가 맞는 것이지요?

  • javascript
  • react
  • node.js
  • react-native
  • typescript
이소연 댓글 2 좋아요 0 조회수 113

console.log를 해도 터미널에 표시가 되지 않아요

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

console.log 를 해도 vscode 터미널상에서 로그가 뜨지 않는데, 찾아보니 최신 ReactNative버전에선 React Native DevTools를 사용하라는 말이 있더라구요. 혹시 React Native DevTools에서 console.log를 확인하는 방법이 있을까요? 단순히 j눌러서 열고 "회원가입하기" 버튼 눌러도 로그가 안나오네요...ㅠㅠ // package.json { "name": "community", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "test": "jest --watchAll", "lint": "expo lint" }, "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "expo": "~52.0.37", "expo-blur": "~14.0.3", "expo-constants": "~17.0.7", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", "expo-linking": "~7.0.5", "expo-router": "~4.0.17", "expo-splash-screen": "~0.29.22", "expo-status-bar": "~2.0.1", "expo-symbols": "~0.2.2", "expo-system-ui": "~4.0.8", "expo-web-browser": "~14.0.2", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.7", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/jest": "^29.5.12", "@types/react": "~18.3.12", "@types/react-test-renderer": "^18.3.0", "jest": "^29.2.1", "jest-expo": "~52.0.4", "react-test-renderer": "18.3.1", "typescript": "^5.3.3" }, "private": true }

  • javascript
  • react
  • react-native
  • typescript
  • react-query
ab kim 댓글 2 좋아요 0 조회수 537

오류

해결됨

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

강의대로 했는데 왜 오류가 나죠??

  • javascript
  • react
  • node.js
H Hun 댓글 2 좋아요 0 조회수 130

git 주소

해결됨

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

안녕하세요 소스 올려진 git링크 알 수 있을까요?

  • javascript
  • rest-api
  • spa
  • dom
카리공주 댓글 2 좋아요 0 조회수 156

splash screen 화면이 안띄워져요.

미해결

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

안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 app. tsx에 function Section({children, title}: SectionProps): React.JSX.Element { useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }); const isDarkMode = useColorScheme() === 'dark'; 이 코드를 올리면 Cannot read property 'hide' of null 이라고 뜹니다. 그래서 시도해본 방법은 -metro 서버 연겨리도 다시해보고 -js hide 호출위치를 app()쪽에도 해보고 -mainActivity 코드에 SplashScreen.show (this); 코드가 잘 있는지 확인도 하고 -gradle.properties에 android.enableJetifier=true 추가해보고 -androidmanifest의 activity에 android:theme="@style/SplashTheme" 이 부분도 추가해보고 -styles.xml에 resource부분에 <!-- ① 스플래시 화면용 테마 --> <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- launch_screen.xml(layout) 을 배경으로 사용 --> <item name="android:windowBackground">@layout/launch_screen</item> </style> <!-- ② 앱 전체용 기본 테마 --> <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- 여기에 앱 전체 스타일 아이템들을 넣으세요 --> <!-- 예: 상태바 색상, 기본 버튼 스타일 등 --> </style> 이렇게도 넣어보아도 앱이 켜지려다가 바로 꺼져버립니다. 로그도 따로 안남고.. 혹시 이 부분에서 왜 이렇게 되고 해결방안이 있을까요??

  • javascript
  • react
  • node.js
  • react-native
  • typescript
이소연 댓글 2 좋아요 0 조회수 238

localhost:3000

미해결

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

localhost:3000 하는데 Home Page 가 안뜨고 Hello world 가 뜨는 이유가 뭔가요 ? 코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • javascript
  • typescript
  • rest-api
  • nestjs
  • backend
이주현 댓글 3 좋아요 0 조회수 141

React 비기너: 튼튼한 기본 만들기 / 섹션 23. React Event / 2. 이벤트 핸들러 작성

미해결

React 비기너: 튼튼한 기본 만들기

버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고 1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?

  • javascript
  • react
  • 객체지향
  • dom
댓글 1 좋아요 0 조회수 120

스택, 큐 연결리스트로 구현 과제 완료입니다!

해결됨

비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)

Stack // 숙제: Stack을 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Stack { tail = null; length = 0; // 가장 마지막에 노드 추가 push(value) { // 새로운 tail이 될 node 생성 const node = new Node(value); // 바꿔치기를 위해 현재 tail은 curr 변수에 저장 const curr = this.tail; // 새로운 tail을 추가하기 this.tail = node; this.tail.prev = curr; // stack의 길이 추가 this.length++; // 길이 리턴 return this.length; } // 가장 마지막 노드 제거 pop() { if (!this.tail) { // tail이 없는 경우 pop할 값이 없기 때문에 아무 동작도 하지 않음 } else { // pop될 node의 value를 변수에 저장 > 리턴 예정 const value = this.tail?.value; // 현 tail의 prev 값을 변수에 할당 > 새 tail이 될 예정 const prev = this.tail.prev; // 바꿔치기 this.tail = prev; // stack의 길이 줄이기 this.length--; // pop된 기존 tail의 value 리턴 return value; } } // Stack의 가장 마지막 원소 조회 top() { return this.tail?.value; } } class Node { prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); console.log(stack); console.log(stack.push(3)); // 1 console.log(stack.push(1)); // 2 console.log(stack.push(5)); // 3 console.log(stack.push(2)); //4 console.log(stack.push(4)); //5 console.log(stack.pop()); // 4 > pop된 가장 마지막 값 리턴 console.log(stack.top()); // 2 console.log(stack.pop()); // 2 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 5 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 1 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 3 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // undefined console.log(stack.top()); // undefined console.log("stack"); Queue // 숙제: Queue를 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Queue { head = null; tail = null; length = 0; // 가장 마지막에 노드 추가 enqueue(value) { const node = new Node(value); if (!this.head) { this.head = node; } else { let currHead = this.head; while (currHead.next) { currHead = currHead.next; } currHead.next = node; } const currTail = this.tail; this.tail = node; this.tail.prev = currTail; this.length++; return this.length; } // 가장 맨 앞 노드 제거 dequeue() { // head는 다음 값으로 변경 const value = this.head.value; this.head = this.head.next; // tail에 연결된 가장 맨 앞 값 삭제 => 가장 맨 앞에서 두번째의 prev를 null로 만든다 let currTail = this.tail; let prevTail; while (currTail?.prev) { prevTail = currTail; currTail = currTail.prev; } if (prevTail?.prev) { prevTail.prev = null; } else { this.tail = null; } this.length--; return value; } // Queue에서 가장 앞 쪽에 있는 값 조회 peek() { return this.head.value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); console.log(queue.enqueue(1)); // 1 console.log(queue.enqueue(3)); // 2 console.log(queue.enqueue(5)); // 3 console.log(queue.enqueue(2)); // 4 console.log(queue.enqueue(4)); // 5 console.log(queue.peek()); // 1 console.log("dequeue"); console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // 4 console.log("queue");

  • javascript
  • 코딩-테스트
  • 알고리즘
Eunji Lee 댓글 1 좋아요 0 조회수 128

React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 강의 / Content Attribute와 IDL Attribute 사용 방식에 대한 질문드립니다

미해결

React 비기너: 튼튼한 기본 만들기

안녕하세요. 항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다. 최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다. Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고, 그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다. 이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다. 이런 현상을 보며 자연스럽게 궁금증이 생겼습니다. 왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까? Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다. 혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다. (물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.) 읽어주셔서 감사합니다. 좋은 하루 되세요.

  • javascript
  • react
  • 객체지향
  • dom
댓글 1 좋아요 0 조회수 95

sunriseData 코드

미해결

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

2분 22초에서 return 문 앞에 const sunriseData = weatherData ? new Date(weatherData.sys.sunrise); 이렇게 코드를 적었는데 이후의 코드에서는 갑자기 보이지 않아 이 코드는 어디가고 이후의 return 앞에는 이 코드가 오게 되었는지 궁금합니다. const formatTime = timestamp => { const date = new Date((timestamp - 9 * 3600) * 1000); // UTC timestamp에 9시간 추가 return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 로컬 시간으로 포맷 }; 제가 이해할 때는 sunriseData가 wetherData의 unixtime을 현재 우리가 보는 시간으로 바꾸어 저장하는 것인데... 아래의 formatTime은 sunriseData를 대체한 코드인가요?(시차도 적용한?)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
이소연 댓글 2 좋아요 0 조회수 82

pdf -> md 변환 이후 결과

해결됨

LangGraph를 활용한 AI Agent 개발 (feat. MCP)

안녕하십니까!! 기존 Pdf파일에서 제55조(세율) 표를 보면 이러합니다. 이후 pdf -> .md로 변환하면 ( 강사님께서 올려주신 .md 된 파일도 확인하였습니다.) 1,400만원 초과 5,000만원 이하 5,000만원 초과 8,800만원 이하 의 결과가 아닌 5,000만원이 생략이 되어있습니다. 특이한점으론 a초과 b이하 에서 a만 생략된다던지 혹은 b만 생략되는 것이 아닌 a, b 중 아무거나 생략이 되고 있습니다. md 으로 변환하면서 이렇게 몇몇 글들이 생략이되게 되면 이후 정확도에 문제가 생기지 않는지? 추가적으로 py-zerox, gpt-4o-mini 를 사용하면서 생기는 문제인지, 아니면 일반적으로 한글 pdf -> md로 변환하는 과정에 대부분 이러한 문제가 생기는지 궁금합니다.

  • 프롬프트엔지니어링
  • llm
  • ai-agent
  • langgraph
rhsnqk 댓글 2 좋아요 0 조회수 254

React 비기너: 튼튼한 기본 만들기 / 섹션22. 이벤트 핸들러 / 3. 이벤트 핸들러: 콘텐트 속성 7:00

미해결

React 비기너: 튼튼한 기본 만들기

p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제 2. five 오브젝트를 클릭할때 one onclick null 로 재할당 2번을 쓰게 되는 경우가 어떤경우가 일까요? 1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다

  • javascript
  • react
  • 객체지향
  • dom
댓글 1 좋아요 0 조회수 96

pyzerox ModuleNotFoundError: No module named 'enterprise'

해결됨

LangGraph를 활용한 AI Agent 개발 (feat. MCP)

안녕하십니까! 강의 잘 듣고 있습니다. pyzerox를 gpt-4o-mini 모델을 사용하하는 중 아래와 같은 에러가 발생을 합니다. ``` ModuleNotFoundError Traceback (most recent call last) Cell In[13], line 1----> 1 from pyzerox import zerox 2 import asyncio 4 ### Model Setup (Use only Vision Models) Refer: https://docs.litellm.ai/docs/providers ### 56 ## placeholder for additional model kwargs which might be required for some models File ~/desktop/langgraph/.venv/lib/python3.12/site-packages/pyzerox/__init__.py:1----> 1 from .core import zerox 2 from .constants.prompts import Prompts 4 DEFAULT_SYSTEM_PROMPT = Prompts.DEFAULT_SYSTEM_PROMPT File ~/desktop/langgraph/.venv/lib/python3.12/site-packages/pyzerox/core/__init__.py:1----> 1 from .zerox import zerox 3 all = [ 4 "zerox" , 5 ] File ~/desktop/langgraph/.venv/lib/python3.12/site-packages/pyzerox/core/zerox.py:1310 from ..constants import PDFConversionDefaultOptions 12 # Package Imports ---> 13 from ..processor import ( 14 convert_pdf_to_images, ... 12 ) 13 from litellm.caching import InMemoryCache 14 from litellm.litellm_core_utils.litellm_logging import Logging as LiteLLMLoggingObj ModuleNotFoundError : No module named 'enterprise' ``` !uv pip install py-zerox from pyzerox import zerox import asyncio ### Model Setup (Use only Vision Models) Refer: https://docs.litellm.ai/docs/providers ### ## placeholder for additional model kwargs which might be required for some models kwargs = {} ## system prompt to use for the vision model custom_system_prompt = None # to override # custom_system_prompt = "For the below PDF page, do something..something..." ## example ###################### Example for OpenAI ###################### model = "gpt-4o-mini" ## openai model # Define main async entrypoint async def main(): file_path = "./income_tax.pdf" ## local filepath and file URL supported ## process only some pages or all select_pages = None ## None for all, but could be int or list(int) page numbers (1 indexed) output_dir = "./documents" ## directory to save the consolidated markdown file result = await zerox(file_path=file_path, model=model, output_dir=output_dir, custom_system_prompt=custom_system_prompt,select_pages=select_pages, **kwargs) return result # run the main function: result = asyncio.run(main()) # print markdown result print(result) 코드는 위와 같습니다. pyzerox 가 수업 중 litellm 을 사용한다고 하셨는데 (py-zerox 설치시 1.67.4 버전으로 같이 설치됨) Enterprise용 littellm을 사용하면서 생긴 문제인 것 같은데요 기존 설치된 littellm 을 upgrade 하니 다른 오류인 ModelAccessError : Your provided model can't be accessed. Please make sure you have access to the model and also required environment variables are setup correctly including valid api key(s). Refer: https://docs.litellm.ai/docs/providers (Extra Info: {'model': 'gpt-4o-mini'}) 이런 오류가 발생합니다. 현재 사용중인 OPENAI_API_KEY 를 이용해 llm.invoke 시 응답이 잘 오는 걸 봐서는 해당 모델을 사용하는데 문제는 없는 것으로 보입니다. 혹시 지금까지 어떤 문제점이 있는지 알 수 있을지요?

  • 프롬프트엔지니어링
  • llm
  • ai-agent
  • langgraph
rhsnqk 댓글 2 좋아요 0 조회수 256

react 에서 css불러오기 오류

해결됨

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

import "./Main.css";나 import "../Main.css"; 둘다 해봤는데 css를 컴포넌트로 불러오기 오류떠요 ㅠㅠ

  • javascript
  • react
  • node.js
H Hun 댓글 1 좋아요 0 조회수 149

./forest.png 파일은 어디서 다운 받을 수 있을까요?

해결됨

이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발

./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.

  • HTML/CSS
  • javascript
  • jsp
  • mysql
  • spring-boot
최종민 댓글 2 좋아요 0 조회수 206

인기 태그

인프런 TOP Writers

주간 인기글