분류 전체보기 333

CSS Flexbox와 Grid의 차이점에 대해서 설명해주세요.

Flexbox와 Grid는 페이지에서 레이아웃을 구성할 때 자주 사용되는 CSS 속성입니다. 두 속성 모두 화면 요소를 배치하고 정렬하는 데에 사용되지만 몇가지 차이점이 존재합니다.첫번째로 Flexbox는 1차원 레이아웃이지만, Grid는 2차원 레이아웃입니다.Flexbox는 1차원 레이아웃 속성으로, row 또는 column 중 하나를 기준으로 요소를 정렬하고 배치하는 데 최적화되어 있습니다. 주로 행이나 열 중 하나의 방향으로 정렬해야 할 때 유용하며, 복잡한 행과 열을 모두 포함하는 레이아웃에서는 다소 한계가 있습니다.반면 Grid는 2차원 레이아웃 속성으로, 행과 열을 모두 사용해 요소를 배치할 수 있습니다. 따라서 복잡한 레이아웃을 구성하거나, 웹페이지의 전체적인 구조를 잡는 데 적합합니다.두번..

CORS란 무엇인가요?

CORS(Cross Origin Resource Sharing)는 출처가 다른 곳의 리소스를 요청할 때 접근 권한을 부여하는 메커니즘입니다. 리소스를 주고받는 두 곳의 출처가 다르면 출처가 교차한다고 합니다. 이때 출처는 URL뿐만 아니라 프로토콜과 포트까지 포함됩니다. 만약 클라이언트의 출처가 허용되지 않았다면 CORS 에러가 발생할 수 있습니다.CORS는 왜 필요한가요?과거에는 크로스 사이트 요청 위조(CSRF, Cross-Site Request Forgery) 문제가 있었습니다. 피해자의 브라우저에서 다른 애플리케이션으로 가짜 클라이언트 요청을 전송하는 공격입니다.CSRF를 예방하기 위해 브라우저는 동일 출처 정책(SOP, same-origin policy)을 구현했습니다. SOP가 구현된 브라우저..

웹 접근성의 개념과 개선 방법에 대해 설명해주세요

웹 접근성은 장애인과 고령자 등 신체적 제약이 있는 사용자를 포함해, 모든 사용자가 웹 페이지를 동등하게 이용할 수 있도록 보장하는 개념입니다. 마치 공공건물에 휠체어 경사로를 설치해 이동이 불편한 사람도 이용할 수 있게 하는 것처럼, 웹 페이지 역시 디지털 경사로를 마련해 누구나 접근할 수 있어야 합니다. 다만 접근성은 단순히 장애인만을 위한 것이 아닙니다. 네트워크 속도가 느리거나 밝은 햇빛 아래 화면을 보는 등 일상적인 제약 상황에서도, 모든 사용자가 제약 없이 웹을 사용할 수 있도록 하는 것이 웹 접근성의 궁극적인 목표입니다.웹 접근성 개선에는 다양한 방법이 있습니다. 우선, 단순하고 명확한 HTML 구조와 시맨틱 태그가 필요합니다. 여기서, 시맨틱 태그는 웹 페이지의 구조와 의미를 명확하게 전달..

카테고리 없음 2025.04.01

데이터베이스 시스템에서 동시성을 제어하는 방법에 대해 설명해주세요.

대표적인 동시성 제어 방식으로 MVCC(Multi-Version Concurrency Control) 와 Lock-Based Concurrency Control이 있습니다.MVCC(Multi-Version Concurrency Control)MVCC는 데이터의 여러 버전을 유지하여 트랜잭션이 동시에 데이터를 읽고 쓸 수 있도록 하는 방식입니다. 각 트랜잭션은 자신만의 일관된 스냅샷을 기반으로 데이터를 읽어, 다른 트랜잭션의 변경 사항에 영향을 받지 않습니다.데이터의 각 버전을 유지하여 읽기 작업이 쓰기 작업과 독립적으로 이루어질 수 있습니다. 트랜잭션은 시작 시점의 스냅샷을 기반으로 데이터를 읽어, 다른 트랜잭션의 변경 사항을 보지 못합니다.또한 읽기 작업 시 잠금을 사용하지 않아 높은 동시성을 제공합니..

