푸른영혼의별

관계형 데이터베이스와 비 관계형 데이터베이스의 차이점은 무엇인가요?

관계형 데이터베이스는 고정된 로우와 컬럼으로 구성된 테이블에 데이터를 저장합니다. 그리고 SQL을 사용하여 여러 테이블에 존재하는 데이터와 관계에 따라서 조인하여 합칠 수도 있습니다. 관계형 데이터베이스는 데이터를 중복 없이 한 번만 저장하고, 데이터 무결성을 보장합니다. 관계형 데이터베이스의 경우 일반적으로 스케일 업을 사용하여 확장합니다. 관계형 데이터베이스는 스키마를 유연하게 바꾸기 어렵다는 한계가 존재합니다. 또한, 관계가 존재하기 때문에 비즈니스 요구사항이 더욱 발전하면 복잡한 쿼리가 생기게 됩니다.반면, 비 관계형 데이터베이스는 NoSQL이라고 불리기도 하는데요. 정해진 스키마가 존재하지 않으며 자유롭게 데이터를 저장하고 조회할 수 있습니다. 문서, 키-값, 와이드 컬럼, 그래프 유형이 존재합..

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

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

Tanstack Query를 사용하는 이유를 설명해 주세요.

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

HTTP/1.1과 HTTP/2.0

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

localStorage와 sessionStorage의 차이점에 대해서 설명해주세요.

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

프로세스보다 스레드의 컨텍스트 스위칭이 더 빠른 이유는 무엇인가요?

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

useEffect를 이용하여 로딩 상태 관리하는 방법과 Suspense를 활용하는 방법에 대한 차이점을 설명해주세요.

Suspense와 기존 로딩 상태 관리 방식인 useEffect()와 loading state는 로딩 상태를 관리하는 방식에서 근본적인 차이가 있습니다. 기존 방식에서는 데이터를 불러올 때 useEffect() 훅을 사용하고, 로딩 상태를 관리하기 위해 isLoading이라는 별도의 상태 변수를 만들어야 합니다. 예를 들어, 데이터를 불러오는 동안엔 isLoading을 true로 설정하고, 데이터가 다 불러온다면 false로 바꾸는 식입니다. 그래서 조건에 따라 로딩 UI를 보여주는 식으로 작동합니다. 이 방식은 간단한 상황에서는 충분히 유효하지만, 여러 개의 비동기 데이터를 다룰 때에는 조건부 렌더링 로직이 복잡해질 수 있습니다.반면, Suspense는 로딩 중인 컴포넌트를 직접 렌더링하지 않고, Su..

스케일 아웃과 스케일 업의 차이점을 설명해주세요

기존 개발하고 있던 서비스의 서버가 한계에 도달하는 경우, 스케일 업(Scale-Up) 혹은 스케일 아웃(Scale-Out) 을 고려할 수 있습니다.스케일 업 은 기존의 서버를 더욱 높은 사양으로 업그레이드하는 것을 의미합니다. 예를 들어, AWS에서 EC2 t2.micro에서 t2.small로 업그레이드하는 방식이 스케일 업입니다. 스케일 업 방식은 상대적으로 간단하게 서버의 성능을 항상 시킬 수 있다는 장점이 있습니다. 하지만, 특정 서버를 무한정 업그레이드할 수 없으며, 장애에 대한 자동복구(failover)나 다중화(re-dundancy) 방안을 제시하지 않습니다. 또한 스케일 업 전략을 선택하는 경우에는 향후 사용량을 미리 추정하여 미리 고사양의 서버를 확보하는 경우가 있습니다. 이러한 경우 실..

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

리액트의 동시성 모드는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능을 의미합니다. 예전 리액트는 스택 구조로 이루어졌습니다. 즉 한 번 렌더링을 시작하면 끝까지 멈추지 않고 다 처리해야 했습니다. 하지만 동시성 모드에서는 중간에 멈추거나 작업을 잠시 뒤로 미뤄둘 수 있어서 중요한 작업을 먼저 끝낼 수 있게 되었습니다.이 동시성을 활용하여 리액트는 중요한 작업과 덜 중요한 작업을 나눠서, 덜 중요한 작업은 백그라운드에서 진행하고 중요한 부분은 바로 사용자에게 보여줍니다. 예를 들어 검색창에 뭔가를 입력하고 있을 때, 그에 맞춰 검색 결과가 업데이트되더라도, 리액트가 해당 작업을 백그라운드에서 처리하게 해서 화면이 느려지지 않..

