DB Replication은 데이터베이스의 고가용성과 데이터 안정성을 보장하기 위해 널리 활용되는 핵심 기술입니다. 특히, 대규모 애플리케이션 환경에서는 데이터의 지속적인 가용성과 신뢰성이 매우 중요하기 때문에, 원본(Source) 서버와 복제(Replica) 서버 간의 데이터 동기화는 필수입니다. MySQL 기준으로 설명하겠습니다. 바이너리 로그(Binary log)를 저장하는 방식은?Replication은 Source 서버에서 발생하는 모든 데이터 변경 사항을 Replica 서버로 복제하여 두 서버 간의 데이터 일관성을 유지하는 메커니즘입니다. 이러한 과정은 주로 Binary log를 기반으로 이루어지며, Binary log는 Source 서버에서 실행된 모든 데이터 변경 쿼리를 기록하는 역할을 합니..

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

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

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간 통신을 위한 통신 규약입니다. 하지만 HTTP는 암호화되지 않는 평문 데이터를 전송하기 때문에 제3자가 정보를 조회할 수 있다는 위험이 있습니다. 이를 해결하기 위해서 HTTPS가 등장했습니다. HTTPS(Hypertext Transfer Protocol Secure)는 HTTP에 데이터 암호화가 추가되었습니다. 암호화된 데이터를 전송하기 때문에 제3자가 볼 수 없도록 할 수 있습니다. 🤔 HTTPS는 어떻게 적용할 수 있나요? HTTPS를 적용하기 위해서는 인증된 기관(Certificate Authority, CA)에게 인증서를 발급받아야 합니다. CA에 인증서를 요청하면 CA 이름, 서버의 공개키, 서버의 정보를 활..

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

CORS(Cross Origin Resource Sharing)는 출처가 다른 곳의 리소스를 요청할 때 접근 권한을 부여하는 메커니즘입니다. 리소스를 주고받는 두 곳의 출처가 다르면 출처가 교차한다고 합니다. 이때 출처는 URL 뿐만 아니라 프로토콜과 포트까지 포함합니다. 만약 클라이언트의 출처가 허용되지 않았다면 CORS 에러가 발생할 수 있습니다. 🤔 CORS는 왜 필요한가요? 과거에는 크로스 사이트 요청 위조(CSRF, Cross-Site Request Forgery) 문제가 있었습니다. 피해자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 공격입니다. CSRF를 예방하기 위해 브라우저는 동일 출처 정책(SOP, same-origin policy)을 구현했습니다. SOP가 구..

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