inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

모달 store 관련 질문입니다.

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요, 이정환 강사님. 강의를 모두 수강하고 혼자 프로젝트를 진행하고 있는 수강생입니다. 모달 store를 구현하던 중 의문점이 생겨 질문합니다. 만약 postEditorModal에 더불어 다른 모달 데이터를 관리하는 스토어(예를 들어 projectEditorModal)을 만들고 싶으면, store 파일을 두 개로 나누어 만드는 것이 맞을까요? 처음에는 똑같은 state와 actions 값을 담는 store니 하나의 파일로 관리해서 만들어도 되지 않을까 생각했는데, devtools 이름을 나누어 관리하는 것이 버그 관리나 유지 보수 관점에서 더 유리할 것 같아서요. 감사합니다.

  • react
  • typescript
  • react-query
  • supabase
  • zustand
cupshop123 댓글 2 좋아요 0 조회수 81

강의를 따라갈 때 haiku 모델을 활용해도 괜찮을까요?

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

pro 요금제, sonnet4.5를 사용해서 강의를 따라가다 보니 금방 session의 토큰 사용량이 가득 차는 부분이 불편해서 모델 비교 설명을 확인해봤습니다. 일상적인 개발에서는 sonnet4.5가 토큰 사용량이나 성능 측면에서 뛰어난 것 같더라구요. 아마 실무 개발에서 claude를 활용하게 된다면 sonnet을 사용할 것 같은데, haiku4.5가 sonnet보다 3배 저렴하고 속도도 빠르다고 하는 내용을 보니 pro 요금제로 강의를 들을 때는 haiku 모델이 더 적합하겠다는 생각이 들었습니다. 이것 저것 모두 써보려고 하는데, 강사님의 의견이 궁금합니다! (실무에서 모델별 성능이 체감될 만큼 차이가 큰지도 궁금합니다.)

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
philtrum 댓글 1 좋아요 2 조회수 212

Location.getCurrentPositionAsync({}); 에러

미해결

React Native with Expo: 제로초에게 제대로 배우기

