클라이밍하는 개발자

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

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

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

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

CORS(Cross-Origin Resource Sharing)는 무엇이며 왜 필요한가요?프론트엔드와 관련된 질문이에요.CORS는 서로 다른 출처(origin)에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책입니다.기본적으로 브라우저에는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy) 이 적용되어 있습니다. 해당 리소스가 같은 출처에서 제공되는 것이 아니라면 브라우저가 이를 차단하도록 되어 있습니다. 다시 말해, 다른 출처의 서버에 요청을 보낼 경우, 해당 요청에 대한 응답에 접근할 수 없도록 막습니다. 이러한 정책은 보안을 강화하지만, 이로 인해 합법적인 요청까지 차단될 수 있습니다. 그러한 상황을 해결하기 위해 CORS가 개발되었습니다.CORS를 적용하는 법을 설명드리겠습니..

캐싱이 중요한 이유 🤔캐싱은 자주 접근하는 데이터를 빠르게 접근할 수 있는 임시 저장소에 보관하는 기술입니다. 데이터베이스 쿼리, API 호출, 파일 입출력 등 비용이 많이 드는 작업의 결과를 저장해두면⚡ 응답 시간 대폭 단축📉 데이터베이스 부하 감소💰 서버 비용 절약🌐 사용자 경험 향상자, 이제 다양한 캐싱 전략에 대해 알아볼까요?1. Cache Aside (Lazy Loading) 전략 😴가장 흔히 사용되는 캐싱 패턴입니다. "필요할 때만 캐시에 데이터를 로드한다"는 개념이죠.작동 방식:데이터가 필요할 때 먼저 캐시를 확인 🔍캐시에 있으면(캐시 히트) 바로 반환 ✅캐시에 없으면(캐시 미스) 데이터베이스에서 조회 🔄데이터베이스에서 가져온 데이터를 캐시에 저장하고 반환 💾🍦 비유: 냉장고..

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

동시성(Concurrency)이란? 🔄동시성은 여러 작업이 겹치는 시간 간격 동안 실행되는 것을 말합니다. 실제로는 한 번에 하나의 작업만 처리하지만, 빠르게 번갈아가며 실행해 마치 동시에 진행되는 것처럼 보이게 하는 것이죠.🍔 쉬운 비유: 맥도날드 직원 한 명이 주문도 받고, 음식도 준비하고, 결제도 하는 것과 같아요. 한 번에 한 가지만 하지만 여러 고객을 번갈아가며 빠르게 응대하죠!동시성의 핵심 특징⏱️ 시분할(Time slicing) 방식으로 작업🔀 컨텍스트 스위칭으로 작업 전환💡 CPU 코어가 하나여도 구현 가능🧵 주로 I/O 바운드 작업에 유리// Node.js에서 동시성 예시 (비동기 콜백)function fetchUserData(userId) { // 데이터베이스 요청은 I/O ..

초보자를 위한 로드 밸런싱 알고리즘 완벽 가이드 💻안녕하세요! 오늘은 백엔드 개발에서 핵심적인 개념인 로드 밸런싱에 대해 알아보겠습니다. 데이터센터나 대규모 웹 서비스를 운영한다면 반드시 알아야 할 개념이죠! 😊로드 밸런싱이란? 🤔로드 밸런싱은 들어오는 네트워크 트래픽(요청)을 여러 서버에 균등하게 분산하는 기술입니다. 로드 밸런서는 서버 앞에 위치해 클라이언트 요청을 적절히 분배합니다.🚦 한줄 요약: 트래픽을 여러 서버에 똑똑하게 나눠주는 교통 경찰!로드 밸런싱 알고리즘 종류 📋1. 라운드 로빈 (Round Robin) 🔄서버에 순서대로 요청을 배분하는 가장 단순한 방식입니다.작동 방식:서버 A, B, C가 있다면 → A → B → C → A → B → C 순으로 요청 분배모든 서버가 동등한..

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