Web/Frontend 기본 CS 정리 (20) 썸네일형 리스트형 CORS와 Preflight의 개념 출처웹 개발자 면접 단골 질문 1 | CORS와 Preflight의 개념CORS란 무엇인지 설명해주세요CORS는 Cross Origin Resource Sharing의 약자로 교차 출처 리소스 공유라고도 불립니다.2009년에 HTML5 표준으로 채택된 프로토콜이며, SOP에 의해 제한된 교차 출처 간 리소스 공유를 허용하기 위한 방법입니다.애플리케이션의 요구사항이 복잡해지면서, 다른 도메인의 리소스를 활용하는 경우가 많아졌기 때문에 등장한 프로토콜로, 서버에서 CORS 관련 헤더를 설정하여 다른 도메인에서의 리소스 요청을 허용할 수 잇습니다.→ www.google.com에서 현재 서버로 리소스 요청하는 것을 허용, origin 외에도, 허용할 HTTP 메서드 종류, 요청 헤더 등 여러 옵션 설정이 가능C.. 로그인 처리를 할 때 쿠키와 세션을 어떻게 사용하시나요? 답변사용자가 로그인을 성공하면 서버는 세션을 생성하고 세션 ID를 브라우저에게 쿠키로 전달합니다.이때 클라이언트는 서버에 요청을 보낼 때마다 세션 ID가 담긴 쿠키를 서버에 전송하여 사용자 인증을 진행합니다.서버는 클라이언트에서 보낸 세션 ID를 확인하여 사용자의 로그인 상태를 유지하거나 필요한 데이터를 제공합니다. 쿠키와 세션의 기본 개념쿠키주로 서버와 클라이언트 간 상태를 유지하거나 인증 정보를 저장할 때 사용됩니다.클라이언트(브라우저)에 저장되는 데이터세션세션 ID가 쿠키에 저장되며, 서버가 클라이언트의 인증 상태를 추적함서버에서 관리하는 사용자 상태 정보로그인 처리에 쿠키와 세션 활용사용자가 로그인하면 서버는 세션을 생성하고, 세션 ID를 브라우저에 쿠키로 저장이후 클라이언트는 요청마다 이 세션 .. 프로세스와 스레드에 대해 설명해주세요 답변프로세스와 스레드는 컴퓨터 프로그램이 실행되는 단위를 의미합니다.먼저 프로세스는 프로그램이 실행되면서 메모리에 올라가고 해당 프로그램을 읽을 수 있는 CPU가 할당된 상태의 프로그램을 의미합니다.스레드는 프로세스 내에서 실행되는 작업 단위를 의미합니다.프로세스는 최소 1개의 스레드를 가지며, 여러 스레드가 병렬로 작업을 처리할 수 있습니다.프로세스정의:프로그램이 실행되면 메모리에서 별도의 공간을 할당받아 하나의 프로세스로 동작프로세스는 운영체제에서 실행 중인 프로그램의 독립된 작업 단위특징:독립된 메모리 공간: 프로세스는 자신만의 메모리 공간(코드, 데이터, 스택 등)을 가지고 다른 프로세스와 메모리를 공유하지 않음무겁고 독립적: 하나의 프로세스가 종료되더라도 다른 프로세스에는 영향을 주지 않음통신 .. 자바스크립트에서 일어나는 데이터 형 변환에 대해 설명해주세요. 답변자바스크립트에서 데이터 형 변환에는 크게 명시적 변환과 암시적 변환이 있습니다.명시적 변환은 개발자가 직접 데이터의 타입을 변환하는 방식이고, 암시적 변환은 자바스크립트가 해당 데이터의 타입을 유추하여 자동으로 타입을 변환하는 방식입니다.명시적 변환프로그래머가 직접 함수를 호출하거나 코드를 작성해서 데이터 타입을 변환하는 방식숫자(Number)로 변환Number()를 사용하여 다른 데이터 타입을 숫자로 변환javascript코드 복사Number("123"); // 123 (문자열 → 숫자)Number(true); // 1 (불리언 → 숫자)Number(false); // 0 (불리언 → 숫자)Number("abc"); // NaN (문자열이 숫자로 변환 불가)문자열(String)로 변환Str.. 자바스크립트가 유동적인 언어인 이유는 무엇인가요? 답변자바스크립트가 유동적인 언어인 이유는 동적 타입 시스템과 타입 추론 덕분입니다. 변수의 타입이 고정되지 않고, 런타임에 따라 숫자, 문자열 등 다양한 타입으로 변경될 수 있습니다. 또한, 객체의 속성을 런타임 중 자유롭게 추가/삭제할 수 있어 데이터 구조 변경에 유연합니다. 예제 코드를 통한 추가 설명동적 타입 시스템변수의 타입이 고정되지 않고, 할당된 값에 따라 언제든지 변경될 수 있습니다.let variable = 42; // 변수는 처음엔 숫자console.log(typeof variable); // "number"variable = "Hello"; // 문자열로 변경 가능console.log(typeof variable); // "string"타입 추론자바스크립트는 .. 불변성을 유지하려면 어떻게 해야하나요? 답변자바스크립트에서 불변성을 유지하려면 객체나 배열을 직접 수정하는 대신 새로운 객체나 배열을 생성하여 변경 사항을 반영하는 방식을 사용할 수 있습니다.예시로 스프레드 연산자를 사용하여 복사본을 생성하고 map, filter, reduce와 같은 메서드로 배열을 변경시킬 수 있습니다. 자바스크립트에서 불변성을 유지하는 코드// 객체에서 불변성 유지하기const originalObj = { name: "Alice", age: 25 };const updatedObj = { ...originalObj, age: 26 }; // 새로운 객체 생성console.log(originalObj); // { name: "Alice", age: 25 }console.log(updatedObj); // { name: "A.. 브라우저 렌더링 과정을 설명해주세요. 먼저 서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견합니다.이 태그와 속성들은 트리 형태로 변환되어 메모리에 저장되는데, 이를 DOM 트리라고 합니다.HTML 파싱 중 CSS 링크나 스타일 태그를 만나면 이를 파싱하여 CSSOM 트리로 변환합니다.문서의 파싱이 완료되면 DOM과 CSSOM 트리를 결합하여 렌더 트리를 생성합니다.렌더 트리는 브라우저 상에서 요소의 위치와 크기를 결정하는 리플로우 과정을 거치며,마지막으로 요소의 색상, 경계선 등 시각적 요소를 그리는 페인팅 과정이 진행됩니다.리플로우웹 페이지 내에서 요소의 위치와 크기를 결정하는 과정리페인트요소의 생상 등 시각적 요소를 업데이트하는 과정HTML 파싱 중간에 script 태그를 만나.. CSR과 SSR의 차이는 무엇인가요? 답변CSR은 클라이언트 측에서 JavaScript로 페이지를 렌더링하는 방식이며, 초기 로딩이 느릴 수 있으나 이후 상호작용이 빠릅니다. 반면, SSR은 서버에서 HTML을 미리 렌더링해 보내므로 초기 로딩이 빠르고 SEO에 유리합니다. CSR은 SPA에 적합하고, SSR은 SEO가 중요한 서비스에 주로 사용됩니다. CSR서버에서 인덱스라는 HTML 파일을 클라이언트에 보내주면 클라이언트에서 알아서 처리하는 방식 심플한 CSR 예제 index.html을 보면 body 안은 위와 같이 심플하게 생겼다.따라서 처음에 접속하면 빈 화면만 보이고, 링크된 app.js를 서버로부터 다운로드 받게 된다.이때 해당 js에는 해당 애플리케이션에서 필요한 로직들 뿐만 아니라 애플리케이션을 구동하는 프레임워크와 라이브러리.. 이전 1 2 3 다음