묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
인라인 스타일 리렌더링 관련
인라인 스타일 사용 시 style이라는 객체 prop이 매번 달라져 리렌더링이 발생한다고 해주신 부분 관련하여 질문드립니다 부모가 리렌더링되는 상황이라 이와 무관하게 자식의 리렌더링도 유발하게 될텐데요자식 컴포넌트 자체에 memo를 적용하는 경우가 아니라면, useMemo를 쓰더라도 최적화 효과가 없을 것으로 보이는데 맞을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
웹에서 실시간 코드반영이 안돼요
jsx파일의 코드를 수정하면 영상처럼 바로바로 바뀌어야하는데 웹을 클릭하면 새로고침되고 클릭안하면 업뎃이 안돼요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
app.use질문
강의 영상 2분에 보면 app.use('/users', require('./routes/users'));가 있는데 전 영상들에서 저런 코드는 없었는데 따로 추가해야하나요
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서 룰 추가 시, Agent Requested 가 보이지 않아요
옵션이 최근에 바뀐것인지올웨이즈 어플라이어플라이 인텔리전틀리어플라이 스페시픽 파일어플라이 메뉴얼리 이렇게 보여지는데 어느곳에 영상에 알려주신 규칙을 추가해야할가요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm install 명령 충돌 문제 문의
안녕하세요. 강사님mac os에서 react 실습을 위해 npm create vite@latest 명령으로 프로젝트 생성후npm install 명령어 사용시 아래와 같은 에러가 발생하였습니다. npm error code EEXISTnpm error syscall renamenpm error path /Users/iyyu/.npm/_cacache/tmp/9f07dca7npm error dest /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error errno EEXISTnpm error Invalid response body while trying to fetch https://registry.npmjs.org/json5: EACCES: permission denied, rename '/Users/iyyu/.npm/_cacache/tmp/9f07dca7' -> '/Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3'npm error File exists: /Users/iyyu/.npm/_cacache/content-v2/sha512/49/2e/ac0ddadc45673e1875be27d9e800ecb71c6d19b3093d78eae941b57686d6db724a1416e97affe9b66f3897f6634e1238fad6515f2d530f293983e18230d3npm error Remove the existing file and try again, or run npmnpm error with --force to overwrite files recklessly.npm error A complete log of this run can be found in: /Users/iyyu/.npm/_logs/2025-07-05T06_41_32_142Z-debug-0.logiyyu@yuilyongui-MacBookAir session05 % npm install --forcenpm warn using --force Recommended protections disabled.npm error code EEXIST이전에 설치한 npm pakage 버전과 충돌 문제가 발생하는 듯 합니다.해결 방법을 알 수 있을까요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강사님께 어떻게 직접질문할수있어요??
강사님께 어떻게 직접질문할수있어요??
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
const함수같은거 기초강의는 어디있나요
const함수같은거 기초강의는 어디있나요
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
리덕스 참조챕터가 어딨어요? 미리듣고오라는데요
리덕스 참조챕터가 어딨어요? 미리듣고오라는데요
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
결제기능 관련
결제기능 관련은 혹시 추가하실 계획이 있으신지 궁급합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Cannot read properties of undefined (reading 'map') TypeError: Cannot read properties of undefined (reading 'map') 에러 해결 어떻게 하나요?
현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요, 1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요, 실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이 에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <div id="header"> <div id="header-area"> <img src="../images/icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="../images/banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> { products.map(function(product, index){ return ( <div className="product-card"> <div> <img className="product-img" src={product.imageUrl} /> </div> <div className="product-contents"> <span className="product-name">{product.name} </span> <span className="product-price">{product.price}원 </span> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;질문 하기 전 , 인프런 질문 올라와서 답변 올라온 것 다 적용해 보아도 해결이 안되어 이렇게 여쭈어 보게되었습니다. 무엇이 문제인지, 그리고 해결 방법은 무엇인지 알려 주시면 고맙겠습니다.
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
ai가 제대로 작동하지 않는 것 같아요
hello를 출력하는 자바스크립트 코드를 작성해줘 node로 작성해줘 이렇게 입력하니 런버튼은 나왔는데요.런 버튼을 누르니, 강사님처럼 html을 만드는게 아니고, hello.js 파일이 생성되었고 실행되었습니다. 출력이 콘솔에 표시되어야 합니다. 요렇게 메시지가 나오고 끝납니다.제 커서 ai는 왜 이렇게 단순하게 끝날가요제 어떤 옵션이 잘못된걸가요?
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
런 커맨드 버튼이 보이지 않아요
헬로 월드 출력하는 자바 스크립트 코드 생성 후, 코드를 억셉트 하였는데, 런 커맨드 버튼이 나오지 않습니다.나오는 방법 부탁드립니다
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커서 설치 후, 리뷰 셋팅 화면에서 언어를 한국어로 설정 후, 터미널이 인스톨되지 않습니다
open from terminal 에서 인스톨을 누르면 아래와 같은 메시지가 나오고 설치되지 않아요어떻게 해결할 수 있을가요 [Window Title]Cursor[Content]Unable to update the PATH environment variable to include 'c:\Users\새로운 사용자\AppData\Local\Programs\cursor\resources\app\bin'.[OK]
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
graphql 관련 질문입니다
myGraphqlSetting 부분이 문자열로 인식돼서 요청할 때도 문자열로 들어가는 것 같은데 이 부분은 어떻게 수정해야 되나요?
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
vite 설치 관련 문의
npm create vite@latest . --template react 실행시면 설치 옵션에 바닐라랑 리액트가 있는데 리액트를 설치하는 거죠?그 다음에 나오는 옵션에선 타입스크립트랑 자바스크립트가 있는데 그것도 그냥 하나씩만 있는 게 아니고 js+SWC 이런 것도 있는데 뭐 설치해요?
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
revalidateTag
revalidateTag를 tanstack-query의 쿼리키를 무효화한 것과 비슷하다고 이해해도 될까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
mallapi
mallapi에서 malldb를 연결 했고,apiserver에서 apidb를 연결했습니다.4강 조회기능에서test를 위해 malldb에 테이블 확인을 하시는데 왜 갑자기 테이블이 생긴걸까요?저희는 mallapi는 연결만 하고 구현은 안된거 아닌가요?apiserver에서 구현한 todo는 apidb 안에서 생성되는 걸로 구현이 되어있는데뭘 잘못 한건가요?
-
해결됨Next + React Query로 SNS 서비스 만들기
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
안녕하세요. 먼저, Next.js 를 입문한지 얼마 되지 않아 질문이 서툴 수 있는 점 양해 부탁드립니다..!현재 msw 세팅을 완료 했고, Auth.js는 공식문서를 참고하여 5버전과 동일하게 auth.ts 파일을 아래와 같이 작성하였습니다.// auth.ts import NextAuth from "next-auth"; import Credentials from "next-auth/providers/credentials"; export const { handlers, signIn, signOut, auth } = NextAuth({ pages: { signIn: "/i/flow/login", newUser: "/i/flow/signup", }, providers: [ Credentials({ authorize: async (credentials) => { const response = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/login`, { method: "POST", body: JSON.stringify({ username: credentials.username, password: credentials.password, }), headers: { "Content-Type": "application/json" }, }, ); if (!response.ok) { return null; } const user = await response.json(); console.log("로그인 정보", user); return { id: user.id, name: user.nickname, image: user.image, ...user, }; }, }), ], });// @modal/(.)/i/flow/login/page.tsx const onLogin = async () => { try { await signIn("credentials", { username: id, password, redirect: false, }); router.replace("/home"); } catch (err) { console.error(err); setMessage("아이디와 비밀번호가 일치하지 않습니다."); } };문제는 authorize 함수 내 콘솔이 찍히지 않는 것으로 보아, 해당 함수가 아예 실행되지 않는 것 같습니다.회원가입하지 않은 아이디와 비밀번호를 입력해도 로그인이 되고 /home 으로 이동합니다. home으로 이동 후 session 응답 값은 null이고 쿠키에도 auth 토큰이 저장되지 않습니다.그리고 터미널에는 첫번째 이미지 처럼 에러 메세지가 뜨고, 브라우저 콘솔에는 두번째 이미지와 같은 메세지가 뜹니다. // handlers.ts http.post(`${baseUrl}/api/login`, () => { console.log("로그인"); return HttpResponse.json(User[1], { headers: { "Set-Cookie": "connect.sid=msw-cookie; HttpOnly; Path=/", }, }); }),현재는 MSW가 요청을 제대로 가로채지 못하고 있는 것 같다는 의심이 드는데, 어디를 우선적으로 점검해야 할지 잘 모르겠습니다..초보라 부족한 점이 많지만, 방향을 잡을 수 있도록 힌트나 조언 주시면 정말 감사하겠습니다 ㅠㅠ
-
해결됨한 입 크기로 잘라먹는 Next.js(v15)
사전렌더링에서 서버가 렌더링하는방법
csr에서는 번들링된파일을 받으면 브라우저에서 돔트리를 만들어서 화면에그리는데 7강 8분50초에서 next에서 사전렌더링을 할때에는 서버가 직접 js를 실행해서 렌더링을 한다고 하셨는데 그럼 서버에서 직접 돔트리를 그리는건가요? 질문자체가 이상할수 있는데 헷갈려서 질문드립니다ㅠ
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
event객체 전달에 관해서
앞선 강의에서 매개변수가 있는 경우 event객체를 명시적으로 전달하라고 하셨는데 본 강의에서는 매개변수가 있지만 따로 명시하지 않으신 부분이 궁금합니다. event객체를 사용하지 않는 경우에도 매개변수가 있는 경우 명시적으로 지정해줘야 하는지, 혹시 제가 잘못 이해한 것이라면 어느 상황에 명시적으로 event 객체를 전달하는지 알고 싶습니다.