33,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
errors?.email 의 뜻
errors?.email 에서 ?. 의 의미가 뭔가요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
npm run dev에서 오류가 납니다
C:\Users\HB\Desktop\fullstack-app\frontend>npm run devnpm ERR! Missing script: "dev"npm ERR!npm ERR! To see a list of scripts, run:npm ERR! npm runnpm ERR! A complete log of this run can be found in: C:\Users\HB\AppData\Local\npm-cache\_logs\2023-08-22T08_50_35_351Z-debug-0.logC:\Users\HB\Desktop\fullstack-app\frontend> 인터넷보고 package.json에 dev설정을 해줘야한다고해서 들어가봤는데 이미 되있더라구요그리고 package.json이 총 2개인게 맞나요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Missing script : "dev"라고 나옵니다. 근데 package.json에 dev가 있거든요..ㅠ
무슨 문제일까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
is defined but never used 에러가 발생해요ㅠㅠ
[plugin:vite-plugin-eslint] /Users/--/Desktop/fullstack-app/frontend/src/layout/Footer/index.jsx 1:8 error 'React' is defined but never used no-unused-vars ✖ 1 problem (1 error, 0 warnings) 라는 에러가 계속 발생하여 구글링해서main.jsx 첫번째 줄에import React from 'react' //eslint-disable-line no-unused-vars 과 같이 주석을 달았는데도 오류가 해결이 안되어서 질문 올립니다ㅠㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
auth 미들웨어 관련 질문
const jwt = require("jsonwebtoken"); const User = require("../models/User"); let auth = async (req, res, next) => { // 토큰을 request headers에서 가져오기 const authHeader = req.headers["authorization"]; // Bearer ooerkogkeorkgoek.erogkoerkog.eorgkoerkgoerkgokg const token = authHeader && authHeader.split(" ")[1]; if (token === null) return res.sendStatus(401); try { // 토큰이 유효한 토큰인지 확인 const decode = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findOne({ "_id": decode.userId }); if (!user) { return res.status(400).send("없는 유저입니다."); } req.user = user; next(); } catch (error) { next(error); } }; module.exports = auth;기존에 "_id"로 되어있을 때, C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\route.js:211 throw new Error(msg); ^Error: Route.get() requires a callback function but got a [object Object] at Route.<computed> [as get] (C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\route.js:211:15) at proto.<computed> [as get] (C:\Users\zink8060\Desktop\fullstack-app\back\node_modules\express\lib\router\index.js:521:19) at Object.<anonymous> (C:\Users\zink8060\Desktop\fullstack-app\back\src\routes\users.js:7:8) at Module._compile (node:internal/modules/cjs/loader:1246:14) at Module._extensions..js (node:internal/modules/cjs/loader:1300:10) at Module.load (node:internal/modules/cjs/loader:1103:32) at Module._load (node:internal/modules/cjs/loader:942:12) at Module.require (node:internal/modules/cjs/loader:1127:19) at require (node:internal/modules/helpers:112:18) at Object.<anonymous> (C:\Users\zink8060\Desktop\fullstack-app\back\src\index.js:33:19)해당 오류가 있었는데,해당 부분을 _id로 바꿨더니 정상적으로 서버가 동작합니다.const jwt = require("jsonwebtoken"); const User = require("../models/User"); let auth = async (req, res, next) => { // 토큰을 request headers에서 가져오기 const authHeader = req.headers["authorization"]; // Bearer ooerkogkeorkgoek.erogkoerkog.eorgkoerkgoerkgokg const token = authHeader && authHeader.split(" ")[1]; if (token === null) return res.sendStatus(401); try { // 토큰이 유효한 토큰인지 확인 const decode = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findOne({ _id: decode.userId }); if (!user) { return res.status(400).send("없는 유저입니다."); } req.user = user; next(); } catch (error) { next(error); } }; module.exports = auth;하지만 강사님의 코드에는 "_id"로 되어있는데, 버전문제일까요? 아니면 다른 문제가 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
handleSumbit부분 redux로 빼지 않은 이유
UploadProductPage의handleSumbit 부분을 dispatch로 하지 않고바로 페이지안에서 작성한 이유가 따로 있는건가요??
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
paypal관련 문의
오랜만에 문의 드립니다.바쁘시겠지만 답변 부탁 드릴께요페이팔로 결제를 할때 동영상에서는 샌드박스로 가상결제가 되도록 했는데 실제로 결제가 되도록 할려면 어떻게 해야 하는지 문의 드립니다.회사에서 페이팔을 사용하고 있다고 하는데 회사에 무슨정보를 받아서 어디에 설정을 하면 되는지 알려주시면 감사하겠습니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
initialState에 있는 error가 안나옵니다.
persist에서는 error가 있는데 rehydrate에서는 error 가 없습니다. 그결과 pendding과 rejected에서 error가 안나옵니다.userslice 코드입니다.import { createSlice } from "@reduxjs/toolkit"; import { registerUser } from "./thunkFunctions"; import { toast } from "react-toastify"; const initialState = { userData: { id: "", email: "", name: "", role: 0, image: "", }, isAuth: false, isLoading: false, error: "실패", }; const userSlice = createSlice({ name: "user", initialState, reducers: {}, extraReducers: (builder) => { builder .addCase(registerUser.pending, (state) => { state.isLoading = true; }) .addCase(registerUser.fulfilled, (state) => { state.isLoading = false; toast.info("회원가입을 성공했습니다."); }) .addCase(registerUser.rejected, (state, action) => { state.isLoading = false; state.error = action.payload; toast.error(action.payload); }); }, }); export default userSlice.reducer;
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
tailwindCss 꼭 사용해야하나요?
tailwindCss 꼭 사용해야하나요? 그냥 css로 사용하고 싶은데 tailwindCss를 사용하지 않으면 강의를 듣는데 문제가 생길까요 ?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
강의내 eslint부분은 이제 설정하지않아도되는것 아닌가요ㅕ,,?
eslint는 이제 설정하지않아도되는것 아닌가요ㅕ,,?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
[login route 생성하기] - accessToken에 userData를 담은 이유가 궁금합니다.
안녕하세요. login route 생성하기의 내용을 쭉 따라가다가 이해가 되지 않는 부분이 있어 질문하게 되었습니다.강사님께서는 노드 백엔드서버에서 accessToken와 userData를 담은 객체를 json형식으로 반환하도록 하셨습니다. 저로써는 db에 저장되어 있는 회원객체를 그대로 인증정보에 담는 것이 매우 위험하다고 생각되었습니다. userData를 반환해준 이유가 궁금합니다.
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
localhost 연결 거부 ㅠㅠ
수업을 잘 따라갔는데 localhost를 연결할 수 없다고 계속 떠요ㅠㅠ 이유가 뭘까요ㅠ
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
tailwindcss 라이브러리 받은 후 실행이 안됩니다.
npm i -D postcss autoprefixer tailwindnpx tailwindcss init -p 모두 작업을 마치고 /** @type {import('tailwindcss').Config} */ export default { content: [ "./index.html", "./src/**/*.{js,jsx,ts,tsx}" ], theme: { extend: {}, }, plugins: [], } index.css@tailwind base; @tailwind components; @tailwind utilities; npm run dev 를 돌리면,node:internal/process/promises:246triggerUncaughtException(err, true /* fromPromise */);[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: C:/WebStudy/WebDevelement/React/fullstack-react/front): [Error] Loading PostCSS Plugin failed: Cannot find module 'tailwindcss'라는 오류가 뜹니다.원인파악이 어려운데 문의드립니다!
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
model 및 schema 생성하기를 듣고 있는데 질문이 있어요
스키마와 모델을 리액트에서 생성하면몽고db홈페이지에 있는 데이터베이스에도 생성이 되는건가요? 그리고 생성되는것은 어디서 볼 수 있을까요?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
리덕스 부분까지 했는데 Front 화면이 나오지 않아요..
안녕하세요! 강의를 들으면서 React를 공부 중입니다! 다름이 아니라 리덕스 부분까지 진행을 하였는데 에러가 나면서 UI가 보이지 않습니다ㅠㅠ 강의를 몇번 돌려보면서 다른 부분은 없는거 같은데 어떻게 해야할까요..?에러내용소스코드./store/userSlice.jsimport { createSlice } from "@reduxjs/toolkit"; const initalState = { userData: { id: '', email: '', name: '', role: 0, image: '', }, isAuth: false, isLoading: false, error: '' } const userSlice = createSlice({ name: 'user', initalState, reducers: {}, extraReducers: (buider) => { } }) export default userSlice.reducer; ./store/index.jsimport { combineReducers, configureStore } from "@reduxjs/toolkit"; import userReducer from "./userSlice"; import storage from "redux-persist/lib/storage"; import { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE, persistStore, persistReducer, } from "redux-persist"; const rootReducer = combineReducers({ user: userReducer }) const persistConfig = { key: 'root', storage, }; const persistedReducer = persistReducer(persistConfig, rootReducer); export const store = configureStore({ reducer: persistedReducer, middleware: (getDefaultMiddleware) => getDefaultMiddleware({ serializableCheck: { ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER], }, }), }); export const persistor = persistStore(store); ./main.jsximport React from "react"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter } from "react-router-dom"; import { Provider } from "react-redux"; import { store, persistor } from "./store"; import { PersistGate } from "redux-persist/integration/react"; ReactDOM.createRoot(document.getElementById("root")).render( <BrowserRouter> <Provider store={store}> <PersistGate loading={null} persistor={persistor}> <App /> </PersistGate> </Provider> </BrowserRouter> );
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
127.0.0.1에서 연결을 거부했습니다.
사이트에 연결할 수 없음127.0.0.1에서 연결을 거부했습니다.다음 방법을 시도해 보세요.연결 확인프록시 및 방화벽 확인ERR_CONNECTION_REFUSED 그전에 연결 잘되다가 갑자기 이러는 이유가 멀까요..?
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
3일동안 삽질하다 결국 여기로 왔습니다. 꼭좀 상세히 알려주세요.
todoapp 클라이언트(리액트), 서버(몽구스) 로 작업중입니다. (글읽기, 리스트보여주기, 삭제 까지는 구현을 했는대요. 글리스트에서 특정리스트를 클릭시 해당상세페이지로 넘어가는 방법이 잘안됩니다. 구체적으로 어떻게 해야되는지 꼭좀 알려주세요. -----------리액트-------------------------- import React, { useEffect } from 'react' import axios from 'axios' import { useParams } from 'react-router-dom' const ShowPage = () => { const {id} = useParams() const getPost = (id) => { axios.get(`users/board/${id}`).then((res)=>{ console.log(res.data.user); }) } useEffect(()=>{ getPost(id); },[]) return ( <div>ShowPage</div> ) } -----------server-------------------------- userRouter.get('/board/:userId',async(req,res)=>{ try{ const {userId} = req.params; const user = await User.findOne({id:userId}); return res.status(200).json({success:true, user}) }catch(err){ console.log(err); return res.status(500).send({err: err.message}) } })
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
로그인 시 504 cors문제
로그인 중에 504 gateway 문제가 register화면에서 떠서 회원가입이 안되요 [HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)[HPM] Error occurred while trying to proxy request /api/users/register from localhost:3000 to http://localhost:5000 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 위에껀 클라이언트 콘솔로그 입니다 아래껀 서버 콘솔로그 입니다 > react-boiler-plate@1.0.0 start> node server/index.js(node:19964) Warning: Accessing non-existent property 'count' of module exports inside circular dependency(Use node --trace-warnings ... to show where the warning was created)(node:19964) Warning: Accessing non-existent property 'findOne' of module exports inside circular dependency(node:19964) Warning: Accessing non-existent property 'remove' of module exports inside circular dependency(node:19964) Warning: Accessing non-existent property 'updateOne' of module exports inside circular dependencyServer Listening on 5000MongoDB Connected...
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
더보기 useEffect, useCallback ESLint 문법 에러 (해결?글)
더보기 소스코드를 따라하였을 때,useEffect의 두 번째 인자에 [] 빈 배열을 넣는 경우,자동으로 사용되는 변수와 함수인 Skip, Limit, getProducts 가 들어가는 현상이 발생합니다.일단 함수 순서가 강의 내용대로면 getProducts was used before it was definmed 라는 에러가 뜰건데요이거는 getProducts 함수 밑에 useEffect가 오도록 조정하면 사라집니다 그 다음엔, getProducts function makes the dependencies of useEffect Hook ... 대충 이런 오류 메세지가 나오는데 getProducts 를 useCallback로 감싸줍니다 두번째인자에는 [Products] 넣어주세요 어차피 자동으로 넣어지겠지만...이제 에러 메세지는 다 해결된 상태일 겁니다 디버깅을 위해 useEffect에 콘솔을 찍게 해두셨다면 이미 눈치 채셨겠지만이 상태에서는 useEffect가 계속 호출됩니다원래 두 번째 인자의 변수들이 변경되면 호출되는 걸로 알고 있는데 왜인지는 모르겠으나... 저는 무식하게 해결했습니다 const [firstLoad, setfirstLoad] = useState(true); useEffect(()=> { if (firstLoad) { let body = { skip: Skip, limit: Limit } getProducts(body); setfirstLoad(false); } },[Skip, Limit, getProducts, firstLoad]); https://www.inflearn.com/questions/101006/landingpage%EC%9D%98-%EB%8D%94%EB%B3%B4%EA%B8%B0-%EB%B2%84%ED%8A%BC-%EA%B5%AC%ED%98%84-%EC%A4%91-eslint-%EB%AC%B8%EB%B2%95-%EC%97%90%EB%9F%AC-%EC%A7%88%EB%AC%B8%EC%9E%85%EB%8B%88%EB%8B%A4동일한 질문 내역이 있으나 답변이 없길래 우선 공유해둡니다useEffect()가 무한호출되는 이유를 아시는 분 있으시면 아무나 댓글 감사합니다
- 미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
Error: error:0308010C 해결글
처음 보일러 플레이트를 다운로드 받아 npm run dev 할 시에Error: error:0308010C:digital envelope routines::unsupported요런 오류가 뜹니다 package.json 보시면"engine": { "node": "10.16.0", "npm": "6.9.0" },이렇게 되어 있는데, 예전 강의이므로 node와 npm 버전이 많이 차이납니다저는 18.12.1 버전의 node였는데 에러가 나서최신버전을 지우고, 16.13.0 으로 재설치 하였더니 잘 됩니다.