묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
자바스크립트 이해도
자바스크립트 부분이 끝났는데, 혹시 자바스크립트에 대한 이해도는 어느 정도로 되어야 하나요,테스트 해볼 수 있는 방법이 있을까요?(미션 퀴즈를 혼자 처음부터 못 풀면 다시 복습하고 혼자 할 수 있을때까지 하는게 답 안 보고 하는게 맞을까요?)다음 챕터로 넘어가기전에 확인하고 싶어서 질문합니다 🙂 !
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님, 해결되지 않은 에러 메시지 [꼭] 답변 부탁 드립니다.
그랩 선생님, 좋은 강의 만들어 주셔서 잘 듣고 있습니다.그런데 아무리 해도 에러가 나는 것을 해결하지 못하고 있어 2주 이상 진도를 나가지 못하고 있어 부득이하게질문을 여러번 올리게 됩니다. 현재 [그랩마켓] React로 웹 개발하기 -2 듣고 있는데요,1.그랩 선생님 소스 코드와 동일하게 아래 작성한 index.js 소스 첨부하는데요,실행하면,1초 동안 잠깐 판매되는 상품들 이미지 없이 전체 페이지 뜨다 바로 아래 첨부한 그림과 같이에러가 발생 합니다.이 에러는 어떻게 해결 할 수 있을까요?--------2. index.js 소스 아래에 작성 첨부 합니다. import './index.css'; import axios from "axios"; import React from 'react'; function MainPage(){ const [products, setProducts]=React.useState([]); React.useEffect( function(){ axios.get("이곳에는 제 mock 목 서버 주소를 넣었습니다/products") .then(function(result){ const products=result.data.products; setProducts(products); }).catch(function(error){ console.error("에러 발생:",error); }); },[]); return ( <div> <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){ return ( <div className="product-card"> <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> <span className="product-seller"> <img className="product-avatar" src="../images/icons/avatar.png" /> <span>{product.seller}</span> </span> </div> </div> ); }) } </div> </div> <div id="footer"></div> </div> ); } export default MainPage;그리고, 추가적으로 아래 그랩님 답변 본 뒤 다시 시도해 본 후 질문이 있어 추가적으로 글을 적습니다.현재 postman을 실행하고요, 제 해당 목 mock 서버 주소를 입력 후 끝에 /products까지하면요, 아래와 첨부한 사진과 같이 잘 데이터를 받아오는 것 같은데요, 위에 에러 화면이 그대로 표시되어 어떻게 해결해야 하는지 방법을 모르겠습니다. 조금 구체적으로 어떻게 해결해야 하는지 단계별로 친절한 설명 부탁드립니다 위에는 mock 서버인 postman(포스트맨) 화면이고요,아래는 크롬 브라우저 에러 메시지를 첨부합니다. 참고> app.js 소스 첨부합니다.import logo from './logo.svg'; import './App.css'; import MainPage from "./main/index.js" function App() { return ( <div> <MainPage /> </div> ); } export default App; 또한 만약 그랩님께서 제 소스를 보시고 수정하여 에러가 해결된 완성된 index.js 소스가 있다면요,최종 완성된 수십 줄의 소스 코드를 아래 답변 댓글에 길더라도 다 첨부해주시면 완성된 소스 코드를 그대로 복사하여 vs code에 붙여 넣기 하고 싶은데요, 아래 답변 글에 남겨주시면 감사하겠습니다.-------------------------------------------------------------------------------------------------그리고, 아래 글에 나와 있는 답변데로,TypeError: Cannot read properties of undefined (reading ‘map’) 해결 방법서버 데이터 문제로 인한 map 함수 에러 고치기React 데이터 바인딩과 undefined 에러 처리위 해결책의 코멘트와 답변 대로 수정해 보아도 에러가 해결 되지 않았습니다.어떻게 해결 해야 하는지요? 빠른 답변 부탁 드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
context를 사용하니 Editor 컴포넌트 최적화가 풀리는 이유
안녕하세요. 강의 잘 듣고 있습니다.context 를 사용하기 전 코드에서 export default memo(Editor);Editor 컴포넌트에도 memo 를 사용해서 TodoItem의 수정/삭제로 인해 계속 리렌더링되는 것을 막는 최적화를 했었는데요. context를 사용하고 나니까 Editor 컴포넌트의 최적화가 풀리는 이유가 궁금합니다.useCallback과 useMemo를 사용해서 함수를 App 컴포넌트가 마운트 될 때 한번만 생성하고 3개의 함수를 묶은 객체도 다시 생성되지 않도록 만들었는데, Editor 컴포넌트는 컨텍스트에서 onCreate 함수만 받아서 사용하고 있는데, 왜 리렌더링이 발생하나요?챗지피티에 질문을 했더니,"props가 없는 상태에서 useContext만 쓰고 있으면 memo는 props 비교를 하지 못해서 무조건 리렌더링 발생한다" 라고 하는데맞는 말인가요?맞는 말이라면 설명 좀 부탁드립니다.ㅠㅠ
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
이미지 파일의 경로 설정에 대한 질문입니다.
src 폴더 안에 pages폴더와 assets폴더가 있는데 왜 경로를 ../../assets 이렇게 잡아야 하는 거죠? .. 을 두 번 쓰면 두 번 위로 올라가는 거니까 src 폴더 밖에서 assets 폴더를 찾겠다는 거 아닌가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vite 리액트 설치에 대해 질문있습니다.
안녕하세요 리액트 설치 에러에 대해 질문이 있습니다. 원래 vite로 리액트를 설치해서 잘 사용하고 있었는데 어제 새로운 프로젝트를 할려고 vite로 리액트를 설치했고 npm i 명령어로 node_modules를 받은 후 npm run dev로 실행을 하니 이미지처럼 오류가 계속 나더라구요. 그래서 저 에러에 대해 이것저것 찾아보니 node버전 문제라고 나오는데 현재 버전은 v20.11.1 인데 뭐가 문제인건지 모르겠습니다.
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
선생님 안녕하세요
선생님 안녕하세요 무료강의 들으면서 말도 안 되는 구성에 말도 안 되는 가격으로 또 처음 출시시 할인까지해주셔서 너무 감사합니다. 이전 풀스텍 강의 바로 결제했고, 다른거 하면서 무료강의부터 듣고 학습중인데이번에 나온 리액트 강의도 당연 구매해서 학습할 예정인데, 이 전에강의는 수강기간이 무제한으로 나와있던데지금 리액트 포함 강의는 36개월만 들을수 있는건가요? 물론 몇회독을 할수있는 시간이긴한데, 전에 강의랑 비교해서 이 강의는 수강기간이 무제한이 아니라 문의글 남겨봅니다.항상 감사합니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
props 에 불이 안켜지죠...?
불이 왜 안켜지는거죠...?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
자바스크립트 첫걸음 교재 질문..
자바스크립트 첫걸음 교재 책을 구매했는데이 교재로 웹 프론트엔드를 위한 자바스크립트 첫걸음, 한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지교재로 이 두개 강의 같이 공부할수 있나요? 아니면 별도로 정리를 해야할가요
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드3
<!DOCTYPE html> <html lang="ko"> <head> <title>Game</title> <link href="./styles/game.css" rel="stylesheet"> </head> <body> <div class="wrapper"> <div class="wrapper__header"> <div class="header__title"> <div class="title">GAME</div> <div class="subtitle">TODAY CHOICE</div> </div> <div class="divideLine"></div> </div> <div class="game__container"> <img src="./images/word.png"> <div class="game__title">끝말잇기</div> <div class="game__subtitle">제시어 : <span id="word">코드캠프</span></div> <div class="word__text"> <input class="textbox" id="myword" placeholder="단어를 입력하세요"> <button class="search">입력</button> </div> <div id="result" class="word__result">결과!</div> </div> <div class="game__container"> <img src="./images/lotto.png"> <div class="game__title">LOTTO</div> <div class="game__subtitle">버튼을 누르세요.</div> <div class="lotto__box" id="lottobox"> <span id="lotto1">3</span> <span id="lotto2">5</span> <span id="lotto3">10</span> <span id="lotto4">24</span> <span id="lotto5">30</span> <span id="lotto6">34</span> </div> <button class="button">Button</button> </div> </div> </div> </body> </html>* { box-sizing: border-box; margin: 0px; } html, body{ width: 100%; height: 100%; } .wrapper{ width: 100%; height: 100%; padding: 20px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .wrapper__header{ width: 100%; display: flex; flex-direction: column; } .header__title{ display: flex; flex-direction: row; align-items: center; } .title { color: #55b2e4; font-size: 13px; font-weight: 700; } .subtitle{ font-size: 8px; padding-left: 5px; } .divideLine{ width: 100%; border-top: 1px solid gray; } .game__container{ width: 222px; height: 168px; border: 1px solid gray; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 20px; background-color: #f6f6f6; } .game__title{ font-size: 15px; font-weight: 900; } .game__subtitle{ font-size: 11px; color: #999999; } .word__result{ font-size: 11px; font-weight: 700; } .word__text{ width: 100%; display: flex; flex-direction: row; justify-content: space-between; } .textbox{ width: 130px; height: 24px; border-radius: 5px; } .search{ font-size: 11px; font-weight: 700; width: 38px; height: 24px; } .lotto__box { width: 130px; height: 21px; border: 1px solid #000000; border-radius: 8px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 8px; font-size: 10px; font-weight: 700; font-family: Malgun Gothic; background-color: #ffe400; } .button { width: 62px; height: 24px; border-radius: 5px; font-size: 11px; font-weight: 700; }질문 1. game__container 에서 display 하고 align-items center 로 했는데 왜 끝말잇기 칸은 사이사이에 공백이 잘 들어가 있는데 lotto 부분은 button 부분이 이상하게 붙어있습니다.ㅠ똑같은 game__container 적용 받는데 왜 lotto button 칸만 이럴까요ㅠㅠ?혹시 div 설정 안해서 그런가 해서<div class="button"><button>Button</button></div>로 해도 똑같습니다..왜 이런 현상이 발생할까요ㅠㅠ?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
part1을 수강하지 않아도 지장이 없다 하셨는데
part1 및 전반적인 IT배경지식이 없으면 진도를 따라가기 상당히 어렵게 강의가 구성되어 있습니다.
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의에 관해 문의 드립니다.
part1 을 수강하지 않아도 part2 수강에 지장이 없다고 하셨는데 프로그램 설치부터 생략을 하셔서 강의 수강이 진행이 안 됩니다. 어떻게 수강을 진행하는게 바람직할까요?
-
해결됨[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
로그인 엔드포인트 관련 질문
안녕하세요 코팩님 강의 정말 유용하게 듣고 있습니다 강의를 완강하고 난뒤 코드를 분석하고 있는 중 이상하다고 느낀 부분이 있어 질문드립니다 @Post('login/email') @IsPublic() @UseGuards(BasicTokenGuard) postLoginEmail( @Headers('authorization') rawToken: string, ) { // email:password -> base64 // asdkljoijzxlxck;vjaosi;dfjawe;lkrj -> email:password const token = this.authService.extractTokenFromHeader(rawToken, false); const credentials = this.authService.decodeBasicToken(token); return this.authService.loginWithEmail(credentials); } 이 부분에서 이미 Guards(BasicTokenGuard)가 사용자를 식별하고 심지어 인증까지 맡아 요청 부분에 user 정보까지 넣어둡니다. 그러면 이미 BasicTokenGuard가 로그인의 역할을 다 했는데 왜 한번 더 검증하는지 궁금해서 질문 남깁니다.단순히 Guards의 예제를 위해서인지, 아니면 다른 이유가 있는지 설명해 주시면 정말 감사하겠습니다
-
미해결html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정
배 svg 그리는 방법
배나 비행기 같은 svg 요소를 구현할 때, 하나의 완성된 SVG 대신 여러 개의 작은 요소들로 분리해서 겹치는 방식을 사용하는 이유가 궁금합니다.
-
미해결핵심만 골라배우는 JavaScript
추가 강의
강의가 좋아서 html,css,js,typeScript,react 전부 구매했는데혹시 깃은 강의제작 혹시 안하시나요?깃도 수코딩에서 배우고싶어요ㅜ
-
해결됨프론트엔드 빌드 시스템 완벽 가이드 - Part.1: 모듈 시스템
캐싱 단계 질문
안녕하세요. 좋은 강의 감사합니다.캐싱 관련해서 이해가 잘 안 되는 부분이 있어 질문드립니다.강의에서는 modules[moduleId][0].call의 첫 번째 인자로 module.exports를 넘겨주는 것이 캐싱과 관련 있다고 설명해주셨는데요.제가 코드를 보기엔 module.exports가 thisArg로 전달되긴 하지만, 실질적인 캐싱은 함수 내부에서 세 번째 인자인 module 객체를 직접 수정하면서 (module.exports = { add };) 이뤄지는 것으로 보입니다.즉, thisArg로 전달된 module.exports는 실제로 의미 있는 쓰임새가 없고, 캐싱은 module.exports를 직접 설정함으로써 발생하는 것 아닌가 싶은데, 혹시 제가 잘못 이해한 걸까요?
-
해결됨이거 하나로 종결-스프링 기반 풀스택 웹 개발 무료 강의
vue + springboot 과정 오픈예정일
안녕하세요 선생님... 선생님의 vue + springboot 과정이 너무 기대가되는데 혹시 언제 오픈 예정이신지 너무 궁금합니다.
-
미해결html - SVG scroll animation 효과 - 특별한 포트폴리오를 위한 그림 15종 증정
영상이 안보여요
영상이 안보입니다다른 강의는 보이는데 왜이럴까요.
-
해결됨생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
8강 재생이 안 됩니다
8강 재생이 안 되네요! 오류인가요??
-
해결됨생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
안녕하세요! 혹시 코드 내용은 따로 안 올려주시나요??
안녕하세요. 수업 잘 듣고 있습니다.혹시 코드 내용은 따로 안 올려주시는지 궁금합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포 후 모바일에서 접속하면 게시판 게시글이 안보이는 문제
안녕하세요. 먼저 강의 잘 들었습니다. 다름이 아니라 배포 후 웹으로는 업무게시판의 게시글이 잘 보이는데 모바일로 접속 시에는 게시글이 없는 것으로 나옵니다.웹(개발자 도구로 모바일 디바이스 버전으로 봐도 잘 보입니다) 모바일 이유가 뭔지 궁금합니다~
