월 28,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
settings.jason 3가지
settings.json 을 검색하면 3가지가 뜹니다. user workspace default 이렇게 3가지 뜨는데, 제가 다 눌러보니 어떤건 영어문장이이 막 나오고, 어떤건 비어있는걸로 나오는데 user 로 하면 될까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CSS 적용 안되는 현상
위와 같이 코드를 작성하였습니다만, body 부분의 css가 적용이 안됩니다.여기서 제가 궁금한 것은 .html 파일 위의 <!DOCTYPE html>을 삭제하면 body값이 100%에 맞게 보여지는데, 왜 이렇게 적용 되는지 잘 모르겠습니다..<!DOCTYPE html>의 태그 같은 경우는 문서 형식을 선언하는것으로 알고있는데..해당 코드의 존재 유무에 따라 CSS 적용이 되다 안되다가 하는지 잘 모르겠습니다.. 답변 주시면 감사드리겠습니다!!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
map foreach 매개변수 이름은 product, index아니여도 되네요
그냥 첫번째 매개변수가 대상이고 두번째 매개변수는 index취급하는건가요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman으로 만든 주소는 만든사람 본인만 들어가지는건가요
다른 사람은 못보는걸까요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
display flex 및 link가 제대로 작동 안합니다...ㅠ
안녕하세요! 두 가지 질문이 있어서 글 남깁니다. display flex가 특정 id에 적용이 안됩니다 ㅠㅠapp.js에서 id=header인 부분에 css를 적용시켰는데 딱 header 부분만 적용이 안됩니다. 코드는 아래와 같습니다. app.js 코드import logo from './logo.svg'; import './App.css'; import MainPageComponent from "./main/index.js" import React, { Component } from 'react'; import {Link, Switch, Route, useHistory} from 'react-router-dom' import UploadPage from './upload/index.js'; import ProductPage from './product/index.js'; import { Button } from 'antd'; import {DownloadOutlined} from '@ant-design/icons' function App() { const history = useHistory(); return ( <div> <div id="header"> <div id="header-area"> <Link to="/"> <img src="/images/icons/logo.png" /> </Link> <Button size="large" onClick={function(){ history.push('/upload'); }} icon={<DownloadOutlined />} > 상품 업로드 </Button> </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; app.css* { margin: 0; padding: 0; line-height: normal; } html, body, #root, #root > div { height: 100%; }; #header { height: 64px; /*가운데 정렬하는 방법*/ display: flex; justify-content: center; border-bottom: 1px solid gray; } #header-area { width: 1024px; height: 100%; display: flex; align-items: center; justify-content: space-between; } #header-area img { width: 128px; height: 36px; } #body { height: 100vh; width: 1024px; margin: 0 auto; /*가운데 정렬하는 방법 중 하나*/ padding: 24px; } #footer { height: 200px; background-color: rgb(230,230,230); }이렇게 했을 때 아래와 같이 header만 적용이 안됩니다...(header-area는 css가 잘 적용이 되네요) Link 제대로 작동 안됨Link 태그를 통해 상품 상세페이지로 넘어가는 코드를 구현했는데 잘 안되는 부분이 있습니다 ㅠㅠ 원래라면 상품 카드를 눌렀을 때 자동으로 상품 상세페이지로 넘어가면서 해당 페이지 내용이 나타나야하는데 저는 카드를 누르면 url 주소만 바뀌고 제가 수동으로 새로고침을 해야 해당 페이지로 넘어갑니다...(그랩마켓 로고를 눌렀을 때 메인페이지로 돌아가는 것도 마찬가지입니다) 위 코드에서 잘못된 부분이 어떤거길래 이렇게 되는걸까요...? 감사합니다!
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
Link 적용하기 관련 문의드립니다.
Link 수업 듣는 중에 아래 질문과 같이 동일한 문제가 발생했는데요(상품 클릭 시, 링크 변경은 되는데 페이지 이동이 안되는 현상)https://www.inflearn.com/questions/645148/link-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B4%80%EB%A0%A8%EC%A7%88%EB%AC%B8 질문 확인하고<React.StrictMode> 을 제거하기 전에는 상품카드를 클릭했을때 url만 변경되고 페이지가 새로고침되지 않았습니다.<React.StrictMode> 제거해야지만 클릭시 url변경 + 페이지 새로고침까지 되었습니다강의와 동일하게 작성하였는데 왜 <React.StrictMode> 제거 후 문제가 해결된걸까요?
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
현재 강의 Express 프레임워크 사용하기 를 듣고 있는데요
이전 강의인 그랩 마켓 서버 구축하기 에서는 node_modules가 없었는데 이번 강의부터는 생성 되어있습니다.생성 과정을 건너뛰셨다면 어디서 확인할 수 있는지는 강의에 포함시켜주시는게 맞는거 같습니다.
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo-cil 설치
안녕하세요. 문의남깁니다.맥에서 expo-cil 설치가 안됩니다." zsh: command not found: npm " 요런 메세지가 나오는데 어떤 방법으로 진행해야하나요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
npm install -g sequelize sqlite3 설치가 안되네요
윈도우 11에서npm install -g sequelize sqlite3 설치가 안됩니다유사 답변 참고해도 설치가 안되네요 아래 문구가 나왔을 땐 어떻게 어떤 방법으로 접근하는 게 좋을까요?npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fsadded 146 packages in 6s13 packages are looking for fundingrun npm fund for details
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
postman에서 오류가 있습니다
눈동자 모양no enviorment에서 grab-market-mock-server로 전환이 안됩니다
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품추천api오류
//상품 추천 api (feat: tensoflow) app.get("/products/:id/recommendation", (req, res) => { const { id } = req.params; //findOne으로 req을 통해 받아온 param값 id에 맞는 상품을조회한다. models.Product.findOne({ where: { id, }, }) .then((product) => { //id와 일치하는 상품에서 type값을 뽑아서, const type = product.type; //type값과 일치하는 상품들을 모두찾는다. models.Product.findAll({ where: { type, id: { //기준이되는 id와 일치하지않는 데이터만찾겠다. //예를들어 id가4번일때 4번을제외한 4번과 같은type의 상품만 보여줘야하는데 //4번도 함께 추천이되니, 4번을 제외하게해준다. [models.Sequelize.Op.ne]: id, }, }, }).then((products) => { res.send({ products, }); }); }) .catch((error) => { console.error(error); res.status(500).send("에러가 발생했습니다.."); }); });server.js에서 추천api를 작성하고 웹에서 확인하려고하면 에러내용TypeError: Cannot read properties of null (reading 'type')at /Users/kimsehun/Desktop/market-prj/h-market-server/server.js:191:28 이런 에러가발생합니다.models-product.jsmodule.exports = function (sequelize, DataTypes) { const product = sequelize.define("Product", { name: { type: DataTypes.STRING(20), allowNull: false, }, price: { type: DataTypes.INTEGER(10), allowNull: false, }, seller: { type: DataTypes.STRING(30), allowNull: false, }, description: { type: DataTypes.STRING(300), allowNull: false, }, imageUrl: { type: DataTypes.STRING(300), allowNull: true, }, soldout: { type: DataTypes.INTEGER(1), allowNull: false, defaultValue: 0, }, type: { type: DataTypes.STRING(50), allowNull: true, }, }); return product; }; 계속보고있는데,findOne부분에서 where을 통해 id값에 해당하는 상품을못찾아서 product에 데이터가 담기지않아서,type을 못불러오는거같은데.뭐가문제일까요??
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
상품상세페이지 구현-2 와 3 사이에 빠진 내용이 있는거같아요
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 상품상세페이지 구현-2 마지막에 보면 css를 적용하고자,product폴더내에 Index.css를 만드는데, Index.js에 css를 import하지 않고 넘어가서 상세페이지구현-3 영상에서는 그냥 css를 적용하고 적용되는 모습이 영상에 담겨있습니다.원래 자동으로 Import 되는게 아니라면, 이부분에 대한 추가적인 제안이 필요할거같습니다. import "./index.css";
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에뮬레이터에 화면 흰색만나오는 문제
import { API_URL } from "./config/constants.js"; import avatarImg from "./assets/icons/avatar.png"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert, } from "react-native"; import { GestureHandlerRootView } from "react-native-gesture-handler"; import Carousel from "react-native-reanimated-carousel"; import axios from "axios"; import dayjs from "dayjs"; import relativeTime from "dayjs/plugin/relativeTime"; import "dayjs/locale/ko"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function App() { const [products, setProducts] = React.useState([]); const [banners, setBanners] = React.useState([]); React.useEffect(() => { axios .get(`${API_URL}/products`) .then((result) => { const products = result.data.products; setProducts(products); }) .catch((error) => { console.log("error :", error); }); axios .get(`${API_URL}/banners`) .then((result) => { const banners = result.data.banners; setBanners(banners); }) .catch((error) => { console.log("error :", error); }); }, []); return ( <GestureHandlerRootView> <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}` }} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.headline}>판매되는 상품들!</Text> <View style={styles.productList}> {products.map((product, index) => { return ( <View key={index} style={styles.productCard}> {product.soldout === 1 && <View style={styles.productBlur} />} <View> <Image style={styles.productImg} source={{ uri: `${API_URL}/${product.img_url}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price}원</Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={avatarImg} /> <Text style={styles.productSellerName}> {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.created_at).fromNow()} </Text> </View> </View> </View> ); })} </View> </ScrollView> </View> </GestureHandlerRootView> ); } const styles = StyleSheet.create({ headline: { fontSize: 24, fontWeight: "800", marginTop: 10, marginBottom: 10, }, container: { flex: 1, backgroundColor: "#fff", paddingTop: 32, margin: 10, }, productCard: { width: "100%", borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 10, }, productBlur: { position: "absolute", top: 0, bottom: 0, right: 0, left: 0, backgroundColor: "#ffffffaa", zIndex: 999, }, productImg: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 14, }, productPrice: { fontSize: 16, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 14, }, productDate: { fontSize: 14, }, productList: { alignItems: "center", }, bannerImage: { width: "100%", height: 200, }, }); 어떤 오류메세지도 뜨지않고,에뮬레이터에 화면이 출력되지않는 문제가 발생합니다.Carousel을 적용하기전에는 화면 잘 출력되었는데,Carousel을 적용하니 화면이 출력되지않네요..Error: PanGestureHandler must be used as a descendant of GestureHandlerRootView. Otherwise the gestures will not be recognized. See https://docs.swmansion.com/react-native-gesture-handler/docs/installation for more details.이러한 오류가 발생해서GestureHandlerRootView 태그로 최상단에 묶어주니 저 오류는 사라졌는데,애뮬레이터의 화면이 출력되지 않는 문제가 발생합니다.서버는 잘 연결되어있는걸 확인햇습니다..뭐가문제일까요
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
deploy후에 접속시 오류발생
안녕하세요, 설명 우선 launch를 할때 port를 8080으로 설정하고 setting을 해도fly.toml 파일과 dockkerfile에 port번호가 3000으로 자동으로 설정되는 문제가있어 해당파일의 port번호를 수동으로 8080으로 다시 설정하고 deploy완료했을 때 해당 주소로 접속시에 접속이 안되는 오류가발생합니다. 이미지fly.tomldockkerfilehttps://h-market-server.fly.dev/접속시 오류구글링, 다른분들의 질문을 찾아봤는데도해결하지못해, 질문드립니다. 파일을 지우고 다시런치 후 배포프로젝트를 다 지우고 gitclone해서 런치 후 배포등 다른방법들을 다 진행해봐도 해결되지않아 질문남깁니다.
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
import- export 필수
약 7분경 css는 그냥 import로 불러오시는 강의 내용이 있는데요, 이전에 import를 하기 위해선 원본 파일에서 꼭 export를 해줘야한다고 말씀해주셨던 것 같아서요.js파일과 다르게 css 파일을 불러올때는 꼭 export를 하지 않아도 되는 걸까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 아무것도 안뜹니다.
수업 영상강의처럼 진행하는데 같은 링크를 걸어도 그림이 안뜹니다!!<html> <head> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <h2>Hello World</h2> <h3>Hello World</h3> <h4>Hello World</h4> <h5>Hello World</h5> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <p>안녕하세요 그랩입니다.</p> <br /> <p>안녕하세요 그랩입니다.</p> <a href="https://naver.com">네이버 넘어가기</a> <img src="https://cdn.pixabay.com/photo/2015/03/26/09/47/sky-690293__340.jpg" alt="구름 사진" /> </body> </html>
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의에 사용되는 노션 링크가 어디있을까요?
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요! 강의에 사용하시는 노션 링크가 영상 하단에 있다고 커뮤니티에서 찾아보았는데, 아무리 찾아도 없어서, 혹시 어디서 찾아볼수있을까요?
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그림 링크 오류
Failed to load resource: the server responded with a status of 403 () 이런 에러가 뜨는데 어떻게 해결하나요ㅜ
- 미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
에러는 안나는데 그림이 안뜹니다
그랩마켓 자바스크립트 적용하기 -2 편에서 다 되는데 농구공 그림이 안떠요 <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> </div> <div id="footer"></div> </body> <script> var product = [{ name : '농구공', price : 10000, seller : '조던', imagUrl : '/images/products/basketball1.jpeg' },{ name : '축구공', price : 50000, seller : '메시', ImageUrl : '/images/prodocts/soccerball1.jpg' },{ name : '키보드', price : 10000, seller :'그랩', ImageUrl : '/images/prodocts/keyboard.jpg' }]; document.querySelector("#product-list").innerHTML = '<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">' + '<img class="product-avatar" src="images/icons/avatar.png" />'+ "<span>그랩</span>" + "</div>" + "</div>" + "</div>" </script> </html>
- 해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
expo 시작 오류
expo를 global로 설치하고 init까지 한 후npm start를 했을 때 일단 아래처럼 에러가 발생합니다.Unable to find expo in this project - have you run yarn / npm install yet?-> 이건 npm install을 해서 해결 했습니다. 그런데 그 후에도 또 아래와 같은 에러가 발생합니다.PS D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile> npm start> grab-market-mobile@1.0.0 start> expo startStarting project at D:\Programming\study\Inflearn\FullStack\project\grab-market-mobileStarting Metro BundlerFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chainFetchError: request to https://api.expo.dev/v2/sdks/49.0.0/native-modules failed, reason: self signed certificate in certificate chain at ClientRequest.<anonymous> (D:\Programming\study\Inflearn\FullStack\project\grab-market-mobile\node_modules\node-fetch\lib\index.js:1501:11) at ClientRequest.emit (node:events:513:28) at TLSSocket.socketErrorListener (node:_http_client:494:9) at TLSSocket.emit (node:events:513:28) at emitErrorNT (node:internal/streams/destroy:157:8) at emitErrorCloseNT (node:internal/streams/destroy:122:3) at processTicksAndRejections (node:internal/process/task_queues:83:21)이건 어떻게 해결해야 하나요?