묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[React 2부] 고급 주제와 훅
강의 자료, 블로그, 깃 주소
1부 수업에서는 따로 남겨주셨던 것 같은데, 2부 수업에는 따로 없나요?
-
미해결[CS 기술면접 7] 말이 트이는 자바스크립트
생성자 함수 프로토 타입
섹션 6-28 생성자함수와 프로토타입에서 슬라이드 39장을 설명할 때, Parent 함수 자체는 객체가 아니라서 __proto__프로퍼티가 없다고 하셨는데, 자바스크립트에서 함수는 객체여서 __proto__프로퍼티가 있지않나요?
-
해결됨이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
안녕하세요.
기존 40시간 강의 영상은 32시간 강의로 대체된걸까요? 비공개로 변경돼서 아쉽습니다.
-
미해결Vue.js 시작하기 - Age of Vue.js
개발자 툴에서 Vue가 표시되지 않는 현상.
안녕하세요. 강의를 듣다가 이하처럼vue개발자 툴을 표시하고 싶은데 잘 안되어서 문의를 드리게 되었습니다.이하 시도해 본 것.1.구글 최신버젼 확인2.구글 확장기능창에서 개발자모드 활성화Google Chrome확장기능에 vue.js devtools추가(버젼7.7.7) 4.파일URL에 접근을 허가 활성화5. Vue.js3사용인지 Vue.js2사용중인지 Copilot에게 확인해본결과 index.html의 script부분을 바꿔야 한다는 내용이 나옴.6. Vue버젼 확인해봤으나 버젼 확인 안됨. 현재까지 강의에서는 아직 터미널 상에서 Vue를 설치하라는 내용이 없었으나 설치를 시도해보는게 좋을까요?7.node.js다운로드 확인 - 다운로드 완료되어 있음. 그 외에도 시도해보면 좋은게 있으면 알려주시면 감사드립니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
배열의 렌더링 관련 질문 드립니다.
강사님께서 {number} , {undefined} 이런 것들을 예시로 보여주면서 어떤건 렌더링되고 어떤건 오류는 안 나지만 렌더링 되진 않는다 얘기를 해주셨는데요그 중에 [{1,2,3}] 처럼 배열로 되어 있는 건 배열로서 나타나는게 아닌 123 이렇게 숫자가 붙어서 렌더링이 되던데 이게 특별한 이유가 있는 걸까요?
-
미해결HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
pointer-event:none;
10:57 부분에서, 설명하셨던 것처럼 .btn과 ul에 position: relative; 를 줘도 드래그가 잡히고, 저번 CSS 강의에서 알려주신 속성중에 pointer-events: none;을 .item:before 선택자에 주니까 한번에 해결이 되었어요! 알려주신것 문득문득 떠오르고 적용할때마다 너무 행복합니다!ㅎㅎ아래는 item:before 부분.item:before { content: ''; position: absolute; background-color: rgba(255, 255, 255, 0.267); width: 100%; height: 47%; left: 0; bottom: 0; transform: rotate(-10deg) scale(1.2); pointer-events: none; }
-
미해결리액트(React.js)를 이용한 나만의 유튜브 사이트 만들기 프로젝트
강의자료
25년 12월 1일자로 강의자료 사이트가 바뀐 것 같은데어떠한 정보도 없네요. 강의 들으면서 복붙하라고 하시는데할 수도 없는 상황에다가 일일이 다 타이핑 해야하는 상황인데어떻게 해야할까요? www.webstoryboy.co.kr 들어갔는데도 사이트가 덜 완성 됐는지회원가입도 안되고 어떤 강의자료도 없네요.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
// 간단한 회원가입 폼 // 1. 이름 // 2. 생년월일 // 3. 국적 // 4. 자기소개 import { useState , useRef} from "react"; const Register = () =>{ const [input, setInput] = useState({ name : "", birth : "", country : "", bio : "" }); const refObj = useRef(); console.log(refObj); const onChange = (e) =>{ setInput({ ...input, [e.target.name] : e.target.value }) }; return ( <div> <div> <input name = "name" value={input.name} onChange={onChange} placeholder={"이름"}></input> </div> <div> <input name = "birth" type="date" value={input.birth} onChange={onChange} placeholder={"생년월일"}></input> </div> <div> <select name = "country" value={input.country} onChange={onChange}> <option>한국</option> <option>미국</option> <option>영국</option> </select> </div> <div> <textarea name = "bio" value={input.bio} onChange={onChange}/> </div> </div> ); }; export default Register; => 오류 발생 @workspace /explain Error: Cannot access refs during renderReact refs are values that are not needed for rendering. Refs should only be accessed outside of render, such as in event handlers or effects. Accessing a ref value (the current property) during render can cause your component not to update as expected (https://react.dev/reference/react/useRef). 17 | 18 | const refObj = useRef();> 19 | console.log(refObj); | ^^^^^^ Passing a ref to a function may read its value during render 20 | 21 | const onChange = (e) =>{ 22 | setInput({ 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!
-
미해결멀티패러다임 프로그래밍 1편: 반복자 패턴 & LISP (with TypeScript, Clojure, Kotlin)
예제 소스코드 실행 관련 문의
윈도우10 환경에서 테스트 중입니다.파일을 다운로드 받아서 PowerShell에서 패키지를 설치하고 명령어를 실행했지만, rune Server 관련 에러가 나오는데, 무엇이 문제인 걸까요? PS C:\dev\study\multi-paradigm-programming-main> pnpm -F lecture dev> lecture@1.0.0 dev C:\dev\study\multi-paradigm-programming-main\apps\lecture> pnpm rune dev▲ Rune Server v1.0.24⨯ Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'at throwIfUnsupportedURLScheme (node:internal/modules/esm/load:187:11)at defaultLoad (node:internal/modules/esm/load:82:3)at ModuleLoader.load (node:internal/modules/esm/loader:815:12)at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:594:31)at #createModuleJob (node:internal/modules/esm/loader:624:36)at #getJobFromResolveResult (node:internal/modules/esm/loader:343:34)at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:311:41)at process.processTicksAndRejections (node:internal/process/task_queues:105:5)at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:664:25) {code: 'ERR_UNSUPPORTED_ESM_URL_SCHEME'}
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다! 제목처럼 TS강의, 리액트 강의를 둘 다 들을 예정인데 어떤 순서로 수강하는게 더 효율적일까요?
-
미해결Vue.js 시작하기 - Age of Vue.js
chrome 확장 devtools 버전 문제
안녕하세요?이번에 강좌를 신청했는데 크롬 최신 버전을 깔았더니 view dev tools 에서 이렇게 메시지가 뜨고 콘솔 탭에 뜨지를 않네요...이건 어떻게 처리해야 될까요?
-
해결됨제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트
학습 방향성
안녕하세요 강의를 듣다가 전반적인 학습 방향성에 고민이 있어서 질문드립니다. 풀스택 개발자가 목표입니다 취업전 총 3번의 프로젝트를 진행 해보려고 합니다.(실서비스 프로젝트 1개 / 실서비스 프로젝트를 위한 연습 프로젝트 2개 ) 첫번째 프로젝트는프레임워크를 사용하기 전 전반적인 기초체력을 기르기 위해서fe - 바닐라 js로 spa방식 (csr)be express로 api구성 + 로우쿼리로 db 연동 두번째 프로젝트는 추후 next, nest 등 프레임워크 학습후 진행 해보려고 합니다.fe - nextbe - nest + prisma 등인프라 - aws운영 - • Sentry - 에러 추적 • CloudWatch - AWS 로그/모니터링 • Datadog - 통합 모니터링 • Winston / Pino - 로그 라이브러리 실서비스 프로젝트는 fe는 next / be는 nest를 사용해 개발할 예정이고실제 사용자가 있는 b2b 쇼핑몰이라 배포/인프라(aws), 운영(모니터링/로깅)까지 a~z까지 모두 경험 해볼 프로젝트입니다. 현재 첫번째 프로젝트를 위해강의자분께서 제공한express part1 수강은 끝난 상태입니다프론트 및 db관련 강의들은 타 강의자분의 강의를 통해 준비를 마친 상태입니다. 혹시 part2 까지 수강후전반적인 기능구현 실습들을 진행 해보는 타강의를 수강하고 프로젝트를 시작해야할까요아님 프로젝트 경험 먼저 해본뒤 part2 강의수강, 기능구현 실습강의를 수강 하는게 더 효율적일까요.. 프로젝트 완성도를 위해 강의만 쭉 들으니어디까지 공부를 해야하는것인가에 대한 기준도 안 잡히고강의만 듣고 직접 강의 코드를 쳐보는것만으로는 구현력이 안 길러지는 것 같습니다..또한 강의 수강 기간이 길어지다보니앞서 들었던 강의 내용들이 잘 기억이 안 나는 부분들에 대한 걱정 또한 있습니다.반면에 실무적인 코드 경험 (강의를 통한 간접경험) 없이 프로젝트를 진행하면실무에서 쓰지 않는 코드 / 리펙토링 하기 어려운 코드 / 보안에 대한 인식 부재로 인한 위험성 등여러가지 잘못된 코드를 작성하고 학습하게될까봐 두려움이 있습니다. 어느 시점에 구현력을 기르기 위해서 프로젝트를 진행 해봐야하는지도무지 감이 안 잡혀서 질문 드립니다.. 강의 외적인 성격이 짙은 질문인데 염치 불구하고 질문드립니다..
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
AI 답변으로 해결됐습니다!강의 제목처럼 말 그대로 재생성 방지였군요..!마운트 시 생성된 함수를 재사용하기 때문에 리렌더링 되더라도 props로 넘어간 함수는 참조 값이 똑같은 처음 생성된 함수이다.이해했습니다!안녕하세요, 강사님!73강 useCallback과 함수 재생성 방지 강의의 4분 쯤의 내용에 대해 질문이 있습니다. 강의에서, useCallback 적용한 'onCreate, onUpdate, onDelete 함수가 두 번째 인수로 빈 배열을 할당했기 때문에 마운트 이후에는 다시는 생성되지 않는다.'라고 설명해주셨는데요! 그러면, 첫 마운트 이후 todo 아이템을 생성, 수정, 삭제 할 때는 해당 함수들이 어떻게 동작하는 것일까요?동작은 하되, 생성하지 않는다.. 라고 이해를 해야 하는 걸까요..? 답변해주시면 감사하겠습니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
vs code 자동완성관련 문의
안녕하세요module.exports 나 require 등의 node js 관련 기능을 작성하는데 자꾸 자동완성에 의해서 다른 글자로 바뀌네요ex) module.exports 작성하는데 module 작성하고 '.' 누르거나 require 작성하고 '(' 누르면 다른 거로 바뀜강사님 화면에서는 자동완성이 나오더라도 안 바뀌는데 혹시 어떻게 설정하셨는지 궁금합니다..!
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
Error: Calling setState synchronously within an effect can trigger cascading rendersEffects are intended to synchronize state between React and external systems such as manually updating the DOM, state management libraries, or other platform APIs. In general, the body of an effect should do one or both of the following:* Update external systems with the latest state from React.* Subscribe for updates from some external system, calling setState in a callback function when external state changes.Calling setState synchronously within an effect body causes cascading renders that can hurt performance, and is not recommended. (https://react.dev/learn/you-might-not-need-an-effect). 이런 에러가 나오는데요. 작동도 하고, 에러가 아니라 경고에 가까운것 같습니다.그런데 똑같이 했는데 왜 강사님 화면에는 안뜨고 제 화면에만 뜨는건지 궁금하네요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
87강 필터 함수 질문
getMonthlyData() 함수의 패턴이 가지는 장점이 있는지 궁금합니다.sql이라면 date 타입에 인덱스를 걸어둘수도 있기 때문에 크기 비교를 하는게 납득이 가는데그런게 아니라면 아래 코드가 간단하고 가독성이 좋지 않나요?function filterByMonth(data, pivotDate) { return data.filter( (item) => item.date.getFullYear() === pivotDate.getFullYear() && item.date.getMonth() === pivotDate.getMonth(), ); }
-
해결됨한 입 크기로 잘라 먹는 리액트(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를 반드시 써야 하는 상황의 예시가 어떤 것이 있는지 궁금합니다.