npm ls react 19.1.0 npm ls react-native 0.81.5 npm ls expo 54.0.27 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. 에뮬레이터에 location도 설정했는데 왜 마크표시를 누르면 아래 에러가 발생하는걸까요.. 빌드 지우고 다시 설치하고도 해봤습니다. LOG getMyLocation granted ERROR [Error: Uncaught (in promise, id: 1) Error: Current location is unavailable. Make sure that location services are enabled] Code: construct.js 2 | var setPrototypeOf = require("./setPrototypeOf.js"); 3 | function _construct(t, e, r) { > 4 | if (isNativeReflectConstruct()) return Reflect.construct.apply(null, arguments); | ^ 5 | var o = [null]; 6 | o.push.apply(o, e); 7 | var p = new (t.bind.apply(t, o))(); Call Stack construct (<native>) apply (<native>) _construct (node_modules/@babel/runtime/helpers/construct.js:4:65) Wrapper (node_modules/@babel/runtime/helpers/wrapNativeSuper.js:15:23) construct (<native>) _callSuper (node_modules/@babel/runtime/helpers/callSuper.js:5:108) constructor (node_modules/expo-modules-core/src/errors/CodedError.ts:11:5)

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
dev 댓글 3 좋아요 1 조회수 161

로컬스토리지 토큰 저장 시 보안문제

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

안녕하세요 선생님 supabase의 회원가입 기능을 사용하여 가입한 경우 자동으로 로컬스토리지에 토큰정보들이 저장이 되는 부분에서 이 부분들이 보안적으로 문제가 되지 않나요?? supabase를 사용하는 실무에서 이러한 문제를 어떤식으로 보통 해결하나요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
박선우 댓글 2 좋아요 0 조회수 173

모바일 버전에 쓰이는 이미지를 다운받고 싶어요

미해결

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

강의 시간에 구글에서 찾은 이미지 말구요 그림 이미지요 모바일

  • react
  • redux
  • web-api
luckygoldsta 댓글 1 좋아요 0 조회수 89

[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요. 수업을 듣다가 알려주신 거랑 다르게 동작하는 것 같아 질문드립니다. 5.2 풀라우트 캐시2 스크립트 기준 10:09 "자, 이런 Fetch 메서드는 자동으로 No Store 옵션을 갖는다고 말씀을 드렸죠?" -> 그래서 예상한 결과값은 dynamic page를 예상했는데 static page로 나오는 것 같습니다 npm run build를 했을 때 cache 옵션을 안 준 경우 const response = await fetch(`${process.env.NEXT_PUBLIC_API_SERVER_URL}/book`) Route (app) Size First Load JS ┌ ○ / 288 B 106 kB 이렇게 static page로 나오고 cache 옵션 no-store로 준 경우 Route (app) Size First Load JS ┌ ƒ / 288 B 106 kB 이렇게 dynamic page로 나와서 next 공식 문서를 찾아보니 https://nextjs.org/docs/15/app/api-reference/functions/fetch auto no cache (default): Next.js fetches the resource from the remote server on every request in development, but will fetch once during next build because the route will be statically prerendered. If Dynamic APIs are detected on the route, Next.js will fetch the resource on every request. 이렇게 build 때는 static 이라고 해서 질문이 생겼습니다. 어떤 블로그에서는 또 브라우저마다 다르게 동작한다고 해서 헷갈립니다..! 답변 주시면 감사드리겠습니다.

  • react
  • typescript
  • next.js
박주연 댓글 2 좋아요 1 조회수 125

배포후 동일한 url 다른 기기 접속

미해결

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

이렇게 노트북으로 배포한 상태에서 동일한 url을 제 휴대폰으로 검색해서 들어가니까 제 휴대폰으로는 데이터들이 안 보이는데 버그인가요?

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

supabase foreign key relation 설정이 안돼요

미해결

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

like테이블을 생성하고자 작성을 한 후 Add foregin key relation 을 클릭하여 public schema를 선택한 이후에도 하위 테이블 목록이 보이지 않습니다..ㅠㅠ 딱히 다른 설정을 만진것이 없이 강의를 따라 쭉 해보고 있는데 무언가가 바뀐건가요? 강의 내에서는 post테이블이면 public.post로 나오지만 지금 현재는 post로만 보이는 상태인데 어떤 부분이 바뀌었나? 혹은 설정을 못한 부분이 있나 잘 모르겠습니다..

  • react
  • typescript
  • react-query
  • supabase
  • zustand
진상우 댓글 2 좋아요 0 조회수 75

probs(props)도 맞는 표현인가요?

미해결

리액트 기초 (Introduction to React)

제가 알기로는 props 로 알고있는데 강의에서 강사님이 props를 계속 probs 로 사용하셔서 헷갈립니다. probs 도 쓰이는 표현인가요?

  • react
  • react-router
  • hook
정보미 댓글 1 좋아요 0 조회수 121

강의교안, 내용 인용해서 블로그 글 작성

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

해당강의의 교안 내용과 강의를 보며 이해한 부분을 블로그에 정리해서 글을 써도 되는지 궁금합니다!

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
seungheon lee 댓글 2 좋아요 1 조회수 104

로그인구현

미해결

스프링 부트와 리액트로 구현하는 보안 JWT 로그인

로그인구현 직접하는줄 알고 결재했는데 직접구현하는 강의가 없는건지 제가 못찾은건지 바로 서버 생성하고 배포하는걸 보여주시는데 직접구현하는거는 어디서봐야할까요? 다른강의일까요?

  • react
  • java
  • aws
  • spring-boot
  • spring-security
다람쥐 댓글 2 좋아요 1 조회수 141

한 섹션 내 token 사용량에 대한 질문

미해결

클로드 코드 완벽 마스터: AI 개발 워크플로우 기초부터 실전까지

클로드 pro price 사용중입니다. 이번 과제를 진행하면서 초기화없이 한 섹션?(이 단위를 부르는 명칭을 잘 모르겠네요)에서 진행을 했는데, 약 5~6번의 수정을 거치니 토큰 사용량(current session)이 한도에 도달해버리네요. 미션 템플릿에 따라 처음 plan 요청 후에는, accept edit 모드로 간단하다고 생각되는 수정 사항을 요청했습니다. 수정 내용으로는 1. 블랙+옐로우의 어두운 컬러감 말고 main, secondary 컬러 다시 정해서 밝은 테마, 다채로운 컬러 사용해서 수정해줘 2. 경력 섹션에 카드 형식말고 아코디언 형식의 타임라인 형태로 수정해줘 이런 식으로 두가지 정도씩해서 4~5번 수정사항을 요청했습니다. 매 수정 때마다 거의 10분을 잡아먹드라구요 중간에 clear가 없었던 탓일까요? 토큰 사용 속도가 너무 빠른데. 만약 그렇다면 clear를 중간 중간에 해주면 사용량이 줄어들까요?

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
깅우 댓글 1 좋아요 0 조회수 304

1-7 hooks 강의에서 질문 있습니다.

해결됨

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

환경 OS: Window 10.0.19045.6466 - WLS 2.6.2.0 - Ubuntu 24.04 Ide: Cursor node : v25.2.1 claude code : v2.0.62 안녕하세요. 1-7 강의 중 질문 사항이 있어서 글 작성 하였습니다. 첫번째 질문은 사소한 것인데 강의에서는 claude --debug 사용 시 claude chat과 동일한 terminal 창에서 debug log가 나타납니다. 근데 제가 위 명령어를 통해 claude를 실행 한 경우에는 별도의 txt 파일을 생성하여 해당 파일에서 로그를 별도로 확인 해야 됩니다. 제가 실습하는 환경에서는 강의 처럼 디버깅 로그를 확인하는 것이 가능할까요? 관련 내용을 gpt나 antropic 공식자료 등을 확인해 보았으나 따로 공식적인 문서는 없는 것 같습니다. 두번째 질문은 dispatcher 훅 패턴 질문입니다. 현상을 먼저 말하자면 SessionStart hook을 명시 할 때는 PreToolUse hook 도 실행 되는데 SessionStart hook을 명시하지 않으면 PreToolUse hook도 실행 되지 않습니다. 강의자료에는 다른 hook 없이 PreToolUse hook만 settings.json에 입력 하도록 되어있었는데 실제로 .env파일을 읽어와서 로깅을 보았을 때 PreToolUse로 찾기를 했을 때 존재하지 않았고 SessionStart hook을 명시할 때는 PreToolUse로 찾기를 했을 때 존재하였습니다. { "hooks": { "SessionStart": [ { "hooks": [ { "type": "command", "command": "echo '✅ 의존성 설치 완료'", "timeout": 300 } ] } ], "PreToolUse": [ { "matcher": "*", "hooks": [ { "type": "command", "command": "node .claude/hooks/dispatcher.js" } ] } ] } } PreToolUse 가 작동함 { "hooks": { "PreToolUse": [ { "matcher": "*", "hooks": [ { "type": "command", "command": "node .claude/hooks/dispatcher.js" } ] } ] } } PreToolUse 가 작동하지 않음 질문글 길이가 제한이 있어서 디버깅 로그는 gpt에서 차이를 대조한 결과 사진으로 첨부합니다. 문제해결은 되었으나 왜 SessionStart를 명시하지 않으면 PreToolUse hook을 찾지 못하는 원인이 무엇인지 의문이 들어서 질문 드립니다.

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

나름 중요하다고 생각하는 강의에 대한 궁금점 질문 드려요~

해결됨

한 입 크기로 잘라먹는 React.js 실전 프로젝트 - SNS 편

이정환 쌤 강의는 무조건 다 듣는 프론트 개발자 학생입니다. 근데, 궁금한점이 있어 질문드려요. 리액트 강의부터 하시고, 그다음 Next.js 강의 하시고, 다시 리액트로 이번에 강의를 하시는데, 저는 이정환 쌤 Next.js 강의를 듣고 난 후에는 리액트로는 개발을 안하고 Next.js로만 개발했거든요. 다시 리액트로 돌아간 이유에 대해 궁금해서 질문드립니다. Next.js 말고 리액트를 선택한 이유가 있을까요? Next.js에 어떤 이슈가 있는걸까요?

  • react
  • typescript
  • react-query
  • supabase
  • zustand
Ethan 댓글 2 좋아요 1 조회수 159

JS의 논리 연산자 &&, ||가 리액트의 조건부 렌더링 &&, ||인가요?

해결됨

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

// && 사용 - "로그인했으면 보여줘" {isLoggedIn && <Profile />} // || 사용 - "로그인 안했으면 보여줘" {!isLoggedIn || <Profile />} 리액트에서 조건부 렌더링할 때 &&, ||를 씁니다. 이게 자바스크립트의 논리 연산자인 &&, ||와 같은건가요?

  • javascript
  • react
Sec 댓글 2 좋아요 0 조회수 116

백엔드 prisma 연결

미해결

한 입 크기로 잘라먹는 Next.js

백엔드서버 세팅할때 prisma db push 무한로딩걸립니다. 경로 패스워드 제대로 입력했는데, 오류가 뜨지도않고 성공을 하지도 않고 무한정 대기하고있습니다..

  • react
  • typescript
  • next.js
  • 카카오공채-개발
Lerna 댓글 2 좋아요 0 조회수 116

vite를 꼭 써야하나요

미해결

(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계

누나 저는 인텔리제이 리액트 프로젝트로 만드는데 거기서는 vite 안 쓰고도 npm start 하니까 만들어집니다. vite 를 쓰는 이유가 뭔가요

  • react
  • redux
  • web-api
luckygoldsta 댓글 1 좋아요 0 조회수 93

API 주소

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

하이브리드앱 api는 어디서 볼 수 있나요?

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
최수빈 댓글 1 좋아요 0 조회수 111

로컬스토리지 에러

미해결

만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링

3(index):1 Uncaught (in promise) Error: Access to storage is not allowed from this context. 이렇게 뜨는데요. 또 로컬 스토리지 보면 들어가긴 하거든요? 왜그럴까요

  • javascript
  • react
  • 리팩터링
김성관 댓글 1 좋아요 0 조회수 135

인기 태그

인프런 TOP Writers

주간 인기글