IT 기술면접(일반) 예상문제: 웹개발 프론트엔드
개발 이론 요약 깃허브
프론트엔드 면접 문제은행 리스트
웹에서의 SPA (Single Page Application)
단일 페이지로 구성된 웹 어플리케이션을 뜻하는 단어입니다. 서버사이드 렌더링을 배제하고, 필요한 데이터만 JSON 등의 형태로 받아 동적으로 렌더링합니다.
기존 웹 환경에 비해 SPA가 부각되는 이유?
기존 어플리케이션은 화면이동 시에 화면 이동에 필요한 HTML을 서버사이드에서 받아서 처음부터 다시 로딩하기 때문에 시간이 걸립니다.
반면, SPA에서는 화면 구성에 필요한 모든 HTML을 클라이언트가 갖고 있고 서버사이드에는 필요한 데이터를 요청하고 JSON으로 받기 때문에 기존의 애플리케이션에 비해 화면을 구성하는 속도가 빠릅니다.
(+) 단점: 처음 화면을 로딩할 때, 모든 화면이 미리 준비되어 있어야 하기 때문에 로딩에 시간이 걸리며, 애플리케이션을 구현하는데 보다 시간이 걸리며 복잡합니다.
(+) 구형 웹 프로토콜에서 자원을 가져오는 횟수가 최대한 적을수록 유리: HTTP/1.1 커넥션은 올바른 순서로 전송되는 요청을 필요로 합니다. 또한, 몇몇 병렬 커넥션이 이론적으로 사용 가능한 경우(일반적으로 5와 8 사이에서), 여전히 많은 양의 오버헤드와 복잡도가 남아 있습니다.
(+) SPA는 컴포넌트들이 모여 한 페이지를 작성하고, 특정 부분만 데이터를 바인딩하는 개념입니다. 대표적인 SPA 라이브러리로 React.js, Vue.js, Angular2 등이 있으며 그 외 번들링 팩, 트랜스컴파일링을 지원하기 위한 Node.js 기반의 Webpack, Babel 등도 SPA를 위한 주요 라이브러리 중 하나입니다.
일반적인 웹 브라우저의 렌더링 방식을 간략하게 설명
HTML 파서에 HTML 코드가 들어오면, 이것을 파싱하여 DOM(Document Object Model) 트리를 생성합니다. 여기에 CSS를 통해 별도 과정으로 파싱된 스타일 규칙(style rules)이 결합되어 렌더링 트리가 생성됩니다. 이 렌더링 트리를 바탕으로 레이아웃을 잡고, 화면에 그리는 작업을 수행해 사용자에게 웹 페이지의 최종 결과를 보여주게 됩니다.
DOM과 DOM을 직접 접근할 때의 문제점
DOM은 기계나 소프트웨어가 웹 사이트의 구조를 어떻게 이해하는지에 대한 표준이라고 할 수 있습니다. DOM에 직접 접근하는 것에 대한 문제점은 (SPA 시대가 도래하면서 발생하게 되었는데) DOM에 직접 접근하려면 DOM Tree의 최상단에 있는 document DOM을 통해서 트리 밑으로 내려가면서 해당 DOM을 찾는 방식으로만 접근할 수 있었고, 이러한 최상단 돔으로부터의 접근은 브라우저의 잦은 렌더링을 유발하며, DOM의 작은 변경점조차 이러한 렌더링 과정을 반복하기 때문에 효율성이 떨어지게 됩니다.
가상 돔의 의미와 장점
가상 돔은 말 그대로 별도 객체로 DOM을 생성하는 것입니다. DOM에서 발생하는 여러 변경점들을 별도의 공간(버퍼)에 가상 DOM을 생성해 일정 동안 모은 뒤, 렌더링의 변경 시점이 생기면 그 때 가상 DOM으로부터 변경된 점을 일괄적으로 갱신하는 방법입니다. (어차피 DOM을 실제로 수정하려면 최상단 Tree에 접근해야 하는 것은 마찬가지이므로…) 브라우저의 렌더링 횟수를 줄여 성능 개선을 도모할 수 있습니다.
(+) SPA 프레임워크에서는 이러한 가상DOM 처리 작업을 프로그래머가 별도로 처리하지 않아도 자동으로 수행하는 데 이점이 있습니다.
AMP (Accelarated Mobile Page)
빠른 접근(즉시 로딩)을 위해 가능한 모든 수단을 동원해서 가속화된 로딩을 하는 웹 페이지로, 모바일에서 주로 이용됩니다.
(+) 동작 원리 및 특징: 모든 자바스크립트는 비동기 방식으로 실행됩니다. 이미지, 광고, iframe 과 같은 외부 리소스들의 사이즈와 위치를 지정해야 합니다. 외부 라이브러리들이 렌더링 동작에 방해되지 않도록 합니다. 모든 CSS 스타일은 인라인이어야 하고 사이즈가 제한되어 있습니다. GPU 가속화 애니메이션만 사용합니다. 리소스 로딩 순서를 조정합니다. 등
테스트 주도 개발 (Test Driven Development)
개발 시 테스트 케이스를 작성하고 그것을 통과하는 코드를 만드는 과정을 반복하면서 해당 부분이 제대로 동작하는지에 대한 피드백을 적극적으로 받는 개발 방식입니다.
(+) 장점: 코드의 유지보수가 용이해집니다. (테스트 코드를 작성하는 것이 개발 문서의 작성 과정의 일환이 되므로), 결과적으로 프로그래밍 시간이 단축됩니다. (초기에는 실제 실행 코드 + 테스트 코드 두 부분을 동시에 작성하므로 시간이 오래 걸리는것 처럼 보이지만 추후 디버깅 과정이 현저히 줄어들어 효율성은 오히려 높아짐)
(+) TDD 과정: 테스트 코드 우선 작성(무조건 ‘실패’가 뜨도록) > ‘성공’이 나올 수 있는 최소한의 실행 코드 작성 > 테스트와 병행하면서 실행 코드를 리팩토링(추가 기능 구현, 예외 처리, 중복 로직 제거 등)
(+) 자바스크립트의 대표적 테스트 프레임워크로 Jest, Mocha, Jasmin 등이 있습니다.
(+) 애자일 프로그래밍(기존의 폭포수 개발 방식과 반대됨) 방식의 일환으로, 특히 XP(eXtreme Programming) 에서 실천 방안 중 하나입니다.
(+) XP: 고객이 원하는 소프트웨어를 빠른 시간 내에(약 2주) 프로토타입의 형태로 전달하고 이를 통해 고객이 원하는 소프트웨어를 이끌어내며, 수시로 발생하는 요구사항에 대처하는 것을 목표로 하는 방식입니다.
AJAX, 웹소켓
AJAX는 비동기적으로 리퀘스트를 보내고 리스폰스를 받는 기술을 통칭합니다. AJAX 통신 중에도 브라우저는 다른 작업을 수행할 수 있으며, HTML 외에 JSON, XML, 바이너리 등의 다양한 자료도 주고받을 수 있습니다. 이러한 특성으로 웹 페이지를 동적으로 변화시킬 수 있게 되었습니다.
다만 단점으로 AJAX는 반드시 리퀘스트가 선행되어야 하며, 서버로부터의 일방적인 Push는 받을 수 없습니다. 이러한 단점을 극복하여 등장한 것이 웹소켓이며, 웹 소켓을 생성하여 웹 소켓을 지원하는 서버에 연결하면, 이후 별도의 클라이언트 측의 리퀘스트가 없이 서버측의 요청으로도 실시간 양방향 통신이 가능합니다.
(+) 두 기술 모두 HTTP 프로토콜 기반입니다.
자바스크립트에서 비동기의 의미
비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 특성을 의미합니다.
(+) 요청과 결과가 동시에 일어나지 않으며, 요청한 그 자리에서 결과가 주어지지 않습니다.
콜백, 프로미스
콜백은 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 주로 비동기 처리 시에 처리가 끝나는 시점에 처리해야 할 작업을 콜백 함수로 구현합니다.
프로미스는 비동기 처리를 위한 객체로, 프로미스 객체는 추후에 어떠한 값을 반환합니다. then 키워드를 사용하면 이 값이 반환되는 시점에 수행해야 할 작업을 처리할 수 있습니다.
(+) 콜백 함수 처리 시 콜백이 끝없이 이어지는 이른바 콜백 지옥 패턴을 해결하기 위해 등장하였습니다.
(+) 프로미스는 여러 작업을 연결할 수 있습니다.
(+) 프로미스의 3가지 상태: 대기(pending), 이행(fullfilled), 실패(rejected)
async – await
프로미스를 간략하고 직관적으로 알아볼 수 있도록 키워드를 사용해 Promise를 지원하는 문법입니다. (ES2017에 등장)
객체 지향 프로그래밍, 함수 지향 프로그래밍
객체 지향 프로그래밍: 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 “객체”들의 모임으로 파악하고자 하는 것입니다. 각각의 객체는 메시지를 주고받고, 데이터를 처리할 수 있습니다. 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용됩니다.
(+) 절차형 프로그래밍의 일종입니다.
함수형 프로그래밍: 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이며, 함수의 응용을 강조합니다. 식이나 선언으로 수행되는 선언형 프로그래밍 패러다임을 따르고 있습니다.
(+) 람다 대수에 근간을 두고 있습니다. 함수는 수의 출력값은 그 함수에 입력된 인수에만 의존하고, 부작용이 없어야 합니다.
자바스크립트의 Prototype 기반 방식
객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있도록 하는 방식을 말합니다.
(+) 자바스크립트 ES6에 도입된 class, constructor 등의 구문은 자바스크립트의 프로토타입을 편하게 사용하기 위해 추가된 것이며, 여전히 자바스크립트는 프로토타입 기반입니다.
타입스크립트
기존 자바스크립트 개발 환경에서 타입형을 구체적으로 알기 어려운 단점을 극복하여 매 변수, 상수 선언마다 타입형을 기재하도록 보완한 언어이며, Babel에 의해 트랜스컴파일링(트랜스파일링) 됩니다. 자료형을 명시적으로 선언하므로 자료형의 충돌과 관련된 문제를 해결할 수 있습니다.
자바스크립트의 원시 타입(Primitive Data Type)
Number, String, Boolean, null, undefined, (Symbol)
그렇다면 Symbol은 무엇인가?
프로그램이 이름 충돌의 위험 없이 속성(property)의 키(key)로 쓰기 위해 생성하고 사용할 수 있는 값입니다.
(+) 특징: 심볼 값도 속성(property)의 키(key)로 사용할 수 있습니다. 심볼 값은 다른 어떤 값과도 다르기 때문에, 심볼을 키로 갖는 속성은 다른 어떤 속성과도 충돌되지 않을 것을 보장 받습니다.
(+) 장점: 새로운 기능과 예전 코드의 충돌을 제거합니다.
Restful API
REST: 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미합니다. 즉, 자원(resource)의 표현(representation) 에 의한 상태 전달입니다. (이러한 REST 를 충족하는 API를 Restful API라고 합니다.)
(+) 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일입니다.
(+) HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미합니다.
(+) 장점: 별도의 인프라 구축이 필요 없음, 메시지가 의도하는 바를 명확하게 나타내므로 의도하는 바를 쉽게 파악할 수 있음 등
(+) 단점: 표준이 존재하지 않음, 구형 브라우저가 아직 제대로 지원해주지 못하는 부분이 존재
CORS(Cross-Origin Resource Sharing, 교차 출처 리소스 공유)
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다.
(+) CORS의 예시: https://domain-a.com의 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json을 요청하는 경우.
(+) 보안 상의 이유로, 브라우저는 스크립트에서 시작한 교차 출처 HTTP 요청을 제한합니다. XMLHttpRequest와 Fetch API는 동일 출처 정책을 따릅니다.
(+) JSONP: 프론트엔드 측에서 CORS를 우회하기 위해 사용하는 방법으로, 자바스크립트 소스 자체는 CORS가 적용되지 않는다는 점을 이용하여 <script>...</script> 방식으로 JSON을 불러오는 방법
SEO (Search Engine Optimization)
검색 엔진에서 검색 결과의 상위에 오르게 하도록 웹 페이지를 최적화하는 작업입니다. 페이지 상위에 검색 결과가 노출되면 홍보 효과가 늘어나므로 인터넷 마케팅에서 중요시되고 있습니다.
SPA에서 SEO를 하는 방법
별도의 서버 렌더링으로 생성한 페이지를 만든 뒤 검색엔진이 URL을 그 페이지를 가르키도록 지시합니다.
- URL에서 해시뱅(
#!) 문자를 이스케이프 프래그먼트(_escaped_fragment_=)로 대체하는 방법 - 페이지 내에
<meta name="fragment" content="!">를 추가하는 방법 - 가상 브라우저 툴을 사용하는 방법
실행 컨텍스트(Execution Context)
실행 컨텍스트(Execution Context)는 scope, hoisting, this, function, closure 등의 동작원리를 담고 있는 자바스크립트의 핵심원리입니다.
자바스크립트의 호이스팅(Hoisting)
호이스팅은 변수를 선언하고 초기화 했을때 선언부분이 최상단으로 끌어올려지는 현상을 말합니다. 변수가 있으면 위치에 상관없이 최상단에서 undefined 된 형태로 존재하게 됩니다.
자바스크립트의 클로저(Closure)
자바스크립트는 함수 안에서도 함수를 선언 할 수 있습니다. 전자를 외부함수라 정의하고 후자를 내부함수라 정의해보면 기본적으로 내부함수는 외부함수의 요소에 접근이 가능한데 외부함수에서 그 함수의 수명이 다 하여 외부함수가 종료된 후에도 외부함수의 변수에 내부함수가 접근 할 수 있는 메커니즘을 클로저라고 합니다.
(+) 클로저를 통해 자바스크립트에서도 private한 변수를 생성할 수 있습니다.
(+) 외부 환경을 기억해서 내부 안에 가둔다는 의미로 클로저(closure) 라고 합니다.
자바스크립트에서 this는 몇가지로 추론 될수 있는가, 아는대로 말해달라
전역범위에서 사용될때 this는 전역객체를 가르킵니다. 함수에서 사용될때도 전역객체를 가르킵니다. 객체에 속한 메서스에서 사용될때 그 메서드의 객체를 가르킵니다. 객체에 속한 메서드의 내부함수에서 사용될땐 전역객체를 가르킵니다. 생성자에서 사용될때 생성자로 인해 생성된 새로운 객체를 가리킵니다.
Call, Apply, Bind 함수에 대해 설명해달라
this가 함수 호출식에 따라 객체를 가르킨다면 call, apply, bind는 함수가 직접 실행문맥을 결정합니다. 그 중에 call, apply는 함수를 호출해 실행합니다. 다만 둘의 차이점은 call은 함수에서 지정된 파라미터 형식대로 받지만, apply는 함수의 파라미터를 배열 형태로 넣어야 된다는 차이점입니다. bind는 이 둘과 다르게 새 함수를 만들어 변수에 저장합니다.
Babel의 기능을 한 단어로 요약하면?
트랜스 컴파일러
var와 let, const (function scope와 block scope의 개념에서)
let은 변수에 재할당이 가능하지만 const는 불가능합니다. var은 function scope, let과 const는 block scope(‘{}‘로 구분되는) 입니다.
변수의 스코프에 관한 글 링크
0개의 댓글