inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

MMKV 사용시 에뮬레이터에서 실행이 불가능한 이슈

해결됨

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

이런식으로 실제 앱에서만 사용이 가능하다고 뜹니다ㅠ 찾아보니까 디버깅을 끄라는데 개발자 도구를 켜봐도(ctrl+m /cmd+m켜서 들어가는,,) Debugging을 끄는 부분이 안보여요,,, + Debug JS Remotely라는 부분을 끄라고 구글링을 하니까 나오는데 이 부분이 아예 개발자도구에서 안보입니다.. 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 4 좋아요 0 조회수 338

12.11 강의 ) export 후 경고 문구 & 콘솔창 데이터 출력 안됨

해결됨

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

'12.11) Home 페이지 구현하기 2. 기능' 강의의 9분 17초 에서 App 컴포넌트의 context를 Home 컴포넌트로 보내주기 위해 DiaryStateContext와 DiartDispatch를 익스포트 해주는데요. 문제 1) 저는 익스포트하게 되면 아래 사진과 같이 오류가 뜨고 [문제 2]에서 설명드린 부분도 실행이 되지 않습니다. (Home 컴포넌트에서 임포트 후 다시 App 컴포넌트로 돌아와 익스포트를 작성해주긴 했습니다 => 작성 순서 바뀜) 이미지의 오류 문구 (refresh only works when a file exports components. Move your react context to a separate file.) 문제 2) 그리고 강의 영상에선 익스포트 후 Home 컴포넌트에 App 컴포넌트에서 익스포트한 것 들을 import 해주고 필터를 통해 각 달에 해당하는 일기 데이터를 추출 후 콘솔창에 출력해줍니다. (강의 16:07) 하지만 저는 아래 사진과 같이 콘솔창에 현재 월에 대한 데이터가 아무것도 뜨지 않습니다. 위에서 설명드린 익스포트가 제대로 되지 않은 문제로 인해 안 뜨는 것일까요? + 추가로 context들을 파일을 따로 만들고 App 컴포넌트에 임포트하고 새로고침해봤더니 아무것도 뜨지 않았습니다.. 이 내용은 깃허브에 업로드 되어있습니다. App과 Home 컴포넌트의 코드는 아래에 남겨두었습니다. (깃허브 : https://github.com/hsyo830/Section12.git ) [App.jsx] import "./App.css"; import { useReducer, useRef, createContext } from "react"; import { Routes, Route } from "react-router-dom"; // /입력 시 Home, /new new, /diary diary 각각의 페이지를 가져오도록 하기 위함 import Diary from "./pages/Diary"; import Home from "./pages/Home"; import New from "./pages/New"; import Edit from "./pages/Edit"; import Notfound from "./pages/NotFound"; const mockData = [ { id: 1, createDate: new Date("2025-03-14").getTime(), emotionId: 1, content: "1번 일기 내용", }, { id: 2, createDate: new Date("2025-03-13").getTime(), emotionId: 2, content: "2번 일기 내용", }, { id: 3, createDate: new Date("2025-02-25").getTime(), emotionId: 3, content: "3번 일기 내용", }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); case "DELETE": return state.filter((item) => String(item.id) !== String(action.id)); default: return state; } } // 일기 데이터를 공급할 Context export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, mockData); // 여러가지 일기 데이터를 가져야해서 []와 같이 빈 배열 const idRef = useRef(3); // 새로운 일기 추가 const onCreate = (createDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createDate, emotionId, content, }, }); }; // 기존 일기 수정 const onUpdate = (id, createDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createDate, emotionId, content }, }); }; // 기존 일기 삭제 const onDelete = (id) => { dispatch({ type: "DELETE", id, }); }; return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispatchContext.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> </DiaryDispatchContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; [Home.jsx] import { useState, useContext } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Button"; import DiaryList from "../components/DiaryList"; import { data } from "react-router-dom"; const getMonthlyData = (pivotDate, data) => { const beginTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth(), 1, 0, 0, 0 ).getTime(); const endTime = new Date( pivotDate.getFullYear, pivotDate.getMonth() + 1, 0, 23, 59, 59 ).getTime(); return data.filter( (item) => beginTime <= item.createdDate && item.createdDate <= endTime ); }; const Home = () => { const data = useContext(DiaryStateContext); const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyData(pivotDate, data); console.log(monthlyData); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() + 1)); }; const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth() - 1)); }; return ( <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth() + 1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"} />} rightChild={<Button onClick={onIncreaseMonth} text={">"} />} /> <DiaryList /> </div> ); }; export default Home;

  • javascript
  • react
  • node.js
황서영 댓글 1 좋아요 1 조회수 220

안녕하세요 미니블로그 실습 질문드립니다.

미해결

처음 만난 리액트(React)

실습을 잘 따라하여 코드도 모두 동일합니다. 그런데 왜 글 작성하기 버튼 클릭이 안되는지 오류도 없어서 문의드립니다. 또한 버튼 간격도 코드가 동일한데 떨어지지 않고 제 것은 붙어있습니다. 어떻게 해결해야할 지 모르겠네요 ㅎㅎ

  • HTML/CSS
  • javascript
  • react
승빈 댓글 3 좋아요 1 조회수 260

도커볼륨 마운트 관련

해결됨

[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

프로젝트 구성 Dockerfile FROM node:14 RUN apt-get update && apt-get install -y bash COPY ./package.json /myfolder/ COPY ./yarn.lock /myfolder/ WORKDIR /myfolder/ RUN yarn install COPY . /myfolder/ CMD ["yarn", "start:dev"] docker-compose.yaml version: "3.7" services: node-server: build: context: . dockerfile: Dockerfile volumes: - ./index.js:/myfolder/index.js - ./email.js:/myfolder/email.js ports: - 3000:3000 database-server: image: mongo:5 ports: - 27017:27017 Window 환경입니다. 위와 같을 때 index.js 파일을 수정하여도 docker로 연동된 nodemon 재 실행이 안됩니다. docker-desktop 에서 container 에서보면 mount 라고 표기되어있고 위의 새로고침 버튼을 누르면 제대로 적용 됩니다. 원인이 뭘까요?

  • javascript
  • node.js
  • docker
  • rest-api
  • nestjs
gkdlsb1234 댓글 2 좋아요 0 조회수 192

로그아웃 시 토큰 검증 오류 응답

해결됨

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

현재 Ch4-6. 관리자 계정 로그아웃, 삭제 강의를 듣고 있는 학생입니다! 다름이 아니라 로그아웃 코드에서 토큰 검증 오류 시에 res.send()를 안하는 이유가 있나요?! 토큰 검증 중 오류가 발생하게 된다면, isLoggedIn 상태는 true이고 토큰은 지워진 상태가 되는건데 그러면 로그인도 못하고 로그아웃도 못하는 상태인거 같아서요! 궁금해서 여쭤봅니다!!

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
최지성 댓글 2 좋아요 0 조회수 282

월 변경 이벤트 핸들러가 작동하지 않습니다.

해결됨

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

코드는 아래와 같습니다. 다른 버튼들은 모두 클릭 이벤트 핸들러가 작동하는데, 월 변경 버튼에만 이벤트 핸들러가 작동하지 않습니다. 혹시 Date 객체를 잘 못 생성한 것일까요..? import { useContext, useState } from "react"; import { DiaryStateContext } from "../App"; import Header from "../components/Header"; import Button from "../components/Header"; import DiaryList from "../components/DiaryList"; const getMonthlyDate = (pivotDate, data) => { const beginTime = new Date(pivotDate.getFullYear(), pivotDate.getMonth(), 1,0,0,0).getTime(); const endTime = new Date( pivotDate.getFullYear(), pivotDate.getMonth()+1, 0, 23, 59, 59 ).getTime(); return data.filter((item)=> beginTime<= item.createdDate && item.createdDate <= endTime) } const Home = () => { const data = useContext(DiaryStateContext); //날짜 보관 const [pivotDate, setPivotDate] = useState(new Date()); const monthlyData = getMonthlyDate(pivotDate, data); const onIncreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()+1)); } const onDecreaseMonth = () => { setPivotDate(new Date(pivotDate.getFullYear(), pivotDate.getMonth()-1)); } return <div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} title={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} title={">"}/>} /> <DiaryList data={monthlyData}/> </div> }; export default Home;

  • javascript
  • react
  • node.js
미니민 댓글 1 좋아요 0 조회수 100

실무에서 탭스 구현 시 어떤 방법을 많이 사용하는지 궁금합니다.

해결됨

웹 퍼블리셔를 위한 jQuery 실전 - 기초부터 UI 인터랙션까지

안녕하세요 강사님 탭스를 구현하기 위해 3가지 방법을 알려주셨는데 그러면 실무에서는 JQuery-UI를 사용하여 구현을 하는걸까요?? 그리고 지금 보니까 해당 강의 섹션 제목에 오타가 있는 것 같습니다. jQuery 가 아닌 Jqeury 로 되어있네요

  • HTML/CSS
  • javascript
  • jquery
  • jquery-selector
SHYU 댓글 2 좋아요 0 조회수 165

계속 따라하다가 안돼서 bash에 연결할떄 안되더라구요

미해결

Vue.js 끝장내기 - 실무에 필요한 모든 것

따라하다가 자꾸 안돼서 보니까 bash에 연결할떄 안되더라구요 제 맥북에는 zsh? 여기에다가 해야 되더라구요 이렇게 nvm 써도 문제없는건지 궁금하고 왜 이렇게 다른걸로 하게 되는지 궁금해요! 라고 물어보려다가 검색을 해보았습니다. macOS Catalina부터 기본 쉘이 bash에서 zsh로 변경되었다네요 zsh에 설치하는게 맞는거였어요. 맥OS 여러분 참고하세요~~

  • javascript
  • vue.js
  • vuex
hjy100489 댓글 1 좋아요 0 조회수 142

슬라이드 문의드립니다.

해결됨

UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

안녕하세요. 위의 이미지에 질문을 넣었습니다. 강의명은 UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오 입니다. 답변 부탁드립니다. 감사합니다.

  • HTML/CSS
  • javascript
  • jquery
  • 반응형-웹
  • media-query
happinessboom 댓글 2 좋아요 1 조회수 191

일러스트의 "gif 애니메이션"을 문의드립니다.

해결됨

UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오

"UIUX 포트폴리오 Part.3 - 반응형 웹 포트폴리오" 강의에서 "섹션2"에 있는 일러스트의 "gif 애니메이션"을 어떻게 만드셨는지 알려주실 수 있을까요? 유투브, 구글, 네이버에서 관련 강의를 찾아봤는데, 못 찾았어요. 만약 관련 강의를 아신다면, 알려주셔도 될 것 같습니다. 답변 주세요. 감사합니다.

  • HTML/CSS
  • javascript
  • jquery
  • 반응형-웹
  • media-query
happinessboom 댓글 3 좋아요 1 조회수 325

import Hero from './Hero' 오류 문의

해결됨

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

강의에서 말씀하신대로 자동완성을 이용하여서 './Hero' 가 되었는데, 오류가 납니다. Already included file name ~~ Root file specified for compliation 이라고 뜨는데 왜 그런건가요? Error lens에서 해당 오류를 출력합니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
어린 송어 댓글 2 좋아요 0 조회수 154

zoom과 fov의 차이점이 잘 이해가 안됩니다.

미해결

React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발

섹션3- 3D 구성요소 알아보기 강의 에서 설명주신것중 강의에서는 fov와 zoom의 수치를 감소시키거나 증가시켰을때, 선이라고 해야하나요? Cam이 찍고있는 좁아지고 넓어지는 그 선의 범위가 fov와 zoom이 같은 것 같아서 헷갈립니다! 혹시 어떤 차이가 있는지 알려주실 수 있으실까요?

  • javascript
  • react
  • typescript
  • 인터랙티브-웹
  • three.js
  • webgl
  • react-three-fiber
박주현 댓글 2 좋아요 1 조회수 422

no-unused-vars 에러가 발생합니다!

해결됨

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

5.1)실습 준비하기 강의에서 "no-unused-vars":"off", 입력하여 기능을 끈다고 하셨는데 코드를 입력하니까 Duplicate key 'no-unused-vars'. 라고 에러가 발생합니다. 어떻게 해결해하나요??

  • javascript
  • react
  • node.js
sju07305 댓글 1 좋아요 3 조회수 424

parsedData를 콘솔에 찍으면 나오질 않고 있습니다.

해결됨

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

안녕하세요. 강의 24분쯤의 내용입니다. parsedData를 콘솔에 찍으면 아무것도 나오지 않고 있습니다. Application에 로컬스토리지에 보면 4개의 데이터가 잘 저장되어있는데요. 인강을 몇번 돌려 봐도 계속 그런 상태인데 제가 뭐 놓치고 있는게 있을까요? 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.id)); break; } default: return state; } localStorage.setItem("dairy", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispatchContext = createContext(); function App() { const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { return; } const parsedData = JSON.parse(storedData); console.log(parsedData); }, []);

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

