Javascript

프로그래밍

- 프로그래밍이란 뭐라고 생각하시나요?

컴퓨터에게 작업을 지시하고 원하는 결과를 얻기 위해 명령어를 작성하는 과정으로 문제해결력과 논리력, 협업이 필요한 작업입니다.

- 컴파일러는 뭐고 인터프리터는 뭔가요?

컴파일러는 고급언어로 작성된 프로그램을 기계어로 번역하고 기계어 프로그램으로 고치는 일을 수행하는 소프트웨어입니다. (원시코드를 목적코드로 변환하는 프로그램)
인터프리터는 고급언어로 작성된 프로그램을 한 줄 단위로 읽고 실행하는 소프트웨어입니다.

- 자바스크립트의 특징은 뭐가 있나요?

자바스크립트는 동적 타입 언어이기때문에 타입을 명시할 필요가 없는 인터프리터 언어로서 프로그램을 실행 도중 타입이 바뀔 수 있습니다.
또한, 프로토타입이라는 개념을 통해 객체 지향 언어들의 특징을 구현했습니다. 따라서 클래스 기반이 아닌 프로토타입 기반의 객체지향 언어입니다.

변수

- 변수란 무엇인가요?

프로그래밍 언어에서 값을 저장하고 참조하는 매커니즘에서 값의 위치를 나타내는 상징적인 이름입니다.

- 식별자란 무엇인가요? 🔥

변수, 함수, 클래스 등을 구별하기 위해 사용되는 이름입니다.

- 변수를 선언한다는 것의 의미는?

값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 공간을 연결해서 값을 저장할 수 있게 준비하는 것입니다.

- var 키워드란?

함수 스코프로 변수를 선언하는 키워드입니다.

- 호이스팅이 뭔가요? 🔥🔥🔥🔥

호이스팅은 변수가 실행되기 전, 변수나 함수 선언이 해당 스코프의 최상단에 끌어올려지는 것입니다.

- var 키워드의 문제점은 무엇이 있나요? 🔥🔥

함수 스코프를 가지기 때문에 블록 스코프에 있는 변수들이 접근이 가능해집니다. var키워드는 최상단에 undefined로 호이스팅이 되기 때문에 의도 파악과 가독성이 어려워질 수 있습니다. var 키워드로 선언된 변수가 클로저 내에서 사용될 경우 예상치 못한 결과가 나올 수 있습니다. 예를 들어 클로저 반복문 입니다.

- TDZ에 대해 설명해주세요 🔥🔥🔥

TDZ란 Temporal Dead Zone으로 var처럼 호이스팅 후 undefined가 된 변수가 아닌 let과 const가 선언되기 이전에 접근하면 ReferenceError 발생하는 것을 말합니다.

- const 키워드의 특징은 어떤 게 있나요? 🔥🔥🔥

const 키워드는 선언과 동시에 초기화가 되어야만 하고 재할당이 불가능합니다. 또한, let과 마찬가지로 블록 스코프를 가집니다.
객체나 배열의 불변성은 보장되지 않아 객체나 배열 내부의 요소나 속성은 수정할 수 있습니다.

- 네이밍 컨벤션에는 어떤 것들이 있나요?

camelCase, PascalCase, Snake_case 가 있습니다.

- 리터럴이 뭔가요?

리터럴이란 고정된 값을 나타내는 표현 그 자체 입니다. 따옴표를 붙이면 문자열이 되고 true나 false란 값을 입력하면 불린이 되고 대괄호로 감싸면 배열이 되는 것입니다.

데이터 타입

- 데이터 타입의 종류에는 어떤 것들이 있나요? 🔥

원시타입과 객체 타입이 있으며 원시타입은 변경불가능한 값으로 string, number, boolean, null, undefined, symbol이 있고 객체 타입은 복잡한 데이터 구조를 표현하는데 사용되며 Object가 있습니다.

- 심벌 (symbol) 타입은 뭐죠?

ES6부터 추가된 7번째 자료형으로 다른 데이터와 달리 유일한 값을 가지며 symbol 함수의 호출을 통해 생성이 가능합니다.

- 데이터 타입은 왜 필요할까요? 🔥

저장 가능한 메모리의 크기로서 데이터를 저장하고 참조할 때 메모리의 크기를 결정해야하고 불러들인 2진수를 어떻게 해석해야할지 정하기 위해 필요합니다.

- 정적 타이핑, 동적 타이핑에 대해 설명해주세요.

정적 타이핑이란 변수를 선언할 때 데이터 타입을 사전에 정의하는 것이고 동적 타이핑은 자바스크립트에서 값을 할당할 때 지정되며 런타임시 자바스크립트 엔진이 동적으로 할당하는 것을 말합니다.

타입변환과 단축 평가

- 암묵적 타입 변환과 명시적 타입 변환에 대해서 설명하고 명시적 타입 변환 함수에 대한 예를 들어주세요.

암묵적 타입 변환은 자바스크립트 엔진이 표현식을 평가할 때 코드의 문맥에 따라 암묵적으로 타입을 강제 변환하는 것이고 명시적 타입 변환은 개발자가 원하는 타입으로 변환하는 것을 말하고 그 예로 빌트인 생성자 함수인 String, Number 등이 있습니다.

- truthy / falsy 한 값이 뭔가요?

falsy한 값은 0, NaN, false undefined, "" (빈문자열) 등이 있고 그 외에는 전부 truthy한 값입니다.

배열

- 자바스크립트의 배열은 자료구조의 배열과 같나요?

같지 않습니다. 가장 큰 차이로는 자바스크립트의 배열은 동적으로 크기 조절이 가능하고 자바스크립트의 배열은 해시테이블로 이루어져 사실 배열을 흉내낸 객체입니다.

- 배열의 메서드에는 어떤 종류가 있나요?

map, filter, reduce등이 있고 map은 배열의 값을 순회할 때, filter는 배열의 값 중 특정 조건에 맞는 배열로 재생성할 때, reduce는 배열 값의 연산을 할 때 활용합니다.

- 고차함수에 대해서 아시나요?

