월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Ant Design Input 컴포넌트 질문
Ant Design Input 컴포넌트에서 showCount로 카운트 되는 글자수를 변수로 받아올 수 있는 방법이 있을까요? 특정 글자수를 초과하는 입력을 할 경우 등록하기 버튼을 disable하고 싶은데 강의 내 예제에서는 maxLength에 맞춰 잘리네요. Ant Design 사이트를 찾아봐도 해답을 찾을 수 없어 부득이하게 이곳에 질문을 남깁니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
제가 공부겸 회원가입페이지 만들어보는데 광고이미지를 추가했는데 제위치를 벗어나네요 이유를 알수있을가요??
이미지가 벗어나네요.. 멀 잘못했을가요?? 그런데 광고이미지 마다 아래 켭쳐처럼 각각 width ="100%"넣어주면 또 제대로 제위치에 나와요 이걸안넣어줘도 부모div에서 width =40%설정이되잇는데 왜 그게 제대로 적용이안되고 범위를 넘어갈가요 넘궁금합니다.. 이렇게 width ="100%"를 각각 넣어주면 다제대로 나와요 부모 div 에 width =40%가 설정되있는데 도 이걸 넣어줘야하나요?? 넘궁금합니다..
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
server.js와 postman post사용 시 에러
안녕하세요. 강의 보면서 천천히 따라하고 있습니다. 근데 데이터베이스를 들어가면서 오류가 발생해서 어디가 잘못되었는지 모르겠습니다. 코드를 다음과 같이 작성해서 post를 보내면 에러화면이 뜹니다..... server.js 코드 const express = require('express') const cors = require('cors') const app = express() const port = 8080; const models = require('./models'); 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": 30000, "seller": "Grab", "imageUrl": "images/products/keyboard1.jpg" } ] }) }) app.post("/products", (req, res) => { const body = req.body; const {name, price, seller, description,} = 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", (req, res) => { const params = req.params; const {id} = params; res.send(`id는 ${params.id}입니다.`) }) app.listen(port, () => { console.log('서버가 돌아가는 중입니다.') models.sequelize.sync().then(()=>{ console.log('DB연결 성공!') }).catch((err)=>{ console.error(err); console.log('DB연결 에러...') process.exit(); }) })
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useEffect에 관한 질문입니다!
해당 강의에서 product 파일의 index.js에 useEffect를 쓰는데요 useEffect를 쓰지 않고 import { useParams } from "react-router-dom"; import axios from "axios"; import { useEffect } from "react"; function ProductPage() { const { id } = useParams(); axios .get( `https://0433858f-3e14-4d79-b271-b955ae5e953a.mock.pstmn.io/products/${id}` ) .then(function (result) { console.log(result); }) .catch(function (error) { console.error(error); }); console.log("id는", id); return <h1>상품 상세 페이지 {id} 상품</h1>; } export default ProductPage; 이렇게 코딩을 하면 console에 result가 두 번 찍히는데 useEffect를 쓰지 않으면 왜 .then이 두 번 불리는지 잘 이해가 가지 않아서 질문 드립니다!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import 할 시에 어떻게 from 경로 지정에서 ./main 만 해줘도 되죠 ?
import 시 from 경로에 ./main 만 해줘도 index.js를 찾는다고 했는데 이게 어떻게 가능한건가요 ?? 다른 js 파일이 있더라도 자동으로 찾아주나요 ?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의 중 그랩마켓 웹과 상품 정보 연동하기 부분에서요
Node.js로 만든 api 서버 8080번에 상품 정보 받아오는 로직을 구현 한 뒤 다시 node.js를 이용해 리액트로 만든 그랩마켓의 서버 3000번을 만드셨는데 이 3000번 서버가 무슨 역할을 하는 지 궁금해요!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
setTime(time+1)에 대해서 질문이 있습니다.
setTime 은 React.usestate 에서 받아오는 함수인가요 ?? setTime이란게 time을 1씩 더해서 값을 업데이트 해준다고 생각하면 되는건가요 ??
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
와.. 여기서 1도 못하겠어요 ㅠㅠ
버전이 달라서 그런지 인터페이스도 다르고 메뉴도 다른 것 같아요 AVD Manager도 보이지 않고요 ㅠ 어떻게 해야 할지 모르겠습니다
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
DOM문의드립니다.
특히 프론트엔드 같이 데이터 조합해서 DOM에 적용하는 경우가 많은 경우 유용하게 사용됩니다,여기서 DOM은 어떤 의미인가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Product ? Products?
<질문1> Products.js에서 sequelize.define로 테이블 정의시 복수형태로 Products된다고 들었는데 models.Product.create도 Product 단수 형태로 테이블 이름에서 s를 빼주는건가요??? <질문2> result를 log찍어 봤을떄는 또 Product라고 나오고 위에는Products 테이블로 insert into 됐다고 나오는데테이블을 만들어주는건 models/products.js 에서하는건데 model.Product.create 이말은 사실 테이블 생성이아니라 데이터 삽입이라고 보면 될까요? models.Product.create({ name, description, price, seller, })
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
sequelize.define으로 product테이블 정의시 복수형 테이블 products 로 생성됩니다.
sequelize.define으로 product테이블 정의시 복수형 테이블 products 로 생성됩니다. 참고 링크 https://any-ting.tistory.com/50 테이블 이름 옵션(tableName : "User") 또는 복수화 중지(freezeTableName : true) 옵션을 설정해야합니다. 상세내용은 링크보시면 다른 옵션들도 상세하게 나옵니다
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
프로덕트 배열이 안나옵니다 ㅠ
<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> </head> <body> <div id="header"> <div id="header-area"> <img src="icons/logo.png" /> </div> </div> <div id="body"> <div id="banner"> <img src="banners/banner1.png" /> </div> <h1>판매되는 상품들</h1> <div id="product-list"></div> </div> <div id="footer"></div> </body> <script> axios .get( "https://ef2ace18-3391-4ea6-8ab2-e832bfae3c8c.mock.pstmn.io/products" ) .then(function (result) { console.log("통신 결과:", result); }) .catch(function (error) { console.error("error 발생:", error); }); var products = [ { name: "농구공", price: 10000, seller: "Jordan", imageUrl: "products/basketball1.jpeg", }, { name: "축구공", price: 50000, seller: "Jordan", imageUrl: "products/soccerball1.jpg", }, { name: "키보드", price: 15000, seller: "Grab", imageUrl: "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>
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
TypeError: Cannot read properties of undefined (reading 'map')
React로 웹 개발하기 - 2 수강후 에러 메시지 문의입니다. npm start 하여 로컬호스트 화면에 아래의 메시지가 나오는데 해결이 안됩니다. 어디에 문제가 있는건지 문의드립니다. × TypeError: Cannot read properties of undefined (reading 'map') MainPage C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:33 30 | <img src="images/banners/banner1.png" /> 31 | </div> 32 | <h1>판매되는 상품들</h1>> 33 | <div id="product-list"> | ^ 34 | {products.map(function(product, index) { 35 | return ( 36 | <div className="product-card">View compiled ▶ 18 stack frames were collapsed. (anonymous function) C:/Users/hanthene/Documents/github/grab-market-web/src/main/index.js:15 12 | .then(function(result){ 13 | console.log(result); 14 | const products = result.data.products;> 15 | setProducts(products); | ^ 16 | }) 17 | .catch(function(error){ 18 | console.error('에러 발생 : ',error);View compiled This screen is visible only in development. It will not appear if the app crashes in production.Open your browser’s developer console to further inspect this error. 에러가 나는 상태의 파일 그대로 GITHUB에 퍼블릭으로 올려놓았습니다. https://github.com/ucoder-git/grab-market-client 아래는 package.json 입니다. { "name": "grab-market-web", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.3", "@testing-library/react": "^12.1.4", "@testing-library/user-event": "^13.5.0", "axios": "^0.26.1", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "^2.1.3", "web-vitals": "^2.1.4" }, 아래는 src폴더의 index.js 파일입니다. import React from 'react'; import './index.css'; import axios from "axios"; function MainPage() { const [products, setProducts]= React.useState([]); React.useEffect(function() { axios .get( "https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js" ) .then(function(result){ console.log(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> <div className="product-seller"> <img className="product-avatar" src="images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> </div> ); })} </div> </div> <div id="footer"></div> </div> ); } export default MainPage;
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useParams 으로 id값 받은후 console.log확인시 2번출력 문제
(문제) 안녕하십니까. 양질의 강의를 정말 잘 듣고 있습니다. useParams 으로 id값 받은후 console.log확인시 2번출력이 됩니다. 위와 같이 크롬 console.log에서 2회 출력이 됩니다.useParam이랑 관련없이 console.log("===1번===")확인해봐도 2회 출력이 됩니다. (질문)혹시 저런상황에서 그냥 넘어간다면 문제가 생길까요? 계속 찾다가 못찾아서 그냥 다음 커리큘럼 진행중이고치명적인 문제는 발생하지않았는데 강의를 들을때 나오는 페이지 로딩 속도 보다느린것같아요 (현재코드) https://github.com/ByeonghwiJeong/grab-market-client/commit/35f8c987867b6150af6bc1c7200233540e19ac65 <src폴더 : App.js> <main폴더 : index.js> <src폴더 : index.js> <product폴더 : index.js>
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
함수 밑에 return 과 console.log 들어가는 것의 차이는 무엇 인가요?
const dd = function (a){ console.log(~~~); } 실행 : dd(~~~) 이것과 const dd = function (a){ return(~~~); } 실행 : dd(~~~) 이것의 차이가 뭔가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
실행 안됨
코드를 똑같이 썼는데 브라우저 개발자 도구에서 Uncaught ReferenceError: axios is not defined at axios.html:5:7 이렇게 뜨고 실행됐단 말이 안뜨는데 왜그런거죠?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
create-react-app . 입력시 PSSecurityException 해결법 공유
https://ktae23.tistory.com/148 1. powershell 관리자 권한으로 실행 2. Get-ExecutionPolicy 로 권한 확인 restricted이면 변경해야함 3. Set-ExecutionPolicy RemoteSigned : restricted >> RemoteSigned 변경 - 예[Y] 4. Get-ExecutionPolicy 변경 확인!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
mainpagecomponent
두가지 질문이 있습니다. 1. 우선 영상에 나와있는 것처럼 코드를 짰는데 실행시켰더니 warning이 떠서 다시 영상을 보면서 고쳐봤는데 warning 없이 잘 작동하였습니다. 그런데 궁금한게 있습니다. MainPageComponent처럼 단어의 첫 글자를 대문자로 했을 때는 정상적으로 작동되었지만 mainpagecomponent로 했을 때는 작동이 되지 않았습니다. 차이가 무엇인가요?(소문자로 했을 때는 당연히 index.js에서도 다 소문자로 지정해주었습니다. 2. index.js에서는 mainpage라는 함수를 정의 해주었습니다. 그런데 app.js에서는 import 할 때 mainpage 뒤에 component라는 것을 붙여서 import를 해주더군요. 왜 mainpage라는 함수를 import 하는 것이 아니라 component를 붙여서 import 하는 것인지 궁금합니다. 감사합니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
setTimeout함수를 수업과 똑같이 치고 엔터를 치니 ->2478 이라는게 뜨는데 이건 무슨의미인가요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 안녕하세요 선생님! http서버 통신 이전까지는 다이해가됬는데, 해당파트는 조금 이해가안되는 부분이있어서그런데 이러할경우 모든 목차를 공부를 한후 복습할건데 해당목차부분 넘어가도되는지 아니면 해당 파트를 반복적으로 다시공부하여 다음챕터로 넘어가야하는지 질의드립니다!