개발하는 동그리

useEffect와 useLayoutEffect는 모두 렌더링된 후에 특정 작업을 수행하기 위해 사용됩니다. 하지만 실행되는 타이밍과 용도가 다릅니다.먼저, useEffect는 렌더링이 완료되는 시점에 비동기적으로 실행됩니다. 즉, 화면이 실제로 사용자에게 그려진 후에 useEffect가 실행되는 방식입니다. 그래서 useEffect는 보통 데이터를 가져오는 작업이나 이벤트 리스너 추가 등 렌더링 후에 화면에 직접적인 영향을 주지 않는 작업에 주로 사용됩니다.반면에 useLayoutEffect는 렌더링 후 DOM이 업데이트되기 직전의 시점에 동기적으로 실행됩니다. 여기서 동기적이라는 것은 화면에 내용이 그려지기 전에 모든 레이아웃 관련 작업이 완료된다는 의미입니다. 예를 들어, DOM의 크기를 측정하거나..

코드 스플리팅을 통해 자바 스크립트의 파일을 필요한 부분만 나누어 로드이렇게 하면 모든 코드를 한꺼번에 불러오는 대신, 사용자가 즉시 필요한 부분 먼저 로드하여 페이지 로드 속도를 개선할 수 있습니다. 레이지 로딩 기법을 사용하여, 페이지에 있는 이미지나 비디오 같은 무거운 리소스를 사용자가 실제로 볼 때만 로드하는 방식으로  적용예를 들어, 사용자가 페이지를 스크롤할 때 하단에 이미지가 필요해지면 그때 이미지를 불러오는 것으로 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다.  파일의 물리적인 크기를 알맞게 줄이거나 WebP와 같은 가벼운 포맷으로 변환하는 방법이를 통해 불필요한 용량을 줄이고 로딩 속도를 향상시킬 수 있습니다. 예를 들어 이미지, 비디오, JS, CSS 파일의 물리적인 용량을..

CommonJS와 ES Module(ESM) 은 자바스크립트에서 모듈을 관리하고 불러오는 두 가지 주요 방식입니다.먼저 CommonJS는 주로 Node.js 환경에서 사용되며, 모듈을 동기적으로 불러옵니다. 즉, 모듈이 로드될 때까지 다음 코드가 실행되지 않는 방식입니다. CommonJS는 require 키워드를 사용해 모듈을 가져오고, module.exports를 통해 내보냅니다. 이 방식은 주로 서버측에서 사용 됐지만, 클라이언트 환경에서도 번들러를 통해 사용할 수 있습니다.반면, ES Module은 자바스크립트의 공식 표준 모듈 시스템으로, ECMAScript 2015(ES6)부터 도입되었습니다. ESM은 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, 모듈을 비동기적으로 로드합니다. 모..

먼저, 두 속성 모두 스크립트를 비동기적으로 로드한다는 공톰점이 있습니다. 하지만 실행 시점에서 중요한 차이가 있습니다.async- 스크립트를 비동기적으로 다운로드 합니다.- 다운로드가 완료되면 즉시 실행됩니다.- HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.- 여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.defer- 스크립트를 비동기적으로 다운로드 합니다.- HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.- DOMContentLoaded 이벤트 발생 직전에 실행됩니다.- 여러 defer 스크립트가 있을 경우, HTML 에 작성된 순서대로 실행됩니다.따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 ..