HOF (Higher Order Function)으로서 고차함수는 함수를 값으로 다루는 함수로서 함수 내에서 다른 함수를 리턴하는 것을 말합니다.

- forEach 메서드와 map 메서드의 차이점

forEach메서드는 새로운 배열을 반환하지 않고 map메서드는 새로운 배열을 반환합니다.

객체 리터럴

- 자바스크립트에서 객체란 뭘까요?

자바스크립트에서 객체는 여러 개의 속성을 포함하는 데이터 구조입니다. 속성은 키-값 쌍으로 이루어져있고 추가, 수정, 삭제 등의 유연성을 가지고 있습니다.

- 함수와 메서드의 차이?

함수는 독립적으로 동작하는 코드 블록이고 일련의 작업을 수행하기 위해 입력을 받아서 처리합니다. 메서드는 객체에 속한 함수이고 객체에 종속되어 특정 객체의 속성이나 동작을 나타내는 기능을 수행합니다.

- 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

객체 리터럴 활용, 생성자 함수 활용, 클래스 활용, object 메서드를 활용해서 생성할 수 있습니다.

원시값과 객체 비교

- 동적 타이핑을 지원하는 자바스크립트에서 데이터 타입을 크게 2가지로 나누는 이유?

원시타입과 객체타입으로 나뉘며 나뉘는 이유는 자바스크립트의 메모리 관리 및 코드의 효율성, 단순성, 유연성, 확장성을 제공하기 위해서입니다.

- 값에 의한 전달이 뭔가요?

pass by value라고 하며 깊은 복사로서 값만 복사되고 변경 불가능한 값으로 참조 없이 변경되었을 때 새로운 메모리주소를 반환하는 것을 말한다.

- 참조에 의한 전달이 뭔가요?

pass by reference라고 하며 얕은 복사로 참조값의 메모리 주소를 복사하여 데이터를 공유하는 것입니다.

함수

- 자바스크립트에서 함수를 정의하는 방법은 몇 가지가 있나요?

함수 선언문과 함수 표현식, 화살표 함수, 즉시 실행 함수 등이 있습니다.

- 함수 선언문과 함수 표현식의 차이?

가장 큰 차이는 자바스크립트 엔진이 함수를 언제 생성하는지 입니다. 함수 선언문은 실제흐름이 함수 선언문에 도달하기 전에 호이스팅 되어 함수를 호출할 수 있지만 함수 표현식은 호이스팅에 영향을 받지 않아 실제 흐름이 도달했을 때 생성합니다.

- 즉시실행함수에 대해 알고있는 내용을 말해보세요.

즉시실행함수는 IIFE라고도 불리며 함수리터럴을 괄호로 감싼 후 실행하는 것이 일반적이며 기명도, 익명도 가능합니다. 한번 사용한 후 다시 사용할 수 없는 특징이 있씁니다. 괄호로 감싸는 이유는 감싸지 않으면 자바스크립트 엔진이 선언문으로 이해하기 때문이며 var의 반복문 클로저를 해결하는데도 사용됩니다.

스코프

- 스코프가 뭔가요? 또한 스코프에는 어떤 종류가 있나요? 🔥🔥🔥

스코프는 변수가 유효할 수 있는 범위입니다. 일반적으로 중괄호로 감싸진 영역을 의미합니다. 자바스크립트에는 총 3가지의 스코프가 존재하며 전역 스코프, 함수 스코프, 블록 스코프로 나뉩니다. 스코프는 변수의 유효성과 식별자의 충돌을 관리하는데 도움을 줘 적절히 사용되면 코드의 가독성과 유지보수성이 향상 됩니다.

- 렉시컬 스코프는 무엇을 의미하나요? 🔥

렉시컬 스코프는 선언을 할 때 정의가 되며 함수가 정의된 위치에 따라 변수의 유효범위가 결정되는 것을 말합니다.

- 전역 변수로 변수를 선언하면 생기는 문제점은?

전역변수로 선언을 하면 스코프가 최상단에 위치해 어디에서나 접근할 수 있어 다른 코드와의 변수이름 충돌이 발생하고 의존성 관리가 어려워 집니다.

생성자 함수에 의한 객체 생성

- 생성자 함수가 뭔가요?

생성자 함수는 객체를 생성하기 위해 사용되는 특별한 함수로 클래스처럼 동작하며 객체의 초기상태를 정의하고 초기화 하는데 사용 됩니다.

- 객체 리터럴과의 차이점?

객체 리터럴시 중괄호를 사용하여 생성하고 생성자 함수로 생성시에는 new 키워드를 사용하여 생성합니다. 객체 리터럴시에는 속성을 직접 정의해야하지만 new키워드을 통하면 this로 정의할 수 있습니다.

함수와 일급 객체

- 일급 객체의 정의와 일급객체로 할 수 있는 일?

일급 객체란 다른 갹체에 적용 가능한 연산을 모두 지원하는 객체 함수의 값으로도 저장할 수 있고 파라미터로도 넣어줄 수 있고 리턴값으로도 쓰일 수 있는 객체입니다.

- 꼬리 질문) 함수형 프로그램이란 뭔가요? 🔥🔥

함수형 프로그래밍은 부수효과가 없는 순수 함수만을 이용해 프로그램을 만드는 것입니다. 또한, 함수형 프로그래밍의 가장 큰 특징은 변경 불가능한 값과 순수함수 입니다.

- 꼬리 질문) 순수함수는 뭔가요? 🔥🔥

순수함수는 동일한 입력에 동일한 결과를 반환하며 실행 후 외부 상태를 변화 시키지 않는 함수입니다.

프로토타입

- 객체지향 프로그래밍은 무엇을 의미하나요? 🔥

객체지향 프로그래밍은 OOP (Object Oriented Programming)으로서 여러 객체들간의 상호작용으로 하나의 프로그램을 만드는 것을 의미합니다.

- 객체지향 프로그래밍의 특징에 대해 말해주세요. 🔥