db 테이블 생성할 때 변수에 받는 이유가 무엇인가요?

미해결

Do it! Node.js 프로그래밍 입문

const contact = Contact.create({ name, email, phone, }); 테이블 이름은 모델에 정의된 contactModel.js에서 정의 되는데 contact라는 변수에 할당 받는 이유가 무엇일까요? javascript에서는 변수에 함수로 초기화를 할 수 있기 때문에 그냥 함수의 역할을 하는 변수인가요?

  • javascript
  • node.js
  • mongodb
  • express
댓글 1 좋아요 0 조회수 186

모듈을 내보내고 사용할 때 질문이 있습니다.

미해결

Do it! Node.js 프로그래밍 입문

이번에 강의에서 Controller를 내보내고 사용할 때는 추가로 () 소괄호를 사용하지 않았지만, 전 강의에서 mongoDB는 사용할 때 dbConnect(); 처럼 소괄호를 사용해주었습니다. 소괄호를 사용해주고 안사용해줄 때의 차이를 알고싶습니다

  • javascript
  • node.js
  • mongodb
  • express
bbin0409 댓글 0 좋아요 0 조회수 140

App.tsx에서 Icon을 못가지고 오는 오류..('VectorIcons' could not be found ~)

해결됨

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

왜인지 모르게 npm install로 npm install --save @react-native-vector-icons/fontawesome5이런식으로 설치를 해주고 나서 import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 을 하면 icon을 가지고 오지 못해서 [runtime not ready]: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes, stack: invariant@2200:25~ 위에와 같은 오류가 발생합니다,,, font가 제대로 카피되지 않아서 벌어지는 일 같아용,,, 그래서 여러가지 시도해본 결과 다른거 할 필요없이 import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 이런식으로 Icon이 아니라 FontAwesome5를 해주니까 되더라구요,,? 그런 후에 다시 import Icon from '@react-native-vector-icons/fontawesome5'; 이렇게 Icon으로 해주니까 font들이 제대로 카피가 되더라구요,,? 위에 사진처럼 복사되면 제대로 된거죠? (Icon 잘 나옵니다,,) 혹시 바로 import Icon했을때는 왜 안된건지 아실까요?

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 3 좋아요 0 조회수 242

