common/fortune.js 파일의 11번 째 줄 if문의 조건과 13번째 줄 else if문의 조건이 동일 합니다.13번째 줄의 조건이 (sex === "MALE" && minusPlus === "음") || (sex === "FEMALE" && minusPlus === "양")이렇게 되야 하는거 맞나요?

undefined가 되지 않기 위해 바디파서를 사용해서 우리가 필요한 자료구조로 전달받을 수 있고 바디파서를 사용한다는 의미로 app.use(express.json()); app.use(express.urlencoded({ extended: true }));이 코드를 추가를 해주셨습니다. 궁금해서 app.use(express.urlencoded({ extended: true })); 를 주석처리하고 실행한 결과 그래도 정상 작동이 됩니다 app.use(express.json()); 이 부분을 주석처리하고 하면 undefined가 아닌 {} 빈 json을 전달 받습니다 각각 저 코드들이 하는 역할이 궁금합니다

안드로이드 설정 과정이 전체가 약간 헷갈려있게 되어있는 것 같아서,,, 이게 맞는지 궁금해서 남깁니다npm i react-native-splash-screen --save 을 통해서 npm을 설치한다앱로고와 스플래시 화면을 준비해준다아래 사이트에서 앱 로고를 만들어준다EasyAppIcon - Create Mobile App Icon앱 아이콘들을 android폴더에 넣어준다android/app/src/main/res의 아래에 mipmap-hdpi~로 시작하는 파일들에 이름에 맞춰서 앱 아이콘들을 넣어준다 스플래시 화면(아마도 이미지)을 android/app/src/main/res/drawable폴더에 넣어준다반드시 launch_screen이라는 이름으로 넣어준다 -> launch_screen.png android/setting.gradle에 가서 아래처럼 설정해준다include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')  android/app/build.gradle (113번 줄)implementation project(':react-native-splash-screen') android/app/src/main/java/com/coin/MainActivity.kt에 7번째 줄에import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen; android/app/src/main/java/com/coin/MainActivity.kt에 12~15번째 줄에 override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) super.onCreate(null) }  . . . /MainApplication.kt (14번 줄)에import org.devio.rn.splashscreen.SplashScreenReactPackage . . . /MainApplication.kt (24번 줄)에SplashScreenReactPackage() 스플래시 화면을 숨겨주기 위해 App.tsx에아래 내용을 추가해준다useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 500); }); // 의존성 배열 없음 - 매 렌더링마다 실행됨 values.colors.xml파일을 만들어서 아래 내용을 추가해준다<?xml version="1.0" encoding="utf-8"?> <resources> <!-- 다른 색상들이 있다면 유지하세요 --> <color name="status_bar_color">#000000</color> <!-- 원하는 색상 코드로 변경 가능 --> </resources> 질문1. 잘 나오는 것 같기는 한데 총 과정이 이게 맞을까요?질문2. 그리고 스플래시화면이 뜨기 전에 앱 로고가 전체적으로 뜨고(흰바탕에 설정한 앱 로고가 중앙에 작게 나옴) 스플래시 화면이 뜨는데 원래 이런거 맞나요?질문3. 그리고 values/colors.xml파일은 왜 설정해주는 건가요? 