객체지향 프로그래밍의 특징으로는 상속, 추상화, 캡슐화, 다형성 등이 있습니다. 상속은 자식 객체는 부모 객체로 부모 개체의 속성을 물려받는 것을 의미하고 추상화는 비슷한 속성이나 기능을 묶어 이름을 붙이는 것 (클래스를 정의하는 것)을 말합니다. 또한 캡슐화는 실제 구현부분을 외부로 드러나지 않게 하는 것이고 다형성은 약간 다른 기능이 있는 함수를 동일한 이름으로 사용하는 것입니다. (오버로딩 - 매개변수만 다르게 해서 여러개 과 오버라이딩 - 비슷한 걸 재정의)

- 자바스크립트는 객체지향 프로그래밍 언어인가요?

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다.

- 프로토타입이 뭔가요?

자바스크립트의 모든 객체에 숨겨져 있는 타입으로 프로토타입을 기반하여 클래스를 만듭니다.

strict mode

- strict mode에 대해 설명해주세요.

ES5부터 도입된 기능으로 평소엔 무시하던 에러들을 에러로 발생시켜 줍니다. 함수 스코프에는 적용할 수 있지만 변수 스코프에는 동작하지 않습니다. this 같은 경우 최상단에 있을 때 원래 window란 값을 갖지만 strict mode를 활성화시 undefined란 값을 가집니다.

- strict mode를 통해 예방할 수 있는 것은 무엇입니까?

함수의 this값 설정, 예약어를 변수의 이름으로 사용 제한, 암묵적인 전역변수의 생성 예방을 할 수 있습니다.

빌트인 객체

- 빌트인 객체에 대해 설명하고 종류에 대해 말해보세요.

빌트인 객체는 자바스크립트에 내장된 기능으로 다양한 속성과 메서드를 가지고 있습니다. 그 예시로 Number, String, Boolean 등 이를 활용하여 원하는 작업을 수행할 수 있습니다.

this

- this가 뭔가요? 🔥🔥

this는 현재 실행중인 함수의 컨텍스트를 가리키는 자기 참조 변수입니다.

- this 바인딩과 동적 바인딩에 대한 설명해주세요. 🔥

this 바인딩은 함수가 호출될 때 결정됩니다.
자바스크립트에서 일반 함수, 콜백함수의 this는 어디에서 호출됐던 window를 가리키며 메서드 호출에서 this는 호출된 객체를 가리킵니다. 또한, 화살표 함수의 경우 외부 스코프 (부모 스코프)의 this를 그대로 따르므로 자신의 부모 스코프를 가리키고 이러한 this를 렉시컬 this 라고 합니다.

실행 컨텍스트

- 실행 컨텍스트에 대해 설명해주세요. 🔥🔥

실행 컨텍스트는 자바스크립트 코드 실행 환경을 담고 있는 객체입니다. 그 안에는 변수, 스코프 체인, this 와 같은 정보를 담고 있습니다. 실행 컨텍스트가 생성 후 함수 호출 시 마다 함수 컨텍스트가 스택에 쌓이고 빠집니다.

클로저

- 클로저에 대해서 아시나요? 🔥🔥🔥

클로저란 자신이 선언 됐을 때에 렉시컬 스코프를 기억하여 스코프 밖에서 호출 되어도 렉시컬 스코프에 접근할 수 있는 함수입니다. 즉, 내부 함수의 변수가 외부함수의 변수에 접근할 수 있는 것을 의미합니다.

- 클로저를 사용하면 좋은 점이 뭔가요? 🔥🔥

클로저를 사용하면 외부함수의 실행이 끝나더라도 접근이 가능해 현재 상태를 보존할 수 있고, 정보를캡슐화를 할 수 있고, 클로저 함수를 각각의 변수에 할당하여 모듈화에 유리합니다.

- 클로저는 어떻게 생성하나요? 🔥

자바스크립트에서는 모든 함수가 자연스럽게 클로저가 됩니다. 예를 들어, 즉시실행 함수를 통하여 생성하거나, 함수를 인자로 받아 리턴하거나, 함수 내부에서 함수를 리턴을 하면 됩니다.

클래스

- 자바스크립트에서 클래스가 생기기 전에 어떤 방식으로 객체지향 패턴을 구현했나요?

객체를 생성하는 원형으로부터 다른 객체를 생성하는 프로토타입 기반의 객체를 구현했습니다.

- 생성자 함수와 클래스의 차이는 무엇이 있나요?

생성자함수는 호이스팅에 영향을 받지만 클래스는 받지 않습니다. 생성자 함수는 new 키워드를 통해 함수를 생성하고 클래스는 extends를 통해 함수를 생성합니다.

- 클래스란 무엇인가요?

자바스크립트 클래스는 프로토타입을 이용하여 만들어지고 원래는 프로토타입이 먼저있었지만 ES6부터 클래스를 사용하기 위해 도입됐습니다.

- 클래스의 상속

클래스는 extends를 통해 상속을 하며 클래스는 내부적으로도 프로토타입을 가지고 있기 때문에 프로토타입도 상속이 됩니다. 이런 것을 문법적 설탕이라고 합니다.

스프레드 문법

- Spread 문법이란 뭔가요?

스프레드 문법은 ES6부터 도입된 문법으로 뭉쳐있는 값을 개별적인 값으로 나타내주는 문법입니다.

- 어떤 상황에서 사용할 수 있나요?

스프레드 문법의 결과는 값이 아니기 때문에 값으로는 활용할 수 없고 인자로 전달시 각 값을 풀어서 전달할 수 있습니다. 예를 들어 Max의 경우 기존 배열을 전달하면 NaN이 나오지만 스프레드 문법을 활용한다면 개별적인 값들 중 가장 큰 값이 나오게 됩니다.

구조 분해 할당

- 구조 분해 할당이란 무엇인가요?

배열이나 객체의 구조를 해체하여 그 값을 각 변수에 담을 수 있는 것입니다.

- 구조 분해 할당의 종류는 무엇이 있나요?

배열 구조 분해 할당 객체 구조 분해 할당이 있습니다.

브라우저의 렌더링 과정

- 브라우저 렌더링 과정에 대해 설명해보세요. 🔥🔥

