개발하는 동그리

자바 스크립트는 싱글 스레드 언어이다. 즉, 한 번에 하나의 작업만을 처리할 수 있는 단일 콜 스택을 가집니다. 브라우저나 Node.js 환경이 제공하는 비동기 처리 메커니즘 덕분에 여러 작업을 동시에 수행할 수 있습니다.자바스크립트는 브라우저의 Web API or Node의 libuv, 이벤트 루프, 태스크 큐를 이용하여 비동기 작업을 동시에 처리합니다. 동작 메커니즘 비동기 작업이 발생하면 해당 작업(예: 타이머, 네트워크 요청 등)은 브라우저의 Web API 또는 Node.js의 백그라운드 API(libuv)에 위임된다.자바스크립트 엔진은 이 작업들을 위임한 뒤 나머지 코드를 계속 실행한다.위임된 작업이 완료되면, 콜백 함수는 태스크 큐(Task Queue)에 등록된다.이벤트 루프는 콜 스택이 비어..

렌더링 속도 개선하는 방법 5가지! 렌더링 속도 개선 방법 5가지이미지 포멧 최적화이미지 사이즈 조정css 스타일지연 로딩(Lazy Loading)CDN 이미지 포멧 최적화기존의 JPEG 또는 PNG 대신 WebP, AVIF 등의 고효율 이미지 포맷을 사용하면, 동일한 품질 수준에서 더 작은 용량의 이미지를 제공할 수 있습니다.단, 일부 구버전 브라우저에서는 최신 이미지 포멧(WebP, AVIF)을 지원하지 않기 때문에, 호환성 문제가 발생할 수 있습니다.// 위 구조를 통해 브라우저는 지원되는 최신 포맷(WebP 또는 AVIF)을 우선적으로 로드하고, // 그렇지 않을 경우 JPEG 등의 표준 포맷으로 자동 전환하는 방법 이미지 사이즈 조정실제 노출 화면에 비해 과도하게 큰 이미지 파일은 불..

낙관적 업데이트낙관적 업데이트는 성공적인 상태 업데이트가 이뤄질 거라는 가정 하에 서버 응답 이전에 UI를 미리 업데이트하는 방법입니다. 사용자 요청을 서버가 성공적으로 처리할 거라고 미리 예상하고, UI를 즉각적으로 변경해서 사용자에게 빠른 반응을 보여줍니다.낙관적 업데이트의 대표적인 예시로 좋아요 기능을 들 수 있습니다. 예를 들어, 사용자가 좋아요 버튼을 클릭하면 서버 응답을 기다리지 않고, 화면에 바로 좋아요 클릭에 대한 상태를 보여주는 것입니다. 서버 응답이 성공적으로 돌아오면 그대로 두고, 혹시나 실패하면 UI에서 해당 좋아요 상태를 다시 해제하거나 오류 메시지를 보여주는 방식입니다.낙관적 업데이트의 장점은, 서버 응답 속도와 관계 없이 즉각적인 피드백을 제공해서 사용자들이 시스템을 빠르게 쓸..

프론트엔드 E2E 테스트란? 🤔프론트엔드 E2E(End-to-End) 테스트는 애플리케이션의 사용자 경험을 처음부터 끝까지 시뮬레이션하여 테스트하는 방식입니다. 단위 테스트나 통합 테스트와 달리, E2E 테스트는 사용자 관점에서 전체 애플리케이션이 의도한 대로 작동하는지 검증합니다. 브라우저 환경에서 실제 사용자 동작을 흉내 내어 다양한 시나리오를 테스트하며, 버튼 클릭, 페이지 이동, 데이터 입력 등을 포함합니다. 보통 E2E 테스트는 Cypress, Playwright과 같은 도구를 이용해 작성합니다.E2E 테스트를 진행하면 사용자와 동일한 방식으로 애플리케이션을 테스트하므로, 사용자에게 직접적인 영향을 미치는 오류를 조기에 발견할 수 있습니다. 이는 프로덕트의 안정성을 높이고, 실제 배포 후 발생..

SSR(Server Side Rendering) 이란? SSR(Server Side Rendering) 방식은 서버에서 완성된 정적 HTML을 클라이언트에 내려주는 방식입니다. 클라이언트 측에서는 해당 HTML을 파싱만 하여 화면을 그리게 됩니다.반면, CSR(Client Side Rendering) 방식은 브라우저가 서버로부터 비어있는 뼈대 HTML을 받아온 후, 필요한 자바스크립트 번들을 다운로드하고 번들을 실행하여 동적으로 컨텐츠를 채우는 방식입니다.Next.js에서는, SSR 방식으로 정적인 html을 내려주어 초기 화면을 빠르게 렌더한 이후, hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환하는 작업을 수행하기도 합니다.SSR의 장점은 무..

웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털 경사로를 마련해 누구나 접근할 수 있어야 합니다. 다만 접근성은 단순히 장애인만을 위한 것이 아닙니다. 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가 제약 없이 웹을 사용할 수 있도록 하는 것이 웹 접근성의 궁극적인 목표입니다.웹 접근성 개선에는 다양한 방법이 있습니다. 우선, 단순하고 명확한 HTML 구조와 시맨틱 태그가 필요합니다. 여기서, 시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 전달..

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 에 작성된 순서대로 실행됩니다.따라서, 실행 순서가 중요한 스크립트나 메인 어플리케이션의 로직을 담고 있는 ..