현재 맥북 m2를 사용하고 있습니다.m2 환경에선 8.0.20 버전 설치가 불가능 하고 가장 낮은 버전이 8.0.33 버전 입니다. 최신 버전 8.0.33 버전 둘 다 설치해서 data import를 시도하는데 계속 실패해서요,,, 어떻게 해야하는걸까요,,,

App.css 에 있는 내용 지우고, 다음인 App.jsx 수정하는 부분에서 막혔습니다. tailwind css 설치 사이트에 들어가면 다음과 같이 다른 부분이 존재하는데, 5번 부분에 있는 코드를 App.jsx에 넣으면 되는건가요?

강의를 듣고 따로 팀 프로젝트를 진행해야하는데 제목과 같이 vscode에서 진행을 하는데 기본 세팅을 따로 하고 그외의 문법들을 vscode에서 실행해서 프로젝트를 진행해도 무방한것인가요?

비슷한 질문이 있어서 5-2강까지 강의를 들어서 adminLogin까지 구현을 하였습니다.앞의 4-6강에서 로그아웃을 시도하였을 때, 400 Bad Request : 이미 로그아웃된 상태로 나옵니다. 그래서 console.log(req.cookies.token)을 해보았을 때, undefined가 나옵니다.adminLogin을 진행하여 브라우저에 쿠키가 제대로 저장되었는지 확인해보았는데, localhost:5173에서도 localhost:3000에서도 cookie에 token값이 저장되어있었습니다.index.js에 cookie-parser 또한 존재하는 상태입니다.질문을 올리기 전에 여러가지를 시도해보았는데, router.post() 에서는 req.cookies.token의 값을 undefined로 가져오고, router.get()에서는 정상적인 토큰값을 반환했습니다.어떻게 해야 router.post() 에서도 req.cookies.token값을 가져올 수 있을까요?thunder client로 GET http://localhost:3000/api/auth/getCookie를 했을 때도 token은 undefined 값이 출력되었다가 브라우저에서 주소로 접근하니 token값이 정상적으로 출력되었습니다.아래의 사진은 thunder client로 get 방식과 post 방식으로 보냈을 때의 차이를 담은 사진입니다.브라우저에 cookie가 정상적으로 저장된 사진입니다.// index.js require("dotenv").config(); const express = require("express"); const mongoose = require("mongoose"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const userRoutes = require("./routes/user"); const app = express(); const PORT = 3000; app.use(cors({ origin: "http://localhost:5173", credentials: true, })); app.use(express.json()) app.use(express.urlencoded({extended : true})) app.use(cookieParser()); app.use("/api/auth", userRoutes); app.get("/", (req, res) => { res.send("Hello world"); console.log("token: " + req.cookies.token); }); app.post("/cookie", (req, res) => { console.log(req.cookies.token) res.send("api/auth"); }) mongoose .connect(process.env.MONGO_URL) .then(() => console.log("MongoDB와 연결이 되었습니다.")) .catch((error) => console.log("MongoDB와 연결에 실패했습니다: ", error)); app.listen(PORT, () => { console.log("Server is running"); }); // user.js const express = require("express"); const router = express.Router(); const bcrypt = require("bcrypt"); const User = require("../models/User"); const axios = require("axios"); const jwt = require("jsonwebtoken"); // const cookieParser = require("cookie-parser"); // router.use(express.json()) // router.use(express.urlencoded({extended : true})) // router.use(cookieParser()); router.post("/signup", async (req, res) => { try { const { username, password } = req.body; const existingUser = await User.findOne({ username }); if (existingUser) { return res.status(400).json({ message: "이미 존재하는 사용자입니다." }); } const hashedPassword = await bcrypt.hash(password, 10); const user = new User({ username, password: hashedPassword, }); await user.save(); res.status(201).json({ message: "회원가입이 완료되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); console.log(error); } }); router.post("/login", async (req, res) => { try { const { username, password } = req.body; const user = await User.findOne({ username }).select("+password"); if (!user) { return res.status("401").json({ message: "사용자를 찾을 수 없습니다." }); } if (!user.isActive) { return res .status(401) .json({ message: "비활성화된 계정입니다. 관리자에게 문의하세요." }); } if (user.isLoggedIn) { return res .status(401) .json({ message: "이미 다른 기기에서 로그인되어 있습니다." }); } const isValidPassword = await bcrypt.compare(password, user.password); if (!isValidPassword) { user.failedLoginAttempts += 1; user.lastLoginAttempt = new Date(); if (user.failedLoginAttempts >= 5) { user.isActive = false; await user.save(); return res.status(401).json({ message: "비밀번호를 5회 이상 틀려 계정이 비활성화되었습니다.", }); } await user.save(); return res.status(401).json({ message: "비밀번호가 일치하지 않습니다.", remainingAttempts: 5 - user.failedLoginAttempts, }); } user.failedLoginAttempts = 0; user.lastLoginAttempt = new Date(); user.isLoggedIn = true; // try { // const response = await axios.get("https://api.ipify.org?format=json"); // const ipAddress = response.data.ip; // user.ipAddress = ipAddress; // } catch (error) { // console.log("IP 주소를 가져오던 중 오류 발생: ", error.message); // } await user.save(); console.log("로그인 성공"); const token = jwt.sign( { userId: user._id, username: user.username }, process.env.JWT_SECRET, { expiresIn: "24h" } ); console.log(token); res.cookie("token", token, { httpOnly: true, secure: "production", sameSite: "strict", maxAge: 24 * 60 * 60 * 1000, }); console.log("쿠키 설정", ); const userWithoutPassword = user.toObject(); delete userWithoutPassword.password; res.json({ user: userWithoutPassword }); console.log("json 전달 후 종료"); } catch (error) { console.log("서버 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/logout", async (req, res) => { try { const token = req.cookies.token; console.log(token); if (!token) { return res.status(400).json({ message: "이미 로그아웃된 상태입니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); const user = await User.findById(decoded.userId); if (user) { user.isLoggedIn = false; await user.save(); } } catch (error) { console.log("토큰 검증 오류: ", error.message); } res.clearCookie("token", { httpOnly: true, secure: "production", sameSite: "strict", }); res.json({ message: "로그아웃되었습니다." }); } catch (error) { console.log("로그아웃 오류: ", error.message); res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.delete("/delete/:userId", async (req, res) => { try { const user = await User.findByIdAndDelete(req.params.userId); if (!user) { return res.status(404).json({ message: "사용자를 찾을 수 없습니다." }); } res.json({ message: "사용자가 성공적으로 삭제되었습니다." }); } catch (error) { res.status(500).json({ message: "서버 오류가 발생했습니다." }); } }); router.post("/verify-token", (req, res) => { const token = req.cookies.token; if (!token) { return res .status(400) .json({ isValid: false, message: "토큰이 없습니다." }); } try { const decoded = jwt.verify(token, process.env.JWT_SECRET); return res.status(200).json({ isValid: true, user: decoded }); } catch (error) { return res .status(401) .json({ isValid: false, message: "유효하지 않은 토큰입니다." }); } }); // router.get("/getCookie", async (req, res) => { // res.send(req.cookies.token) // console.log("getCookie's token : " , req.cookies.token) // }) // router.post("/postCookie", async (req, res) => { // res.send(req.cookies.token) // console.log("postCookie's token : ", req.cookies.token) // }) module.exports = router;  