서버로부터 요청하여 HTML, CSS, JS 파일을 받아온 후에 HTML 파싱을 통해 DOM Tree를 구성하고 CSS파싱을 통해 CSSOM Tree를 구성합니다. 여기서 HTML 파서가 자바스크립트를 만나면 렌더링을 중단하고 JS엔진에게 권한을 넘겨 JS 파일 실행을 완료 합니다. 그 후 둘을 합쳐 렌더 트리를 작성한 후 Layout/reflow 단계를 통해 뷰 포트 내에서 각 노드들의 정확한 크기와 값을 계산한 후 Paint 단계로 그려 넣습니다.

- 브라우저의 렌더링 과정에서 자바스크립트는 어떻게 동작하나요? 🔥🔥

HTML 파싱 과정 중에 일어나는데 자바스크립트 태그를 만난다면 렌더링을 중단하고 JS엔진에서 권한을 넘겨 JS 파일 로드 및 실행을 완료합니다.

- 스크립트 태그를 바디 태그 밑에 둬야하는 이유는?

바디 태그 아래에 있어야 렌더링을 다 완료한 후에 진행하여 사용자의 웹 사용자 경험이 올라갑니다.

DOM

- DOM이 뭔가요?

DOM은 Document Object Model로 웹 페이지의 모든 요소들을 정의하고 객체로 나타내줍니다. 웹 페이지를 프로그래밍적으로 제어할 수 있게 해주는 객체 모델이며 최상위엔 Node가 존재합니다.

- DOM을 구성하는 건 뭐가 있나요?

요소 (Element), 속성 (Attribute), 텍스트, 문서 (document) 등이 있습니다.

이벤트

- 이벤트 전파에 대해 설명해주세요.

자바스크립트에서는 이벤트 버블링과 이벤트 캡처링이 있습니다. 이벤트 버블링은 하에서 상으로 이벤트가 전파되는 것이고 이벤트 캡처링은 상에서 하로 이벤트가 전파되어 내려오는 것입니다. 자바스크립트는 기본적으로 이벤트 버블링이 적용됩니다.

- 이벤트 위임 (delegation)에 대해 설명해주세요. 🔥

이벤트위임은 하위 엘리먼트들이 여러 개 존재할 때 상위 엘리먼트 한 개에만 이벤트를 등록해 하위 엘리먼트들을 제어하는 방식입니다.

- e.preventDefault에 대해 알고 있나요?

이벤트의 기본 동작을 막는 역할입니다. 예를 들어 a 태그에서 이것을 사용하여 기본동작을 막을 수 있습니다.

- e.stopPropagation에 대해 설명해주세요.

이벤트 버블링을 막기 위한 것으로 이벤트가 상위 이벤트로 전달되는 것을 막습니다.

타이머

- 호출 스케줄링이란?

호출 스케줄링이란 자바스크립트에서 함수의 작업 순서를 관리하는 메커니즘 입니다. 이를 통해 비동기적인 작업을 구현할 수 있게 되고 그 예로는 Promise, async/await, setTimeout, setInterval, requestAnimationFrame 같은 것들이 있습니다.

- 타이머함수에는 어떤 것들이 있나요?

setTimeout, setInterval, requestAnimationFrame 같은 것들이 있습니다.

- 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 때 할 수 있는 일과 일에 대한 설명은?

이벤트 디바운스와 쓰로틀을 할 수 있습니다. 이벤트 디바운스는 일정 기간동안 일어난 이벤트에서 특정이벤트 예를 들어, 맨 처음과 맨 마지막 이벤트만 실행하는 방법이고 쓰로틀은 연속적으로 발생하는 이벤트를 일정기간을 두고 처리하는 방법입니다.

비동기 프로그래밍

- 동기와 비동기의 차이점에 대해 설명해줄 수 있나요? 🔥

동기는 요청을 보낸 후 응답을 받아야 다음 요청을 진행하며 작업을 하는 형태이고 비동기는 응답의 여부에 상관없이 다음 동작을 실행합니다.

- 이벤트 루프와 태스트큐에 대해서 알고 있나요? 🔥🔥🔥

자바스크립트는 싱글 스레드이기 때문에 이벤트 루프를 기반한 동시성 작업을 합니다. 이벤트 루프는 콜 스택과 콜백 큐의 상태를 체크하며 콜 스택이 비어있을 때 콜백 큐의 첫번째 작업을 콜 스택에 넣는 과정을 하기 때문에 루프라고 합니다. 콜백 큐는 매크로 큐 (태스크 큐)와 마이크로 큐가 존재하고 마이크로큐에는 promise, async, mutationObserver 등이 들어가고 매크로 큐에는 UI렌더링, setTimeout, RequestanimationFrame 등이 들어갑니다.

- 태스크 큐와 마이크로 큐 중 어떤 것이 먼저 실행되나요? 🔥🔥

마이크로 큐가 먼저 실행됩니다. 이를 통해 비동기작업 중에서도 우선순위가 높은 작업들을 우선적으로 처리할 수 있습니다.

Ajax

- Ajax가 뭐고 어떤 것을 담당하고 있나요?

Ajax는 asyncronous Javascript And Xml로 비동기 자바스크립트와 Xml의 약자입니다. 자바스크립트의 라이브러리 중 하나로 XMLHttpRequest로 웹페이지 전체를 새로 고치는 것이 아닌 변경된 부분만을 변경하기 위한 데이터 로드 기법입니다.

- Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?

변경할 부분만 전송 받기 때문에 불필요한 데이터 통신이 이루어지지 않고 변경할 부분은 다시 렌더링 하지 않으므로 깜빡이는 현상이 발생하지 않습니다. 또한 클라이언트와 서버의 요청이 비동기적으로 발생하기 때문에 서버에게 요청을 보낸 후 블로킹이 발생하지 않습니다.

- JSON이 뭔가요?

JavaScript Object Notation으로 클라이언트와 서버간의 Http 통신을 위한 텍스트 데이터 포맷입니다.

- JSON이 제공하는 정적 프로토타입 메서드는 무엇이 있나요?

