안녕하세요module.exports 나 require 등의 node js 관련 기능을 작성하는데 자꾸 자동완성에 의해서 다른 글자로 바뀌네요ex) module.exports 작성하는데 module 작성하고 '.' 누르거나 require 작성하고 '(' 누르면 다른 거로 바뀜강사님 화면에서는 자동완성이 나오더라도 안 바뀌는데 혹시 어떻게 설정하셨는지 궁금합니다..!

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). 이런 에러가 나오는데요. 작동도 하고, 에러가 아니라 경고에 가까운것 같습니다.그런데 똑같이 했는데 왜 강사님 화면에는 안뜨고 제 화면에만 뜨는건지 궁금하네요

getMonthlyData() 함수의 패턴이 가지는 장점이 있는지 궁금합니다.sql이라면 date 타입에 인덱스를 걸어둘수도 있기 때문에 크기 비교를 하는게 납득이 가는데그런게 아니라면 아래 코드가 간단하고 가독성이 좋지 않나요?function filterByMonth(data, pivotDate) { return data.filter( (item) => item.date.getFullYear() === pivotDate.getFullYear() && item.date.getMonth() === pivotDate.getMonth(), ); }

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

안녕하세요 강사님!강의에서 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> ) }

영상 8분 57초에 onClick 이벤트에 결과값을 넣으면 안된다고 배웠는데 그게 어디에서 그랬는지 기억이 안납니다 ㅠㅠ

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

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

화면에 수정사항에 "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"로 하니까 동작하는데 제가 어디선가 잘못한 것일까요?

객체 리터럴로 넣는것보다 인스턴스를 넣는게 더 좋아 보이는데, 혹시 이게 안티패턴인가요?

페이지 라우팅에 대해서 충분히 이해했고 84강 이후로는 투두리스트 실습의 답습이 될것 같아서 질문합니다.추가된 내용이 있으면 실습을 따라하겠지만, 이미 했던 내용 그대로 따라하는거라면 배속으로 넘겨보려고요.

아래 코드로 충분한데 .header-center { width: 50%; font-size: 24px; justify-content: center; } .header-left { width: 25%; justify-content: flex-start; } .header-right { width: 25%; justify-content: flex-end; }  왜 매번 앞에 .Header를 추가하셨는지 궁금합니다. .Header.header-center { width: 50%; font-size: 24px; justify-content: center; } .Header .header-left { width: 25%; justify-content: flex-start; } .Header .header-right { width: 25%; justify-content: flex-end; } 그리고 버튼에서도 버튼 버튼_타입으로 하셨는데 버튼 타입 으로 해도 충분하지 않았나 싶습니다. 추후에 타입이 다른 컴포넌트와 겹칠까봐 그런것일까요?

안녕하세요 정환님!!이미지 로드하는 방식이 2가지라고 했는데public에 있는 이미지는 매번 새로 이미지를 서버에서 받아오는것은 이해 됐는데. Q. js번들링 파일안에 base64로 uri식으로 넣어진 이미지는 js파일 자체를 브라우저가 저장하고 있다가 새로고침하면 서버에서 캐시검증하고 응답을 304로 내려준다. 그 뒤 브라우저는 캐시해뒀던 파일을 다시 사용해서 이미지 파일은 캐시 되었다고 뜨는걸까요??

저는 코드를 똑같이 작성했는데 마지막에 Editor.css에.Editor > section { margin-bottom: 40px; }를 추가해도 body 태그의 영역이 축소되는 이상 현상이 발생되지 않았습니다.그냥 넘어가려고 하긴했는데 왜 동일한 코드인데 제 환경에서는 이상 현상이 발생되지 않는지가 궁금해서 질문드립니다. 다른분들은 강의처럼 body 태그 축소 현상이 발생되여 index.css의 body 태그에 display: flex 설정을 넣었을 때 왜 해결이 되는지에대한 질문은 많은데,저처럼 아예 발생하지 않은 분들은 안계신 것 같더라구요.. 브라우저는 크롬 쓰고 있고 현시점 최신 버전인 144.0.7559.110(공식 빌드) (arm64) 버전을 쓰고 있습니다.

이미지는 보통 S3 같이 외부의 이미지 url을 통해서 불러오지 않나요?외부 이미지를 불러오는 방식에서 브라우저에 이미지를 캐싱하는 방법은 없나요?

이 특징을 사용해서 네비게이션이나 푸터 같은 레이아웃을 처리하는데 활용하는 편인가요?

번들 파일은 용량이 클것으로 예상되는데, 매번 전체를 보내면 낭비가 심할것 같습니다. 번들 파일을 쪼개서 지연로딩하거나, 이전에 받은 번들 파일을 브라우저 내에 캐싱하고 교체하는 방법도 궁금합니다. 혹시 이 강의에서 다루나요??

useMemo()로 마운트 시점을 메모하는거면 이제 onCreate, onUpdate, onDelete 에 적용한 useCallback()은 없애도 되는건가요? const memoizedDistpatch = useMemo(()=>{ return {onCreate, onUpdate, onDelete} }, []) useCallback() 제거하고 테스트했을때 따로 리렌더링 되는걸 확인했지만, 확인차 질문합니다.

정환님 인프콘 설명이였는데 잘 듣던와중에 궁금한게 생겨서요!!저 app 컴포넌트 안에 자식컴포넌트로 child가 렌더링되고있다면 그 자식컴포넌트도 리렌더링되어서 render phase 단계를 거쳐 child 가상돔을 만들어서 app 컴포넌트의 렌더사이클 내의 app의 가상돔이랑 합쳐져서 통합된 하나의 가상돔이 생성되고 이걸 이게 commit phase 단계에서 돔 업데이트를 변경된 부분만 진행하는 건가요?

9강에서 'Ch-9-1. GitHub 저장소 링크'에 링크가 잘못 달려있네요. 뒤에 키값으로 찾아서 접속할 순 있는데 수정이 필요해 보입니다.