월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
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'. 이 에러가 계속 뜹니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
js 창 안됩니다.(코드 전부 똫같이 했습니다)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며