stringfy와 parse가 있습니다. stringfy는 자바스크립트 객체를 JSON으로 바꾸고 parse는 JSON을 자바스크립트 객체로 바꿉니다.

- Ajax로 Http 요청을 보내기 위한 방법은 어떤 것이 있나요?

XMLHttpRequest 객체를 사용하여 비동기적으로 Http 통신을 할 수 있고 fetch와 axios가 있습니다. fetch는 자바스크립트 빌트인 객체로 라이브러리의 설치가 필요하지 않으며 axios는 자바스크립트 라이브러리로 설치가 필요합니다.

- XMLHttpRequest와 fetch 메서드의 차이 🔥

Fetch는 XMLHttpRequest보다 더 간결하고 직관적인 API를 제공하며 Promise를 통한 then과 async/await의 사용이 가능합니다. 또한 Fetch는 Cors를 자동으로 처리하지만 XMLHttpRequest는 별도의 설정이 필요합니다.

REST API

- REST API가 뭔가요? 🔥

REST란 REpresentational State Transfer의 로서, 웹상에서의 통신 체계에 있어 범용적인 스타일을 규정한 아키텍쳐이고 REST API는 이 REST를 활용한 API입니다.

- REST API의 구성은 어떤 것이 있나요? 🔥

자원 (URI), 행위 (Method), 표현으로 구성되어 있습니다.

- REST API를 설계하는데 중요한 것이 있을까요?

URI는 리소스를 표현해야한다는 것입니다. 이것을 실현하기 위해 동사가 아닌 명사를 활용 해야 하고 리소스는 Collection과 Document로 표현하며 그 리소스에 대한 행위는 HTTP Method로 표현해야한다는 것입니다.

- HTTP 요청 메서드에 대해 아는대로 이야기 해보세요.

HTTP Method는 PUT, DELETE, GET, POST가 있고 PUR은 update시, DELETE는 삭제시, GET은 리소스 조회시, POST는 정보를 생성하거나 업데이트 할 때 사용합니다.

- HTTP 상태 코드를 아는대로 말해주세요. 🔥

100번대는 요청이 수신되었고 처리중이라는 의미이고 200번대는 요청이 성공했을 때 나타납니다. 300번대는 요청을 완료하기 위해 클라이언트가 추가적으로 해야할 일을 나타내며 400번대와 500번대는 오류가 발생했다는 것을 의미합니다.

Promise

• 콜백이란 뭐라고 생각하시나요? 🔥
  콜백은 비동기에서 많이 사용되는 개념으로 다른 함수에게 자신을 함수의 인자로 전달하여 특정 이벤트나 작업이 완료 되었을 때 호출되도록 하는 함수입니다.

- 프로미스가 뭔가요? 🔥

작업은 실행 되었지만 결과값을 아직 반환하지 않은 상태라고 생각합니다. 비동기 처리에 성공하면 resolve 메서드를 호출하여 then으로 처리하고 실패하면 reject 메서드를 호출해 에러 메세지를 catch에 전달합니다.

- 프로미스의 생성 방법은 뭔가요?

생성자를 활용해 Promise 객체를 생성하거나 promise.resolve나 promise.reject를 활용한 정적 메서드 형식으로 생성합니다.

- 프로미스의 상태를 나타내는 값은 어떤 값들이 있나요? 🔥

pending - 대기상태로서 이행하지도 거부하지도 않은 상태이고 , fulfilled - 이행이 성공적일 때 나오고, reject - 거부상태가 있습니다.

- 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🔥

promise.resolve나 reject처럼 정적으로 여러 상태의 Promise를 반환할 수 있고, all이나 allsettled처럼 모든 결과를 한번에 반환하는 메서드가 있습니다. all과 allsettled의 차이점은 all은 에러 발생시 어느 곳에서 에러가 발생했는지 알 수 없지만 allsettled는 실패시 실패한 것들끼리 필터링하여 재시도를 할 수 있습니다.

제네레이터와 async/await

- 제네레이터란 무엇이고 일반 함수와는 어떤 차이가 있나요? 🔥🔥

제네레이터는 이터레이터이자 이터러블을 생성하는 함수로 function + * (애스터리크)의 조합으로 만들어집니다. 일반함수와의 차이로는 제네레이터는 이터러블 객체로서 for...of나 전개연산자의 피연산자가 될 수 있고 일반 함수는 실행이 완료된 후 값이 리턴되지만 제네레이터는 yield를 통해 값을 반환하고 중간에 함수실행을 멈출 수 있습니다.

- 제네레이터의 구조는 뭔가요?

제네레이터는 yield문을 통해 값을 반환하고 next()메서드를 통해 실행순서를 조작할 수 있습니다.

- async/await이 뭐고 기존의 Promise와는 어떤 차이가 있죠? 🔥🔥

async/await은 promise를 기반으로 동작하며 비동기 코드를 동기 코드 스타일로 작성할 수 있도록 도와줍니다.
Promise는 기본적으로 콜백함수를 통해 비동기를 다루고 결과를 .then과 .catch 메서드를 통해 비동기 작업의 성공과 실패를 확인합니다. async/await은 async키워드를 사용하여 비동기를 선언하고 await을 통한 비동기 작업을 완료하고 결과를 반환합니다. 또한 async/await은 try/catch를 사용하여 비동기 작업의 성공과 실패를 확인합니다.

- 둘의 차이점을 한 줄로 요약 🔥🔥

Promise는 비동기 작업을 다루는 객체이고 async/await은 Promise를 기반으로 작성된 비동기코드의 동기적인 흐름을 제공하는 문법적인 개념입니다.

- 에러처리를 하는 이유? 🔥

사용자 경험향 상, 예외처리, 프로그램의 안정성 유지를 위해서 입니다.

- 자바스크립트에서 에러를 처리하는 방법?

try-catch문을 활용 하면 됩니다.

모듈

- 모듈이 뭔가요?

코드를 재사용하고 구성요소를 분리하기 위한 개념입니다.

---

Computer Science

프로세스와 스레드

- 프로세스와 스레드의 정의와 프로세스와 스레드의 차이점에 대해 이야기 해보세요.

