클라이밍하는 개발자

webpack, rollup과 같은 번들러는 왜 필요한지 설명해주세요.

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는 데이터가 현재 브라우저 세션 동안만 유지되며, 브라우저 탭이나 창을 닫으면 데이터가 삭제..

서버 확장의 두 가지 방법: 스케일 업 vs 스케일 아웃 🚀스케일 업(Scale-Up): 수직적 확장 ⬆️스케일 업은 기존 서버의 성능을 향상시키는 방식입니다. 쉽게 말해, 더 강력한 컴퓨터로 업그레이드하는 것이죠!장점 👍구현이 간단함 (기존 서버만 업그레이드)소프트웨어 아키텍처 변경이 필요 없음관리 포인트가 늘어나지 않음단점 👎하드웨어에 한계가 있음 (무한정 업그레이드 불가)비용 효율성이 낮을 수 있음 (미리 고사양 장비 확보)장애 발생 시 서비스 전체에 영향 (단일 실패 지점)예시 💡AWS EC2에서 t2.micro → t2.small → t2.medium → t2.large로 인스턴스 타입을 변경하는 것은 전형적인 스케일 업 방식입니다. 스케일 아웃(Scale-Out): 수평적 확장 ↔️스케..

React에서 로딩 상태 관리하기: useEffect vs Suspense 비교 🚀useEffect로 로딩 상태 관리하기 ⚙️전통적인 방식으로, 컴포넌트가 마운트된 후 데이터를 가져오고 로딩 상태를 수동으로 관리합니다.function DataCenter({ id }) { const [data, setData] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { async function fetchData() { setIsLoading(true); try { const response =..

리액트 동시성 모드란? 🤔리액트 동시성 모드는 마치 여러 손님이 동시에 주문하는 카페에서 바리스타가 긴급한 주문(중요 UI 작업)을 먼저 처리하는 것과 같습니다! 🏃‍♂️💨이전 리액트는 단일 스택 구조로 작업했어요. 즉, 한 번 렌더링을 시작하면 모든 작업을 끝까지 완료해야만 했습니다. 마치 하나의 커피를 완성할 때까지 다른 모든 주문을 기다리게 하는 것과 같죠. ☕️⏳하지만 동시성 모드에서는작업을 중간에 멈출 수 있음 ⏸️더 중요한 작업이 들어오면 우선순위 변경 가능 🔄사용자 경험을 방해하지 않고 백그라운드에서 작업 처리 🔍 동시성 모드의 핵심 기능들 🛠️1. startTransition 🚦특정 상태 업데이트를 '덜 중요한 작업'으로 표시할 수 있습니다.import { startTransi..

ACID에 대해서 설명해주세요.백엔드와 관련된 질문이에요.ACID는 원자성(Atomicity), 일관성(Consistency), 격리성(Isolation), 지속성(Durability)의 약자이며, 데이터베이스 트랜잭션이 안전하게 수행된다는 것을 보장하기 위한 성질을 의미합니다.각 속성은 어떤 의미를 가지나요? 🤔원자성(Atomicity) 은 트랜잭션 내부 연산들이 부분적으로 실행되고 중단되지 않는 것을 보장합니다. 쉽게 말하자면, 트랜잭션은 전체 성공과 전체 실패 중 한 가지만 수행한다는 것입니다. 예를 들면 계좌 이체 트랜잭션은 다음과 같은 연산으로 이루어져 있습니다. 이때 2번 과정에서 에러가 발생하면 1번 과정을 취소해야 합니다.1. A 계좌에 3000원 출금2. B 계좌에 3000원 입금 일관..