iOS에서 splash screen을 RN에서 설정해보기 위해서 RN으로 작업을 해봤는데요,,,AppDelegate파일에서 import RNSplashScreen에서 pod install을 하고 진행을 했는데도 모듈을 찾을 수 없다고 뜨더라구요ㅠpodfile에는 RNSplashScreen가 있는거는 확인했습니다.. 그러므로 설치는 된 거 같은데,, 프로젝트가 모듈을 못찾는 것 같아요ㅠ다른 프로젝트 참고해보려고 해도, 저는 AppDelegate.swift파일이고 .h파일이나 .m파일은 없어서 여기서 설정을 하지를 못하겠어요ㅠ(cf. 찾아보니까 해당 라이브러리가 옛날버전이고 지금 RN의 iOS랑 호환이 되지 않아서 발생하는 문제 같은데, 이때 브릿징 헤더를 설치해야 한다고 본거 같아요 => 이 문제가 맞을까요?)강의가 android기준으로만 설명되서,,, 혹시 RN으로 어떻게 iOS 스플래시 화면을 설정해야 하는걸까요?학습에 관련된 질문만 해주세요.질문은 상세하게 무엇이 궁금한지 작성해주세요.질문은 '마크다운'을 사용하여 할 수 있습니다.유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)

  import BoardCommentWriteUI from "./boardCommentWrite.presenter"; import { ChangeEvent, useState } from "react"; import { useMutation } from "@apollo/client"; import { CREATE_BOARD_COMMENT, UPDATE_BOARD_COMMENT, } from "./boardCommentWrite.queries"; import { useRouter } from "next/router"; import { FETCH_BOARD_COMMENTS } from "../list/boardCommentList.queries"; import { IMutation, IMutationCreateBoardCommentArgs, IMutationUpdateBoardCommentArgs, } from "../../../../commons/types/generated/types"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardComment(props: IBoardCommentWriteProps) { const [createBoardComment] = useMutation< Pick<IMutation, "createBoardComment">, IMutationCreateBoardCommentArgs >(CREATE_BOARD_COMMENT); const [updateBoardComment] = useMutation< Pick<IMutation, "updateBoardComment">, IMutationUpdateBoardCommentArgs >(UPDATE_BOARD_COMMENT); const [writer, setWriter] = useState(""); const [password, setPassword] = useState(""); const [comment, setComment] = useState(""); const [star, setStar] = useState(0); const router = useRouter(); const handleChangeWriter = (event: ChangeEvent<HTMLInputElement>) => { setWriter(event.target.value); }; const handleChangePassword = (event: ChangeEvent<HTMLInputElement>) => { setPassword(event.target.value); }; const handleChangeComment = (event: ChangeEvent<HTMLTextAreaElement>) => { setComment(event.target.value); }; const updateComment = () => { alert("수정하기 입니다."); }; const onClickSubmitComment = async () => { try { if (typeof router.query.boardId !== "string") { alert("시스템에 문제가 있습니다."); return; } const result = await createBoardComment({ variables: { createBoardCommentInput: { writer, password, contents: comment, rating: star, }, boardId: router.query.boardId, }, refetchQueries: [ { query: FETCH_BOARD_COMMENTS, variables: { boardId: router.query.boardId }, }, ], }); } catch (error) { if (error instanceof Error) { alert(error.message); } } setWriter(""); setComment(""); setPassword(""); setStar(0); }; return ( <BoardCommentWriteUI handleChangeWriter={handleChangeWriter} handleChangePassword={handleChangePassword} handleChangeComment={handleChangeComment} onClickSubmitComment={onClickSubmitComment} updateComment={updateComment} setStar={setStar} writer={writer} comment={comment} password={password} el={props.el} /> ); } boardCommentWriter.container.tsx 에서 updateComment 바인딩이 안된것인지함수가 작동을 안하는 것인지updateComment의 "수정하기 입니다. " 알림창이 안뜹니다.수정/삭제 버튼 onClick 내부에서 해봐도 태그 바깥에서 삼항연산자를 써보아도 적용이.. 안됩니다. onClickSubmitComment 함수는 제대로 작동하는데 말이죠 ㅠㅠ 도저히 왜 안되는지 모르겠어요import * as S from "../../board/commons/style/style"; import * as Own from "./boardCommentWrite.styles"; import { IBoardCommentWriteProps } from "./boardCommentWrite.types"; export default function BoardCommentWriteUI(props: IBoardCommentWriteProps) { console.log(props.el); return ( <S.BoardWrapper> <S.Row> <Own.Writer placeholder="작성자" onChange={props.handleChangeWriter} value={props.editComment ? props.el?.writer : props.writer} readOnly={props.editComment} /> <Own.Password placeholder="비밀번호" onChange={props.handleChangePassword} value={props.password} /> <Own.RankWrapper> <Own.RateComment value={props.editComment && props.el.rating} onChange={props.setStar} /> </Own.RankWrapper> </S.Row> <Own.Comment onChange={props.handleChangeComment} placeholder="댓글을 입력해주세요." value={props.editComment ? props.el.contents : props.comment} /> <Own.BottomComments> <S.Row> <p>0</p> <div>/</div> <p>100</p> </S.Row> {/* <Own.SubmitButton onClick={ props.editComment ? props.updateComment : props.onClickSubmitComment } > {props.editComment ? "수정하기" : "등록하기"} </Own.SubmitButton> */} {props.editComment ? ( <Own.SubmitButton onClick={props.updateComment}> 수정하기 </Own.SubmitButton> ) : ( <Own.SubmitButton onClick={props.onClickSubmitComment}> 등록하기 </Own.SubmitButton> )} </Own.BottomComments> </S.BoardWrapper> ); }   

다음과 같은 양식으로 남겨주세요.질문을 한 배경 :AWS EC2 Node 설치질문내용 :AWS EC2 Node 설치강의에서 50초부분에 사이트가 어디에 알려주는게 맞는거 같습니다 

다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 아무 설명도 안하고 혼자 진행함질문내용 :

다음과 같은 양식으로 남겨주세요.질문을 한 배경 : 질문내용 : aws 어드민설정하는 페이지 어떻게 들어가는지 이런설명이 왜 하나도 없나요

html 과 js 로 이루어진 페이지에서 쓰려고 했는데리액트에서 소켓관련된 어떤 라이브러리를 쓰시는 것 같아서 변경하는데 하기에 어려운 난이도 일까요 ?초보라서요 ..ㅠㅠ

안녕하세요 return에 대해 질문이 있습니다.const sum = (a, b) => { return a + b}const result = sum(1, 2);console.log(result) 이렇게 간단한 코드에서는 a와 b가 더한 값이 반환되어 호출한 부분으로 전달되서 5가된다라고는 알고 있는데 투두리스트 예제에서 예를 들어 const onUpdate = (targetId) => { setTodos( todos.map((todo) => { if (todo.id === targetId) { return { ...todo, isDone: !todo.isDone, }; } return todo; }) ); };이렇게 return {...todo, isDone: !todo.isDone} 부분과 return todo 이 부분이 조금 이해가 되지 않는데 이 부분은 return을 왜 사용하였고 또 어디로 반환이 되는것인지 궁금합니다. 

