월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
(21.12.01기준)포스트맨 Send버튼을 눌러도 응답이 없는 경우
Send버튼을 눌러도 아무 응답이 없는 경우 우측상단 저의 경우 "No Environment"로 되어있는 부분을 클릭하셔서 자신이 작성한 목업서버 이름을 클릭하시고 다시 Send를 누르시면 작성하신 응답 받을 수 있습니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
nodemon 실행이 되지 않는 문제
sequelize 코드 실행할 때도 질의 게시판에 있는 코드로 입력해서 됐고 그냥 sequelize init 하면 안 되던데 nodemon도 nodemon server.js로 입력했을 때 실행이 안 됩니다 원인이랑 해결책을 알 수 있을까요.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품상세페이지에서 잘 안됩니다.
보시는것과 같이 이렇게 뜹니다 혹시 몰라 제가 입력한 코드도 함께 보여드립니다 보시고 틀린 부분은 꼭 가르쳐주세요! 상품 상세 페이지구현 2에서 헤더와 바디, 푸터 외에는 css는 아직 하지 않았습니다. App.js import './App.css'; import MainPageComponent from "./main/index.js"; import {Switch, Route} from "react-router-dom"; import UploadPage from './upload'; import ProductPage from './product'; function App() { return ( <div> <div id="header"> <div id="header-area"> <img src="/images/icons/logo.png" /> </div> </div> <div id="body"> <Switch> <Route exact={true} path="/"> <MainPageComponent /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; product/index.js import {useParams} from "react-router-dom"; import axios from "axios"; import { useEffect, useState } from "react"; function ProductPage(){ const {id} = useParams(); const [product, setProduct] = useState(null); useEffect(function(){ axios.get(`https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products/${id}`) .then(function(result){ setProduct(result.data); }).catch(function(error){ console.error(error); }) },[]) if(product===null){ return <h1>상품 정보를 받고 있습니다...</h1> } return ( <div> <div id="image-box"> <img src={"/" + product.imageUrl} /> </div> <div id="profile-box"> <img src="/images/icons/avatar.png" /> <span>{product.seller}</span> </div> </div> ); } export default ProductPage; main/index.js import React from "react"; import "./index.css"; import axios from "axios"; import {Link} from "react-router-dom"; function MainPage(){ const [products, setProducts] = React.useState([]); React.useEffect( function(){ axios.get( "https://361064f0-c286-4d2b-9664-2d0715b5a18f.mock.pstmn.io/products").then(function(result){ console.log(result) const products = result.data.products; setProducts(products); }).catch(function(error){ console.error("에러발생 : ", 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"> <Link className="product-link" to={`/products/${product.id}`}> <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> </Link> </div> ) }) } </div> </div>); } export default MainPage;
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
업로드 창이 안되시는 분들 있으시다면 해결방법 공유합니다.
만약 저 처럼 안되시는 분들 계실수도 있을 것 같아 해결방법 공유해드립니다. devtools를 보시면, upload 쪽에 index.js에 useState 쪽에서 오류가 보통 나실거라고 생각이 됩니다. 그 때 보시면, import { useState } from "react/cjs/react.development"; 이렇게 자동완성이 되어 있는 경우가 있으실겁니다. 그럼 from "react" 로 변경하시고 다시 github에 배포하시면 업로드 화면도 잘 되실겁니다. 저도 업로드만 안되서 해맸더니 이런 이유였네요. 만약 다른 곳도 안되신다면, 자동완성 부분을 의심해보세요.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
완료파일
안녕하세요 완료파일은 제공하지 않나요 ?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Git 설치 오류
PowerShell에서 git --version 을 입력했을 때는 버전이 확인되지만, 막상 VSC 터미널에 같은 명령어를 넣으면 다음과 같은 문구가 뜹니다. PS C:\Users\Jina Hong\Desktop\learn-all-with-js\web-grab-market> git --version git : 'git' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시도하십시오. 위치 줄:1 문자:1 + git --version + ~~~ + CategoryInfo : ObjectNotFound: (git:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException 당연히 'git init' 명령어도 같은 결과를 낳습니다. 컴퓨터 재부팅도 해봤고, 구글링해서 얻은 팁을 따라 사용자 설정으로 들어가서 환경 변수(environment variables)로 git을 추가해보기도 하고, VSC settings 에 git.path 도 추가해봤습니다만, 터미널창에는 계속 같은 오류 메시지가 뜹니다. 이건 제 화면을 스크린샷한 건 아니지만, 설치 당시 똑같이 두 번째 항을 선택했습니다. 더 이상 바꿔볼 만한 변수가 떠오르지 않습니다. 제발 도와주세요 선생님.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
지금까지 따라하고 있는데 축구공과 키보드 페이지에서..
저 제가 놓친 것이 있는지... 농구공을 클릭을 했을 떄는 상품 페이지가 잘 나오는 것 같은데 축구공, 키보드를 클릭을 했을 떄 상품 페이지, 상품에 대한 contents가 보이지 않더라고요 ㅠㅠ 어떻게 해야할까요? 어디서 문제가 발생한 걸까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품 정보를 받고 있습니다... 로 로딩만 되고 있어요! ㅠㅠ
이렇게 상품을 클릭해서 넘어가면 이렇게 뜹니다. ㅠㅠ 제가 어떤 부분을 잘못했는지 잘 모르겠어요! ㅠㅠ 그래도 혹시 몰라 소스코드들을 올려봅니닷 [ App.css ] /* 기존에 있는 리엑트 CSS를 지우고 */ html, body, #root, #root > div{ height: 100%; } #header{ height: 64px; display: flex; justify-content: center; border-bottom: 1px solid grey; } #body{ height: 100vh; width: 1024px; margin: 0 auto; padding-bottom: 24px; } #footer{ height: 200px; background-color: rgb(230, 230, 230); } [ App.js ] // import logo from './logo.svg'; import './App.css'; // import MainPage from './main/index.js'; >> ./main으로 해도 괜찮음! import MainPage from './main'; import { SWitch, Route } from 'react-router-dom' import ProductPage from './product'; import UploadPage from './upload'; import { Switch } from 'react-router-dom/cjs/react-router-dom.min'; function App() { return ( <div> <div id="header"> <div id="header-area"> {/* <img src="images/icons/logo.png"/> // 간혹 스스코드를 작성했는데 안된다면 이미지 소스의 경로를 절대적으로 바꿔주면 된다. << 절대경로*/} <img src="/images/icons/logo.png"/> </div> </div> <div id="body"> {/* 작성 방법_01 */} <Switch> <Route exact={true} path="/"> <MainPage /> </Route> <Route exact={true} path="/products/:id"> <ProductPage /> </Route> <Route exact={true} path="/upload"> <UploadPage /> </Route> </Switch> </div> <div id="footer"></div> </div> ); } export default App; [ main > index.js ] // 기존 우리가 작업했던 CSS를 연결해주기 // 그런데 문제가 있다 >> 따라서 App.css에서 수정을 해야 할 것들이 있다. import "./index.css" import axios from "axios"; //axios 서버에서 가져오겠다는 뜻 import React from 'react'; //React import {Link} from 'react-router-dom'; // Link를 뽑아 상품을 클릭 시 진행하도록 설정 function MainPage() { // return <p>MainPage</p> //React의 state로 상품정보에 대한 state이다. //state는 배열의 속성으로 우리는 useState([])로 빈 배열을 넣어줌. const [products, setProducts] = React.useState([]); //지속적인 업데이트를 통해 컴퓨터가 과부화가 생기지 않도록 React.useEffect를 활용한다. 즉 1번만 불러오고 정상적인 통신을 하는 것이다. React.useEffect( function () { //네트워크 postman에서 만든 MockServer의 product address를 가져오기 axios.get('https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products') .then(function (result) { console.log(result); const products = result.data.products; setProducts(products); //지속적인 반복의 문제점을 해결! }) .catch(function (error) { console.error("에러발생: ", error); }); }, [] ) return ( //// <div>를 하나 미리 만들어야 한다. 그리고서 Html > body에서 작성했던 모든 내용을 여기에 넣어준다. <div> {/* 여기서 이제 서버를 통한 product를 가져와야 한다. */} {/* <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) { // function(매개변수의 활용 > prodcut는 상품, index는 아이템 선택) return ( <div className='product-card'> {/* product-card, 즉 상품을 클릭 시 상품의 정보 페이지로 넘어갈 수 있도록 설정한다. 또한 React에서 Link를 통해 넘어는데 웹브라우저에서는 a태그로 보여준다. 즉, a태그로 변환이 되는 것을 확인할 수 있다. */} {/* <Link className="product-link" to={'/products/' + index}> */} {/* <Link className="product-link" to={`/products/ + ${index}`}> */} {/* 0을 눌렀을 때, 1을 눌렀을 때 모두 다른 상품이 나오도록 index를 통해 활용 그리고 벡틱 작성법을 활용 */} <Link className="product-link" to={`/products/ + ${product.id}`}> <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> </Link> </div> ); }) } </div> {/* </div> <div id="footer"> </div> */} </div> ); } export default MainPage; // MainPage를 내보내겠다는 뜻이다 [ prodcut > index.js ] import {useParams} from 'react-router-dom'; import axios from 'axios'; import { useEffect, useState } from 'react'; function ProductPage(){ //const prams = useParams(); // console.log(prams); //이제 상품을 선택을 할 때 콘솔창에 id: 0, 1, 2.. 상품 숫자가 나온다. const {id} = useParams(); const [product, setProduct] = useState(null); //처음엔 null이 나타나고 렌더링이 되고 나서 서버에서 상품을 받아오고 호출됨. useEffect(function(){ axios.get('https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io/products'+ id) .then(function(result){ setProduct(result.data); // console.log(result); }) .catch(function(error){ console.log(error); }) },[]); // console.log(product); // return <h1>상품 상세 페이지{id} 상품</h1> //js문법 if(product == null){ return <h1>상품 정보를 받고 있습니다...</h1> } return( <div> <div id="image-box"> <img src={"/"+product.imageUrl}/> {/* const [product, setProduct] = useState(null); 를 비동기 처리방식으로 작동이 되기 때문에 당연히 product.imageUrl은 null로 처리가 된다. 따라서 오류가 발생이 되는 것은 당연한 원리이다. */} </div> <div id="profile-box"> <img src="/images/icons/avatar.png"/> <span>{product.seller}</span> </div> </div> ); } export default ProductPage; postman에서 {{url}}/products의 주소 https://4326fdea-003a-4291-b8b3-b8e47b10723c.mock.pstmn.io 입니다 ㅠㅠ 그리고 GET prodcuts > Default { "products" : [ { "id" : 1, "name": "농구공", "price": 10000, "seller": "로뎀", "imageUrl": "images/products/basketball1.jpeg" }, { "id" : 2, "name": "축구공", "price": 50000, "seller": "RockLee", "imageUrl": "images/products/soccerball1.jpg" }, { "id" : 3, "name": "키보드", "price": 15000, "seller": "테란황제", "imageUrl": "images/products/keyboard1.jpg" } ] } GET prodcuts/1 { "id": 1, "name": "농구공", "price": 10000, "seller": "로뎀", "imageUrl": "images/products/basketball1.jpeg", "description": "조던이 사용하던 농구공입니다" } 죄송합니다 제가 많이 부족해서 계속 물어보네요 ㅠㅠ 계속 확인하고 확인해도 이번에는 어디서 문제가 있는지 모르겠어요ㅠ
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
cmd v
h1뒤에 h2~h6만들때 cmd+v 입력하라고 하셨는데 윈도우에서는 어떤 키인가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
(해결방법 공유) 경로이동 문제 또는 Attempted import error: 'Switch' is not exported from 'react-router-dom'. 오류나시는 분들 보세요.
해결방법이 있을거라 생각하고 커뮤니티를 봤더니 없어서 해결 후 공유해드립니다. 일단, 그랩님이 사용하시는 버전과 설치한 버전이 달라 생기는 경우라고 판단이 됩니다. 1. Attempted import error: 'Switch' is not exported from 'react-router-dom' 오류시 터미널로 이동해서, npm uninstall react-router-dom을 입력해서 react-router-dom을 삭제해주시고, npm install react-router-dom@5.2.0 을 입력해서, 5.2.0 버전으로 설치를 해주시면 Switch는 사용이 가능해집니다. 2. 경로를 설정했는데도 이동이 안 될 경우 function App() { return ( <div> <Switch> <Route path="/" exact component={MainPageComponent} /> <Route path="/product" component={ProductPage} /> <Route path="/upload" component={UploadPage} /> </Switch> </div> ); } 이렇게 입력해주시면, 해당 경로로 이동이 가능해집니다. component를 사용해서, 두 줄을 더 줄여 깔끔하게 사용이 가능해지네요. 도움이 되셨기를 바랍니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
point-event none 적용이 안됩니다.
{product.soldout === 1 && <div className="product-blur" />} 선생님께서는 위 한줄로 blur효과와 pointer-event효과를 받았는데 저는 blur효과만 받아지고 pointer-event효과는 못받아서 결국 <아래>처럼 나눠 처리했더니 됬습니다.. 뭐가 문제였을까요...
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하십니까!
저는 이미지도 잘나오고 코드도 다 잘 돌아가는것 같은데 이미지 자체가 가로로 배열이 안되고 세로로 배열이 됩니다.. product-list 의 width와 product-card width 확인해본 결과 충분히 들어갈 길이인데 왜 이렇게 되는건지 알려주시면 감사하겠습니다!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강사님! 에러가 발생헀는데 ㅠㅠ
./src/App.js Attempted import error: 'Switch' is not exported from 'react-router-dom'.라고 뜹니다. ㅠㅠ 무엇이 문제인지 계속 확인을 하고 있는데 계속 안됩니다. ㅠㅠ
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm start가 안됩니다 꼭 좀 확인해주세요ㅜㅜ
creat-react-app은 다 설치가 되었는데 npm start가 안됩니다ㅜ cmd에서도 터미널에서도 안되는데 어떻게 해야 좋을까요? react를 겨우 설치하고 나니 또 이런 문제가 생겨서 너무 마음이 속상합니다ㅡㅜㅜ
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman 필요구문 문의
컴퓨터가 고장나서 공부한것들중에 깃허브에있는 소스들은 불러오기가 되는데 postman에있는건 전부 날아가버렸습니다 ㅠㅠ 어떻게해야할지 막막합니다....
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
이뮬레이터 연결이 자꾸 되지 않습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
imageUrl 경로 관련해서 질문 드립니다!
사진에 보시다시피 db에는 uploads\notebook1.jpg로 imageUrl이 저장되어 있는데 reactNative의 콘솔 창에서는 uploads\\notebook2.jpg로 결과가 반환되었습니다. 어느부분이 문제일지 궁금해서 질문드립니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
이미지 업로드시 None of these files exist 에러가 뜹니다.
경로안에 이미지 이름 안틀리고 그대로 넣었는데 basketball1.jpeg파일이 없다고 뜹니다. 뭐가 문제인지 알려주실수 있을까요??
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
클릭해서 ProductPage로 넘어갈시에 아무것도 보이지 않습니다
(사진)
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Attempted import error: 'Switch' is not exported from 'react-router-dom'.
Attempted import error: 'Switch' is not exported from 'react-router-dom'. 이 에러가 계속 뜹니다.