inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

npm.ps1 파일로 인한 npm i randomcolor 안되는 문제

미해결

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

npm : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\npm.ps1 파일을 로드할 수 없습니다. 자세한 내용은 about_Execution_Policies( https://go.microsoft.com/fwlink/?L inkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + npm i randomcolor + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess 왜 이러죠... npm.ps1 파일을 찾아봣는데 없어요....

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

revalidatePath('/product/catalog/1')

미해결

Next.js with Spring Boot

revalidatePath('/product/catalog/1') 쉽게 얘기해서 새로된 캐시데이터를 가져온다는 얘기인거죠?

  • javascript
  • react
  • spring-boot
  • jpa
  • next.js
오일중 댓글 2 좋아요 0 조회수 82

/context 출력에서

미해결

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

첨부한 이미지의 출력 내용 중에서 ' Autocompact buffer' 가 의미하는 바는 무엇인가요? 아직 메시지를 입력하지 않았는데도 항상 22% 이상의 컨텍스트를 차지하고 있는데 이 부분도 이미 컨텍스트를 점유하고 있는 것인가요? 이 영역을 제거할 수는 없나요? 강의 항상 유익하게 보고 있습니다. 감사합니다. 즐거운 성탄되세요.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
이은우 댓글 2 좋아요 0 조회수 149

eslintrc.cjs 파일이 eslint.config.js 와 같나요?

해결됨

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

eslintrc.cjs 파일이 eslint.config.js 와 같은 건가요? 같은 아이콘의 파일을 받았는데 eslint.config.js라고 되어있어서 여쭈어봅니다

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

타입스크립트 타입이 불일치하는데 에러가 안납니다.

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

안녕하세요. App.tsx에서 스트링이랑 넘버로 보낸 이 후에 그 값을 받아오는 PrintValue.tsx에서 모든 타입들을 boolean으로 설정을 했는데 에러가 나고 있지 않습니다. 제가 뭘 잘못한건지를 아무리 찾아봐도 모르겠어서 질문을 올려봅니다... 강의 너무 잘 보고 있습니다.

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
면류관받는날까지# 댓글 3 좋아요 0 조회수 96

PPR을 보고 오라고 하시는데

미해결

Next.js 까보기: "쓸 줄 아는 개발자"에서 "알고 쓰는 개발자"로

어떤 걸 참고해야할지 링크를 주시면 감사하겠습니다 그 전 강의에서도 VDOM에 대한 것도 비슷한 맥락에서 강의에서는 없는 내용을 설명하시는게 조금 보이네요 순서대로 설명해주시는 맥락이 끊기는 느낌을 받습니다

  • react
  • typescript
  • next.js
하루2시간 댓글 2 좋아요 1 조회수 114

클로드 코드 이미지 첨부 안되는 오류 문의

해결됨

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

안녕하세요 짐코딩님! 현재 클로드 코드로 나만의 프로필 웹사이트 만들기를 진행 중인데 기본적인 웹사이트 생성은 했지만 스크린샷으로 구체적인 수정 요청하기에서 캡쳐한 후 스크린샷 첨부를 할 경우 [Image1] 이런 식으로 나타나는 것이 아니라 아무 것도 표시되지 않는 문제점이 발생하고 있습니다 현재 모델은 토큰을 절약하기 위해 Haiku 모델을 사용하고 있으며 단순히 Sonnet 모델에서만 가능한 것인지 현재 저의 컴퓨터 안의 터미널 문제인지 잘 모르겠습니다. 혹시 해결 방안이 있는지 여쭤보고 싶습니다

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
로로로도로로 댓글 1 좋아요 0 조회수 1466

default format >> prettier 이 실행이 안됩니다.

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

검색을 하면 각각 탭이 있습니다. 그리고 강의에서 이야기 해 주신대로 x를 눌러서 닫았고 그 이후 index.html을 수정한 후 저장을 눌렀으나 탭을 한 그 상태로 저장이 되어집니다. 왜 그런지 알 수 있을까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
면류관받는날까지# 댓글 2 좋아요 0 조회수 83

윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

윈도우 사용자입니다. homebrew 윈도우 설치법은 없나요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
면류관받는날까지# 댓글 3 좋아요 0 조회수 425

로딩/에러처리 검증은 어떻게 하는게 좋을까요?

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

안녕하세요. API 요청이 포함된 컴포넌트를 대상으로 단위/통합 테스트할때 요청 상태에 따라 로딩, 에러 UI가 적절하게 렌더링 되는지도 검증을 해야하는지 궁금합니다. 해야한다면, API 호출하는 모든 테스트에서 로딩/에러 UI 검증을 하는게 일반적이고 맞는 건지, 아니면 제 경우에는 ErrorBoundary랑 Suspense를 다음처럼 합쳐서 에러/로딩 처리용 wrapper(?)를 만들었는데, 이런 wrapper 테스트를 따로 작성하는게 맞는건지.. 궁금합니다 ㅎㅎ.. interface ComposedBoundaryProps extends ErrorBoundaryPropsWithRender { suspenseFallback: ReactNode; children: ReactNode; reset: () => void; } const ComposedBoundary = ({ suspenseFallback, children, fallbackRender, reset, }: ComposedBoundaryProps) => { return ( <ErrorBoundary onError={(error: unknown) => { // ... }} onReset={reset} fallbackRender={fallbackRender} > <Suspense fallback={suspenseFallback}>{children}</Suspense> </ErrorBoundary> ); };

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
EUNSUN KIM 댓글 1 좋아요 0 조회수 91

혹시 뭐가 문제인지 알 수 있나요?

미해결

코드로 배우는 React 19 with 스프링부트 API서버

Execution failed for task ':org.zerock.mallapi.MallapiApplication.main()'. > Process 'command 'C:\Users\User\.jdks\temurin-21.0.9\bin\java.exe'' finished with non-zero exit value 1 * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to generate a Build Scan (powered by Develocity). > Get more help at https://help.gradle.org .

  • react
  • typescript
  • spring-boot
  • jpa
  • jwt
lgh8079 댓글 2 좋아요 0 조회수 107

궁금한게 있습니다 선생님!

해결됨

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

안녕하세요 선생님. 강의를 모두 수강한 후 복습을 하던 중 궁금한 점이 생겨 질문드립니다. 좋아요 기능에서 동시성 문제를 해결하기 위해 행 잠금 을 사용하는 것으로 이해했습니다. 이 경우, 첫 번째 유저의 좋아요 요청이 처리되는 동안 해당 행이 잠기게 되는데, 만약 동시에 많은 사용자(수백~수천 명)가 좋아요 버튼을 누르는 상황 이라면 요청들이 순차적으로 대기하게 되어 응답 지연이 발생되지는 않나요?? 또한 이런 이유 때문에 클라이언트 단에서는 낙관적 업데이트 를 적용하는게 맞는걸까요??

  • react
  • typescript
  • react-query
  • supabase
  • zustand
백승민 댓글 2 좋아요 0 조회수 78

Cursor AI Pro, Claude Code Pro 결제 관련 문의

해결됨

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

안녕하세요 짐코딩님! 클로드 코드 가격 정책 수업을 듣고 나서 결제 관련 의문이 드는 점이 발생하여 문의 드립니다. 현재 Cursor AI Pro 계정을 $20씩 지불하여 사용중입니다. 이러한 상황 속에서 클로드 코드를 추가적으로 $20를 Pro 버전을 추가적으로 결제해야 되는 건가요? 그렇게 될 경우 총 $40라는 부담스러운 가격을 지불해야되는 상황인데 어떻게 해야될 지 잘 모르겠습니다. 해당 수업을 따라가기 위해서는 Cursor AI 구독을 취소하고 Claude Code Pro를 결제해서 수업을 들어야 하는 지 여부에 대해서 여쭤보고 싶습니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
로로로도로로 댓글 2 좋아요 1 조회수 1030

Claude Code, Cursor AI 관련

미해결

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

클로드 코드 가격 정책 수업을 듣고 나서 결제 관련 의문이 드는 점이 발생하여 문의 드립니다. 현재 Cursor AI Pro 계정을 $20씩 지불하여 사용중입니다. 이러한 상황 속에서 클로드 코드를 추가적으로 $20를 Pro 버전을 추가적으로 결제해야 되는 건가요? 그렇게 될 경우 총 $40라는 부담스러운 가격을 지불해야되는 상황인데 어떻게 해야될 지 잘 모르겠습니다. 또한 이러할 경우 해당 수업을 따라가기 위해서는 Cursor AI 구독을 취소하고 Claude Code Pro를 결제해서 수업을 들어야 하는 지 여부에 대해서 여쭤보고 싶습니다.

  • react
  • next.js
  • cursor
  • tailwindcss
  • claude
댓글 2 좋아요 0 조회수 308

빨간줄 설정

미해결

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

빨간줄 설정 리액트에서 할 때 뭐 있었던 거 같은데 그 뭐였을까요 넥스트제이에스 여기에서도 가능하죠?

  • react
  • typescript
  • next.js
  • 카카오공채-개발
김성관 댓글 3 좋아요 0 조회수 118

익스텐션 질문

해결됨

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

이런식으로 코드 입력할때마다 에러 메세지같이 띄워주는건 어떤 익스텐션 인가요?!

  • react
  • typescript
  • next.js
  • 카카오공채-개발
최우석 댓글 1 좋아요 0 조회수 71

React 실습부분 소스가 어디에 있나요?

해결됨

누구보다 빠르게 배우는 풀스택 게시판 만들기

강의 중에 소스 올려주신다고 했는데 소스가 안보이네요? 소스가 없더라도 진행하는 강의 부분의 코드를 한번이라도 좀 보여주면 멈추고 따라 치면서 같이 실습할텐데 css영역부분 다 짤려 보여갖고 실습 내용이 똑같이 재현이 안됩니다...

  • react
kimbora134 댓글 2 좋아요 0 조회수 122

리렌더링 관련 문의

미해결

타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게

toggleTodo = useCallback( ( id : number) => { <-- 여기 이 지점에 todos 라는 state 값이 필요한 상황 ( 체크 로직 등등.. ) setTodos( (todos) => todos.map( (todo) => todo.id === id ? { ...todo, completed: !todo.completed } : todo ); }, []); 위 부분에 todos 의 state 값이 필요하게 되면 의존성 배열에 todos 를 넣어줘야 될꺼 같은데요. 이렇게 되면 React.memo 에 의해 전달될 toggleTodo props 도 변경되게 될것으로 예측 되고 결국 자식 컴포넌트들이 리렌더링이 계속 발생되지 않을까 싶은데요. 위 부분에 todos 의 state 값이 필요하게 될 경우에는 어떻게 처리를 해줘야 될까요?

  • react
  • react-router
  • redux-toolkit
  • zustand
  • react.js
최병국 댓글 2 좋아요 0 조회수 73

[해결]그랩님 답변 주세요.

해결됨

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

102강 강의를 듣고 있는데요, react-native-reanimated-carousel 설치 위해 노션에 링크대로 npm install react-native-reanimated-carousel@3.3.0 명령어로 설치하고 그 이후 expo install --npm react-native-reanimated react-native-gesture-handler 를 입력하여 터미널에서 설치 완료 하였습니다 질문 1. 이후 babel.config.js 파일 에 가서 plugins: ["react-native-reanimated/plugin"], 추가 해야 하는데 문제 는 babel.config.js 파일 이 존재하지 않아 어디에 플러그인 작성해야 하는지 모르겠습니다 첨부 사진 package.json에 디펜던시를 보면 아래와 같아요 "react": "19.1.0", "react-native": "0.81.5", "react-native-reanimated-carousel": "^3.3.0", "react-native-reanimated": "~4.1.1", "react-native-gesture-handler": "~2.28.0" 질문 2. Babel 설정 위해 Cache 초기화 하는 부분도 위에 질문1이 순서대로 정상적으로 진행이 되지 않아 스킵 했는데 babel.config.js에 플러그인 문구부터 저장한 뒤 바벨 설정 캐시 초기화 하는 것이 옳지요? 질문 3 102강 시작부터 ~ 18분 56초 까지 타이핑 한 grab-market-mobile의 App.js 소스 내용 아래와 같은데 이것을 실행 하면 사진과 같이 안드로이드 스튜디오(runtime not ready) 에서 에러 발생 아래 App.js 는 강의 전체 완성본 소스 가 아니라 에러가 난 시점까지의 소스 입니다 질문4 ->여기서 Carousel 부분 살펴보면 아래 App.js 소스 에서 아래와 같이 작성하는 것 맞나요 ? 만약 아래 작성 소스 가 다르면 어떻게 작성 해야하는지 댓글에 소스 적어주세요 < Carousel data = {banners} width = {Dimensions.get( " window ") .width } height = {200} autoPlay = {true} renderItem = {(obj) =>{ return( < TouchableOpacity > < Image source = {{uri :obj.item.imageUrl }} /> </ TouchableOpacity > ) }} /> import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; import Carousel from "react-native-reanimated-carousel"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) axios.get(`${API_URL}/banners`).then((result)=>{ setBanners(result.data.banners); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} renderItem={(obj)=>{ return( <TouchableOpacity> <Image source={{uri : obj.item.imageUrl}} /> </TouchableOpacity> ) }} /> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard} key={product.id}> {product.soldout === 1 && <View style={styles.productBlur}/>} <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 }, productBlur : { position: 'absolute', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, }); 에러 해결 차근차근 알려주셨으면 좋겠습니다 --------------------------------------------------------------------------------------------- 질문 5 babel.config.js 없기에 프로젝트 루트에 파일 을 직접 생성 하고 module.exports = { presets: ['babel-preset-expo'], plugins: ['react-native-reanimated/plugin'], }; 위 소스입력 후 저장 완료 후 캐시 초기화 를 위해 expo start -c 까지 차례대로 수행 후 ngrok과 모바일/서버로 연동 후 결과 가 위 버전 에러와 다르게 새로운 에러가 발생 했습니다 어떻게 해결 하죠? 질문6 아래 게시글 답변대로 질문 2까지 수행 하니 아래와 같은 에러가 발생 질문7 아래게시글 답변에 질문 3 및 3-1은 하라는대로 실행해보면 에러가 발생할까 실행을 안했는데 3개를 입력해 줘도 괜찮은건가요 ? 명령어 1: npm uninstall react-native-reanimated-carousel react-native-reanimated 명령어 2: npm install react-native-reanimated-carousel@3.3.0 react-native-reanimated@^2.0.0 명령어 3: expo install react-native-gesture-handler 질문8 잘 되던 안드로이드 스튜디오가 로딩을 왜 못할까요?

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

vs코드에서 vercel

해결됨

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

PS D:\programming\react-Lee\projects\section12> vercel login vercel : 'vercel' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름 이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + vercel login + ~~~~~~ + CategoryInfo : ObjectNotFound: (vercel:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException PS D:\programming\react-Lee\projects\section12> --- vercel login이란 명령어를 입력하니 위와 같은 에러가 뜨는데요. vscode에 아무것도 안깔고 회원가입만 했다고 vercel이란 명령어를 쓸 수 있는건가요??

  • javascript
  • react
  • node.js
  • 카카오공채-개발
김성관 댓글 2 좋아요 1 조회수 133

인기 태그

인프런 TOP Writers

주간 인기글