월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
섹션2 웹화면 구현하기 -3 강의 내용 질문이요
Index.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><div class="product-card"></div><div class="product-card"></div><div class="product-card"></div><div class="product-card"></div><div class="product-card"></div></div></div><div id="footer"></div></body></html> index.css* { margin: 0;padding: 0;}#header { height: 64px; display: flex; justify-content: center; border-bottom: 1px solid gray;}#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; margin-top: 12px;}.product-card { width: 180px; height: 300px; background-color: gray; margin-left: 12px; margin-bottom: 12px;} 위와같이 동일하게 작성했는데보여지는 화면에서이렇게 상품창이랑 밑에 footer랑 겹쳐서 나오는데어떻게 해야하나요?
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
fetch함수가 실행되지 않아요.
크롬에서 계속 오류가 납니다. Edge를 사용해도 되지가 않구요. 어떻게 실습을 추가진행해야할까요? 뒤의 코드를 실행시켰는데, Error가 나는데 왜 Error코드가 실행되지 않는지도 궁금합니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
포스트맨 mock server 에 api call 회수 초과
{ "error": { "name": "usageLimitError", "header": "Usage limit reached", "message": "Your team plan allows 1000 mock server calls per month. Contact your team Admin to up your limit." } 안녕하세요. state 구문에서 무한루프 도는곳에 axios 로 메세지 보내는 구문을 넣고 몇 번 실행하다 보니 저 메세지가 뜹니다.트래픽초과로 돈안내려면 무려1달을 기다려야되는 모양인데요.ip 기준으로 막혀서 다른 목서버를 열어도 안됩니다. 혹시 저거 풀 수 있는 방법이 있을까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
안녕하세요. 질문드립니다.
axios.get() 에서 mockserver에서 불러올때는 화면이 잘나왔는데 mocksever에서 localhost:8080/products로 바꾸니까 화면과 같이 상품사진들을 못불러오고 에러가 뜨는데.. 왜이러는걸까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
오류 문제..
뭐가 문제일까요..?<수업 내용><실습>
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
빈 화면 오류
안녕하세요 강의 진행중 오류가 발생하여 문의드립니다React로 웹 개발하기 -2 를 진행후 npm start 하니 빈 화면이어서 확인해보니 이런 오류가 뜹니다.가장 흔한 것이 버전 호환 이슈인듯하여 첨부합니다..{ "name": "grab-market-web", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "axios": "^0.21.0", "react": "^17.0.1", "react-dom": "^18.2.0", "react-scripts": "5.0.1", "web-vitals": "^2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } }
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
선생님처럼 똑같은 코드를 썼는데 사진출력이 안돼요
제가 코드 쓴 부분이에요, 저 위에 img 부분은 선생님 강의 노트에서 그대로 복사해서 붙여넣은 거구요,그런데 출력화면에선 이렇게 사진 출력이 안돼요, 이유를 알 수 있을까요???
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
배열에서 궁금한 점
배열 안에 문자열에 공백이 있을 경우그 문자열의 공백을 삭제하려면 어떻게 해야하나요?var productNames = ['농구공 ', '단백질 보충제']이렇게 있을 경우 농구공 뒤의 공백을 제거할 수 있는 방법이 있나요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의교재 문의
안녕하세요. 강의 교재 파일을 어디서 다운받을수 있을런지요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo 관련 질문
npm start를 하면 홈페이지가 열리는게 아니라 terminal 창에 뜹니다 ( expo 버전이 올라가면서 ui를 제공안한다는거 같은데 페이지로 볼려면 expo 다운을 무슨 버전으로 해야하는건가요? )아래 처럼 터미널 창에 나옵니다Starting project at C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobileStarting Metro Bundler▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄█ ▄▄▄▄▄ ██▀▀▄▄▀██ █ ▄▄▄▄▄ ██ █ █ █▀███ ▀▀ ██ █ █ ██ █▄▄▄█ █▄▄█▀▀█▄█▀█ █▄▄▄█ ██▄▄▄▄▄▄▄█▄█ ▀▄█ █▄█▄▄▄▄▄▄▄██ ▄▀█▀▄▄▄▀ █▄▀ █▀ ▀██ ▄▀▀███▀▀ █▀▄▄▄█▀▄█▀█▀▄▄ ▀ ▄█▄ ██ ▄▄▄█ ▄█ ▄█▄▄█ █ ▄▄██▀ ███ █ █▀▄█▀█▀ ▄█▀ █ █▀▄ ██▄██▄█▄▄█ ▄▀▄▀▄▀█ ▄▄▄ ▄▄██ ▄▄▄▄▄ █ ▄▄▀▄▄█ █▄█ ██▀▄██ █ █ ██▀██▄▄█▄▄▄ ▄ ▄ ██ █▄▄▄█ █▀▀▀ ▄██▀▀▀█▀██▄█ ██▄▄▄▄▄▄▄█▄█▄█▄▄▄▄▄▄█▄▄███▄█› Metro waiting on exp://10.55.6.199:19000› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)› Press a │ open Android› Press w │ open web› Press r │ reload app› Press m │ toggle menu› Press ? │ show all commands 여기서 w를 눌러도 Logs for your project will appear below. Press Ctrl+C to exit.Starting Webpack on port 19006 in development mode.‼ 「wds」: transportMode is an experimental option, meaning its usage could potentially change without warningError: no parsers registered for: "]올인원-"Error: no parsers registered for: "]올인원-" at parse (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\snapdragon\lib\parser.js:473:15) at Parser.parse (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\snapdragon\lib\parser.js:477:24) at Snapdragon.parse (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\snapdragon\index.js:122:28) at Snapdragon.<anonymous> (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\lib\braces.js:40:45) at Braces.parse (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\lib\braces.js:66:26) at Braces.expand (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\lib\braces.js:87:18) at create (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\index.js:142:15) at memoize (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\index.js:298:13) at Function.braces.create (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\index.js:165:10) at Function.braces.expand (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\braces\index.js:81:17) at getDirParts (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\chokidar\index.js:435:31) at FSWatcher._getWatchHelpers (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\chokidar\index.js:442:18) at FSWatcher.NodeFsHandler._addToNodeFs (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\chokidar\lib\nodefs-handler.js:460:17) at FSWatcher.<anonymous> (C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\webpack-dev-server\node_modules\chokidar\index.js:650:12) at C:\Users\양규헌\Desktop\[인프런]올인원-개발클래스[그랩마켓]\grab-market-mobile\node_modules\async-each\index.js:16:7 at Array.forEach (<anonymous>) 이러한 에러가 나옵니다. 어떻게 해결하면 될까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
warning
이미지 하고는 다 정상적으로 화면에 표시되는거 같습니다만 warning이 떠있는데 무시하고 가도 되는 부분인가요?어떤 문제인지 알고 싶습니다!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
배너 구현시 오류
저는 리눅스 os 를 사용하고 있는데 밑에 댓글에 남겨주신 링크를 봤는데 설명이 무슨 말인지 잘 이해가 안되서 질문합니다! bin/bash 에 가서 복사해서 어디에 붙이라는 건지 정확히 모르겠습니다..그 밑에 줄도 경로를 바꾸라는 것도 이해가 되지 않구요.. ㅠㅠ
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
datar값이 제대로 안나오는것같습니다.
data가 제대로 나오지 않는데 어떻게 해야할까요 ㅠ
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
반응형 웹
body부분에서 width > max-width로 변경해서 모바일에서 적용되도록하였는데, 강의에선 head부분에는 그 적용을 안해줬는데,저가 다른것을 빼먹어서 그런건지? 어떻게 상품업로드 버튼이 보이는지 궁금합니다. https://github.com/yanggyuheon 입니다. 추가로 Link 적용하기 관련질문 강의에는 <React.StrictMode>이 있어도 클릭이 url 변경 + 새로고침이 되는데, 왜 저는 저걸 빼야지 새로고침이 되는건지 궁금합니다 한 번 확인부탁드립니다
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
여기서 2일 햇는데..
진도를 못나가겟어요 npm start 해도 화면이 뜨지도 않습니다.react-dom도 깔리지 않고 react -native 도 저런 url이 아니고 버전만 나와있습니다. ubuntu 쓰고잇습니다..윈도우 맥이 아니라 오류를 찾기도 쉽지않네요..원인은 react-dom 인거같인데 흠...
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link 적용하기 관련질문
3:20초 부근에서 상품카드를 눌렀을때http://localhost:3000/product 으로 주소는 바뀌는데페이지는 누르기 전 상태 그대로입니다.새탭에서 열기, 새창에서 열기로 할때는 제대로 <h1>태그 상품상세페이지가 적용되는데,강의에서 처럼 그냥클릭했을때 왜 적용이 안되는지 궁금합니다// 다른 질문글을 보고 수정해봤습니다.index.js에서 <React.StrictMode>를 삭제해보세요. 라는 내용이 있어서 root.render( <BrowserRouter> <App /> </BrowserRouter> ); 강의에는 <React.StrictMode>이 있어도 클릭이 url 변경 + 새로고침이 되는데, 왜 저는 저걸 빼야지 새로고침이 되는건지 궁금합니다 http://localhost:3000/ 에서 새로고침시 콘솔창에 이러한 에러가 나오는데 왜 나오는지 궁금합니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
빈화면이 뜹니다~ 도와주세요 ㅠㅠ
겨우겨우 따라가고 있는 사람입니다.똑같이 입력했고,react router dom 도 5.2.0 버전으로 설치한거같은데,빈화면이 뜹니다 ㅠㅠ 도와주세요...오류메시지가 가득하네요..이전까진 그래도 강사님이랑 똑같이 잘 떴었는데, 오늘은 안되네요
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
화면 출력이 안됩니다.
export const API_URL = process.env.NODE_ENV === "Production" ? "https://bum2-market-server.herokuapp.com" : "http://localhost:8080"; 그냥 export const API_URL = "https://bum2-market-server.herokuapp.com" 이렇게 만 넣으면 화면이 출력이 되는데 뒤에 localhost:8080 만 붙히면 저런 오류가 나옵니다..
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
useState관련 질문
강의들으며 궁금한 점이 있어서 질문남깁니다. 1. state업데이트가 되면 코드 재실행이 일어난다고 했는데코드 재실행이 어디서부터 어디까지인가요? function TimerComponent() 함수에서맨 처음인 const부터 return의 끝부분까지 재실행되는건가요? 2. setTime이 state를 변경시키는 함수, setTime이 불리면 컴포넌트 렌더링일어남강의 1:00에서 setTime(time+1)말고, setTime(time)이나 setTime()으로 해도Too many re-renders 에러가 나오는데useState는 1번째 인자값의 변화와 상관없이, 2번째 인자가 나왔을 때 렌더링되는건가요?그 렌더링을 이용해서 1번째 인자값을 바꾸는건지 궁금합니다
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
렌더링질문
강의 12:13 부분에서 setProducts(products)로 인해서 products가 업데이트됐고, state업데이트되서 다시 렌더링이 일어나는 구조가 계속 반복되는데Q1 ) 코드가 다시 렌더링 일어날 때, function MainPage() 함수의 처음부분 const [products, setProducts] = React.useState([]); 부터 맨 끝까지 업데이트가 되는건가요?Q2) 강의에서 setProduct부분에서 다시 렌더링이 반복된다고 했는데처음부터 setProducts(product)부분까지만 반복되고 맨 위로 다시 가는 구조라면, 아래 부분 코드-이미지들이 어떤 구조로 출력되는건가요?