프로세스는 실행 중인 프로그램으로 운영체제로부터 자원을 할당받아 독립적으로 실행되며 스레드는 프로세스 내에서 실행되는 단위로 프로세스의 자원을 공유하며 실행됩니다. 차이점으로는 프로세스는 자원을 공유하기 위해 통신이 필요하지만 스레드는 동일한 프로세스 내에서 자원을 공유할 수 있습니다.

싱글 스레드와 멀티 스레드

- 싱글 스레드의 장단점과 멀티스레드의 장단점

싱글 스레드의 장점으로는 하나의 스레드로 작업을 처리하기 때문에 코드의 구현이 단순하고 작업을 예측할 수 있고 다른 스레드들과 프로세스의 자원을 공유하지 않으므로 공유를 하는 중에 발생할 수 있는 동기화 문제를 신경쓰지 않아도 됩니다. 단점으로는 싱글스레드이기 때문에 병렬 처리가 불가능 하고 작업처리 시간이 길어지면 전체적인 처리속도가 느려질 수 있습니다.
멀티스레드의 장점으로는 여러 스레드를 동시에 실행하므로 작업 처리 속도가 빠르고 빠른 작업처리속도 덕에 빠른 응답이 가능합니다 단점으로는 자원을 공유할 때 동기화 문제가 발생할 수 있고 각 스레드마다 독립적인 스택 및 실행컨텍스트를 유지해야하기 때문에 메모리 및 프로세서 자원을 더 많이 사용합니다.

HTTP

- HTTP란 뭔가요?

HyperText Transfer Protocol로 웹상에서 데이터를 주고 받기 위한 통신 프로토콜 입니다. HTTP는 클라이언트와 서버간의 요청과 응답을 주고 받기 위한 규약입니다.

- HTTP 프로토콜의 특징은 뭔가요?

무상태성으로 상태가 존재하지 않아 각각의 요청은 독립적으로 실행되며 이전 요청과 연관성을 갖지 않습니다. 또한, 기본적인 요청-응답 방식을 가지며 상태코드와 응답 메세지를 통해 요청의 성공여부와 추가정보를 전달합니다.

- HTTPS와 HTTP의 차이점은 뭔가요?

가장 큰 차이점은 보안입니다. HTTPS는 TLS를 활용하여 웹서버의 신원을 확인 합니다.

쿠키, 세션

- 쿠키와 세션에 대해 알려주세요. 🔥🔥

쿠키는 서버에서 클라이언트로 전송되어 로컬 클라이언트에 저장되는 키-값 형태의 작은 파일로 보안에 취약하여 사용자의 정보 보단 트래킹, 세션 ID에 관리에 사용됩니다.
세션은 상태정보를 서버에 저장하고 클라이언트와 서버간의 세션 ID를 발급합니다. 세션은 사용자의 정보등을 담고 있지만 사용자가 많을수록 서버 메모리를 많이 차지하게 됩니다.

- 쿠키와 세션의 차이점은 무엇인가요? 🔥🔥

우선 가장 큰 차이점은 저장장소입니다. 쿠키는 로컬에 저장되는 반면 세션은 상태정보를 서버에 저장후 클라이언트에서 세션 ID를 발급해줍니다. 또한 쿠키는 4kb정도의 작은 양만을 저장할 수 있지만 세션 그보다 더 큰 용량을 가질 수 있습니다. 쿠키는 만료시간을 설정할 수 있으며 만료시간이 다 되면 자동으로 삭제됩니다. 세션은 일정 시간동안 클라이언트의 비활성 상태가 지속되면 만료 됩니다.

- 쿠키와 세션을 사용하는 이유는 무엇일까요? 🔥🔥

쿠키와 세션 모두 웹 애플리케이션에서 사용자의 상태를 관리하고 유지하는데 사용됩니다. 또한, 쿠키를 할당하거나 세션 ID를 발급하여 사용자를 식별합니다. 쿠키와 세션을 사용하여 사용자의 환경설정, 장바구니, 로그인 정보 등을 저장하고 유지할 수 있습니다.

CORS

- CORS가 뭔가요?

Cross-Origin Resourse Sharing으로 HTTP Header를 사용해서 다른 origin 리소스에 접근하도록 하는 접근법 입니다.

SaaS

- SaaS란 뭔가요?

Software as a Service의 약어로 별도의 구매나 설치할 필요없이 소프트웨어를 웹 브라우저를 통해 이용할 수 있는 형태입니다.

개발 방법론

- 폭포수 방법론이란 뭔가요?

폭포수 방법론은 선형 순차적인 모델로 70년대에 고안된 고전적인 소프트웨어 생명주기이며 병행적이거나 거꾸로 넘어가지 않고 이전 단계가 완료시에 다음 단계로 넘어갑니다.

- 애자일 방법론이란 뭔가요?

짧은 단위의 스프린트로 개발 계획을 잡고 사용자의 요구와 니즈에 맞춰 유연하고 신속하게 대응하는 방법론 입니다.

CI/CD

- CI/CD란 뭔가요

지속적 통합, 지속적 전달, 배포로 애플리케이션의 개발 단계를 자동화하여 더 신속하게 애플리케이션을 보다 짧은 주기로 고객에게 제공하는 것을 말합니다.

CI : 코드를 커밋할 때마다 자동 테스트를 거쳐 문제가 없는 코드만이 레포지토리에 올라가는 것
CD : 간단한 코드변경이더라도 자동으로 마스터 코드에 올라가고 자동화 빌드 및 테스트 프로세스를 거쳐 최종 배포되는 것 (원클릭)

CDN

- CDN이란 무엇인가요?

콘텐츠 전송 네트워크 Content Delivery Network로서 웹 콘텐츠를 효율적으로 전달하기 위해 사용하는 분산 네트워크 시스템입니다.

테스트

- 테스트란 무엇인가요?

테스트란 소프트웨어가 예상대로 동작하고 요구사항을 충족하는지 확인하고 버그를 찾아내고 수정하는데 도움을 줍니다.

business login

- 비즈니스 로직이란 뭔가요?

