🍞 매일메일/프론트엔드

자바스크립트의 Promise는 비동기 작업을 관리하고, 해당 작업의 성공 또는 실패 결과를 나중에 사용할 수 있도록 하는 객체입니다. 정리해서 말씀드려보자면, Promise는 비동기 작업의 완료 여부를 약속해주는 개념이라고 할 수 있습니다. 자바스크립트는 비동기 처리를 위한 콜백 함수를 많이 사용합니다. 하지만 콜백 함수는 코드가 복잡해짐에 따라 콜백이 중첩되는 콜백 지옥 문제를 야기할 수 있습니다. Promise는 이러한 비동기 처리의 가독성을 높이고, 코드의 흐름을 명확하게 관리할 수 있도록 도와주는 방식입니다. Promise는 다음과 같은 3가지 상태를 가지는데요.첫번째로는 비동기 작업이 아직 완료되지 않은 초기 상태를 나타내는 Pending,두번째로는 비동기 작업이 성공적으로 완료되어 값을 반환한..

React의 useEffect는 컴포넌트의 특정 시점에 자동으로 호출되는 훅으로, 크게 컴포넌트가 마운트, 업데이트, 언마운트되는 시점에 호출됩니다. 먼저, useEffect는 컴포넌트가 마운트될 때, 즉 처음 렌더링되고 나서 호출됩니다.이때 데이터 초기화나 외부 API 호출, 구독 설정 등의 작업을 실행할 수 있습니다. 이처럼 useEffect는 컴포넌트가 처음 마운트될 때 초기 작업을 수행할 수 있도록 해줍니다. 또한, useEffect는 의존성 배열에 지정된 값이 변경될 때마다 다시 호출됩니다. 이때 useEffect의 return 값으로 지정된 클린업 함수가 이전 props 및 state와 함께 먼저 호출된 후, 본문의 실행 로직이 업데이트된 props 및 state와 함께 실행됩니다.두 번째 인..

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

크게 세가지 방법을 말씀드릴 수 있습니다. 첫째, 이미지 포맷 최적화입니다.전통적인 JPEG나 PNG 대신, 압축 효율이 높은 WebP 또는 AVIF와 같은 최신 포맷으로 변환할 수 있습니다. 이 포맷들은 이미지 품직을 유지하면서도 파일 크기를 크게 줄여줍니다. 단, 일부 구버전의 브라우저에서는 최신 이미지 포맷을 지원하지 않으므로, 호환성 문제를 고려할 필요가 있습니다. 둘째, 이미지 사이즈 조정입니다.화면에 노출되는 크기에 비해 이미지가 과도하게 큰 경우 이미지를 작게 리사이징 할 수 있습니다. 필요한 크기에 맞게 잘라 서버에서 내려줄 수 있습니다. 또한, 다양한 디바이스 해상도에 대응하기 위해 Responsive Images 기술, 즉 srcest과 sizes 속성을 활용할 수 있습니다. 이 경우,..