stonesy

Page Router와 App Router의 가장 큰 차이점은 서버 컴포넌트이다. 서버 컴포넌트란?서버 컴포넌트는 서버에서만 실행되며, 클라이언트에 JavaScript를 전달하지 않는다. JavaScript 번들 크기를 줄이고 초기 로딩 속도를 개선하는데 도움이 된다. 단, 클라이언트에서 직접 상호작용하는 이벤트 핸들러는 사용할 수 없고, 서버에서 렌더링된 HTML만 클라이언트로 전달한다. page router에서는 페이지 전체를 SSR로 처리할지, SSG로 처리할지, 혹은 CSR으로 처리할지 결정할 수 있었지만 app router에서는 컴포넌트 단위로 서버 컴포넌트와 클라이언트 컴포넌트로 구분한다. 만약 서버 컴포넌트가 클라이언트 컴포넌트의 자식으로 있다면 클라이언트에서 서버 컴포넌트가 렌더링되는 것이..

useEffect컴포넌트가 렌더링될 때 특정 작업을 수행하거나, 상태가 props가 변경될 때마다 특정 작업을 수행할 수 있도록 한다. useStatestate의 값이 변경되면 컴포넌트가 리렌더링 된다. useState: 상태가 업데이트되면 컴포넌트가 다시 렌더링된다. 렌더링에 반영되어 UI에 영향을 미치는 상태를 관리할 때 사용한.useRef: 값이 변경되더라도 컴포넌트가 다시 렌더링되지 않는다. 즉, useRef는 값이 변경되더라도 화면에 영향을 미치지 않는 상태를 관리할 때 사용한다.따라서 입력 값이 화면에 즉시 반영되거나 다른 컴포넌트가 해당 상태를 참고해야 하는 경우가 아니라면 useRef를 사용하여 리렌더링을 방지할 수 있다.  useMemouseMemo는 여러 개의 state가 있을 때 불필..

📌빌드란?웹 개발에서 소스 코드를 최적화하고 변환하여 프로덕션 환경에서 사용할 수 있는 형태로 만드는 것을 말한다. 널리 사용되는 빌드 도구로는 Webpack, Vite 등이 있다. ✔👀 Webpack가장 널리 사용되는 자바스크립트 모듈 번들러 중 하나다. Webpack은 CommonJS와 ES 모듈을 모두 지원하며, 별도의 변환 없이도 require와 module.exports를 인식하고 처리할 수 있다. 반면 모든 모듈을 분석하고 의존성을 파악하며 이로인해 프로젝트의 규모가 커질수록 빌드 시간이 길어질 수 있다. ✔👀 ViteVite는 빠른 빌드 속도와 즉각적인 모듈 업데이트를 제공한다. ES 모듈을 기반으로 동작하여 브라우저가 ES모듈을 직접 해석할 수 있다. 이로 인해 초기 빌드 없이 필요한..