비즈니스 로직은 일반적으로 데이터베이스, UI와 분리되어 구현되며, 비즈니스의 규칙의 변경이나 추가가 필요한 경우에는 비즈니스 로직 자체를 수정하거나 확장하여 변경해야합니다.

snippet

- snippet이란 뭔가요?

스니펫은 코드조각이나 블록으로 자주 사용되는 기능이나 코드블록을 미리 정의하여 재사용할 수 있는 형태로 두는 것을 말합니다.

웹팩

- 웹팩이란?

웹 애플리케이션을 구성하는 자원을 각각의 모듈로 보고 이를 조합해서 하나의 결과물로 만드는 모듈 번들러로 최종 배포용 파일을 만들어줍니다.

- 모듈이란?

코드를 재사용하고 분리하기 위한 개념입니다.

- 모듈 번들링이란?

자바스크립트 코드를 여러 개의 모듈로 구성하고 이 모듈들을 모아 하나의 번들파일로 만드는 과정을 말합니다.

- 웹팩이 등장한 이유와 웹팩 사용시에 이점

웹팩은 모듈 번들링 도구로서 이전에는 웹 애플리케이션을 개발할 때 여러 개의 자바스크립트 코드를 관리하고 로드해야 했었는데 웹팩이 등장함으로써 의존성 관리와 로딩 속도 문제를 해결할 수 있었습니다.

- 웹팩의 주요 속성 4가지

진입점, 출력, 로더, 플러그인을 통해 애플리케이션의 구성과 번들링 과정을 제어합니다.

타입과 인터페이스 🔥🔥🔥

- 타입스크립트를 사용하는 이유

자바스크립트는 동적 타이핑 언어로 런타임 때 속도는 빠르지만 타입 안정성이 보장되지 않기 때문이고 타입스크립트는 속도는 느리더라도 컴파일시 타입안정성을 보장할 수 있기 때문입니다.

- 타입과 인터페이스의 차이?

인터페이스는 extends를 사용하여 확장하고 Type은 별칭을 활용한 인터섹션 타입을 이용합니다. 또한 인터페이스는 타입만을 지정하지만 Type은 원시값, 유니온 타입, Tuple도 타입으로 지정이 가능합니다. 또한, 인터페이스는 동일한 이름의 인터페이스가 생성되면 컴파일러가 선언된 개별적인 인터페이스를 하나로 정의로 확장하지만 Type은 확장 되지 않습니다.

---

React

리액트란 무엇인가요? 🔥

리액트란 페이스북에서 개발한 라이브러리로 웹 페이지의 컴포넌트를 렌더링하고 빌드하는데 초점을 둔 가장 인기 있는 라이브러리입니다. UI 라이브러리이기 때문에 전역 상태 관리, 라우팅, 빌드 시스템을 지원하지 않아 Redux, MobX 같은 라이브러리를 추가하여 사용해야 합니다.

리액트는 라이브러리인가요 프레임워크인가요? 🔥

리액트는 UI라이브러리 입니다. 프레임워크는 제어 흐름에 대한 주도권을 프레임워크가 가지고 있지만 리액트는 UI 개발에 필요한 핵심 기능만을 제어하고 그 외에 부분은 개발자에게 맡기기 때문입니다.

리액트를 사용하는이유? 🔥🔥

가상돔을 활용하여 빠른 렌더링 및 성능개선이 가능하고 JSX라는 React 문법이 HTML가 비슷하여 예측가능한 개발이 가능하기 때문입니다.

Vitual DOM에 대해 설명해주세요. 🔥🔥

이벤트가 발생할 때마다 가상돔을 만든 후 실제 돔과 비교하여 변경이 필요한 변경사항에만 실제 DOM에 반영해 웹의 효율성과 속도를 계산합니다. 또한, 가상돔은 리액트 내부적 비교 알고리즘으로 시간 복잡도 O(n)의 휴리스틱 알고리즘을 활용하여 구현합니다.

React에서 함수 컴포넌트와 클래스 컴포넌트의 차이

클래스형은 class 키워드를 사용하여 정의하고 render를 통해 컴포넌트의 JSX를 반환하며 생명주기를 가집니다. 함수 컴포넌트는 함수를 사용하여 정의하고 단순히 JSX를 반환하며 Hook이 사용 가능합니다. 생명주기 대신 useEffect를 합니다.

props와 state의 차이

props는 부모에서 자식으로 전달되는 데이터로 수정할 수 없고 읽기 전용입니다. state는 컴포넌트 내에서 수정될 수 있는 컴포넌트 내부 데이터로 컴포넌트안에서 관리 합니다.

props는 자식에서 부모로도 전달할 수 있는가?

리액트는 단방향인 flux 패턴에는 어긋나지만 callback함수를 통해 부모 컴포넌트에 props를 전달할 수 있긴 합니다.

FLUX에 대해서 아시나요? 🔥🔥

FLUX 패턴은 단방향 패턴으로 리액트를 위한 상태관리 패턴 중 하나입니다. 액션, 디스팻쳐, 스토어, 뷰의 핵심 구조로 이루어져 있습니다.

리덕스에 대해 설명하고 리덕스의 기본 원칙에 대해 설명해주세요. 🔥🔥

리덕스란 컴포넌트를 만들 때 상태관련 로직들을 따로 분리시켜 관리하고 여러 컴포넌트끼리 공유하는 상황에서도 여러 컴포넌트를 거치지 않고 쉽게 전달하는 가장 인기있는 상태관리 라이브러리 입니다. 리덕스는 3가지 원치기 있으며 단일 스토어, 읽기 전용, 순수 함수라는 3가지 특징이 있습니다.

React에서 state의 불변성을 유지하라는 말에 대해서 설명해보세요.

원본값을 변경하지 않고 변경하는 대신 복사해서 사용하는 것입니다. 불변성을 지켜 사이드 이펙트 방지 및 프로그래밍의 구조의 복잡도를 감소 시키고 변경이 일어난 객체의 프로퍼티만을 비교하여 React에서 최적화가 가능합니다.

