묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useRef, useState count 비교
안녕하세요 강사님!강의에서 useRef는 값이 변경되었을 때 리렌더링을 발생시키지 않으므로 값이나 DOM 요소를 참고하고 싶을 때 사용한다고 하셨는데요. 1)강의 예제 중, 수정이 일어난 횟수를 countRef에 담기도록 하셨는데, 이 때 값이 변경되어 'onChange 함수에서 setInput 함수를 호출함으로써 리렌더링이 발생하는 것이고, countRef.current++는 리렌더링이 발생함과 동시에 값이 증가 되는 것 뿐이다'라고 이해하면 되는 것일까요? 1번 코드 참고하시면 됩니다! 2)위처럼 이해를 하다가 문득 궁금한 것이 생겼는데, 2번 코드처럼..useState의 input 객체에 count 프로퍼티를 추가하여 0으로 초기화 해주었습니다.그리고 onChange 함수에서 setInput으로 count를 +1 시켜주었는데요.1번 예제처럼 수정할 때 마다 count가 +1 되는 것을 의도하였는데,이 때 textarea에서 ㄱ을 입력했다면,setInput 함수는 한 번 호출되며 textarea 수정과 count 증가가 동시에 발생하고 'textarea 수정 + count 증가' 이렇게 리렌더링이 한 번 발생하는 걸까요? 3) 만약 2번 질문의 답이 '결국 setInput 함수가 한 번 호출되며 작동하는 것이므로 리렌더링은 한 번이다.' 라면, 1번과 2번 코드는 '리렌더링이 발생할 때 마다 count 증가'라는 점에서 같은 결과인 걸까요..? 질문이 좀 복잡하지만.. 답변해주시면 감사하겠습니다..! 1) useRef 사용하여 countimport { useRef, useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", }); const countRef = useRef(0); console.log(input); console.log(countRef.current); const onChange = (e) => { countRef.current++; setInput({ ...input, [e.target.name]: e.target.value, }); }; return ( <div>...</div> ) }2) useState로 countimport { useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", count: 0, }); console.log(input); const onChange = (e) => { setInput({ ...input, [e.target.name]: e.target.value, count: input.count + 1, }); }; return ( <div>...</div> ) }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안된다고했던 이유가 무엇이었는지 모르겠습니다
영상 8분 57초에 onClick 이벤트에 결과값을 넣으면 안된다고 배웠는데 그게 어디에서 그랬는지 기억이 안납니다 ㅠㅠ
-
미해결Vue 3 시작하기
파일 생성 방법이 다른건가요?
안녕하세요 회사에서 vue를 사용해 퍼블을 해야돼서 인강을 구매했는데, 제가 생성한 파일이랑 형식이 달라서 어떻게 따라가야 할 지 문의드립니다. 제가 알고 있는 화면 구성은 아래 사진인데 Vue.create 이런건 어떻게 바꿔야 하는지 모르겠습니다ㅜ<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue-project</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
-
해결됨React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
오브젝트에의 이벤트 감지 vs 레이캐스팅
안녕하세요.경험이 더 쌓이거나 혹은 뒤에 진행될 프로젝트를 통해 해소될 수도 있지만 짚고 넘어가고 싶어서 여쭙습니다!이벤트 객체를 통해서도 다양한 인터랙션을 만들어낼 수 있는데, raycaster를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
실전 반응형 웹사이트 이미지 다운
안녕하세요 선생님! 매일매일 선생님의 강의를 수강하고 있는 제자입니다.다름이 아니라 실전 반응형 웹사이트 제작 전 해당 웹사이트에 접속해서 크롬 확장 프로그램을 이용해 이미지 다운을 받으려고 합니다.근데 현재 시점에서 넷플릭스, 크롬 사이트의 구성과 이미지 파일이 선생님의 강의와 많이 달라져서 수업을 잘 따라갈 수 있을지 걱정이 됩니다.현재 각 웹사이트들의 이미지 소스들을 다운받아서 현 시점 웹사이트와 똑같이 혼자 만들려면 너무 어렵지 않을까 걱정되어서요ㅠㅠ또 선생님 강의를 못따라 갈까봐 걱정도 되구요ㅠㅠ 현시점에서 어떤식으로 학습해야하는지 방향제시 부탁드립니다.ㅠㅠ
-
미해결AI와 함께 배우는 Next.js
안녕하세요 환불관련문의드립니다
안녕하세요. 전날 저녁에 구매했는데, 섹션2 첫번쨰까지 들었습니다.거의 프로그램세팅하는 부분만 들은건데, 강의가 저와 잘 맞지않아서 환불하고싶습니다.그런대 인프런자체에서는 전체의 14퍼센트를 들었다고 환불이 불가능하다고하는데요.혹시 강사님 권한으로 환불이 가능한지 여부를 알고싶습니다.
-
미해결프론트엔드 마스터클래스
추천패턴
디자인 패턴을 공부중에 궁금한게 생겨서 질문 드립니다. 채팅 같은걸 구현할때 응답이 엄청 다양한 형태로 온다면 어느 패턴이 좋을까요?
-
해결됨한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
콜백 함수 메서드 등록
export default function CityList({ $app, intialState, handleLoadMore }) { this.state = intialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; this.handleLoadMore = handleLoadMore; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city},${elm.country}</div> <div class="city-item-score">❤️${elm.total}</div> </div> `; }); } temp += `</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (!this.state.isEnd) { const $loadMoreBtn = document.createElement("button"); $loadMoreBtn.className = "add-items-btn"; $loadMoreBtn.textContent = "더보기"; this.$target.appendChild($loadMoreBtn); $loadMoreBtn.addEventListener("click", this.handleLoadMore); } }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); } 이 코드에서this.handleLoadMore=handleLoadMore;이부분이 왜 필요한지 이해가 되지 않아서 질문드립니다. 콜백 함수를 이벤트 리스너에 등록 해도 되지 않나요?this로 메서드 등록해서 사용하는 이유가 궁금합니다.추가적으로 바닐라 js 로 spa 구현하는 개념들이 매우 어렵고 복잡하게 느껴지는데 바닐라 js로 spa를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
객체 리터럴로 넣는것보다 인스턴스를 넣는게 더 좋아 보이는데, 혹시 이게 안티패턴인가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
투두리스트 실습을 충실히 진행한 상태에서 감정일기장 실습을 따라할 필요가 있을까요?
페이지 라우팅에 대해서 충분히 이해했고 84강 이후로는 투두리스트 실습의 답습이 될것 같아서 질문합니다.추가된 내용이 있으면 실습을 따라하겠지만, 이미 했던 내용 그대로 따라하는거라면 배속으로 넘겨보려고요.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
83강 css 질문입니다
아래 코드로 충분한데 .header-center { width: 50%; font-size: 24px; justify-content: center; } .header-left { width: 25%; justify-content: flex-start; } .header-right { width: 25%; justify-content: flex-end; } 왜 매번 앞에 .Header를 추가하셨는지 궁금합니다. .Header.header-center { width: 50%; font-size: 24px; justify-content: center; } .Header .header-left { width: 25%; justify-content: flex-start; } .Header .header-right { width: 25%; justify-content: flex-end; } 그리고 버튼에서도 버튼 버튼_타입으로 하셨는데 버튼 타입 으로 해도 충분하지 않았나 싶습니다. 추후에 타입이 다른 컴포넌트와 겹칠까봐 그런것일까요?
-
미해결웹 프론트엔드를 위한 자바스크립트 첫걸음
브라우져 호환성 문의
⚠질문 작성법- 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문)- 질문은 최대한 구체적으로 작성해주세요.- 비슷한 질문이 올라와있는지 확인해주세요.- 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요.console.log("hello world");안내사항- 질문에 대한 답변은 보통 주말, 공휴일을 제외한 평일 오전 시간에 답변해드립니다. - '질문 해결'은 답변 작성일 기준 1일 이후에 설정됩니다.추가: 아래 환경 외에도 윈도우 크롬브라우져 환경에서도 폰트관련 css등이 전혀 동작하지 않고 있습니다. 확인 바랍니다.==========================섹션7 33.[안내] 프로젝트 코드 주소 에서소스 다운받고 index.html파일을 Linux firefox브라우져에서 열어보면 제대로 표시되지 않습니다. 브라우져상관 없이 정상 실행 되도록 하려면 어떻게 해야 하나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
임포트 방식 이미지 브라우저 캐시
안녕하세요 정환님!!이미지 로드하는 방식이 2가지라고 했는데public에 있는 이미지는 매번 새로 이미지를 서버에서 받아오는것은 이해 됐는데. Q. js번들링 파일안에 base64로 uri식으로 넣어진 이미지는 js파일 자체를 브라우저가 저장하고 있다가 새로고침하면 서버에서 캐시검증하고 응답을 304로 내려준다. 그 뒤 브라우저는 캐시해뒀던 파일을 다시 사용해서 이미지 파일은 캐시 되었다고 뜨는걸까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
영상 마지막에서 body 태그의 display: flex 설정을 안해도 문제가 발생되지 않는 이유
저는 코드를 똑같이 작성했는데 마지막에 Editor.css에.Editor > section { margin-bottom: 40px; }를 추가해도 body 태그의 영역이 축소되는 이상 현상이 발생되지 않았습니다.그냥 넘어가려고 하긴했는데 왜 동일한 코드인데 제 환경에서는 이상 현상이 발생되지 않는지가 궁금해서 질문드립니다. 다른분들은 강의처럼 body 태그 축소 현상이 발생되여 index.css의 body 태그에 display: flex 설정을 넣었을 때 왜 해결이 되는지에대한 질문은 많은데,저처럼 아예 발생하지 않은 분들은 안계신 것 같더라구요.. 브라우저는 크롬 쓰고 있고 현시점 최신 버전인 144.0.7559.110(공식 빌드) (arm64) 버전을 쓰고 있습니다.
-
해결됨진짜! 자바스크립트(Javascript) - 기초부터 고급까지
선생님 강의 블로그에 정리해도되나요?
선생님 강의 공부하고 블로그에 정리해도되나요? 궁금합니다.
-
미해결포트폴리오 어나더레벨 | 합격하는 이력서 작성법
readme 관련 질문 있습니다.
안녕하세요 큰돌님 강의를 즐겨보는 취준생입니다. 강의를 보며 궁금한 점들이 있어 질문 남깁니다.간단하게 제 상황을 말하면 1년 정도 SI 업체 다니다가 현재는 군대에서 취준하고 있고 6월에 전역하면서 동시에 취업을 하는 것을 목표로 하고 있습니다.Q1: Readme 파일을 잘 꾸미는게 중요하다고 말씀주셨는데, 제가 했던 프로젝트들이 전부 회사에서 혼자 진행한 프로젝트들이여서 모두 private 인 상황입니다.이럴 경우에는 Readme 파일에 꾸미기 보다는 노션에 따로 정리하는게 맞을까요??Q2: QnA 글을 보니 큰돌님께서는 이력서와 포트폴리오를 같이 준비하라고 하신걸 봤습니다. 근데 토스채용 같이 이력서와 포트폴리오를 같이 제출해야되는 상황에서는 어떻게 해야될까요?
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
82강 이미지 로딩 관련 질문
이미지는 보통 S3 같이 외부의 이미지 url을 통해서 불러오지 않나요?외부 이미지를 불러오는 방식에서 브라우저에 이미지를 캐싱하는 방법은 없나요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
79강 Routes 외부의 컴포넌트 관련 질문
이 특징을 사용해서 네비게이션이나 푸터 같은 레이아웃을 처리하는데 활용하는 편인가요?
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
78강 번들 파일 관련 질문
번들 파일은 용량이 클것으로 예상되는데, 매번 전체를 보내면 낭비가 심할것 같습니다. 번들 파일을 쪼개서 지연로딩하거나, 이전에 받은 번들 파일을 브라우저 내에 캐싱하고 교체하는 방법도 궁금합니다. 혹시 이 강의에서 다루나요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
76강 질문 useCallback() 삭제해도 되는건가요?
useMemo()로 마운트 시점을 메모하는거면 이제 onCreate, onUpdate, onDelete 에 적용한 useCallback()은 없애도 되는건가요? const memoizedDistpatch = useMemo(()=>{ return {onCreate, onUpdate, onDelete} }, []) useCallback() 제거하고 테스트했을때 따로 리렌더링 되는걸 확인했지만, 확인차 질문합니다.