에러가 떠요

미해결

처음 만난 리액트(React)

git에 있는 chapter 03에 있는 거 그대로 copy 하고 index.js 수행 해도 아래와 같은 오류가 떠요.. 버전은 16이구요.. 어디가 잘 못 된걸까요? Cannot read properties of undefined (reading 'S') TypeError: Cannot read properties of undefined (reading 'S') at http://localhost:3001/static/js/bundle.js:19184:56 at ./node_modules/react-dom/cjs/react-dom-client.development.js ( http://localhost:3001/static/js/bundle.js:20831:2 ) at options.factory ( http://localhost:3001/static/js/bundle.js:29391:31 ) at __webpack_require__ ( http://localhost:3001/static/js/bundle.js:28833:32 ) at fn ( http://localhost:3001/static/js/bundle.js:29050:21 ) at ./node_modules/react-dom/client.js ( http://localhost:3001/static/js/bundle.js:21060:20 ) at options.factory ( http://localhost:3001/static/js/bundle.js:29391:31 ) at __webpack_require__ ( http://localhost:3001/static/js/bundle.js:28833:32 ) at fn ( http://localhost:3001/static/js/bundle.js:29050:21 ) at ./src/index.js ( http://localhost:3001/static/js/bundle.js:28617:74 )

  • HTML/CSS
  • javascript
  • react
