묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
React.memo 를 TodoItem 에 적용하는 부분에서 질문 있습니다.
const TodoItem = ({ id, isDone, content, date, onUpdate, onDelete }) => { const onChangeCheckbox = () => { onUpdate(id); }; const onClickDeleteButton = () => { onDelete(id); }; return ( <div className="TodoItem"> <input onChange={onChangeCheckbox} type="checkbox" checked={isDone} /> <div className="content">{content}</div> <div className="date">{new Date(date).toLocaleDateString()}</div> <button onClick={onClickDeleteButton}>삭제</button> </div> ); }; export default memo(TodoItem, (prevProps, nextProps) => { // 반환값에 따라, Props가 바뀌었는지 안바뀌었는지 판단 // T -> Props 바뀌지 않음 -> 리렌더링 X // F -> Props 바뀜 -> 리렌더링 O if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false; return true; });TodoItem 의 props 에 함수(객체 타입의 값)을 받고 있어서export default memo(TodoItem);이렇게만 적용할 경우 리렌더링 시, 함수를 새로운 객체로 인식해서 TodoItem 컴포넌트 입장에서는 props가 바뀌었다고 인식한다는 거 까지는 이해가 됐습니다.근데 memo 의 두 번째 인수에서if (prevProps.id !== nextProps.id) return false; if (prevProps.isDone !== nextProps.isDone) return false; if (prevProps.content !== nextProps.content) return false; if (prevProps.date !== nextProps.date) return false;이렇게만 비교하면 결국 onUpdate, onDelete 는 비교를 하지 않은거같은데 왜 동작이 잘 되는지 모르겠습니다.true 값을 반환해주면 함수는 변하지 않았다고 정해주는 걸까요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
생성한 newTodo 객체를 setTodos 를 이용해 추가하는 부분에서 질문 있습니다
const onCreate = (content) => { const newTodo = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }; setTodos([newTodo, ...todos]); };지금처럼 이렇게 newTodo 를 todos 배열의 맨 앞에 붙이면 원래 기존의 todos 요소 전체의 인덱스가 변화해야해서 동작시간이 오래 걸린다고 앞의 수업에서 들었던 것 같아서 왜 이렇게 하는지 의문이 들었습니다.이렇게 해야 나중에 등록한 newTodo 객체가 맨 위로 올라오게 되어서 그런건가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Components 와 Profiler 탭이 나오지 않습니다.
크롬에서 추가하고 설정 다 따라서 했는데 components 탭이 나오지 않습니다...
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
forEach에서 continue, break 동작안하는 문제
forEach에서 continue, break 동작안하는 문제 가 발생하였는데continue랑 break를 쓸거면 일반적인 for문을 이용할 수밖에 없는 건지 궁금합니다. ^^
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
CityList개발-handleLoadMore함수질문
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂 안녕하세요 강의에 따라 그림이 로드 되는 것까지는 성공했지만 이후 handleLoadMore를 넣고 배열이 나오지 않아요...그리고 handleLoadMore함수가 어떻게 실행까지 이어지는지 알려주세요예) handleLoadMore가 new CityList의 인수로 지정되고 cityList 함수에 부여되어 00줄 console.log함수로 출력추가한 코드만 넣었습니다...! 주석 단 부분으로 확인해보니이렇게 작동됨은 확인했습니다! const cityList = new CityList({ $app, initialState: this.state.cities, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request(newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord); } }); //console.log(cityList) ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
react도 포멧팅 스타일이 따로 있나요?
구글 스타일 처럼 대표적인 포맷팅 스타일이 있나요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
socket connect 오류
안녕하세요.nestJS강의를 잘 시청하고있습니다.진행하는 과정에서 Socket Connect 연결 요청시 Error: socket hang up 오류가 발생하며 연결이 되지 않는 문제가 발생 하였습니다.저는 현재 NestJS최신버전인 11.1.6버전을 이용해 진행중입니다.PostMan에서 Connect 시도시 아무런 로그가 남지 않습니다.혹시 아래 문제에 대해서 도움을 받을 수 있을까요?
-
미해결바이브코딩으로 Spring Boot 게시판 개발하기 (Claude, Gemini, OpenAI Codex)
공유 자료 요청합니다
명령어와 절차들을 기록한 공유자료를 찾을 수가 없네요.위치 알려주시면 감사하겠습니다.
-
미해결[React 1부] 만들고 비교하며 학습하는 React
리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?
강사님, 리액트 1부 강의를 너무 알차게 수강한 터라인프런에 올리신 리액트 1,2부의 후속 강의나 준비 중인 다른 강의 계획이 있는 지 궁금합니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
12.13 new 페이지 구현하기 1.UI 부분에서 마지막 설명부분이 이해가 가지 않습니다
마지막에서 작성완료와 취소하기 버튼 부분에 배경색 하얀색 부분 즉 #root background-color:white부분이 적용되지 않았습니다.이때 해결방법을 body에 display:flex를 넣음으로써 해결이 된다하셨는데, 이게 root부분에 어떤 영향을 끼치길래 height가 늘어났는지 궁금합니다
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
객체와 배열의 const 차이
const로 했을 때 객체는 수정이 되고 배열은 수정이 안된다는 설명 부분이 이해가 잘 안됩니다. 고유 ID가 아니라는 말도 이해가 잘 안되는데 보충 설명을 받을 수 있을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
const 객체/배열 차이
왜 객체는 const로 했을 때 수정이 되고, 배열은 const로 했을 때 수정이 안 되는지 이해가 잘 안됩니다.
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
header 개발 새로고침 오류
검색어 입력 후 새로고침을 하면 Failed to load resource: the server responded with a status of 500 () 이와 같은 오류가 뜨는데 왜 그러는걸까요?그리고 그 밑에 SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON 이렇게 함께 콘솔창에 나옵니다.
-
해결됨프론트엔드 마스터클래스
배포 관련 내용 추가될 예정이 있을까요?
안녕하세요, 좋은 강의 잘 보고 있습니다.혹시 CDN 등 배포 관련 섹션이나 내용이 추가될 예정이 있을지 궁금합니다.
-
해결됨Vanilla JavaScript로 직접 구현하는 Notion
만약 문서 수가 매우 많아진다면 성능 이슈는 없을까요?
문서 수가 수백개 이상으로 늘어나면 findDoc(), childrenOf() 등의 함수에서 전체 배열을 순회하는 부분이 성능면에서 문제가 될 수 있을까요? 만약 그렇다면 최적화할 수 있는 방법은 어떤 것이 있을까요?
-
미해결React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
섹션 10을 들었을때 궁금증
primitive는 map을 통해 texture를 불러올 수 없을까요? 다른 텍스쳐 불러오는 연습을 하면서 Material에서는 map이라는 속성을 통해 texture를 불러올 수 있다고 알게 되었는데 primitive에서는 안되서 궁금합니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useState vs useReducer 실무에서 주로 사용하는 것은??
강의를 통해 useReducer를 사용하면 복잡한 useState의 set 함수 들로 case로 깔끔하게 정리할 수 있는 것을 보았습니다.그렇다면 실무에서는 어떤 것을 더 많이 사용하나요?아니면 두 hooks의 대표 사용하는 케이스 ?? 경우 들을 알려주시면 감사하겠습니다!!! 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
리액트 기본기 이해도 기준에 대해 질문드립니다
강의를 통해 React의 여러 개념을 배웠습니다. 어느 정도 수준에 도달해야 리액트의 기본기를 제대로 이해했다고 스스로 판단 할 수 있을 지 궁금합니다.예를 들어, 이 강의에서 다룬 TodoList 프로젝트를 혼자서 처음부터 끝까지 구현할 수 있는 정도라면, React의 핵심원리를 충분히 체화했다고 볼 수 있을까요 ?
-
미해결[React 2부] 고급 주제와 훅
pushState로 주소를 바꾸면 렌더링이 안 되는 이유가 궁금합니다.
pushState로 경로를 바꿀 때는 렌더링이 다시 일어나지 않는데,popstate 이벤트에서는 왜 렌더링이 필요한 건가요
-
해결됨자바스크립트로 배우는 자료구조 & 알고리즘 (개념+문제풀이)
알고리즘 개념에 대한 추천 자료문의
안녕하세요. 이제 막 자료구조와 알고리즘을 알아가고 있습니다. 선생님의 강의 덕분에 천천히 음미하며 재밌게 수업을 듣고 있습니다. 혹시 이런 제게 추천할 만한 자료나 사이트가 있으실까요?