if (req.url === "/hello") { res.writeHead(200, { "Content-Type": "text/html" }); const helloHTML = fs.readFileSync("./hello.html", "utf-8"); res.write(helloHTML); res.end(); } else if (req.url == "/first.png") { res.writeHead(200, { "Content-Type": "image/png" }); const image = fs.readFileSync("./first.png"); res.write(image); res.end(); }위 코드와 같이 else if 구문을 추가하고 나서 /hello로 경로로 접근하고 /first.png로 접근하지 않았음에도 이전에는 깨졌던 이미지 파일이 정상적으로 노출되는 이유는 무엇인가요?hello.html 안의 <img src="./first.png"> 때문에 브라우저가 자동으로 /first.png를 추가 요청하는 것일까요?찾아보니까 HTML subsource request라는 개념과 관련되어있는것 같아서 다음과 같이 생각을 정리해보았는데 맞는지 확인 부탁드립니다.1) localhost:3000/hello 입력2) GET /hello.html 요청3) 서버에서 hello.html 응답4) 브라우저가 HTML 다운로드5) DOM 파싱6) img 태그 발견7) first.png 필요 확인 후 서버에 추가 요청8) GET /first.png요청을 보냄  이 과정에서 Node.js 서버는 정적 파일을 자동 제공하지 않기 떄문에 8번 과정에서 추가로 발생한 /first.png 요청을 처리하기 위해 라우팅을 추가하였고 Else if 구문을 타서 정적 파일을 제공받았다.

강의에서는 리턴문 내에 TodoStateContext.Provider 컴포넌트가 상위에 있고 자식으로 TodoDispatchContext.Provider컴포넌트가 아래에 있는데 이유가 무엇인가요? 이 둘의 위치가 바뀌면 안되는건가요? 프로바이더 컴포넌트는 하위에 있는 모든 컴포넌트에서 값을 꺼내 쓸 수 있으면 둘의 위치가 바뀌어도 상관이 없는것 아닌가요? 이유가 궁금합니다!

현재 게시판, 중고마켓 모두 로그인한 유저만 댓글을 작성할 수 있도록 변경하여 프로젝트 진행중에 있습니다.게시판 댓글과 중고마켓 댓글 모두 return되는 BoardComment, UsedItemQuestion 타입에는 모두 User 타입의 정보가 있는데댓글 생성시 필요한 argument에는 유저 정보를 입력할 수가 없어서 어떻게 유저 정보를 입력할 수 있는 것인지 궁금하여 질문드립니다!

전 프론트엔드코스을 구매를 했는데쿠폰코드를 제가 개인사정이 있어서 지금봐서요.혹시  "[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스" 쿠폰을 지금이라도 받을수 있을까요?ㅠㅠ부탁드립니다! 

🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요)제목을 구체적으로 작성해 주세요✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다.⛔️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요!   코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다.깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요  강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요Date 객체와 날짜안녕하세요. 정환님. Date 객체에 관련해서 질문이 있어 Q&A에 글을 남기게 되었습니다.Date 객체는 자바스크립트가 처음 만들어졌을 당시에, java의 util.date 를 참고해서 만들어졌기에 현재 대체제로 외부 라이브러리를 활용하거나 Intl api, Temporal(현재 stage 3 상태)가 많이 언급되고 있는 부분입니다. 추후에 temporal이 정식으로 도입되면 강의 내용을 변경하실 것인지 질문드립니다.

리액트 개정판 교재 질문이 있습니다. 설치를 예전 책 버전에 CRA로 설치를 했는데 개정판은 VITE로 설치를 하나요 그리고 예제도 책이랑 공유되는지 궁금합니다. 여러가지로 강의랑 비슷하면 책도 구매할겁니다!

