플러그인 질문
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 사용하시는 코드에서 오류가 났을때 빨간문자로 보이는 도움말? 은 무슨 플러그인을 사용하시는건가요?
- javascript
- react
- node.js
- 카카오공채-개발
athena1998
댓글 2
좋아요 0
조회수 74
묻고 답해요
172만명의 커뮤니티!! 함께 토론해봐요.
디스코드 문의
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 소개 영상에서는 디스코드 채널이 있는거 같은데요. 관련 링크가 없네요. 어디서 확인가능할까요?
- javascript
- react
- node.js
- 카카오공채-개발
Jim
댓글 2
좋아요 0
조회수 50
tailwind 화면 크기에 따른 ui 변화 기준
해결됨
React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
sm : 640 이상 md : 768 이상 lg : 1024 이상 2xl : 1536 이상 은 설정하신건가요? 기본 설정인가요?
- HTML/CSS
- javascript
- react
- node.js
- mongodb
kindjin12
댓글 1
좋아요 0
조회수 92
프로젝트 환경 세팅할 때 최신 노드 버젼을 사용하시는 분들은 참고하셔도 좋을 것 같아요~
미해결
탄탄한 백엔드 NestJS, 기초부터 심화까지
node 버젼은 20 버젼대입니다. 강의 자료 기반으로 버젼 업데이트를 해놓아서.. 헤매시는 분들은 참고하셔도 좋을 것 같아요! https://github.com/klmhyeonwoo/express-start
- node.js
- mongodb
- express
- nestjs
- ssr
인상적
댓글 1
좋아요 2
조회수 128
크롬 콘솔창 관련 질문 드립니다
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 다름이 아닌 원래 잘 작동하던 크롬 콘솔창에 react-dev 툴을 설치 하라는 문구만 나오고 작동을 하지 않습니다. 툴 설치도 해봤는데 버튼을 클릭해도 아무 문구도 뜨지 않고 , 필터창에 문구가 써있나 싶어 확인도 해봤습니다. 혹시 다른 해결법이 있을까요??
- javascript
- react
- node.js
- 카카오공채-개발
bitt2580
댓글 4
좋아요 0
조회수 109
[그랩님께]101강 안드로이드 에러들(Key prop)해결방법 궁금합니다.
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 을 듣고 있는데요 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 있습니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : 구체적인 에러 내용 [사진3] 스크롤은 적용이 안 된 것 같은데요, 상품이 2개 뿐이라 스크롤이 없는 건가요? [사진4] 사진 3 에 대한 구체적인 에러 ----> 어떻게 에러를 해결 할 수 있을까요 ? 안드로이드 스튜디오에서 상품 정보를 불러오지 못하는 것에 대해 서 어떻게 해결해야 할 지 차근 차근 잘 알려주셨으면 좋겠습니다 . 그리고 마지막 질문은 안드로이드 애물레이터가 잘 되는지 확인 하려면 grab-market-server에서 npm start를 해준 뒤 확인하면 되는건가요? 아니면 grab-market-mobile에서 npm start를 해준 뒤 a(=Open Android)를 누르면 되는 건가요? 아니면 둘다 동시에 npm start를 해주는 건가요? 그리고 아래에는 grab-market-mobile 폴더의 App.js 제 소스 코드를 아래에 첨부하겠습니다. import { StatusBar } from "expo-status-bar"; import React from "react"; import { StyleSheet, Text, View, Image, ScrollView } from "react-native"; import BasketballImage from "./assets/products/basketball1.jpeg"; import Avatar from "./assets/icons/avatar.png"; import {API_URL} from "./config/constants"; 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([]) React.useEffect(()=>{ axios.get(`${API_URL}/products`).then((result)=>{ setProducts(result.data.products); }).catch((error)=>{ console.error(error); }) },[]) return ( <View style={styles.container}> <ScrollView> <Text style={styles.headline}>판매되는 상품들</Text> <View style={styles.productList}> { products.map((product, index)=>{ return (<View style={styles.productCard}> <View> <Image style={styles.ProductImage} source={{uri: `${API_URL}/${product.imageUrl}`,}} 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={Avatar} /> <Text style={styles.productSellerName} >{product.seller}</Text> </View> <Text style={styles.productDate}>{dayjs(product.createdAt).fromNow()}</Text> </View> </View> </View>); }) } </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', paddingTop: 32, }, productCard: { width: 320, borderColor: 'rgb(230,230,230)', borderWidth:1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, ProductImage :{ width: '100%', height: 210 }, productContents : { padding: 8 }, productSeller : { flexDirection: 'row', alignItems: 'center' }, productAvatar: { width:24, height:24, }, productFooter: { flexDirection: 'row', justifyContent:'space-between', alignItems: 'center', marginTop: 12, }, productName : { fontSize: 16 }, productPrice: { fontSize: 18, fontWeight: '600', marginTop: 8 }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems:"center", }, headline : { fontSize: 24, fontWeight: "800", marginBottom:24 } }); 그랩님의 답변을 기다립니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
isbcom1004
댓글 2
좋아요 0
조회수 160
96. 12.19) 배포하기 강의가 9분짜리가 2분 밖에 재생이 되지 않아 진도가 나가지지 않습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
96. 12.19) 배포하기 강의가 9분짜리가 2분 밖에 재생이 되지 않아 진도가 나가지지 않습니다. 진도가 나가지지 않으니 퀴즈를 풀 수도 없고 진행이 안됩니다.
- javascript
- react
- node.js
- 카카오공채-개발
허성진
댓글 3
좋아요 0
조회수 84
배포하기 강의 내용이 잘못 올라가 있는 것 같습니다
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
96. 12.19) 배포하기 강의를 보면 원래는 9분이라 써있는 강의가 2분밖에 재생이 안되고 영상과 음성이 일치하지 않습니다. 영상 소리만 들어봤을 땐 바닐라 자바스크립트 강의 내용 일부인것 같은데 잘못 올라가 있는 것 같습니다!
- javascript
- react
- node.js
- 카카오공채-개발
yj
댓글 2
좋아요 0
조회수 68
85. 12.9) 일기 관리 기능 구현하기 2 음성이 다르게 나오는 문제
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
85. 12.9) 일기 관리 기능 구현하기 2 강좌를 듣는데 화면과 소리가 다르게 나옵니다. 소리는 자바스크립트 오브젝트 관련해서 이야기가 나오네요. 확인 부탁드려요.
- javascript
- react
- node.js
- 카카오공채-개발
murphy
댓글 1
좋아요 1
조회수 42
12.11 home 페이지 구현하기
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
수정버튼을 클릭해도 edit화면이 나오는게 아닌 이전에 만들었던 번호 페이지만 호출되는데 혹시 어디를 봐야할까요?
- javascript
- react
- node.js
- 카카오공채-개발
에렌
댓글 3
좋아요 0
조회수 87
82 12.6) css설정 이미지 정렬 오류
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
html, body { margin: 0px; width: 100px; background-color: rgb(246, 246, 246); } #root { background-color: white; max-width: 600px; width: 100%; margin: 0 auto; min-height: 100vh; height: 100%; box-shadow: rgba(100, 100, 100, 0.2) 0px 0px 29px 0px; } body * { font-family: "NanumPenScript"; } 이렇게 작성하셨는데 구현하신 화면 보면 root가 가운데 정렬 되어있지만 제가 구현하면 css는 좌측 세로 정렬 되는데 원인이 있을까요?
- javascript
- react
- node.js
- 카카오공채-개발
댓글 3
좋아요 0
조회수 92
리액트 설치시 vite와 create React APP 차이
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
선생님 인강 잘듣고 있읍니다 인강에선 react 설치시 vite 로설치하고 책에서는 create React App 으로 설치하는데 대략검색해보니 vite 설치시 효울적이고 빠르다고 하는데 책으로 공부하면 create React App으로 설치해도 상관없나요
- javascript
- react
- node.js
- 카카오공채-개발
ymckh1005
댓글 3
좋아요 0
조회수 227
깃헙 질문
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
깃헙에 강의 들으면서 매일 코드를 올리려고 하는데 어쨋든 강사님의 코드와 동일하게 올라가는 부분도 있고 저만의 프로젝트를 만들어서 올리는 부분도 있는데 올려도 되나요 ?
- node.js
- mysql
- mongodb
- express
- typescript
- socket.io
- jwt
한창규
댓글 2
좋아요 0
조회수 106
강의 1-1 수업노트의 로드맵 링크가 작동하지 않습니다.
미해결
[개정3판] Node.js 교과서 - 기본부터 프로젝트 실습까지
강의 1-1 수업노트에 공유된 로드맵 중 '프론트 로드맵 링크'가 정상적으로 작동하지 않습니다. 요청한 파일이 없다고 나오는데 확인 부탁드립니다!
- node.js
- mysql
- mongodb
- express
- typescript
- socket.io
- jwt
ggomsoo
댓글 1
좋아요 0
조회수 111
개발자 모드 활성화 시 반응형 처리
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
문득 강의 수강 중에 강사님께서 개발자모드를 활성화하면 전체적인 화면이 반응형으로 되어있는데 쭉 수강하다가 제꺼에서는 지정이 안되있어 어느 챕터를 놓쳤는지 감이 안옵니다ㅜㅜ 혹여나 다른 분들도 비슷한 사례가 있을까싶어 여쭈어봅니다.
- javascript
- react
- node.js
- 카카오공채-개발
임스헝
댓글 1
좋아요 0
조회수 90
isLoading 기능 추가했는데, 존재하지 않는 일기 입니다.
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
isLoading 기능을 추가했는데 수정하기, 다이어리 페이지에서 새로고침하면 존재하지 않는 일기입니다. 라고 나오네요. https://github.com/pdh9311/onebite-react 작성했던 코드 입니다. import { Route, Routes } from "react-router-dom"; import "./App.css"; import { createContext, useEffect, useReducer, useRef, useState } from "react"; import Diary from "./pages/Diary"; import Edit from "./pages/Edit"; import Home from "./pages/Home"; import New from "./pages/New"; import Notfound from "./pages/Notfound"; function reducer(state, action) { let nextState; switch (action.type) { case "INIT": return action.data; case "CREATE": nextState = [action.data, ...state]; break; case "UPDATE": nextState = state.map((item) => String(item.id) === String(action.data.id) ? action.data : item ); break; case "DELETE": nextState = state.filter( (item) => String(item.id) !== String(action.data.id) ); break; default: nextState = state; } localStorage.setItem("diary", JSON.stringify(nextState)); return nextState; } export const DiaryStateContext = createContext(); export const DiaryDispathContext = createContext(); function App() { const [isLoading, setIsLoading] = useState(true); const [data, dispatch] = useReducer(reducer, []); const idRef = useRef(0); useEffect(() => { const storedData = localStorage.getItem("diary"); if (!storedData) { setIsLoading(false); return; } const parsedData = JSON.parse(storedData); if (!Array.isArray(parsedData)) { setIsLoading(false); return; } let maxId = 0; parsedData.forEach((item) => { if (Number(item.id) > maxId) { maxId = Number(item.id); } }); idRef.current = maxId + 1; console.log(parsedData); dispatch({ type: "INIT", data: parsedData, }); setIsLoading(false); }, []); const onCreate = (createdDate, emotionId, content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, createdDate, emotionId, content, }, }); }; const onUpdate = (id, createdDate, emotionId, content) => { dispatch({ type: "UPDATE", data: { id, createdDate, emotionId, content, }, }); }; const onDelete = (id) => { dispatch({ type: "DELETE", data: { id, }, }); }; if (isLoading) { <div>데이터 로딩중입니다....</div>; } return ( <> <DiaryStateContext.Provider value={data}> <DiaryDispathContext.Provider value={{ onCreate, onUpdate, onDelete }}> <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary/:id" element={<Diary />} /> <Route path="/edit/:id" element={<Edit />} /> <Route path="*" element={<Notfound />} /> </Routes> </DiaryDispathContext.Provider> </DiaryStateContext.Provider> </> ); } export default App; import { useContext, useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; import { DiaryStateContext } from "../App"; //커스텀 훅 const useDiary = (id) => { const data = useContext(DiaryStateContext); const [currDiaryItem, setCurrDiaryItem] = useState(); const nav = useNavigate(); useEffect(() => { console.log("useDiary"); const currentDiaryItem = data.find( (item) => String(item.id) === String(id) ); if (!currentDiaryItem) { window.alert("존재하지 않는 일기입니다."); nav("/", { replace: true }); } setCurrDiaryItem(currentDiaryItem); }, [id]); return currDiaryItem; }; export default useDiary;
- javascript
- react
- node.js
- 카카오공채-개발
padohy
댓글 3
좋아요 0
조회수 99
[재질문][그랩님 답변 부탁드립니다]101강
미해결
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 이어서 중간에 아래 사진 과 같은 절차 를 겪었었는데요, 필요할 것 같아 참고 로 스샷을 첨부합니다. axios 설치 후 grab-market-mobile에서 npm start하니 다른 프로세스에의해 포트 8081이 사용 되고 있는데 8082 포트를 대신 쓸거냐는 질문 에서 y or n 하라는데 y하게 되었는데요 , 이 다음에 어떻게 해야 그랩님 강의와 똑같이 잘 작동할 수 있을까요? 더불어서 또 다른 에러가 발생하는데요, 또 다른 에러는 cmd에서 ngrok http 8080 입력 후 포워딩 주소 를 크롬브라우저에 복사 후 붙여넣으면 , 이전 밑에 질문에서는 정상 작동되었으나 지금 은 아래와 같이 바뀐 에러 가 발생 하였습니다. 해결법을 모르기에 아래에 사진을 첨부합니다. 꼭 답변 부탁 드립니다. 그랩님의 답변 부탁 드립니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
isbcom1004
댓글 2
좋아요 0
조회수 192
저 강의 들으면서 작성한 코드를 github에 올려도 되나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 좋은 강의 들으며 많은 것을 배우고 있어서 감사히 생각하고 있습니다. 그런데 강의 들으면서 작성한 코드 (예를 들면 감정 일기장 코드)를 제 github repository에 public으로 올려도 되나요? 답변해주시면 감사합니다.
- javascript
- react
- node.js
- 카카오공채-개발
김동욱
댓글 2
좋아요 0
조회수 102
[그랩님 답변 부탁드립니다]101강 Axios 에러와 502 Bad Gateway 질문
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 강의 잘 듣고 있습니다. 다름이 아니라 궁금한 사항( =에러 해결방법 ) 이 필요해서 글을 남기게 되었습니다. 101강 에서 Axios 에러(400) 가 안드로이드 스튜디오 에뮬레이터에서 발생 하고 이어 아래의 추가 사진2 에서 보시다시피 502 Bad Gateway가 발생 하여 어떻게 해결 할 수 있는지 에 대해 알고 싶어서 질문 드립니다. 일단 101강 처음부터 ~ 4분 52초까지 그랩님께서 작성하신 소스코드를 똑같이 작성 후 결과 를 보려하는데, 농구공 그림 (세부사항:판매자:그랩,가격,상품명등등) 이 나오지 않아 서 이것을 어떻게 하면 그랩님과 같은 결과를 볼 수 있을지에 대해 여쭈어봅니다. 사진 1 첨부 : 판매되는 상품들 밑에 100강만 들었을 시에 농구공 화면이 잘 나왔으나 101강 4분 52초까지 의 내용의 소스코드를 입력 후 결과값 보면 400 에러도 발생하고 농구공도 안나오게 됩니다. 어떻게 해야 하나요? 사진 2 첨부 : ngrok http 8080후 진행 하면, 아래와 같이 502 Bad Gateway라고 뜨는데, 이 에러 의미와 무엇이 잘못된건지 그리고 어떻게 해결 해야 하는지 답변 주시면 좋겠습니다. 그랩님의 답변을 기다립니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
isbcom1004
댓글 2
좋아요 0
조회수 147
감정일기장 최종완성본 링크는 어디에있나요??
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장 최종완성본 링크는 어디에있나요??
- javascript
- react
- node.js
- 카카오공채-개발
yuljeonjw
댓글 2
좋아요 0
조회수 79
인기 태그
인프런 TOP Writers
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv