본문 바로가기

Developer609

리액트 동시성 모드(Concurrent Mode)에 관해서 설명해주세요. 리액트의 동시성 모드는 여러 작업을 비동기적으로 동시에 처리하면서도 중간에 더 중요한 작업이 들어오면 우선순위를 바꿔서 그 작업을 먼저 처리하는 기능을 의미합니다. 예전 리액트는 스택 구조로 이루어졌습니다. 즉 한 번 렌더링을 시작하면 끝까지 멈추지 않고 다 처리해야 했습니다. 하지만 동시성 모드에서는 중간에 멈추거나 작업을 잠시 뒤로 미뤄둘 수 있어서 중요한 작업을 먼저 끝낼 수 있게 되었습니다.이 동시성을 활용하여 리액트는 중요한 작업과 덜 중요한 작업을 나눠서, 덜 중요한 작업은 백그라운드에서 진행하고 중요한 부분은 바로 사용자에게 보여줍니다. 예를 들어 검색창에 뭔가를 입력하고 있을 때, 그에 맞춰 검색 결과가 업데이트되더라도, 리액트가 해당 작업을 백그라운드에서 처리하게 해서 화면이 느려지지 않.. 2025. 11. 22.
시스템이 느리다 (운영체제 계층 → JVM/런타임 → DB/외부 연동 → APM/로그 순으로 보통 갑니다.)---1. OS / 서버 레벨 모니터링 도구✅ 리눅스 기본top / htopCPU 사용률, Load Average, 메모리, 각 프로세스 사용량 확인.vmstat, iostat, sarvmstat: CPU, 메모리, context switchiostat: 디스크 I/O 병목 확인sar: 시스템 리소스 히스토리 추적free, df, dufree: 메모리 부족 여부df/du: 디스크 풀 여부 → 스왑/로그 폭발로 인한 느려짐 진단✅ 컨테이너/쿠버네티스docker stats컨테이너별 CPU/메모리 체크kubectl top pod / nodeK8s 환경에서 pod / node 리소스 확인---2. 애플리케이션 / JVM .. 2025. 11. 22.
동시성과 병렬성에 대해서 설명해주세요. 동시성(Concurrency)이란?동시성이란 이름처럼 실제로 여러 작업을 동시에 수행하는 것이 아니라, 논리적으로 동시에 실행되는 것처럼 보이게 만드는 개념입니다. 단일 코어를 기준으로 시간 분할을 통해 여러 스레드를 번갈아 가며 작업을 수행함으로써, 마치 동시에 여러 작업이 처리되는 것처럼 보이게 합니다.사용자의 입력을 기다리거나, 네트워크 요청, 파일 입출력 등의 I/O 작업 시에는 CPU가 유휴 상태로 대기하게 됩니다. 이때 CPU가 아무 일도 하지 않고 대기하는 대신, 컨텍스트 스위칭을 통해 다른 스레드의 작업을 처리할 수 있습니다. 이러한 특성 덕분에 서버는 여러 클라이언트의 요청을 동시에 처리할 수 있어 효율적입니다. 다만, 동시성 환경을 신중하게 고려하지 않으면 여러 스레드를 사용하면서 De.. 2025. 11. 20.
리액트에서 컴포넌트가 불필요하게 리렌더링되는 상황을 방지하기 위한 방법을 설명해 주세요. React에서 불필요한 리렌더링을 방지하는 방법에 대해 설명드리겠습니다.첫째, React.memo를 활용하여 컴포넌트를 메모이제이션할 수 있습니다. 이는 컴포넌트의 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 합니다. 특히 부모 컴포넌트가 자주 업데이트되는 상황에서 유용합니다.const MemoizedComponent = React.memo(MyComponent);둘째, useMemo와 useCallback 훅을 사용하여 각각 값과 함수를 메모이제이션할 수 있습니다. useMemo는 계산 비용이 많이 드는 연산 결과를, useCallback은 자식 컴포넌트에 전달되는 콜백 함수를 메모이제이션합니다.const memoizedValue = useMemo(() => computeExpensive.. 2025. 11. 20.
CORS(Cross-Origin Resource Sharing)는 무엇이며 왜 필요한가요? CORS는 서로 다른 출처(origin)에서 제공되는 리소스에 접근할 수 있도록 허용하는 정책입니다.기본적으로 브라우저에는 보안 상의 이유로 동일 출처 정책(Same-Origin Policy) 이 적용되어 있습니다. 해당 리소스가 같은 출처에서 제공되는 것이 아니라면 브라우저가 이를 차단하도록 되어 있습니다. 다시 말해, 다른 출처의 서버에 요청을 보낼 경우, 해당 요청에 대한 응답에 접근할 수 없도록 막습니다. 이러한 정책은 보안을 강화하지만, 이로 인해 합법적인 요청까지 차단될 수 있습니다. 그러한 상황을 해결하기 위해 CORS가 개발되었습니다.CORS를 적용하는 법을 설명드리겠습니다. 서버 측에서 Access-Control-Allow-Origin 헤더를 설정하면, 특정 출처에서의 접근을 허용할 수 .. 2025. 11. 19.
로드 밸런싱에 대해서 설명해주세요. 로드 밸런싱이란 애플리케이션을 지원하는 리소스 풀에 들어오는 네트워크 트래픽(들어오는 요청)을 균등하게 분산하는 것을 의미합니다. 이를 수행하는 로드 밸런서는 애플리케이션 서버 앞단에 위치하며 클라이언트 요청을 지시하고 제어합니다. 이를 통해서 애플리케이션의 가용성, 확장성, 보안 및 성능을 확보할 수 있습니다.알고 계신 로드 밸런싱 알고리즘이 존재하나요? 🤔각 방식을 설명해 주세요. 필요하시면 화이트보드를 사용해 주셔도 좋습니다. 😀라운드 로빈(Round Robin) 방식은 모든 요청이 순서대로 처리되는 방식입니다. 서버가 3대(A, B, C)가 존재하면 요청은 ABCABC 순서대로 전달됩니다. 모든 서버의 처리 능력이 동등하고, 요청의 고른 분산이 중요한 경우 고려해볼 수 있습니다. 구현이 쉬우며.. 2025. 11. 19.
다중 서버 환경에서 세션 기반 인증 방식을 사용하는 경우 발생할 수 있는 문제점은 무엇인가요? 다중 서버 환경에서 세션 기반 인증 방식을 사용하는 경우에는 세션 불일치 문제가 발생할 수 있습니다. 만약 서버 A, B를 관리하고 있을 때, 로드밸런서는 사용자의 요청을 상황에 맞게 A, B 중 한 곳으로 전달합니다. 유효한 로그인 요청이 A 서버로 처음 도착하면 사용자에 대한 세션 정보는 A 서버에 저장됩니다. 이후에 해당 사용자의 또 다른 요청이 로드 밸런서에 도착했을 때, B 서버로 도착하게 되면 사용자의 세션 데이터가 존재하지 않기 때문에 요청이 제대로 처리되지 않습니다. 이를 세션 불일치 문제라고 합니다.세션 불일치 문제는 어떻게 해결할 수 있나요? 🤔세션 불일치 문제는 크게 3가지 방식으로 해결할 수 있습니다. 스티키 세션 방식, 세션 클러스터링 방식, 스토리지 분리 방식입니다.각 방식에 .. 2025. 11. 18.
Error Boundary가 무엇이며, 이를 사용하는 이유는 무엇인가요? Error Boundary란?Error Boundary는 React 컴포넌트에서 발생하는 오류를 잡아내고, 전체 애플리케이션이 다운되는 것을 방지하기 위한 특수한 컴포넌트입니다. 일반적으로 클라이언트에서 오류가 발생할 때 표시할 UI를 제공하여, 애플리케이션의 신뢰성과 사용자 경험을 높이는 데 활용됩니다. 클래스형 컴포넌트의 componentDidCatch와 getDerivedStateFromError 두 가지 라이프사이클 메서드를 사용하여 오류 발생 시의 행동을 정의할 수 있습니다. Error Boundary는 클래스형 컴포넌트에서만 사용할 수 있습니다.Error Boundary가 필요한 이유React는 기본적으로 비동기 작업에서 발생하는 오류를 자동으로 처리하지 않으므로, 오류가 발생할 경우 페이지 .. 2025. 11. 18.
SOLID 원칙에 대해서 설명해 주세요. SOLID 원칙은 객체지향 설계 5원칙이라고도 불리며, 각 원칙의 앞 글자를 따서 만들어졌습니다. 객체지향설계의 핵심 중 하나는 의존성을 관리하는 것인데요. 의존성을 잘 관리하기 위해서는 SOLID 원칙을 준수해야 합니다.단일 책임 원칙(Single Responsibilty Principle) 은 클래스가 오직 하나의 목적이나 이유로만 변경되어야 한다는 것을 강조합니다. 여기서 “책임”이란 단순히 메서드의 개수를 뜻하지 않고, 특정 사용자나 기능 요구사항에 따라 소프트웨어의 변경 요청을 처리하는 역할을 의미합니다.즉, 클래스는 한 가지 변화의 이유만 가져야 하며, 이를 통해 변경이 발생했을 때 다른 기능에 영향을 덜 미치도록 설계됩니다. 이렇게 하면 유지보수가 쉬워지고 코드가 더 이해하기 쉬워집니다.개방.. 2025. 11. 17.

티스토리툴바