월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
http://localhost:8080/products/2 접속시 Status -> pending 상태 해결 방법 문의 드립니다.
안녕하세요.강의를 따라 가다가 안되는 부분이 있습니다. node server.js 하여 작동은 하나 Postman과 URL http://localhost:8080/products/2 접속시 로딩화면만 반복되며(postman도 동일 합니다.) 아래 사진과 같이 network 창 접속시 Status가 panding 상태로 나옵니다. 혹시 해결 방법이 있는지 문의 드립니다. 소스코드를 비교해봐도 차이점은 없었습니다.. 추가로 DB Browser에 두번 post 요청을 하여 값을 삭제한적은 있는데 이 행위가 오류를 발생 시키는 걸까요???
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
post
post 형식의 body인데 어떻게 name부터 imgUrl까지 destructuring할 수 있나요??정보가 입력되기 전인데 왜 그런지 궁금합니다..그리고 create({name:name,description:description..})이게 무슨 뜻인지 모르겠어요 key가 name,value가 name이런거를 만들라는건데 잘 이해가 가지 않습니다..ㅜ app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; models.Product.create({ name, description, price, seller, imageUrl, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); })
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
react-native
react native에서는 vercel이 아닌 ngrok을 이용해야 하는건가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Upload 컴포넌트가 api서버랑 통신을 주고받는 건가요?
<Upload name="image" action={`${API_URL}/image`} listType="picture" showUploadList={true} onChange={onChangeImage} > 여기서 action의 url로 요청을 보내고 app.post("/image", upload.single("image"), (req, res) => { const file = req.file; console.log(file); res.send({ imageUrl: file.path }); }); api 서버에서 req인자로 받으면 res를 Upload컴포넌트에게 돌려주고 onChangeImage 함수에서 info 인자는 res로 받는 건가요? 혼자 한 시간 넘게 고민해봤는데 헷갈려서 질문드립니다.ㅜㅜ
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
개발자 도구 Console 창의 prop , 통신상태 관련 질문
[HMR] Waiting for update signal from WDS... webpackHotDevClient.js:138 src\main\index.js Line 25:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 30:11: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 38:19: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text Line 44:21: img elements must have an alt prop, either with meaningful text, or an empty string for decorative images jsx-a11y/alt-text printWarnings @ webpackHotDevClient.js:138 1. 하기 사진과 같이 정상적으로 웹페이지가 나오는데, 개발자 도구 Console 탭에 상기와 같은 prop 알람이 나왔습니다. 찾아보니 img 태그를 사용할 때에는 alt 로 각각 설명을 붙여줘야 없어진다고 해서 붙여주었는데 안붙여도 상관이 없는지 궁금합니다. import React from "react"; import "./index.css"; import axios from "axios"; function MainPage() { const [products, setProducts] = React.useState([]); React.useEffect(function () { axios .get( "https://1e7fd6e6-d017-438e-8e7a-a64513bada80.mock.pstmn.io/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" alt="logo" /> </div> </div> <div id="body"> <div id="banner"> <img src="images/banners/banner1.png" alt="banner" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"> {products.map(function (product, index) { return ( <div className="product-card" key={index}> <div> <img className="product-img" src={product.imageUrl} alt="product" /> </div> <div className="product-contents"> <span className="prodcut-name">{product.name}</span> <span className="product-price">{product.price}원</span> <div className="product-seller"> <img className="product-avatar" src="images/icons/avatar.png" alt="product-avatar" /> <span>{product.seller}</span> </div> </div> </div> ); })} </div> </div> <div id="footer"></div> </div> ); } export default MainPage; 2. 통신상태에 대한 값이 작성한 코드에 따르면 통신 실패에 대한 에러발생 문구만 발생하게 되는데, 통신 성공에 대해서는 작성을 안하는건가요? axios .get( "https://1e7fd6e6-d017-438e-8e7a-a64513bada80.mock.pstmn.io/products" ) .then(function (result) { const products = result.data.products; setProducts(products); }) .catch(function (error) { console.error("에러 발생: ", error); }); }, []);
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러가 발생합니다..ㅜ
상품이미지 업로드하고 등록하기 누르면 메인화면으로 돌아가야하는데 에러메세지가 뜹니다. 어느부분이 잘못된걸까요..ㅜㅜ 아래는 server.js코드입니다. const express = require("express"); const cors = require("cors"); const app = express(); const models = require("./models"); const multer = require("multer"); const upload = multer({ storage: multer.diskStorage({ destination: function (req, file, cb) { cb(null, "uploads/"); }, filename: function (req, file, cb) { cb(null, file.originalname); }, }), }); const port = 8080; app.use(express.json()); app.use(cors()); app.use("/uploads", express.static("uploads")); app.get("/products", (req, res) => { models.Product.findAll({ order: [["createdAt", "DESC"]], attributes: ["id", "name", "price", "createdAt", "seller", "imageUrl"], }) .then((result) => { console.log("PRODUCTS: ", result); res.send({ products: result, }); }) .catch((error) => { console.error(error); res.status(400).send("에러 발생"); }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller, imageUrl } = body; if (!name || !description || !price || !seller || imageUrl) { res.status(400).send("모든필드를 입력해주세요."); } models.Product.create({ description, price, seller, imageUrl, name }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.status(400).send("상품 업로드에 문제가 발생했습니다."); }); }); app.get("/products/:id", (req, res) => { const params = req.params; const { id } = params; models.Product.findOne({ where: { id: id, }, }) .then((result) => { console.log("PRODUCTS :", result); res.send({ product: result, }); }) .catch((error) => { console.error(error); res.status(400).send("상품 조회에 에러가 발생했습니다."); }); }); app.post("/image", upload.single("image"), (req, res) => { const file = req.file; console.log(file); res.send({ imageUrl: file.path, }); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공!"); }) .catch((error) => { console.error(err); console.log("DB 연결 에러"); process.exit(); }); });
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm start 를 했는데
ㅊ이렇게 나오는데요 해당 강의에있는 웹 소스코드 그랩님꺼 복사 붙여넣기해도 안되네요. 이 강의 질문에 다른분도 저랑 같은 에러가 발생해서 body 값에 키값을 줫다고하는데 body: 에 뭘 줘야하는지도 모르구요 하드코딩중인데 어떻게 고쳐야하나요..?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
키보드 사진이 안떠요 ㅜㅜ
import "./index.css"; import axios from "axios"; import React from "react"; function MainPage() { const [products, setProducts] = React.useState([]); axios .get("https://6ca5df92-90b1-4b71-a335-3620d8a9bbd0.mock.pstmn.io/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="images/products/keyboard1.jpg" /> </div> <div className="product-contents"> <span className="product-name">키보드</span> <span className="product-price">50000원</span> <div className="product-seller"> <img className="product-avatar" src="images/icons/avatar.png" /> <span>그랩</span> </div> </div> </div> ); })} </div> </div> <div id="footer"></div> </div> ); } export default MainPage;
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
자식 컴포넌트를 호출할때 매개변수는 넣을 수 없나요?
자식 컴포넌트를 호출할때 매개변수는 넣을 수 없나요?
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
경로 이동에서 오류가 발생합니다.
product는 에러 표현은 나타나지 않습니다. 그래도 상품 상세 페이지라는 화면이 나오지 않습니다. upload의 경우 에러 표시가 나타납니다. 어떤 부분이 잘못됐나요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요, 판서 프로그램 알고싶습니다.
안녕하세요, 강좌를 수강하고 있는 학생입니다. ^^ 제가 다른 기관에서 아이들을 가르치고 있는데, 사용하시는 판서 프로그램이 좋아보여서... (노션에서 설명하실 때 선 그으면 일정 시간 뒤 사라지는..) 혹시 프로그램을 알 수 있을까요? 감사합니다. ^^
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안되는 부분 코드 검토 부탁드립니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 1.아래 빨간footer 화면이 영상과 다르게 제품과 붙어 있습니다. 2. 아바타 그랩 중간 정렬이 되지 않습니다. html 코드 <html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> </head> <body> <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"> <div class="product-card"> <div> <img class="product-img" src="images/products/basketball1.jpeg" /> </div> <div class="product-contents"> <span class="product-name">농구공 1호</span> <span class="product-price">50000원</span> <div class="product-seller"> <div> <img class="product-avatar" src="images/icons/avatar.png"/> <span>그랩</span> </div> </div> </div> </div> </div> <div id="footer"></div> </body> </html> css코드 * { margin: 0; padding: 0; } #header { height: 64px; border-bottom: 1px solid gray; display: flex; justify-content: center; } #body { height: 100%; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer { height: 200px; background-color: red; } #banner { height: 300px; background-color: yellow; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; } #header-area > img { width: 128px; height: 36px; } #banner > img { width: 100%; height: 300px; } #body > h1 { margin-top: 16px; } #product-list { display: flex; flex-wrap: wrap; } .product-card { width: 180px; height: 300px; margin-right: 12px; margin-bottom: 12px; border: 1px solid rgb(230, 230, 230); border-radius: 12px; } .product-img { width: 100%; height: 210px; } .product-contents { display: flex; flex-direction: column; padding: 8px; } .product-name { font-size: 14px; } .product-price { font-size: 16px; font-weight: 600px; } .product-seller { display: flex; align-items: center; } .product-avatar { width: 24px; }
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map undefined 오류 질문드립니다
코드를 혼자 짜보려고 하는 중에 type error:cannot read property 'map' of undefined가 뜹니다. 서버쪽은 postman연동했을때 잘 뜨는데 논리 하자가 있는 것 같습니다..ㅠㅠ뭐가 문제일까요 main/index.js import "./index.css"; import axios from "axios"; import React from "react"; import { API_URL } from "../config/config.js"; function MainPage() { const [products, setProducts] = React.useState([]); React.useEffect(function () { axios .get(`${API_URL}/products`) .then(function (result) { console.log("RESULT값:", result); const products = result.data.products; setProducts(products); }) .catch(function (error) { console.log("error발생"); }); }, []); return ( <div> <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> <div className="product-contents"> <span className="product-name">{product.name}</span> <span className="product-price">{product.price}원</span> <div classNmae="product-footer"> <div className="product-seller"> <img className="product-avatar" src="images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </div> </div> </div> ); })} </div> </div> ); } ####App.js export default MainPage; import "./App.css"; import MainPageComponent from "./main"; function App() { return <MainPageComponent />; } export default App; ##server const express = require("express"); const cors = require("cors"); const app = express(); const port = 7070; const models = require("./models"); app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { models.Product.findAll({ attributes: ["id", "name", "price", "imageUrl", "seller", "createdAt"], }) .then((result) => { console.log("RESULT값 :", result); res.send({ product: result, }); }) .catch((error) => { console.error("ERROR가 발생하였습니다: ", error); }); }); app.listen(port, () => { console.log("그랩 마켓의 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("✓ DB 연결 성공"); }) .catch(function (err) { console.error(err); console.log("✗ DB 연결 에러"); process.exit(); }); });
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
DB에 데이터는 잘 들어가는데 ,,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Postman을 이용해서 DB에 데이터를 넣는 작업과 에러까지 잘 작동합니다. 하지만 강의 영상처럼 Postman의 결과값에 id, updateAt, createAt은 보이지 않습니다. 다음 사진처럼 제가 입력했던 부분만 출력됩니다. 추가적으로 콘솔창에는 Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client 이러한 에러가 뜹니다. 밑에 코드도 첨부하겠습니다. const express = require("express"); const cors = require("cors"); const app = express(); const models = require("./models"); const port = 8080; app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY :", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imageUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imageUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imageUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; if (!name || !description || !price || !seller) { res.send("모든 필드를 입력해주세요."); } models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 발생했습니다."); }); res.send({ body, }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id, eventId } = params; res.send(`id는 ${id}와 ${eventId}입니다.`); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공!"); }) .catch((err) => { console.error(err); console.log("DB 연결 에러"); process.exit(); }); });
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
질문있습니다.
그랩 마켓 서버 구축하기와 Express 프레임 워크 사용하기 수업 보면서 궁금한 점이 있습니다. 수업중 나온 화면을 비교용으로 캡쳐하였습니다. 수업을 보며 따라친 코드는 캡쳐한 화면처럼 나오지 않고 쭉 1~2줄 로 작성되어 보기가 매우 불편하게 나오더라구요; 그래서 영상 아래에 올려주신 깃헙 링크로 들어가 다르게 코드를 작성한게 있나 비교를 해봤지만 크게 다른부분을 찾을수 없었습니다. 영상에 캡쳐한거처럼 데이터가 나오게 하려면 어떻게 해놔야 하나요?..
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
[MAC] create-react-app에서 permission 에러 해결책
질문은 아니구요. 같은 문제로 고생하시는 분들이 많아 제 방법을 공유합니다 1) root 비밀번호 설정 2) 관리자 권한으로 설치 아래는 제가 찾은 링크이니 참고하세요 root 비밀번호 설정 https://heeestorys.tistory.com/877 관리자 권한으로 설치 https://online.codingapple.com/unit/react1-install-create-react-app-npx/
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
질문있습니다.
postman에서 http://localhost:8080/products/1 여기 id 부분을 2, 3으로 변경해도 똑같이 키보드 내용만 나옵니다. DB에서 데이터 보기 했을 때 아래 사진처럼 나와서 제대로 실행이 안되는 건가요???
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
판매되는 상품
postman으로 정보를 받아오는것까지는 성공했는데 3번 객체 키보드만 나옵니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
사진은 안 나오고 axious error가 떠요
<html> <head> <title>그랩마켓</title> <link href="index.css" type="text/css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src = "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <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"></div> </div> <div id="footer"></div> </body> <script> axious .get( 'https://c3d57b18-f819-4b2f-becf-330ee397bf79.mock.pstmn.io/products' ) .then(function(result){ console.log('통신 결과 : ', result); }) .catch(function(error){ console.log('error 발생 : ',error); }); var products = [ { name: "농구공", price: 10000, seller: "마이클 조던", imageUrl: "images/products/basketball1.jpeg", }, { name: "축구공", price: 50000, seller: "호날두", imageUrl: "images/products/soccerball1.jpg", }, { name: "키보드", price: 15000, seller: "애플", imageUrl: "images/products/keyboard1.jpg", }, ]; let productsHtml = ""; for (var i = 0; i < products.length; i++) { let product = products[i]; productsHtml = productsHtml + '<div class="product-card">' + "<div>" + '<img class="product-img" src="' + product.imageUrl + '" />' + "</div>" + '<div class="product-contents">' + '<span class="product-name">' + product.name + "</span>" + '<span class="product-price">' + product.price + "원" + "</span>" + '<div class="product-seller">' + '<img class="product-avatar" src="images/icons/avatar.png" />' + "<span>" + product.seller + "</span>" + "</div>" + "</div>" + "</div>"; } document.querySelector("#product-list").innerHTML = productsHtml; </script> </html>
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 결과가 제대로 나오지 않습니다.
send누르면 아래 사진 처럼 error가 발생합니다.. server.js 코드 작성한건데 어떤게 잘못 된건지 확인좀 해주세요ㅜㅡㅜ 올려주신 소스코드보고 확인해봤는데도 못찾겠어요..ㅜ const express = require("express"); const cors = require("cors"); const app = express(); const models = require("./models"); const port = 8080; app.use(express.json()); app.use(cors()); app.get("/products", (req, res) => { const query = req.query; console.log("QUERY : ", query); res.send({ products: [ { id: 1, name: "농구공", price: 100000, seller: "조던", imageUrl: "images/products/basketball1.jpeg", }, { id: 2, name: "축구공", price: 50000, seller: "메시", imageUrl: "images/products/soccerball1.jpg", }, { id: 3, name: "키보드", price: 10000, seller: "그랩", imageUrl: "images/products/keyboard1.jpg", }, ], }); }); app.post("/products", (req, res) => { const body = req.body; const { name, description, price, seller } = body; models.Product.create({ name, description, price, seller, }) .then((result) => { console.log("상품 생성 결과 : ", result); res.send({ result, }); }) .catch((error) => { console.error(error); res.send("상품 업로드에 문제가 발생했습니다."); }); }); app.get("/products/:id/events/:eventId", (req, res) => { const params = req.params; const { id, eventId } = params; res.send(`id는 ${id}와 ${eventId} 입니다`); }); app.listen(port, () => { console.log("그랩의 쇼핑몰 서버가 돌아가고 있습니다."); models.sequelize .sync() .then(() => { console.log("DB 연결 성공!"); }) .catch((error) => { console.error(err); console.log("DB 연결 에러"); process.exit(); }); });