강의에서는 command prompt를 사용하셨는데, 맥북에서는 zsh와 bash 중 어떤 것을 사용해야 할까요?

공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우(1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg이런 식으로 뜹니다.(2) 업로드 버튼을 누른 후 홈 화면으로 이동(3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다.<div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div>src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.)어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅!  +)상품 상세페이지를 들어가면 다시 엑박이 뜹니다.<div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div>이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.   

프론트엔드 개발자인데 사이드 프로젝트에 백엔드가 없어서, 제가 직접 만들어보려고 Node.js 강의 보고 있어요.MongoDB가 배우기 쉽다고 해서 MongoDB를 쓰려고 하는데 강의에서 MySQL 파트를 스킵해도 괜찮을까요?

14분 부터 css 전체선택자 box-sizing 이 border-box 라서 padding 을 하게되면 a 태그의 크기가 줄어들어야 하는 것 아닌가요? 왜 padding을 통해 크기를 키운다고 말씀하시나요?

채찍피티에게 물어보니 try/catch로 처리하라고 하는데 이게 최선일까요..?

최근 취업시장이 리액트와 스프링부트나 넥스트같은 백엔드 기술을 모두 할줄아는 사람을 뽑는 추세가 강해져 저도 리액트 관련기술을 익히고자 강의를 신청했고 현재 수강중입니다. 백엔드쪽은 스프링부트로 확고히 가져가서 만약 이후에 둘을 연동할때 DB의 데이터를 가져오거나 서버와 연동해서 데이터를 가져오거나 통신할때 next.js 기술이 필수인지 아닌지 궁금해서 질문 남깁니다.필수가 아니라면 도움이 되는 지 궁금합니다. 제가 강사님 next,js 소개글을 봤는데 node.js가 필요기술에 있어서 node.js만을 위한 ssr기술인지 궁금합니다.