React에서 불필요한 리렌더링을 방지하는 방법에 대해 설명드리겠습니다.첫째, React.memo를 활용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 합니다. 특히 부모 컴포넌트가 자주 업데이트되는 상황에서 유용합니다.const MemoizedComponent = React.memo(MyComponent);둘째, useMemo와 useCallback 훅을 사용하여 각각 값과 함수를 메모이제이션할 수 있습니다. useMemo는 계산 비용이 많이 드는 연산 결과를, useCallback은 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션합니다.const memoizedValue = useMemo(() => computeExpensive..

REST(Representational State Transfer) 는 자원의 표현을 이용하여 상태를 주고받는 것을 의미합니다. 여기서 자원이란 소프트웨어가 관리하는 모든 것을 의미하며 자원의 표현은 자원을 나타내기 위한 이름을 의미합니다. 가령, 서버가 관리하는 주문 데이터는 order 라고 표현할 수 있습니다. 최근에는 일반적으로 자원의 상태를 나타내기 위해 JSON 포맷을 사용합니다. REST는 네트워크 상에서 클라이언트와 서버의 통신 방식 중 하나이며, HTTP 프로토콜을 사용합니다. 구체적으로는 HTTP URI를 활용하여 자원을 명시하고 HTTP METHOD를 통해 CRUD 연산을 적용하는 것을 의미합니다.API(Application Programming Interface) 란 컴퓨터 프로그램 ..

CORS는 서로 다른 출처(origin)에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책입니다.기본적으로 브라우저에는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy) 이 적용되어 있습니다. 해당 리소스가 같은 출처에서 제공되는 것이 아니라면 브라우저가 이를 차단하도록 되어 있습니다. 다시 말해, 다른 출처의 서버에 요청을 보낼 경우, 해당 요청에 대한 응답에 접근할 수 없도록 막습니다. 이러한 정책은 보안을 강화하지만, 이로 인해 합법적인 요청까지 차단될 수 있습니다. 그러한 상황을 해결하기 위해 CORS가 개발되었습니다.CORS를 적용하는 법을 설명드리겠습니다. 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하면, 특정 출처에서의 접근을 허용할 수 ..

캐시는 성능 향상과 부하 감소를 목표로 합니다. 이때 캐시를 사용하는 양상이 서비스에 큰 영향을 끼치기도 합니다. 따라서, 캐싱 전략을 이해하는 것은 중요합니다.Cache Aside(Lazy Loading) 방식에 대해서 설명해주세요. 😀Cache Aside 방식은 캐시 히트 시 캐시에서 데이터를 불러오며, 캐시 미스 발생 시 원본 데이터베이스에서 조회하여 반환합니다. 애플리케이션은 캐시 미스가 발생하면 해당 데이터를 캐시에 적재합니다.해당 방식은 실제 요청된 데이터만 캐시에 저장되므로 불필요한 데이터 캐싱을 줄일 수 있습니다. 또한, 캐시에 문제가 발생해도 애플리케이션은 원본 데이터베이스에 직접 접근할 수 있기 때문에 서비스가 계속 작동할 수 있다는 장점이 있습니다. 하지만, 캐시 미스가 발생하는 경..

동시성(Concurrency)이란?동시성이란 이름처럼 실제로 여러 작업을 동시에 수행하는 것이 아니라, 논리적으로 동시에 실행되는 것처럼 보이게 만드는 개념입니다. 단일 코어를 기준으로 시간 분할을 통해 여러 스레드를 번갈아 가며 작업을 수행함으로써, 마치 동시에 여러 작업이 처리되는 것처럼 보이게 합니다.사용자의 입력을 기다리거나, 네트워크 요청, 파일 입출력 등의 I/O 작업 시에는 CPU가 유휴 상태로 대기하게 됩니다. 이때 CPU가 아무 일도 하지 않고 대기하는 대신, 컨텍스트 스위칭을 통해 다른 스레드의 작업을 처리할 수 있습니다. 이러한 특성 덕분에 서버는 여러 클라이언트의 요청을 동시에 처리할 수 있어 효율적입니다. 다만, 동시성 환경을 신중하게 고려하지 않으면 여러 스레드를 사용하면서 De..

