묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(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의 예제를 위해서인지, 아니면 다른 이유가 있는지 설명해 주시면 정말 감사하겠습니다
-
미해결SVG 멀티 스트로크 스크롤 애니메이션
배 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 과정이 너무 기대가되는데 혹시 언제 오픈 예정이신지 너무 궁금합니다.
-
미해결SVG 멀티 스트로크 스크롤 애니메이션
영상이 안보여요
영상이 안보입니다다른 강의는 보이는데 왜이럴까요.
-
해결됨생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
8강 재생이 안 됩니다
8강 재생이 안 되네요! 오류인가요??
-
해결됨생성형 AI로 웹 사이트 제작부터 배포(w. Chat GPT, Cursor AI, Database)
안녕하세요! 혹시 코드 내용은 따로 안 올려주시나요??
안녕하세요. 수업 잘 듣고 있습니다.혹시 코드 내용은 따로 안 올려주시는지 궁금합니다.
-
해결됨React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드
배포 후 모바일에서 접속하면 게시판 게시글이 안보이는 문제
안녕하세요. 먼저 강의 잘 들었습니다. 다름이 아니라 배포 후 웹으로는 업무게시판의 게시글이 잘 보이는데 모바일로 접속 시에는 게시글이 없는 것으로 나옵니다.웹(개발자 도구로 모바일 디바이스 버전으로 봐도 잘 보입니다) 모바일 이유가 뭔지 궁금합니다~
-
해결됨[코드캠프] 시작은 프리캠프
싸이월드2 관련 질문 드립니
<body> <div class="wrapper"> <div class="wrapper__header"> <div class="contents__title"> <div class="title">Updated news</div> <div class="subtitle">TODAY STORY</div> </div> <div class="divideLine"></div> <div class="contents__body">오늘의 기분 너무 좋음</div> </div> <div class="wrapper__body"> <div class="contents__title"> <div class="title">My Video</div> <div class="subtitle">INTRODUCE YOURSELF</div> </div> <div class="body__video"></div>.contents__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; } .contents__body{ font-size: 11px; color: gray; } .wrapper__body { width: 100%; height: 270px; background-color: aqua; } .body__video { width: 100%; height: 240px; background-color: #c4c4c4; }피그마에서는 my video 밑 회색 부분이 사이즈가 width 464px height 240px 이길래 width는 100%로 주고 height 240px로 설정했는데, 이렇게 안맞길래, height 100%로 했더니이렇게 됩니다.. 왜이렇게 될까요?? 100% 이면 파란 부분까지 회색 부분도 가야하는 것 아닌가요?자식 클래스는 부모 클래스 따라오는 걸로 알고 있었는데 이상하게 되어서 당황스럽습니다.. 가르쳐주시면 감사드리겠습니다. My Video 라인에서 조금 떨어트리고 싶어서 .body__video { width: 100%; height: 100%; background-color: #c4c4c4; margin: 15px 0px 25px 0px; } margin 줬더니padding은 먹지도 않는데.. 제가 뭘 잘 못 알았을까요ㅠㅠ?
-
미해결JavaScript 알고리즘 베스트 10
학습방법과 방향성을 잡아주시면 감사하겠습니다.
제가 문제를 풀때, 너무 하드코딩을 하는것 같이 느껴집니다.우선 문제를 먼저 풀어보고, 강의를 듣고 있는데, 선생님이 푼 방법으로 풀려고 노력하는게 좋을까요? 아니면, 선생님이 푼 방법으로 바꾸려고 노력하는게 좋을까요??제가 짠 코드는 이렇습니다.function solution(data){ let answer = []; let rotten_carret = 0; let rotten_carret_count = 0; //일단 for문으로, carret 밭 전체 탐색 for(let i = 0; i < data.length; i++) { for(let j = 0; j < data[i].length; j++) { //#일때 썩은당근 갯수 ++ if(data[i][j] === '#') { rotten_carret++; } //만약 0이라면 if(data[i][j] === 0) { //빈곳에서 주변 탐색을 통한 썩은 당근 갯수 구하기 for문 for(let k = (i-1); k <= (i+1) && k < data.length; k++) { for(let f = (j-1); f <= (j+1) && f < data[i].length; f++) { if( (k >= 0 && f >= 0) && (k!==i || f!==j)) { if(data[k][f] === '#') { //console.log${i},${j}일때 ${k},${f} 엔 ${rotten_carret_count}); rotten_carret_count++; } } } } } } } answer.push(rotten_carret); answer.push(rotten_carret_count); return answer;} 어떤 방식으로 학습하는 것이 더 효율적일지 의문이 들어 이렇게 문의 드립니다.
