클라이밍하는 개발자

시스템 간 비동기 연동 방식에는 무엇이 있나요?

🔄 비동기 연동이란? 서로 다른 시스템끼리 즉시 응답을 기다리지 않고 데이터를 주고받는 방식이에요. 즉, 한 시스템이 데이터를 보내면, 다른 시스템은 시간이 지나서 받아서 처리할 수 있죠! 🛠️ 대표적인 비동기 방식 3가지 1️⃣ 메시징 시스템 활용 🚀 - 이메일을 보내고 답장을 기다리는 것과 비슷해요! - A 시스템이 메시지 큐(Kafka, RabbitMQ 등)에 메시지를 저장하면, B 시스템이 나중에 읽어서 처리하는 방식이에요. - 장점: 많은 데이터를 빠르게 처리 가능! - 주의할 점: 메시지가 손실되지 않게 해야 하고, 데이터베이스 저장과 메시지 전송이 동시에 이뤄지도록 고민해야 해요. 2️⃣ 데이터베이스 활용 🗄️ - 메모를 남..

리액트에서 컴포넌트란 무엇인가요?

📌 컴포넌트란? 컴포넌트는 리액트에서 UI를 구성하는 작은 조각이에요. 쉽게 말해, 우리가 웹사이트를 만들 때 버튼, 입력 창, 카드 같은 것들을 각각 하나의 컴포넌트로 만들 수 있어요. 이렇게 쪼개서 만들면 관리가 쉽고, 원하는 곳에서 재사용할 수도 있죠! ✨ 컴포넌트의 종류 리액트에서는 클래스형 컴포넌트와 함수형 컴포넌트가 있어요. 요즘은 함수형 컴포넌트가 많이 쓰이는데, 더 간결하고 이해하기 쉬운 코드 작성을 도와줘요. 🔥 컴포넌트 설계할 때 중요한 것들 1️⃣ 하나의 컴포넌트가 너무 많은 일을 하면 안 돼요! - 예를 들어, 버튼을 만들면서 로그인 로직까지 다 넣으면 유지보수가 어려워져요. 버튼은 버튼 역할만, 로그인은 로그인 역할만 하도록 분리하는 게 좋아요! ..

이벤트 버블링과 캡처링에 대해 설명해주세요.

이벤트 버블링과 캡처링에 대해 설명해주세요.프론트엔드와 관련된 질문이에요.이벤트 버블링은 이벤트가 발생했을 때 가장 안쪽의 타겟 요소에서 시작하여 부모 요소로 전파되는 방식입니다. 예를 들어, 버튼을 클릭했을 때 버튼 자체에서 이벤트가 발생한 후 이 이벤트가 상위 요소인 div, body, document, window로 전파되는 과정을 거치게 됩니다. 기본적으로 브라우저는 이벤트 전파를 버블링 단계에서 처리하도록 설계되어 있습니다.반면, 이벤트 캡처링은 이와 반대 방향으로 진행됩니다. 즉, 이벤트가 최상위 부모 요소에서부터 시작해 점점 타겟 요소로 내려오면서 전파됩니다. 예를 들어, window에서 이벤트가 시작되어 document, body, div를 거쳐 버튼에 도달하게 되는 방식입니다. 기본적으로..

캐시 스탬피드 현상에 대하여 설명해주세요.

캐시 스탬피드 현상에 대하여 설명해주세요.백엔드와 관련된 질문이에요.대규모 트래픽 환경에서 캐시를 운용하는데, Cache Aside(캐시 미스 발생 시 적재) 전략을 사용한다고 가정하겠습니다. 이때, 수많은 요청들이 동시에 캐시 미스를 확인하고 원본 저장소에서 데이터를 가져와 캐시에 적재하는 상황이 발생할 수 있는데요. 이를 캐시 스탬피드 현상 혹은 Thundering Herd 문제라고 표현합니다. 캐시 스탬피드 현상은 원본 데이터베이스와 캐시의 성능을 저하할 수도 있습니다.이 문제는 어떻게 풀어볼 수 있을까요? 🤓해당 방식은 크게 잠금, 외부 재계산, 확률적 조기 재계산 방식으로 풀어볼 수 있습니다.잠금(Locking) 방식 은 한 요청 처리 스레드가 해당 캐시 키에 대한 잠금을 획득합니다. 이로인해..

webpack, rollup과 같은 번들러는 왜 필요한지 설명해주세요.프론트엔드와 관련된 질문이에요.번들러는 다양한 파일과 모듈을 하나의 배포 가능한 번들로 묶는 역할을 합니다. 번들러가 필요한 주요 이유는 다음과 같습니다.첫째, 네트워크 요청 성능을 개선하기 위해서입니다. 다수의 개별 파일에 대해 모두 네트워크 요청을 수행할 경우, 성능에 부정적인 영향이 있을 수 있습니다. 번들러는 다수의 파일을 하나 또는 소수의 파일로 묶어 네트워크 요청을 최적화합니다. 예를 들어, 애플리케이션이 수백 개의 JavaScript, CSS, 이미지 파일을 사용한다면, HTTP 요청 수가 증가해 로딩 속도가 느려질 수 있습니다. 이때 번들러는 이들을 효율적으로 묶어 소수의 파일로 만듦으로써 네트워크 요청 수를 줄여줍니다...

