CORS 설정 없이 SOP를 우회하여 외부 서버와 통신할 수 있는 방법이 있을까요? (136)
프록시 서버
프록시 서버를 이용한다면 CORS 설정 없이도 SOP를 우회할 수 있습니다.
프록시 서버는 브라우저 대신 외부 서버에 요청을 보내고 응답을 받는 역할을 대리 수행하는 서버입니다. 브라우저 측에서 직접 외부 서버에 요청을 보내지 않고, 클라이언트와 동일한 origin의 프록시 서버를 통해 요청을 보내면 SOP의 제한을 피할 수 있습니다.
css box-sizing 속성에 대해 설명해주세요. (135)
요소의 크기 계산,content-box,border-box,padding과 border
box-sizing은 CSS에서 요소의 크기를 어떻게 계산할지를 결정하는 속성입니다. box-sizing에는 content-box와 border-box 속성이 있습니다.content-box는box-sizing속성의 기본값으로, 적용 시 요소의width와height값이 내용 영역만의 크기를 나타냅니다. 그 안에 추가되는padding과border는 크기에 포함되지 않습니다.
border-box를 적용하면width와height값이내용 영역,padding,border를 모두 포함하는 크기를 나타냅니다. 즉,width와height는 실제 콘텐츠의 크기뿐만 아니라 패딩과 테두리까지 포함된 크기로 설정됩니다.
알고 있는 이미지 포맷과 각 포맷별 특징을 알려주세요. (134)
JPEG, PNG, WebP, SVG
자주 활용되는 JPEG, PNG, WebP, SVG에 대해 설명드리겠습니다.
먼저 JPEG는 손실 압축 방식을 사용하는 이미지 포맷입니다. 파일 크기를 효율적으로 줄일 수 있다는 장점이 있습니다. 하지만 이미지를 저장할 때마다 데이터가 손실되어 화질이 점점 나빠지는 현상이 발생한다는 단점이 있습니다.
PNG는 무손실 압축 방식을 사용하는 이미지 포맷입니다. PNG는 투명도를 지원하며, JPEG보다 파일 크기가 큰 편입니다.
WebP는 Google이 웹 환경을 위해 개발한 최신 이미지 포맷입니다. 손실/무손실 압축을 모두 지원하며 투명도도 지원합니다. JPEG나 PNG보다 더 나은 압축률을 제공하면서도 화질을 유지할 수 있어 웹 최적화에 적합합니다. 다만, WebP는 비교적 최신 포맷이기 때문에 지원하지 않는 브라우저가 존재합니다.
SVG는 벡터 기반의 이미지 포맷입니다. SVG는 XML 형식으로 이루어져 있습니다. 크기를 조절해도 이미지 품질 저하가 없고 파일 크기가 작다는 장점이 있습니다. 이미지의 형태가 복잡할 경우 XML 기반의 코드가 매우 길어져 파일 크기가 커지고 연산이 무거워진다는 단점이 있습니다.
프로토타입 상속의 동작 방식에 대해 설명해주세요. (133)
객체 간의 상속 구현,Object.create(), 함수 생성자의prototype프로퍼티, 프로토타입의 프로토타입
프로토타입은 자바스크립트에서 객체 간의 상속을 구현하는 메커니즘입니다. 프로토타입 연결은
Object.create()나 함수 생성자의 prototype 프로퍼티를 통해 이루어집니다.프로토타입 상속이 동작하는 방식은 프로토타입 체인을 기반으로 합니다. 객체에서 어떤 프로퍼티를 접근하려고 할 때, 자바스크립트 엔진은 해당 객체에서 프로퍼티를 찾습니다. 만약 프로토타입 객체에서도 해당 프로퍼티를 찾지 못하면, 그 다음에는 프로토타입의 프로토타입을 탐색합니다. 이런 식으로 프로토타입이 꼬리에 꼬리를 물고 연결된 형태를 두고 프로토타입 체인이라고 부르는 것입니다.
HTTP/1.1과 HTTP/2.0에 대해서 설명해주세요. (130)
통신을 위한 프로토콜, 한 개의 요청과 응답마다 TCP 커넥션을 생성, 지속 커넥션, 파이프라이닝, HOL Blocking, 텍스트 형식 → 바이너리 형태, 멀티플렉싱, 요청과 응답을 병렬 처리, HPACK 헤더 압축 방식
HTTP는 웹상에서 클라이언트와 서버 간 통신을 위한 프로토콜입니다. HTTP/1.0의 경우에는 한 개의 요청과 응답마다 TCP 커넥션을 생성하여 사용됐습니다. 하지만, 이러한 방식은 매 요청마다 연결을 생성하는 오버헤드가 발생합니다.
HTTP/1.1은 이러한 문제를 지속 커넥션(Persistent Connection) 이라는 지정한 타임아웃만큼 커넥션을 종료하지 않는 방식으로 해결합니다. 또한 파이프라이닝(Pipelining) 을 지원하여 요청의 응답 지연을 감소합니다. 파이프라이닝에서 HTTP 요청은 연속적이며, 순차적으로 전달됩니다. 파이프라이닝에서는 필요한 모든 자원에 대한 요청을 순차적으로 서버로 전송한 다음 모든 요청에 대한 응답을 한 번에 기다리게 됩니다.
Head-of-Line Blocking(HOL Blocking) 문제가 있습니다. 만약 3개의 요청을 파이프라인을 통해 전송을 한다고 했을 때, 서버는 모든 요청을 순서에 맞춰서 응답해야 합니다. 이때 첫 번째 요청이 오래 걸린다고 하면, 나머지 요청은 첫 번째 요청의 처리를 기다려야 합니다.
HTTT/1.1는 메시지를 일반 텍스트 형식으로 전송했습니다. 2.0부터는 기존 HTTP 메시지를 프레임이라는 단위로 분할하고 이를 바이너리 형태로 만들어서 전송합니다.
HTTP/2.0 부터는 멀티플렉싱(Multiplexing) 을 지원합니다. 이는 하나의 커넥션을 사용하여 요청과 응답을 병렬로 처리할 수 있는 방식입니다. 클라이언트가 서버로 여러 요청을 동시에 보내도 각 요청이 독립적으로 처리되기 때문에 애플리케이션 레이어의 HOL Blocking 문제를 해결합니다. 또한 HPACK 헤더 압축 방식을 사용해 반복되는 헤더를 효율적으로 관리하여 대역폭 사용이 최적화되었습니다.
TDD란 무엇인지 설명해주세요. (127)
테스트 먼저 작성, Red-Green-Refactor, 실패하는 테스트, 테스트를 통과할 있는 최소한의 코드, 리팩토링하여 가독성이나 성능을 개선, 디버깅 시간을 단축, 리팩토링이 용이, 좋은 설계 유도
TDD는 소프트웨어 개발 방법론 중 하나로, 테스트를 먼저 작성한 후 실제 코드를 작성하는 방법론입니다.
TDD는 일반적으로 ‘Red-Green-Refactor’ 사이클을 따릅니다.
첫 번째 단계는 Red로, 실패하는 테스트를 작성하는 것입니다. 이 테스트는 아직 구현되지 않은 기능에 대한 테스트로, 코드가 이를 통과하지 못하는 상태에서 시작됩니다.
두 번째 단계는 Green으로, 테스트를 통과할 있는 최소한의 코드를 작성합니다. 이 단계에서는 테스트를 통과시키는 것만 목표로 하여 코드를 간결하게 작성합니다.
마지막 단계는 Refactor로, 작성한 코드를 리팩토링하여 가독성이나 성능을 개선합니다. 이때 테스트는 여전히 통과해야 하므로, 리팩토링이 기능에 영향을 미치지 않도록 합니다.
디버깅 시간을 단축, 리팩토링이 용이, 좋은 설계가 유도됩니다. 처음에는 테스트를 작성하는 데 시간이 소요될 수 있지만, 장기적으로는 위와 같은 장점들로 인해 생산성이 오히려 높아지는 효과를 누릴 수 있습니다.
useRef는 언제 사용하나요? (126)
컴포넌트 내에서 변경 가능한 값을 저장하고 관리, DOM 요소에 접근, 값을 유지
useRef()는 React 컴포넌트 내에서 변경 가능한 값을 저장하고 관리할 수 있게 해줍니다. useRef()는 주로 두 가지 목적에 사용됩니다. DOM 요소에 접근하거나, 값을 유지하면서도 렌더링을 트리거하지 않기 위해 사용됩니다.Node와 Element의 차이에 대해 설명해주세요. (125)
DOM, Node의 특정 타입, 객체
Node는 DOM을 구성하는 가장 기본적인 구성 단위입니다.Element는 Node의 특정 타입 중 하나로, HTML이나 XML 태그로 표현되는 객체를 의미합니다. 쉽게 말해, 모든 Element는 Node이지만, 모든 Node가 Element인 것은 아닙니다.
클로저에 대해서 설명해주세요. (2)
선언될 때의 스코프 기억, 일급 함수, 렉시컬 스코프
클로저는 함수가 선언될 때의 스코프를 기억하여, 함수가 생성된 이후에도 그 스코프에 접근할 수 있는 기능을 말합니다.
클로저는 자바스크립트의 함수가 일급 객체라는 특성과 렉시컬 스코프의 조합으로 만들어집니다. 클로저는 변수와 함수의 접근 범위를 제어하고 특정 데이터와 상태를 유지하기 위해 자주 활용됩니다.
첫째, 데이터 은닉에 활용됩니다. 클로저는 외부에서 접근할 수 없는 비공개 변수와 함수를 만들 수 있습니다. 이를 통해 데이터를 은닉하여 외부 접근을 막고, 데이터 무결성을 유지할 수 있습니다.
둘째, 비동기 작업에 활용됩니다. 클로저는 비동기 작업에서 이전의 실행 컨텍스트를 유지해야 할 때 유용합니다. 콜백 함수가 비동기적으로 실행될 때 클로저를 사용하면 함수 실행 시점의 변수를 참조할 수 있습니다.
셋째, 모듈 패턴을 구현하는 데 활용됩니다. 모듈 패턴은 특정 기능을 캡슐화하고, 외부에 공개하고자 하는 부분만 선택적으로 노출하여 코드의 응집력을 높이고, 유지보수성을 향상시키는 패턴입니다. 필요한 함수와 데이터만 외부로 노출함으로써 모듈 패턴을 쉽게 구현할 수 있습니다.