묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
로그인 관련 커스텀 훅 만들기 -> 부분 질문입니다.
현재 loginSlice.tsx에서 오류가 나고 있습니다..아래와 같은 메세지를 접했습니다.useCustomLogin.tsx:2 Uncaught SyntaxError: The requested module '/src/store.tsx' does not provide an export named 'AppDispatch' (at useCustomLogin.tsx:2:10) 어느부분을 손 봐야할까요?vite 6.3버전으로 이용하고 있습니다. loginSlice.tsximport { createAsyncThunk, createSlice } from "@reduxjs/toolkit" import { loginPost } from "../api/memberApi" import { removeCookie, setCookie } from "../util/cookieUtil" export interface LoginInfo { email:string, nickname:string, accessToken: string, refreshToken: string, roleNames: string[], status: string } const initState:LoginInfo = { email: '', nickname: '', accessToken:'', refreshToken: '', roleNames: [], status: '' } export const loginPostAsync = createAsyncThunk('loginPostAsync', ({email, pw}: {email:string, pw:string}) => { console.log("---------------loginPostAsync---------------------") console.log(email, pw) return loginPost(email, pw) }) const loginSlice = createSlice({ name: 'loginSlice', initialState: initState, reducers: { save: (state, action) => { console.log("save...........") return action.payload }, logout: (state, action) => { console.log("logout..........") removeCookie("member") } }, extraReducers :(builder) => { builder.addCase(loginPostAsync.fulfilled , (state, action) => { console.log("loginPostAsync.fulfilled") const newState:LoginInfo = action.payload newState.status = 'fulfilled' setCookie("member", JSON.stringify(newState), 1) return newState }) .addCase(loginPostAsync.pending, (state, action) => { console.log("loginPostAsync.pending") state.status = 'pending' }) .addCase(loginPostAsync.rejected, (state, action) => { console.log("loginPostAsync.rejected") state.status = 'rejected' }) } }) export const { save, logout} = loginSlice.actions export default loginSlice.reducer useCustoLogin.tsximport { useDispatch, useSelector } from "react-redux" import { AppDispatch, RootState } from "../store" import { Navigate, useNavigate } from "react-router" import { loginPostAsync, logout, save } from "../slices/loginSlice" import { useEffect } from "react" import { getCookie } from "../util/cookieUtil" const useCustomLogin = () => { const dispatch = useDispatch<AppDispatch>() //로그인 상태 객체 const loginState = useSelector((state: RootState) => state.loginSlice) //로그인 여부 const loginStatus = loginState.status //fulfilled, pending, rejected useEffect(()=> { if(! loginStatus ) { const cookieData = getCookie("member") if(cookieData){ dispatch(save(cookieData)) } } }, []) const navigate = useNavigate() const doLogin = async (email:string, pw:string) => { dispatch(loginPostAsync({ email, pw })) } const doLogout = () => { dispatch(logout(null)) } const moveToLogin = () => { navigate("/member/login") } const moveToLoginReturn = () => { //--------로그인 페이지로 이동 컴포넌트 return <Navigate replace to="/member/login"/> } const moveToPath = (path:string) => { //----------------페이지 이동 navigate({pathname: path}, {replace:true}) } return {loginState, loginStatus, doLogin, doLogout,moveToLogin,moveToLoginReturn,moveToPath} } export default useCustomLogin store.tsximport { configureStore } from "@reduxjs/toolkit"; import loginSlice from "./slices/loginSlice"; const store = configureStore({ reducer: { "loginSlice": loginSlice, } }) export type AppDispatch = typeof store.dispatch export type RootState = ReturnType<typeof store.getState> export default store
-
미해결하루만에 배우는 ChatGPT API
배포에 문제가 있네요. 로켓 아이콘은 어디있고, vercel배포는 어디있나요?
다음과 같은 양식으로 남겨주세요.질문을 한 배경 :질문내용 : 진심으로 하나도 안보입니다.도대체 어디서 배포하는거죠?템플릿이 다르면 어떻게 다른지까지 정확히 알려주시면 감사하겠습니다.찾지를 못하니, 강의 듣는데 중간 흐름이 너무 끊기네요
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
181. [02-04] setState의 원리 질문
setIsActive(false) 콘솔에는 찍히는데 backgroundColor: yellow가 gray로는 바뀌고 none으로 하면 바뀌지 않는 이유가 무엇일까요?!
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
tailwind css 설치 위치
홈페이지에서 tailwind 4.1버전을 다운 받으니 packge.json의 devDependencies가 아닌 dependencies에 tailwind가 생기는데요. 강의 내용 중엔 devDependencies에 생겨서 구글링을 해보니 배포용과 개발용의 차이라고 하는데, 그렇다면 그 둘을 따로 관리하는 이유가 뭔가요?제 생각엔 어차피 개발을 완료한 다음에 배포를 할 테니 별도로 관리할 필요가 있을까 싶어서요.또 한쪽에서 설치한 프레임워크를 다른 쪽으로 옮기려면 그냥 해당 부분을 복사 붙여넣기 하면 되는 건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
pdf
강의자료 pdf다운받아서 사용하려는데, 소유자 암호를 입력하지 않으면 이 문서를 저장할 권한이 없다는데 메모하면서 사용하고싶어서요. 비밀번호를 찾을수없는데 알수있을까요?
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
무한 스크롤 중 스크롤 튐 현상
무한 스크롤에서 추가 데이터가 load되는 순간, 스크롤 영역이 늘어나게 되는데요. 이 때 유저가 보고 있던 스크롤 위치를 잃고 튀는 현상이 있습니다 당장 생각나는 방법은 이전 scrollY를 갖고 있다가 useLayoutEffect 걸어서 data가 변경될 때 scrollTo 해주는 것인데요, 혹시 더 나은 방법 고민해보셨는지 궁금합니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
특정 페이지 접근을 막고 싶을 때
강의에서 프로필 페이지 접근을 막기 위해 useEffect + redirect 패턴을 사용해주셨는데요, 특정 페이지 접근을 막는 좀 더 고차원적인 방법을 고민해보신 경험이 있는지 궁금합니다 현재 방식은 useEffect라 해당 페이지 한번은 렌더링되다보니, 접근 자체를 막는게 아니라 한번 갔다가 돌아오는 식이라 아쉬운 부분이 있습니다최적화 관점 : 해당 페이지 js를 불러와야 함 등보안 관점 : 명확치 않으나 왠지 hole이 있을 것 같음
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
createGlobalStyle의 위치와 영향범위
createGlobalStyle이 컴포넌트 형태로 적용되다보니 마치 현재 컴포넌트 하위만 적용될 것 같은 느낌이 있는데요 실제 영향범위는 class 수정이므로 페이지 전체에 영향을 끼치다보니 개인적으로 비직관성이 느껴집니다 createGlobalStyle을 실제로 사용하신 경험이 있는지와 사용하셨다면 _app 외에 다른 위치에서도 쓰셨는지 궁금합니다
-
미해결[리뉴얼] 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는 왜 이렇게 단순하게 끝날가요제 어떤 옵션이 잘못된걸가요?
-
미해결제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
런 커맨드 버튼이 보이지 않아요
헬로 월드 출력하는 자바 스크립트 코드 생성 후, 코드를 억셉트 하였는데, 런 커맨드 버튼이 나오지 않습니다.나오는 방법 부탁드립니다