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 구문을 타서 정적 파일을 제공받았다.

배워보려고 결제하고 듣는중입니다. create-react-app 부터 적용되지가 않네요 Deprecate되었다고 나오고 React-Router에서 각페이지 분기시부터 에러가 발생하네요 각페이지 마다 수업에 따라가려면 버전을 낮춰야 하는건가요?

책 99페이지에서 만든 ProductController는 src/test/java 하위에 만들어져있는데, 이곳에 파일을 그대로 둔 채로 책 107페이지 스프링 빈 실습을 진행하면 제대로 진행이 되지 않았습니다.혹시나 하여 test가 아닌 src/main/java 하위로 옮기고 진행하니 책의 결과와 같은 결과가 나왔습니다. 책 어디에도 ProductController의 파일 위치를 옮긴다는 말이 작성되어있지 않은데 옮기고 진행하는 것이 맞는지 궁금합니다!   

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

pypi.org 에서 뭘 어떻게 깔아야 하는지 알려주세요.알아서 깔으라고 하고 넘어가버렸는데 처음 접하는 사람은 뭘 깔아야 하는지 알수가 없어요.

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

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

어노테이션 뭐가 있는지 궁금했습니다. 스프링 공식 문서(https://docs.spring.io/spring-framework/reference/index.html)에 Annotation 검색해보니까 여러가지가 나오네요. 어떤 걸 봐야 어노테이션 전체를 볼 수 있나요?어노테이션 페이지가 따로 없나요?

p107'3주 차 난생 첫 프로젝트, 상품 조회와 등록 API' 내 '4 스프링 IoC & 스프링 빈 등록하기' 내 '@Component를 달아 두면 생기는 일' 질문 입니다.  AnnotationDemo 클래스가 어디있는지 모르겠습니다. 

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

강의에선 되게 단순하게 큰 틀 위주로 알려주시는 것 같아서 개인적으로 더 자세한 의미나 추가적인 개념이 궁금할 때 검색해보는 편인데, DI라는 것이 클래스 간의 결합도를 낮추고 객체의 유연성을 높이기 위해 빈 객체를 만들어 주입하는 것을 의미한다고 정리했습니다. 이게 맞게 정리한건지 궁금합니다. 또 추상 클래스와 인터페이스 간의 차이점은 찾아봐도 이해가 어렵길래 선생님의 친절한 설명이 필요할 것 같아서 추가로 여쭤봅니다!

Express는 비동기 에러를 잡지 못한다고 강의에서 배웠습니다. 이게 혹시 싱글 스레드와 관련이 있을까요? 그렇다면 스프링의 경우는 어떻게 다를까요?Express는 에러 발생 지점에 가까이 정의된 에러 처리 미들웨어를 우선적으로 처리한다고 배웠습니다. 단순 코드적으로 위치가 가까운 거 맞나요? 에러 처리 미들웨어가 여러 개 있고 파일 내에 섞여있으면 코드 파악이 어려워질 수 있을 것 같아요. 실무에서 보통 권장되는 방식은 뭘까요? 에러처리 미들웨어를 하나만 두는지, 나눠서 같은 코드 위치에 두는지, 나누서 서로 다른 코드 위치 (라우터 사이)에 두는지 궁금합니다.

강의에서 Express 모듈을 사용할때 commonJS 방식인 require로 가져오는데 Node.js 환경에서 ESM 방식으로 할 수는 없는 걸까요?

혹시 Nginx나 Apache를 사용하는 경우 ejs로 SSR을 구현하는 것이 강좌에서 한 방법과는 달라질까요?

 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를 구현해보는 프로젝트를 해보고 프레임워크로 넘어가야 하는것일까요..

화면에 수정사항에 "register" ==>"/users/register" 로 되어 있는데 저는 그렇게 하면 error 화면이 뜹니다.하단 수업 노트에는return res.status(400).send("User already exists");이렇게 되어 있습니다.제 코드에서 아래와 같이 수정하니까 동작하긴 하는데....return res.render("users/register",{error:"User already exists"});이렇게 "users/register"로 앞에 "/" 없이 "users/register"로 하니까 동작하는데 제가 어디선가 잘못한 것일까요?

리다이렉트 주소랑rest_api_key도 계속 확인하는데도 똑같은데에러가 카카오로그인하면 401에러가 계속 나네요 이에러 찾아보면 api키랑 리다이렉트 주소 확인하라고 하는데 동일합니다 복붙으로하는데도 계속 401에로 뜨는데 원인이 뭘까요? 

@PostMapping("/kakao") public ResponseEntity<?> kakaoLogin(@RequestBody Map<String, String> body, HttpServletResponse response) { String code = body.get("code"); LoginResponseDto tokens = kakaoOAuthService.kakaoLogin(code, response); return ResponseEntity.ok(tokens); }여기 코드에서kakaoOAuthService 이게 선언을 찾지못하는데 강의에선 인터페이스?쪽을 가져오는것 같은데 저는 안가져와지는데 원인이 몬가요?

jwt가 뭔지 왜 사용하는건지에 대한 자세한 내용은 안 다루는거 같고 전반적인 crud의 감만 잡고 넘어 가는건지 궁금합니다.이부분을 part2에서 제대로 배우는지 아님 제가 추가로 학습을 해야하는 부분일까요?설명히 제대로 안 된 부분들을 직접 찾아서 공부하면서 강의를 듣다보니 흐름도 깨져서 파트2 에서 다룬다면 전반적인 구현정도로만 넘어가려고 질문드립니다.

현재 강의에서 serveStatic 함수를 통해 정적 파일 요청을 처리합니다. 하지만 보통은 정적인 파일들 요청을 위해 apache 서버를 사용하고 node.js 는 동적인 요청을 위해서 쓰이는 경우가 대부분이라고 생각하는데 맞을까요?