관계형 vs 비관계형 데이터베이스🏗️ 관계형 데이터베이스 (RDBMS)📋 특징고정된 스키마: 테이블 구조가 미리 정의됨SQL 사용: 표준화된 쿼리 언어ACID 속성: 트랜잭션의 안전성 보장정규화: 데이터 중복 최소화🏢 실제 예시: 직원 관리 시스템-- 직원 테이블CREATE TABLE employees ( id INT PRIMARY KEY, name VARCHAR(100), department_id INT, FOREIGN KEY (department_id) REFERENCES departments(id));-- 부서 테이블과 관계 설정SELECT e.name, d.department_name FROM employees e JOIN departments d ON e.department_id =..

Tanstack Query를 사용하는 이유를 설명해 주세요.프론트엔드와 관련된 질문이에요.TanStack Query는 서버 상태 관리의 복잡성을 극복하기 위해 사용하는 라이브러리입니다. 여기서 서버 상태란 서버에서 제공하는 데이터로, 클라이언트에서 직접 수정할 수 없고 네트워크 요청과 같은 비동기 작업을 통해 가져오거나 갱신해야 하는 데이터를 의미합니다.TanStack Query를 사용하는 주요 이유는 다음과 같습니다.첫째, 효율적인 캐싱 처리 기능을 제공합니다. 이를 통해 동일한 데이터를 반복적으로 요청하지 않아 네트워크 비용을 절감하고, 캐싱된 데이터를 즉시 제공해 더 나은 사용자 경험을 제공할 수 있습니다.둘째, 비동기 데이터 관리의 복잡성을 줄여줍니다. TanStack Query는 데이터의 가져오..

HTTP/1.1과 HTTP/2.0에 대해서 설명해주세요.백엔드와 관련된 질문이에요.HTTP/1.1에 대해서 설명해주세요.HTTP는 웹상에서 클라이언트와 서버 간 통신을 위한 프로토콜입니다. HTTP/1.0의 경우에는 한 개의 요청과 응답마다 TCP 커넥션을 생성하여 사용됐습니다. 하지만, 이러한 방식은 매 요청마다 연결을 생성하는 오버헤드가 발생합니다. HTTP/1.1은 이러한 문제를 지속 커넥션(Persistent Connection) 이라는 지정한 타임아웃만큼 커넥션을 종료하지 않는 방식으로 해결합니다.또한 파이프라이닝(Pipelining) 을 지원하여 요청의 응답 지연을 감소합니다. 파이프라이닝에서 HTTP 요청은 연속적이며, 순차적으로 전달됩니다. 기존에는 요청한 이후에 응답을 기다리고 그 다음 ..

프로세스보다 스레드의 컨텍스트 스위칭이 더 빠른 이유는 무엇인가요?백엔드와 관련된 질문이에요.컨텍스트 스위칭(Context Switching)이란?컨텍스트 스위칭은 CPU나 코어에서 실행 중이던 프로세스나 스레드가 다른 프로세스나 스레드로 교체되는 과정을 말합니다. 이는 멀티태스킹 시스템에서 여러 작업을 효율적으로 관리하기 위해 필수적인 메커니즘입니다.컨텍스트(Context)란?컨텍스트는 프로세스나 스레드의 현재 상태를 의미합니다. 여기에는 CPU의 레지스터 상태(프로그램 카운터, 스택 포인터 등)와 메모리 상태가 포함됩니다. 컨텍스트는 프로세스나 스레드가 실행을 중단하고 나중에 다시 시작할 때 필요한 모든 정보를 담고 있습니다.컨텍스트 스위칭이 필요한 이유멀티태스킹 시스템에서는 여러 프로세스나 스레드가..

localStorage와 sessionStorage의 차이점에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.localStorage와 sessionStorage는 브라우저에서 제공하는 클라이언트 측 저장소 API로, 둘 다 데이터를 키-값 쌍 형태로 저장합니다.차이점은 데이터의 지속성과 범위에 있습니다.localStorage는 데이터를 영구적으로 저장합니다. 브라우저를 닫거나 장치를 재부팅해도 데이터가 유지되며, 동일한 도메인 내의 모든 탭에서 데이터를 공유할 수 있습니다.사용 예로는 다크모드 같은 테마 설정이나 장바구니 데이터와 같이 장기적으로 유지해야 하는 데이터 저장에 적합합니다.sessionStorage는 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저 탭이나 창을 닫으면 데이터가 삭제..