HTTP 메서드에서 멱등성이란 무엇인가요?

연산을 여러 번 적용하더라도 결과가 달라지지 않는 성질을 멱등성이라고 합니다. HTTP 메서드의 멱등성은 동일한 요청을 한번 보내는 것과 여러번 보내는 것이 서로 동일한 효과를 지니며, 서버의 상태도 동일하게 남을 경우에 멱등하다고 이야기할 수 있습니다. 대표적으로 멱등한 메서드는 GET, HEAD, PUT, DELETE, TRACE, OPTIONS 가 있습니다.멱등성은 어떻게 활용될 수 있나요? 🤔모종의 이유로 전송 커넥션이 끊어졌을 때, 멱등성은 클라이언트가 다시 같은 요청을 해도 되는가에 대한 판단 근거가 될 수 있습니다. 멱등하다면 요청을 재시도할 때 같은 서버의 상태를 보장하기 때문에 문제가 없습니다. 반면, 멱등하지 않다면 재시도 요청시 중복 요청을 보내 문제를 발생 시킬 수 있습니다. 예를..

자바스크립트에서 어떻게 호이스팅이 가능한지에 대해서 설명해주세요.

자바스크립트에서 호이스팅이 가능한 이유는 자바스크립트 엔진이 코드를 실행하기까지 두 단계의 과정을 거치기 때문입니다.이 두 단계는 컴파일 단계와 실행 단계이며, 이 과정에서 호이스팅이 발생하게 됩니다. 구체적으로 말씀드려보겠습니다.첫번째로 컴파일 단계입니다.자바스크립트 엔진은 스크립트를 실행하기 전에 먼저 컴파일 단계를 거칩니다. 이 과정에서 함수 및 변수 선언을 한 부분이 메모리에 할당됩니다. 이때 변수와 함수 선언을 미리 메모리에 올려두기 때문에 실제 코드에서 선언된 위치보다 앞에서 접근이 가능해지는 것입니다.let, const가 아닌 var를 통해 선언되면, 컴파일 단계에서 변수가 메모리에 올라가며, 이때 값은 undefined로 초기화됩니다. 이후 실행 단계에서 코드가 진행되면서 실제 할당된 값이..

사용자가 웹사이트에 처음 접근했을 때 발생하는 일련의 과정에 대해 설명해 주세요

예를들어 사용자가 www.google.com을 입력하면, 브라우저는 HTTP 프로토콜을 사용해 구글 웹 서버와 통신하려고 합니다. HTTP는 OSI 7계층 중 애플리케이션 계층에서 동작하는 프로토콜입니다.이때 브라우저는 요청한 도메인 이름(www.google.com)에 대한 IP 주소를 알아야 하기 때문에 DNS(Domain Name System) 서버에 질의합니다. 이 질의 과정 또한 애플리케이션 계층에서 이루어지며, DNS 서버는 해당 도메인에 대한 IP 주소(예를 들어, 142.250.190.78)를 응답합니다.IP 주소를 얻은 후, 브라우저는 구글 서버와 통신을 시작합니다. HTTP는 TCP/IP를 기반으로 작동하므로, 데이터를 주고받기 전에 TCP 3-Way Handshake 과정이 필요합니다...

데이터베이스 커넥션 풀(Connection Pool)을 사용하지 않으면 어떤 문제가 발생할 수 있나요?