반짝이는 거북이 댓글 3 좋아요 1 조회수 297

iOS설정에 오류가 있는 것 같습니닷,,(info.plist 설정 오류)

해결됨

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

강의 설명에서는 아래 사진처럼 되어져 있는데 -> false의 위치가 틀렸어요 이게 맞습니다(아래 사진) 아마 1번 사진처럼 하면, Info.plist오류라고 뜨면서 앱이 실행이 안됩니다! 2번 사진처럼 붙여넣어주셔야 합니다,, 제대로 설정되면 Info.plist를 Property List로 열었을때 오류 없이 잘 열릴꺼에요(1번 처럼하면 PropertyList 안열림) 열려서 Fonts provided by application에 추가한 폰트들이 잘 들어가져있다면 잘 설치된거에요~ cf1) 이렇게 했는데 갑자기 잘 안된다면 podfile제거하고 다시 설치해보세용 cd ios pod deintegrate pod install 이렇게 하시면 되용 cf2) 만약에 No script URL provided. Make sure the packager is running or you have embedded a JS bundle in your application bundle. unsanitizedScriptURLString = (null) 이런 에러가 뜨면 터미널로 가서 npm start해주면 됩니다.. 저처럼 헷갈리시는 분들이 있을까봐 남겨용 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  • javascript
  • react
  • node.js
  • react-native
  • typescript
김라영 댓글 2 좋아요 0 조회수 436

이미지가 불러와지지 않습니다.

해결됨

[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론

강의 그대로 따라했는데 이런 식으로 뜨네요. 무엇이 문제일까요?

  • javascript
  • phaser
건영 댓글 2 좋아요 1 조회수 216

인기 태그

인프런 TOP Writers

주간 인기글