Error Boundary란?Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트입니다. 일반적으로 클라이언트에서 오류가 발생할 때 표시할 UI를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는 데 활용됩니다. 클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두 가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의할 수 있습니다. Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있습니다.Error Boundary가 필요한 이유React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않으므로, 오류가 발생할 경우 페이지 ..

resolve()와 fulfilled는 Promise에서 비동기 처리시 사용되는 값들이지만, 차이점이 존재합니다. 간단히 말씀드리면, resolve()는 Promise를 완료시키는 함수이고, fulfilled는 해당 Promise가 완료된 상태를 뜻합니다.resolve()는 Promise가 성공적으로 끝났을 때 결과 값을 넘겨주는 함수입니다. 예를 들어 어떤 비동기 작업이 잘 끝났을 때, resolve()를 호출해서 "이 작업이 끝났고 결과는 이거다"라고 전달하게 됩니다. 이렇게 resolve()가 호출되면, Promise의 상태는 '이행됨' 상태로 바뀌는데, 이를 fulfilled라고 부릅니다.예를 들어, new Promise((resolve, reject) => { resolve('완료'); })처럼..

로드 밸런싱이란 애플리케이션을 지원하는 리소스 풀에 들어오는 네트워크 트래픽(들어오는 요청)을 균등하게 분산하는 것을 의미합니다. 이를 수행하는 로드 밸런서는 애플리케이션 서버 앞단에 위치하며 클라이언트 요청을 지시하고 제어합니다. 이를 통해서 애플리케이션의 가용성, 확장성, 보안 및 성능을 확보할 수 있습니다.알고 계신 로드 밸런싱 알고리즘이 존재하나요? 🤔각 방식을 설명해 주세요. 필요하시면 화이트보드를 사용해 주셔도 좋습니다. 😀라운드 로빈(Round Robin) 방식은 모든 요청이 순서대로 처리되는 방식입니다. 서버가 3대(A, B, C)가 존재하면 요청은 ABCABC 순서대로 전달됩니다. 모든 서버의 처리 능력이 동등하고, 요청의 고른 분산이 중요한 경우 고려해볼 수 있습니다. 구현이 쉬우며..

함수 선언식과 함수 표현식은 자바스크립트에서 함수를 정의하는 두 가지 방법으로, 이 둘의 주요 차이점은 호이스팅에 있습니다.함수 선언식은 이름이 있는 함수입니다. 함수 선언식은 자바스크립트 엔진이 코드를 실행하기 전에 메모리에 로드하기 때문에 호이스팅이 발생합니다. 즉, 함수 선언식으로 정의된 함수는 코드 내 어디서든 호출할 수 있습니다.console.log(add(2, 3)); // 5function add(a, b) { return a + b;}여기서 add 함수는 선언된 위치보다 앞에서 호출해도 정상 작동합니다. 이는 자바스크립트 엔진이 실행 전에 함수 선언을 미리 메모리에 로드했기 때문입니다.그에 반해 함수 표현식은 변수에 익명 함수를 할당하는 방식으로, 할당된 변수명으로 호출할 수 있습니다..

다중 서버 환경에서 세션 기반 인증 방식을 사용하는 경우에는 세션 불일치 문제가 발생할 수 있습니다. 만약 서버 A, B를 관리하고 있을 때, 로드밸런서는 사용자의 요청을 상황에 맞게 A, B 중 한 곳으로 전달합니다. 유효한 로그인 요청이 A 서버로 처음 도착하면 사용자에 대한 세션 정보는 A 서버에 저장됩니다. 이후에 해당 사용자의 또 다른 요청이 로드 밸런서에 도착했을 때, B 서버로 도착하게 되면 사용자의 세션 데이터가 존재하지 않기 때문에 요청이 제대로 처리되지 않습니다. 이를 세션 불일치 문제라고 합니다.세션 불일치 문제는 어떻게 해결할 수 있나요? 🤔세션 불일치 문제는 크게 3가지 방식으로 해결할 수 있습니다. 스티키 세션 방식, 세션 클러스터링 방식, 스토리지 분리 방식입니다.각 방식에 ..