애플리케이션과 데이터베이스가 통신을 하기 위해서는 데이터베이스 커넥션이 필요합니다.데이터베이스 커넥션의 생애주기 :데이터베이스 드라이버를 사용하여 데이터베이스에 연결데이터 읽기/쓰기를 위한 TCP 소켓 열기소켓을 통한 데이터 읽기/쓰기연결 종료소켓 닫기커넥션 풀이 없다면 애플리케이션에서 데이터베이스에 접근해야하는 요청을 처리할 때마다 커넥션을 새로 생성하여 연결하고 해제하는 과정을 반복해야 합니다. 이 과정은 비용이 상당히 많이 들기 때문에 요청의 응답시간이 길어집니다.또 동시에 많은 요청이 들어올 경우 매번 새로운 커넥션을 생성하게 되는데, 데이터베이스의 최대 연결 수를 초과할 수 있습니다. 데이터베이스는 일반적으로 동시에 처리할 수 있는 요청 개수에 제한이 있는데, 이 제한을 초과하면 요청이 거부되어..

스레드, 프로세스, 코어의 수는 많을 수록 좋을까요?

백엔드와 관련된 질문이에요.스레드, 프로세스, 코어의 수가 많을수록 시스템 성능이 향상된다고 생각할 수 있지만, 실제로는 그렇지 않을 확률이 큽니다.스레드가 많으면?스레드가 지나치게 많아지면 운영체제가 스레드 간 컨텍스트 스위칭을 자주 수행해야 하여 CPU 자원이 스레드 관리에 소모됩니다. 이로 인해 실제 작업 수행 효율이 떨어질 수 있으며, 많은 스레드가 동시에 실행될 경우 메모리나 캐시, 락 등의 자원을 경쟁하게 되어 성능 저하나 데드 락이 발생할 가능성이 높아집니다. 또한, 스레드가 많아지면 동기화와 상태 관리가 복잡해져 버그 발생 가능성도 커집니다.프로세스가 많으면?각 프로세스는 독립된 메모리 공간을 가집니다. 그래서 많은 프로세스가 동시에 실행되면 메모리 사용량이 급격히 증가할 수 있습니다. 또..

공유 락과 배타 락에 대해서 설명해주세요.

DBMS에서 트랜잭션을 특별한 제어 없이 병행 수행을 허용한다면 데이터의 일관성과 무결성을 보장하기 어려울 수 있습니다. 이때, 병행 수행되는 트랜잭션들을 제어하기 위해서 락을 사용할 수 있으며 DBMS에서 락은 크게 공유 락과 배타 락으로 분류할 수 있습니다.공유 락(Shared Lock) 은 읽기 락(Read Lock)이라고 부르며, 공유 락이 걸린 데이터에 대해서 다른 트랜잭션에서도 공유 락을 획득할 수 있지만, 배타 락은 획득할 수 없습니다. 즉, 공유 락을 사용하면 트랜잭션 내에서 조회한 데이터가 변경되지 않는다는 것을 보장합니다.SELECT * FROM table_name WHERE id = 1 FOR SHARE;배타 락(Exclusive Lock) 은 쓰기 락(Write Lock)이라고 부르..

동기와 비동기의 차이점은 무엇인가요?

동기와 비동기는 호출하는 함수의 작업 완료를 기다리는지 여부의 차이가 있습니다. 함수 A가 동기로 함수 B를 호출하면 A는 B의 작업이 완료될 때까지 기다려야 합니다. 따라서 작업이 순차적으로 진행됩니다. 반면, 함수 A가 비동기로 함수 B를 호출하면 A는 B의 작업 완료를 신경 쓰지 않고 따로 동작합니다. 따라서 작업이 순차적으로 진행되지 않습니다.블로킹과 동기는 어떤 차이가 있나요? 🤔두 개념은 유사하면서도 다른데요. 동기 호출에서는 호출된 함수가 작업을 완료할 때까지 호출한 함수가 기다립니다. 즉, 작업이 순차적으로 진행되는 것을 의미합니다. 반면, 블로킹은 함수가 호출된 후, 호출한 함수의 결과를 기다리기 위해 실행을 멈추는 상태를 의미합니다. 즉, 제어권이 반환되지 않고 대기하는 상황입니다.스..

