프로젝트 생성 시 위와 같이 선택 하시면 됩니다. (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 는 선택 하지 마세요. 이 강의를 계속 들어 보시면 저 두가지가 무슨 의미 인지 알게 됩니다.)  터보팩 적용 하여 올바르게 실행 되면 아래와 같이 보일 겁니다.       

2. 소스 코드 다운로드 및 활용법강의 에서 소스 코드 다운로드를 할 수 있는 버튼 이나 링크가 존재 하지 않습니다.3. 커스텀 스니펫 등록하기강의는 다운로드 버튼이 잘 보입니다.

강사님 안녕하세요 강의 잘 듣고 있습니다.좋은 강의 감사합니다.질문이 하나 있습니다.OrderableProductItem 컴포넌트를 따로 만든다는 건 결국 base인 ProductItem 컴포넌트에 주문하기 버튼이 추가된 것인데,따로 만들거라면 base 컴포넌트인 ProductItem은 진짜 기본적인 상품 정보만 보여주는 컴포넌트로 두고buton 컴포넌트를 OrderaleComponentItem에서 렌더링 해주면서 order 로직도 여기에 두는 게 좋지 않나? 라는 생각이 들어서요!

Node.js에서는 req와 res 사이에 인증 처리와 같은 로직을 넣기 위해 미들웨어를 직접 만들어야 할 것 입니다. Express에서의 미들웨어 구현과 동작 방식은 최선의 방식인지 궁금합니다! 즉 Express가 아닌 Node.js로 미들웨어를 직접 구현했을때 Express 방식보다 더 나은 설계가 될 수 있는지 궁금합니다. 또 Nest.js (nest 아니더라도 다른 프레임워크) 에서는 Express가 미들웨어를 구현하고 동작시키는 방식을 그대로 따르고 있는지 아니면 설계 상의 차이를 두었는지도 궁금합니다. 감사합니다!

npm create vite@latest를 하고 react를 선택 했는데 그 후에 강의에서는 javascript, javascript+swc 옵션이 있는데 javascript+react compiler라는 옵션이 추가적으로 있어서 무엇을 선택해야하는지 궁금합니다.

  불편해죽겠네요.ai한테 물어봐도, document.querySelectorAll(".CodeMirror-hints-wrapper").forEach((el) => el.remove())이런식으로 콘솔에 쳐서 없애라는데, 항상 이렇게 하고 있는데 더 편한 방법은 없나 싶어서 여쭤봅니다.

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') }, },  강의 자료 수정이 필요할 것 같습니다.

안녕하세요이벤트 핸들러 실습하는데 onMouseEnter 가 잘 실행이 안 돼서 문의드립니다. 버튼에 마우스를 대면 콘솔이 출력된다고 하셨는데일단 코딩은 이렇게 했고 실행했습니다. 주로 크롬에서 하는데 크롬은 마우스를 대면 실행이 안 되고 버튼을 클릭하니까 콘솔이 2개씩 실행이 되고, 엣지에서는 정상적으로 실행을 합니다.이 문제는 해결할 수 있는 방법이 있을까요?

제가 참여하고 이력서에 작성한 프로젝트가 실제로 500명 정도가 사용하는 사이트여서 깃허브 코드 공개가 꺼려지는데 이럴 경우엔 어떻게 해야하나요? 링크 첨부 안해도 괜찮을까요?

1부 수업에서는 따로 남겨주셨던 것 같은데, 2부 수업에는 따로 없나요?

섹션 6-28 생성자함수와 프로토타입에서 슬라이드 39장을 설명할 때, Parent 함수 자체는 객체가 아니라서 __proto__프로퍼티가 없다고 하셨는데, 자바스크립트에서 함수는 객체여서 __proto__프로퍼티가 있지않나요?

기존 40시간 강의 영상은 32시간 강의로 대체된걸까요? 비공개로 변경돼서 아쉽습니다.

안녕하세요. 강의를 듣다가 이하처럼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다운로드 확인 - 다운로드 완료되어 있음. 그 외에도 시도해보면 좋은게 있으면 알려주시면 감사드립니다.   

강사님께서 {number} , {undefined} 이런 것들을 예시로 보여주면서 어떤건 렌더링되고 어떤건 오류는 안 나지만 렌더링 되진 않는다 얘기를 해주셨는데요그 중에 [{1,2,3}] 처럼 배열로 되어 있는 건 배열로서 나타나는게 아닌 123 이렇게 숫자가 붙어서 렌더링이 되던데 이게 특별한 이유가 있는 걸까요?

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; } 

25년 12월 1일자로 강의자료 사이트가 바뀐 것 같은데어떠한 정보도 없네요. 강의 들으면서 복붙하라고 하시는데할 수도 없는 상황에다가 일일이 다 타이핑 해야하는 상황인데어떻게 해야할까요? www.webstoryboy.co.kr 들어갔는데도 사이트가 덜 완성 됐는지회원가입도 안되고 어떤 강의자료도 없네요.

// 간단한 회원가입 폼 // 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 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다!

윈도우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'}

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!   코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요  답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요  강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요더 빠른 답변이 가능합니다! 제목처럼 TS강의, 리액트 강의를 둘 다 들을 예정인데 어떤 순서로 수강하는게 더 효율적일까요?

안녕하세요?이번에 강좌를 신청했는데 크롬 최신 버전을 깔았더니 view dev tools 에서 이렇게 메시지가 뜨고 콘솔 탭에 뜨지를 않네요...이건 어떻게 처리해야 될까요?