https://winterlood.notion.site/a873435b477f433ea04a359f89380cc5?v=1bfd06a98a594ce6a4c158f4aafbe0b2감정일기장 파트를 공부하려 하는데 챕터11 소스코드가 필요한데 https://winterlood.notion.site/a873435b477f433ea04a359f89380cc5?v=1bfd06a98a594ce6a4c158f4aafbe0b2해당페이지 접속이 안됩니다 어떻게 해야할까요?

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())이런식으로 콘솔에 쳐서 없애라는데, 항상 이렇게 하고 있는데 더 편한 방법은 없나 싶어서 여쭤봅니다.

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

강의자료에서는 강의랑은 달리 ejs 코드도 나와있지 않고https://github.com/comelulu/NCS-ExpressJS-Part1/tree/main/44_memos-route-2-create자료에는 /add라는 라우트도 안 적혀있습니다.

res.cookie("token", token, {httpOnly: true});httpOnly를 true로 설정하여 클라이언트 사이드 스크립트가 쿠키를 읽지 못하도록 한다는게 어떤 말인지 자세히 듣고 싶습니다!  브라우저 쿠키, 클라이언트 사이드 스크립트 쿠키가 무슨 차이가 있는지 왜 읽지 못하도록 하는지가 주로 궁금합니다. 

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

정답으로 보여주신 이미지에는 아래와 같이 FK가 설정되어있는 것 같았는데 맞을까요?profiles.user_id -> auth.users.id (CASCADE) todos.user_id -> auth.users.id (CASCADE) todos.user_id -> profiles.users.id (CASCADE)todos.user_id -> profiles.users.id를 잇는 FK는 왜 필요한거고, 어떤 의도로 생성하는것인지 궁금합니다

제가 따라한 실습 코드에서는항목 클릭 했을 때 여러 개 todo 항목이 있을 경우line-through 가 맨 뒤 항목에만 적용되는데여러 항목을 렌더링 했을 경우 클릭한 doto를 click 시 못 찾아 가는 상황인가요?

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

안녕하세요 강의를 듣다가 전반적인 학습 방향성에 고민이 있어서 질문드립니다. 풀스택 개발자가 목표입니다 취업전 총 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 강의수강, 기능구현 실습강의를 수강 하는게 더 효율적일까요.. 프로젝트 완성도를 위해 강의만 쭉 들으니어디까지 공부를 해야하는것인가에 대한 기준도 안 잡히고강의만 듣고 직접 강의 코드를 쳐보는것만으로는 구현력이 안 길러지는 것 같습니다..또한 강의 수강 기간이 길어지다보니앞서 들었던 강의 내용들이 잘 기억이 안 나는 부분들에 대한 걱정 또한 있습니다.반면에 실무적인 코드 경험 (강의를 통한 간접경험) 없이 프로젝트를 진행하면실무에서 쓰지 않는 코드 / 리펙토링 하기 어려운 코드 / 보안에 대한 인식 부재로 인한 위험성 등여러가지 잘못된 코드를 작성하고 학습하게될까봐 두려움이 있습니다. 어느 시점에 구현력을 기르기 위해서 프로젝트를 진행 해봐야하는지도무지 감이 안 잡혀서 질문 드립니다.. 강의 외적인 성격이 짙은 질문인데 염치 불구하고 질문드립니다..

AI 답변으로 해결됐습니다!강의 제목처럼 말 그대로 재생성 방지였군요..!마운트 시 생성된 함수를 재사용하기 때문에 리렌더링 되더라도 props로 넘어간 함수는 참조 값이 똑같은 처음 생성된 함수이다.이해했습니다!안녕하세요, 강사님!73강 useCallback과 함수 재생성 방지 강의의 4분 쯤의 내용에 대해 질문이 있습니다. 강의에서, useCallback 적용한 'onCreate, onUpdate, onDelete 함수가 두 번째 인수로 빈 배열을 할당했기 때문에 마운트 이후에는 다시는 생성되지 않는다.'라고 설명해주셨는데요! 그러면, 첫 마운트 이후 todo 아이템을 생성, 수정, 삭제 할 때는 해당 함수들이 어떻게 동작하는 것일까요?동작은 하되, 생성하지 않는다.. 라고 이해를 해야 하는 걸까요..? 답변해주시면 감사하겠습니다.