script 태그에서 async와 defer의 차이점

먼저, 두 속성 모두 스크립트를 비동기적으로 로드한다는 공통점이 있습니다. 하지만 실행 시점에서 중요한 차이가 있습니다.async 속성async 속성에는 다음과 같은 특징들이 존재합니다.스크립트를 비동기적으로 다운로드합니다.다운로드가 완료되면 즉시 실행됩니다.HTML 파싱과 병렬로 진행되지만, 스크립트 실행 시 HTML 파싱이 잠시 중단됩니다.여러 async 스크립트가 있을 경우, 다운로드가 완료되는 순서대로 실행됩니다.defer 속성defer 속성에는 다음과 같은 특징들이 존재합니다.스크립트를 비동기적으로 다운로드합니다.HTML 문서 파싱이 완전히 끝난 후에 실행됩니다.DOMContentLoaded 이벤트 발생 직전에 실행됩니다.여러 defer 스크립트가 있을 경우, HTML에 작성된 순서대로 실행됩니..

TCP 3-way handshake에 대해서 설명해주세요.

TCP 3-way handshake는 TCP/IP 네트워크에서 안정적이고 연결 지향적인 통신을 설정하기 위해 사용되는 절차입니다. 이 절차는 클라이언트와 서버 간에 신뢰할 수 있는 연결을 설정하기 위해 세 개의 메시지(세그먼트)를 교환하는 과정을 포함합니다.우선 클라이언트는 서버에 연결을 요청하는 SYN 세그먼트를 보내는데요. 이 세그먼트에는 초기 순서 번호(Sequence Number)와 윈도우 크기(Window Size) 정보가 포함되어 있습니다.이후 서버는 클라이언트의 요청을 수락하고, SYN과 ACK 플래그가 설정된 세그먼트를 클라이언트에 보냅니다. 이 세그먼트는 서버의 초기 순서 번호와 클라이언트의 초기 순서 번호에 대한 응답(ACK=클라이언트의 초기 순서 번호 + 1)을 포함합니다.클라이언트는..

동기 방식으로 외부 서비스를 호출할 때 외부 서비스 장애가 나면 어떻게 조치할 수 있나요?

외부 서비스 장애로 인해 응답이 오래 걸린다고 했을 때 외부 API 응답으로 대기하는 자원들이 운영 서버 내부에 쌓이면서 성능에 악영향을 줄 수 있습니다. 이를 해결하기 위한 가장 기본적인 방법은 타임아웃을 설정하는 것입니다. 크게 타임아웃에는 커넥션 타임아웃과 리드 타임아웃, HTTP 커넥션 풀 타임아웃을 설정해 볼 수 있습니다.다음과 같이 특정 서비스의 장애가 전체 서비스에 영향을 주는 경우는 어떻게 해결할 수 있을까요? 🤔1. A 서비스, B 서비스, C 서비스 연동 코드가 HTTP 커넥션 풀을 공유한다.2. A 서비스의 장애로 응답 시간 지연이 발생하는 경우 2-1. 풀에 남은 커넥션이 점점 줄어든다. 2-2. 풀에서 커넥션을 구하는 대기 시간이 증가한다. 2-3. B, C 서비..

자바스크립트 함수에 대해서 아는대로 설명해주세요

자바스크립트 함수에는 여러가지 특징들이 있습니다.첫번째 특징은 자바스크립트 함수는 일급 객체라는 점입니다.자바스크립트에서 함수는 값처럼 취급될 수 있으며, 변수에 할당하거나, 다른 함수의 인자로 전달하거나, 함수의 반환값으로 사용할 수 있습니다.const sayHello = function() { return 'Hello'; };console.log(sayHello()); // 'Hello'const executeFunction = function(fn) { return fn();};console.log(executeFunction(sayHello)); // 'Hello'이를 통해 매우 유연하게 코드를 작성할 수 있으며, 고차 함수를 포함한 다양한 패턴을 구현할 수 있습니다.두번째 특징은 익명 함수와 ..