현재 강의와 관련없는거 알지만 혹시나해서 문의남깁니다. 현재 강의 구매한 분들 대상으로[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 90% 할인해서 구매할 수 있었던 것으로 기억하는데, 이미 기간이 끝난거 알지만 지금이라도 할인된 가격으로 구매할 수 있을까 해서 문의남깁니다. 

강의내용에 보면 todos가 변경될 때 Editor는 변경이 않되야하는 것 같은데 리렌터링이 됩니다.소스는 같은데 머가문제인지 알 수있을까요?<Editor.jsx>const Editor = () => { const { onCreate } = useContext(TodoDispatchContext); const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeInput = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content === "") { contentRef.current.focus(); return; } onCreate(content); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeInput} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default Editor;<App.jsx>import "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer, useMemo, useCallback, createContext, } from "react"; const mockData = [ { id: 0, isDone: false, content: "React 공부하기", date: new Date().toLocaleDateString(), }, { id: 1, isDone: false, content: "빨래하기기", date: new Date().toLocaleDateString(), }, { id: 2, isDone: false, content: "청소하기", date: new Date().toLocaleDateString(), }, ]; const reducer = (state, action) => { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((todo) => todo.id === action.data.id ? { ...todo, isDone: !todo.isDone } : todo ); case "DELETE": return state.filter((todo) => todo.id !== action.data.id); default: return state; } }; export const TodoStateContext = createContext(); export const TodoDispatchContext = createContext(); function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", data: { id: targetId } }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", data: { id: targetId } }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); return ( <div className="App"> <Header /> <TodoStateContext.Provider value={{ todos }}> <TodoDispatchContext.Provider value={memoizedDispatch}> <Editor /> <List /> </TodoDispatchContext.Provider> </TodoStateContext.Provider> </div> ); } export default App;

매강좌마다 깃허브 링크가있던데요 매강마다 소스코드를 일일히 다운받아야하나요??? 아니면 한번에 다운받아도되는걸 제가 착각하고있는건가요??? 강의가 진행되어질수록 그만큼 코드변경된흐름을 깃허브 트리로 펼쳐놓으신것같은데.... 하나만받아도되는건지 매강마다 깃허브가서 소스코드를 매강마다 다운받아야하는건지 궁금합니다.

제목 그대로입니다.코드샌드박스 링크좀 어딘가에 달아주시든지, 자료파일에 좀 첨부해주시든지,어떻게 좀 해주세요.화면 스톱 해놓고 일일이 주소창 쳐서 들어가고 있어요.너무 불편해요!질문답변 게시판에 링크 달아놓은거 없는지 검색도 해봤는데 전혀 엉뚱한 대답만 있는 것 같고..  

Router.use() requires a middleware function but got a undefined export require 경로 확인 잘 했는데 왜 발생할까요...?

component 사용 시 에러 발생function App() { return ( <Router> <div> <Routes> <Route path="/" element={Auth(LandingPage, null)} /> <Route path="/login" element={Auth(LoginPage, false)} /> <Route path="/register" element={Auth(RegisterPage, false)} /> */} </Routes> </div> </Router> ); } element 사용 시 아래처럼 진행하심 잘됩니다. (element 안에는 함수가 못들어간다하네요)function App() { const AuthLandingPage = Auth(LandingPage, null); const AuthLoginPage = Auth(LoginPage, false); const AuthRegisterPage = Auth(RegisterPage, false); return ( <Router> <div> <Routes> <Route exact path="/" element={<AuthLandingPage />} /> <Route exact path="/login" element={<AuthLoginPage />} /> <Route exact path="/register" element={<AuthRegisterPage />} /> </Routes> </div> </Router> ) }

vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다.vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요.npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms18:15:46.529error during build:18:15:46.530Could not resolve "./pages/NotFound" from "src/App.jsx"18:15:46.530file: /vercel/path0/src/App.jsx18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41)18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42)18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24)18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:2618:15:46.544Error: Command "npm run build" exited with 1

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?

/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App 

useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다.화면에는 테이블 1개만 존재한다.데이터는 unknown[] 형태이다.다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다.코드로 예시를 들면 아래와 같습니다.const [items, setItems] = useState<unknown[]>([]);useEffect(() => void, [items]) 답변주시면 감사합니다.