리듀서 내부에서 불변성을 지키는 이유와 전개 연산자의 단점을 해결할 수 있는 방법?

상태의 예측 가능성과 성능 최적화 입니다. 불변성을 유지하면 상태 변경을 추적하고 버그를 찾기 쉬워지며 React의 재렌더링의 최적화를 활용하여 성능을 향상 시킬 수 있습니다. 전개 연산자의 단점을 해결하기 위해선 slice를 붙여 얕은 복사를 활용하거나 immutable.js 같은 라이브러리를 활용하면 됩니다.

리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면? 🔥🔥

부수효과는 주로 외부 컴포넌트와의 상호작용에서 문제가 발생합니다. 무한 루프, 의존성 배열 관리, 비동기 작업 처리에 문제가 발생합니다.

컴포넌트 라이프 사이클 메서드 🔥🔥

라이프 사이클이란 컴포넌트의 생성부터 소멸까지의 다양한 단계에서 실행되는 메서드이고 ComponentDidmount, componentDidupdate, willmount, shouldupdate 등이 있습니다. 최근에는 useEffect를 활용하여 mount, update, unmount 단계에 필요한 작업을 해결할 수 있습니다.

Hooks의 종류 🔥🔥

• useState : 컴포넌트의 상태관리

• useEffect : 라이프 사이클과 관련

• useRef : 직접적으로 DOM 요소에 접근해야할 때

• useCallback : 컴포넌트가 렌더링 될 때 함수를 재사용 (메모이제이션 훅)

• useMemo : 컴포넌트가 렌더링 될 때 특정 결과값을 재사용 (메모이제이션 훅)

useMemo와 useCallback의 차이 🔥🔥

둘 모두 메모이제이션 훅이지만 함수를 재사용 하느냐 특정 결과값을 재사용 하느냐의 차이

리액트에서 setState는 비동기인가요 동기인가요?

비동기적으로 동작합니다. state가 즉시 업데이트 되는 것이 아닌 리액트가 내부적으로 일괄처리를 하여 성능을 최적화 하고 예상치 못한 부작용을 예방할 수 있습니다. setState에 콜백함수를 전달하여 동기로 처리할 수도 있습니다.

리액트 성능개선

고차컴포넌트인 (컴포넌트를 인자로 받아 새로운 컴포넌트를 return하는 함수) React.memo라는 메모이제이션을 활용하여 props가 변경된 곳만 렌더링하여 불필요한 렌더링을 줄일 수 있음

---

Next

SPA의 정의와 단점은? 🔥

SPA는 Single Page Application으로 하나의 페이지로 동적으로 화면의 콘텐츠를 바꾸는 형식의 웹 애플리케이션입니다. SPA의 특징으로는 필요한 모든 정적 리소스를 최초 렌더링시 한번에 다운로드하고 새로운 페이지 요청이 있을경우 페이지 갱신에 필요한 JSON만 서버로부터 전달받아 페이지를 갱신, SPA의 단점으로는 초기 렌더링 속도가 느리고 검색엔진 봇이 크롤링을 하지못해 SEO에 문제가 있음

SSR이란? 🔥

서버 사이드 렌더링으로 전통적인 웹 애플리케이션 개발 방식이며 서버의 요청에 따라 동적으로 html을 만들어 제공하느라 화면이 깜빡거린다는 단점이 있고 요청이 많은 페이지에서는 자주 쓰이지 않는대신 SEO 최적화가 된다는 ㅏㅈ엊ㅁ이 있음

SEO란? 🔥

검색 엔진 최적화 (Search engine optimazition)으로 검색엔진에서 웹사이트의 노출과 검색 결과의 순위를 향상시키기 위해 수행하는 프로세스입니다.

TTV, TTI란?

TTV는 Time to view로서 웹페이지가 사용자의 브라우저에 로드되어 화면에 표시되는데까지 걸리는 시간으로 TTV는 사용자 경험과 웹페이지의 로딩 성능을 평가하는데 사용됩니다.
TTI는 Time to interactive로 웹페이지가 사용자와 상호작용할 수 있는데까지 걸리는 시간입니다.

하이드레이션에 대해 아시나요? 🔥

하이드레이션은 수분감을 유지한다는 표현으로 react가 곧 물이라고 생각하면 됩니다. 서버로부터 요청한 후 정적인 html을 먼저 받아온 후 TTV를 줄이며 그 후 react 라이브러리와 js의 다운로드가 완료되면 react로 바꾸는 것

Next의 렌더링 수행 방식

SSG (서버 스태틱 제네레이션)과 SSR, CSR이 있습니다. SSG는 정적 생성으로 빌드시 HTML을 미리 생성하여 데이터가 완전 변경되지 않을 때 적합한 방법이고, SSR은 서버에 요청시 동적으로 만들어 HTML을 제공하며 데이터가 자주 변경되지 않는 경우 (인터랙션) 적합합니다. 마지막으로 CSR도 초기에 서버로부터 HTML를 받은 후 클라이언트에서 페이지를 렌더링 하는 방식으로 동적인 기능과 상호작용이 많은 웹 애플리케이션에 추천됩니다 하지만 SEO에 문제가 존재함.

Next를 쓰는이유?

SSR과 SSG를 제공하여 CSR과 혼합한 하이브리드 웹 애플리케이션을 만들 수 있고 간편한 초기 설정과 동적 라우팅이 가능하고 최신의 프론트엔드 기술을 적용할 수 있기 때문입니다.

Next를 구성하는 기본 설정 파일에 대해 알고 있나요?

next.config.js 입니다. 환경변수, 웹팩, 페이지 경로 등을 수정할 수 있습니다.

Suspense란?

리액트의 기능 중 하나로 비동기적으로 로딩되는 컴포넌트나 데이터를 처리할 수 있도록 도와주는 매커니즘입니다.

LCP와 FCP는?

LCP (Lastest Contentful Paint)는 웹 페이지에서 가장 크고 중요한 콘텐츠가 렌더링 되는 시점, FCP (First Contentful Paint)는 웹 페이지에서 첫 번째 콘텐츠가 렌더링 되는 시점입니다.