제 프로젝트에 채팅 기능을 넣고 싶어서 듣게 되었습니다. (일반 js, html로 이루어진)view 부분은 아무거나 제가 해서 하면 되겠지만이 채팅 서버를 api처럼 사용할 예정이에요이것을 배포할 때는 어떤식으로 해줘야 하는지 잘 모르겠네요. spring 은 톰캣으로 webapp에 war를 넣어서 해당 컨텍스트를 실행시켜주면되고 플라스크는 wsgi 를 사용해서 requirement.txt 에 외부라이브러리 세팅해주고돌리면 돌아갔는데 이 강의 서버는 리눅스에서 어떤식으로 리눅스에서 돌리면 될까요 ? 도커를 사용할 예정입니다..! 이 웹 어플리케이션을 배포해서 돌리기위한 절차가 궁금합니다!

2강에서 서버 실행시 에러가 발생합니다.무료 게임 강좌에서는 정상적으로 실행되었습니다. node : 10.15.3nuxt: 2.8.1vue: 2.6.10vue-server-renderer: 2.6.10 [로그 정보]PS C:\vue-nodebird\ch1\front> npm run dev> vue-nodebird-front@1.0.0 dev C:\vue-nodebird\ch1\front> nuxt WARN Address localhost:3000 is already in use. 11:49:13i Trying a random port... 11:49:13 ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:58015/ │ │ │ ╰─────────────────────────────────────────────╯i Preparing project for development 11:49:14i Initial build may take a while 11:49:14√ Builder initialized 11:49:14√ Nuxt files generated 11:49:14 ERROR Unexpected token . 11:49:14 const r=Object.create(null),i=e=>globalThis.process?.env||undefined||globalThis.Deno?.env.toObject()||globalThis.__env__||(e?r:globalThis),s$1=new Proxy(r,{get(e,o){return i()[o]??r[o]},has(e,o){const E=i();return o in E||o in r},set(e,o,E){const b=i(true);return b[o]=E,true},deleteProperty(e,o){if(!o)return false;const E=i(true);return delete E[o],true},ownKeys(){const e=i(true);return Object.keys(e)}}),t=typeof process<"u"&&process.env&&process.env.NODE_ENV||"",B=[["APPVEYOR"],["AWS_AMPLIFY","AWS_APP_ID",{ci:true}],["AZURE_PIPELINES","SYSTEM_TEAMFOUNDATIONCOLLECTIONURI"],["AZURE_STATIC","INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN"],["APPCIRCLE","AC_APPCIRCLE"],["BAMBOO","bamboo_planKey"],["BITBUCKET","BITBUCKET_COMMIT"],["BITRISE","BITRISE_IO"],["BUDDY","BUDDY_WORKSPACE_ID"],["BUILDKITE"],["CIRCLE","CIRCLECI"],["CIRRUS","CIRRUS_CI"],["CLOUDFLARE_PAGES","CF_PAGES",{ci:true}],["CODEBUILD","CODEBUIL SyntaxError: Unexpected token . at new Script (vm.js:80:7) at createScript (vm.js:274:10) at Object.runInThisContext (vm.js:326:10) at Module._compile (internal/modules/cjs/loader.js:664:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (node_modules\@nuxt\friendly-errors-webpack-plugin\node_modules\consola\lib\index.cjs:2:13) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3)

강사님 안녕하세요!리액트 강의 완강 후, 리액트로 개인 프로젝트를 진행하던 중에 리렌더링 관련하여 궁금한 점이 생겨 질문드립니다.컴포넌트가 리렌더링 되는 조건이1. 부모 컴포넌트가 리렌더링 될 때 (props 포함)2. 컴포넌트의 state가 변경되었을 때이렇게 2가지라고 봤는데요!문제상황 : Input의 state가 변경되면 Button이 재렌더링됨부모-자식 관계가 아닌 형제관계인 <Input /> 컴포넌트와 <Button /> 가 서로 재렌더링을 유발하는 원인이 무엇일까 해서 질문드립니다.실제 브라우저DOM에 커밋되지는 않고 각 컴포넌트 내부에서 console을 찍어봐도 나오지 않는 것을 보아하니 렌더링까지만 되는 것 같아요... (chrome react확장 프로그램에서 highlight됨)제가 여러가지 케이스로 테스트 해 본 결과, (각 컴포넌트는 props도 받지 않고 내부 state만 있음)div 태그로 감싸져 있을 때 서로 재렌더링을 유발하는 것 같아 아무리봐도 이상해서요 ㅠㅠ문제 발생코드<div> <Input /> </div> <div> <Button /> </div>수정한 코드<Input /> <Button />

 현재 맥북 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 파트를 스킵해도 괜찮을까요?