@Component, @Controller, @Service, @Repository의 차이점에 대해서 설명해주세요.

@Component, @Service, @Controller, @Repository는 각각의 클래스를 특정 역할을 수행하는 Spring Bean으로 등록할 때 사용됩니다. 각 애너테이션은 클래스가 어떤 역할을 하는지를 명시적으로 나타내며, Spring의 @ComponentScan 기능을 통해 자동으로 Bean으로 등록됩니다. @Service, @Controller, @Repository 어노테이션은 내부적으로 @Component 어노테이션을 사용하고 있으며, 각 특징과 용도는 아래와 같습니다.@Component는 가장 일반적인 형태의 어노테이션으로, 특정 역할에 종속되지 않는 일반적인 Spring Bean을 나타냅니다. 공통 기능을 제공하는 유틸리티 클래스나, 특정 계층에 속하지 않는 일반적인 컴포넌트를..

자바스크립트 배열에 대해서 설명해주세요

자바스크립트의 배열(Array)은 순서가 있는 리스트형 객체로, 여러 값을 하나의 자료구조에 저장할 수 있습니다.배열은 제로 인덱스 기반으로, 배열의 각 값은 인덱스를 통해 접근할 수 있습니다. 배열의 선언은 간단하며, 다양한 데이터 타입을 함께 저장할 수 있습니다.const array = [1, 'apple', true, { key: 'value' }];이 배열은 숫자, 문자열, 불리언, 객체 등 다양한 타입을 저장할 수 있으며, 배열의 첫 번째 요소는 array[0]으로, 두 번째 요소는 array[1]과 같이 접근할 수 있습니다.자바스크립트 배열의 중요한 특징 중 하나는 동적 배열이라는 점입니다. 이는 배열의 크기를 미리 지정하지 않아도 되고, 요소를 추가할 때마다 배열의 크기가 자동으로 조정됩니다..

자바스크립트 호이스팅

자바스크립트 호이스팅에 대해서 설명해주세요.프론트엔드와 관련된 질문이에요.호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언이 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징입니다. 이 때문에 코드의 선언된 위치보다 상단에서 변수에 접근할 수 있는 것처럼 보일 수 있습니다.한편, 호이스팅은 값 할당까지 끌어올리지는 않습니다. 예를 들어 var로 선언된 변수는 선언과 초기화는 끌어올려지지만 값 할당은 끌어올려지지 않기 때문에, 값 할당이 이뤄지기 전까지는 undefined로 평가됩니다. 예시는 다음과 같습니다.console.log(myVar); // undefinedvar myVar = 10;console.log(myVar); // 10반면, 함수 선언식은 함수 자체가 호..

카테고리 없음 2025.03.17

동일성과 동등성

동일성과 동등성은 객체를 비교할 때 중요한 개념입니다. 자바에서는 이 두 개념을 equals() 메서드와 == 연산자를 통해 구분할 수 있습니다.equals()와 ==의 차이는 무엇인가요?equals()는 객체의 내용을 비교하는 반면, ==는 객체의 참조(레퍼런스)를 비교합니다. 따라서 두 객체의 내용이 같더라도 서로 다른 객체라면 equals()는 true를 반환할 수 있지만, ==는 false를 반환합니다.동등성(Equality)은 뭔가요?동등성은 논리적으로 객체의 내용이 같은지를 비교하는 개념입니다. 자바에서는 equals() 메서드를 사용하여 객체의 동등성을 비교합니다. Apple 클래스를 예시로 보면, Object.equals 메서드를 오버라이딩하여 객체의 실제 데이터를 비교하도록 했습니다. 그..

카테고리 없음 2025.03.17