176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
React 마스터 클래스: Part 3 - 실무 핵심 라이브러리 정복 (TypeScript, Zustand, React Hook Form, TanStack Query)
탄스택쿼리 파트를 먼저 수강중에 중복되는 자료가 있어 말씀드려요. 63,65강의 자료가 동일합니다. 추가적으로, 65강 처음에 나오는 코드는 useEffect가 아닌 useQuery를 통한 분기처리인데, 이 경우 race condition위험이 없지 않나요?
미해결
바이브 코딩 With Claude Code로 웹 서비스 만들기
안녕하세요! PPT를 Kimi.com에서 제작하신 것 같은데, Kimi AI로 PPT 만드셨을 때 장점이 있나요? PPT 스타일이 너무 좋아서 여쭤봅니다 ㅎㅎ 감사합니다!
해결됨
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (Create TypeScript project 체크 박스 꼭 선택 하세요.) Create 버튼 클릭 하시면 화면 하단 터미널에 설치 옵션을 물어보는 화면이 보이게 됩니다. 그런데, 강의 와는 다르게 터보팩 사용 여부는 물어보지 않아요. Next.js 13 이상 버전에는 터보팩이 이미 내장되어 있습니다. 이 부분은 무시하고 진행 하시면 됩니다. 설치 완료 후, package.json 파일에 아래와 같이 개발 스크립트 부분을 수정 하세요. --turbo 추가 하시면 됩니다. "scripts": { "dev": "next dev --turbo", "build": "next build", "start": "next start", "lint": "eslint" }, 실행은 상단 우측 보시면 아래와 같은게 보이실 겁니다. client-side 와 server-side 가 있는데 server-side 선택 하셔서 실행 하시면 됩니다. (안보이면 웹스톰 재시작 하세요. 지금 단계 에서 client-side 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.) 터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.
해결됨
타입스크립트로 배우는 Next.js 16+ 완전 정복 : 기초부터 최신 아키텍처까지
2. 소스 코드 다운로드 및 활용법 강의 에서 소스 코드 다운로드를 할 수 있는 버튼 이나 링크가 존재 하지 않습니다. 3. 커스텀 스니펫 등록하기 강의는 다운로드 버튼이 잘 보입니다.
미해결
[React 2부] 고급 주제와 훅
강사님 안녕하세요 강의 잘 듣고 있습니다. 좋은 강의 감사합니다. 질문이 하나 있습니다. OrderableProductItem 컴포넌트를 따로 만든다는 건 결국 base인 ProductItem 컴포넌트에 주문하기 버튼이 추가된 것인데, 따로 만들거라면 base 컴포넌트인 ProductItem은 진짜 기본적인 상품 정보만 보여주는 컴포넌트로 두고 buton 컴포넌트를 OrderaleComponentItem에서 렌더링 해주면서 order 로직도 여기에 두는 게 좋지 않나? 라는 생각이 들어서요!
해결됨
제대로 배우는 Express.js: Part2 엔진 내부 동작 원리와 클론 프로젝트
Node.js에서는 req와 res 사이에 인증 처리와 같은 로직을 넣기 위해 미들웨어를 직접 만들어야 할 것 입니다. Express에서의 미들웨어 구현과 동작 방식은 최선의 방식인지 궁금합니다! 즉 Express가 아닌 Node.js로 미들웨어를 직접 구현했을때 Express 방식보다 더 나은 설계가 될 수 있는지 궁금합니다. 또 Nest.js (nest 아니더라도 다른 프레임워크) 에서는 Express가 미들웨어를 구현하고 동작시키는 방식을 그대로 따르고 있는지 아니면 설계 상의 차이를 두었는지도 궁금합니다. 감사합니다!
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
npm create vite@latest를 하고 react를 선택 했는데 그 후에 강의에서는 javascript, javascript+swc 옵션이 있는데 javascript+react compiler라는 옵션이 추가적으로 있어서 무엇을 선택해야하는지 궁금합니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
불편해죽겠네요. ai한테 물어봐도, document.querySelectorAll(".CodeMirror-hints-wrapper").forEach((el) => el.remove()) 이런식으로 콘솔에 쳐서 없애라는데, 항상 이렇게 하고 있는데 더 편한 방법은 없나 싶어서 여쭤봅니다.
해결됨
Next.js with Spring Boot
Next 최신 버전으로 수업 듣고 있습니다. 강의 자료에 이 파일이 들어가있는데 오히려 이 설정을 적용하면 1MB 제한이 걸려 업로드 되지 않습니다 발생된 오류 메시지 Error: Body exceeded 1 MB limit. To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit at ignore-listed frames { statusCode: 413 } ⨯ uncaughtException: Error: Body exceeded 1 MB limit. To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit at ignore-listed frames { statusCode: 413 } ⨯ uncaughtException: Error: Body exceeded 1 MB limit. To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit at ignore-listed frames { statusCode: 413 } ⨯ Error: Body exceeded 1 MB limit. To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit at ignore-listed frames { statusCode: 413, digest: '2270266421@E394' } 강의에서 알려주는 설정으로 해야 1MB 이상 이미지가 정상 업로드 되었습니다. experimental: { // 'experimental' 아래에 serverActions를 정의해야 합니다. serverActions: { bodySizeLimit: "1000mb", // 원하는 크기로 조절하세요 (예: '50mb', '100mb') }, }, 강의 자료 수정이 필요할 것 같습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 이벤트 핸들러 실습하는데 onMouseEnter 가 잘 실행이 안 돼서 문의드립니다. 버튼에 마우스를 대면 콘솔이 출력된다고 하셨는데 일단 코딩은 이렇게 했고 실행했습니다. 주로 크롬에서 하는데 크롬은 마우스를 대면 실행이 안 되고 버튼을 클릭하니까 콘솔이 2개씩 실행이 되고, 엣지에서는 정상적으로 실행을 합니다. 이 문제는 해결할 수 있는 방법이 있을까요?
미해결
포트폴리오 어나더레벨 | 합격하는 이력서 작성법
제가 참여하고 이력서에 작성한 프로젝트가 실제로 500명 정도가 사용하는 사이트여서 깃허브 코드 공개가 꺼려지는데 이럴 경우엔 어떻게 해야하나요? 링크 첨부 안해도 괜찮을까요?
미해결
[React 2부] 고급 주제와 훅
1부 수업에서는 따로 남겨주셨던 것 같은데, 2부 수업에는 따로 없나요?
해결됨
[CS 기술면접 7] 말이 트이는 자바스크립트
섹션 6-28 생성자함수와 프로토타입에서 슬라이드 39장을 설명할 때, Parent 함수 자체는 객체가 아니라서 __proto__ 프로퍼티가 없다고 하셨는데, 자바스크립트에서 함수는 객체여서 __proto__ 프로퍼티가 있지않나요?
해결됨
이거 하나로 종결 - 32시간 고품질 스프링 풀스택 웹 개발
기존 40시간 강의 영상은 32시간 강의로 대체된걸까요? 비공개로 변경돼서 아쉽습니다.
미해결
Vue.js 시작하기 - Age of Vue.js
안녕하세요. 강의를 듣다가 이하처럼 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)
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) : 기초부터 실전까지
// 간단한 회원가입 폼 // 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 render React 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' }
