일반적인 질문

• 어제/이번 주에 무엇을 공부하셨나요?
• 코딩을 할 때 당신을 들뜨게 하거나 흥미를 끄는 것들은 무엇은 가요?
• 최근에 당신이 경험한 기술적인 문제는 무엇이고 그것을 어떻게 해결했나요?
• 웹 애플리케이션이나 사이트를 만들 때 고려해야 할 UI, Security, Performance, SEO, Maintainability에 대해서 설명해주세요.
• 선호하는 개발 환경에 대해 자유롭게 이야기해 주세요.
• 버전 관리 시스템은 어떤 것들을 사용해보셨습니까?
• 당신이 웹 페이지를 만들 때의 과정을 설명해주실 수 있을까요?
• 당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?
• 점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?
• 웹사이트에서 assets/resources를 최적화하는 방법에 관해 설명해주세요.
• 브라우저가 한 번에 1개의 도메인에서 내려받는 자원은 몇 개인가요?
  • 예외에는 어떤 것들이 있나요?
• 페이지 로드 시간을 줄이는 세 가지 방법에 관해서 이야기 해 보세요.
• 당신이 프로젝트에 합류했습니다. 근데 그들은 Tab을 이용하고, 당신은 Space를 사용했습니다. 어떻게 하실 건가요?
• 간단한 Slideshow 페이지를 만드는 방법에 관해서 이야기해 보세요.
• 만약 당신이 올해 기술적 책임자가 되었다면 무엇을 먼저 하시겠습니까?
• 표준의 중요성에 관해 설명해주세요.
• Flash of Unstyled Content에 관해 설명해주세요. 또 FOUC를 피하기 위해선 어떻게 해야 하나요?
• ARIA와 screenreader에 대해 설명해주세요. 또 접근성을 지원하는 웹사이트를 어떻게 만드는지에 대해도 설명해주세요.
• CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.
• CORS는 무엇의 약자이고 어떤 문제에 대해서 언급하는 것인가요?

 

---

당신에게 5가지 다른 stylesheet가 있습니다. 어떤 방법으로 사이트에 제공하는 게 가장 효과적일까요?

CSS는 런타임시 조작 가능한 선언형 언어입니다. 그러므로 각 스타일시트를 컴파일할 수 있는 프리컴파일러를 만들거나 도입(SASS, LESS)하여 하나의 스타일시트로 병합한 후 제공합니다.

 

점진적 향상법(progressive enhancement)과 우아한 성능저하법(graceful degradation)의 차이를 설명하실 수 있습니까?

점진적 향상법 (Progressive enhancement)	우아한 성능 저하법 (graceful degradation)
많은 테스트를 통해 말그대로 기능을 점진적으로 향상시키는 것. 기초부터 차곡차곡 쌓아서 발전해 나가는 방법 노력과 시간이 필요하다.	최신 기술을 기반 또는 최신 기기에서 동작하는 기능을 만들고 나서, 오래된 기술 또는 오래된 기기에서 동작하게 하기 위해 유사한 기능을 만들어 동작하게 하는 것.  사용자들의 기기를 위해 별도의 버전을 만들어 놓는 것.  하지만 이것은 순전히 개발자 관점에서 작성된 것이다. 그래서 javascript를 모르는 사용자에게는 도움이 되지 못한다.
ex ) 웹 페이지를 구성할 때 1. HTML로 마크업을 구성한다. 2. CSS로 스타일을 입힌다. 3. JS로 사용자 경험을 향상 시킨다.	ex) 사용자의 브라우저가 javascript를 지원하지 않을 때 js를 지원하지 않는 기기를 위해 <noscript> 태그를 사용하여 사용자에게 "javascript가 지원되는 브라우저를 사용해 주세요!" 와 같은 알람을 띄워주는 것

 

페이지 로드 시간을 줄이는 세 가지 방법에 관해서 이야기 해 보세요.

https://jsmokblog.tistory.com/21

렌더링 최적화 방법 - 초기 렌더링 최적화

 

웹 표준에 관해 설명해주세요.

웹 표준이란 웹 표준화 단체인 W3C(world wide web consorution)에서 권고한 표준안에 의해 표현, 구조를 분리하여 제작하고 웹을 구현하는 작업을 의미한다.

웹 페이지 제작에 있어 브라우저의 종류 및 버전에 따른 기능 차이에 대해서 어느 브라우저를 선택하든지 호환이 가능하도록 하는 표준안이 바로 '웹 표준'이다.

웹 표준의 중요성 3가지 1. 웹 페이지 수정 및 운영 관리 용이 온라인 콘텐츠의 올바른 구조화와 CSS로 시각 표현을 통일해 제작 부담을 줄임 2. 웹 접근성 향상 여러 브라우저에서 호환이 가능하고, 표준이 정해져 있다 보니 보다 대중성 지님 3. 다양한 디바이스 호환 웹 표준으로 제작하면 별도의 웹 페이지 제작 없이 호환 가능

 

Flash of Unstyled Content에 관해 설명해주세요. 또 FOUC를 피하기 위해선 어떻게 해야 하나요?

FOUC의 정의	FOUC는 외부의 CSS가 불러오기 전에 잠시 스타일이 적용되지 않은 웹 페이지가 나타나는 현상이다.
FOUC 발생 원인	웹 화면이 깜빡거리는 현상은 브라우저의 렌더링의 순서의 문제이다. 브라우저는 HTML, CSS, JS순서로 받게 되는데, 여기서 CSS적용이 안 된 상태에서 보여지기 때문에 문제가 생긴다.
FOUC 해결책	1. Preload시키기 2. rendering delay시키기 3. Font Loading API쓰기 4. Proper caching적용하기(웹 캐쉬 사용)

 

CSS 애니메이션과 JavaScript 애니메이션의 차이점에 관해 설명해주세요.

자바스크립트는 명령형 언어이기 때문에 세밀한 조정이 가능한 것이 장점이고 CSS 애니메이션은 선언형 언어로써 진입장벽이 낮고 또한 브라우저의 메인쓰레드가 아닌 컴포지트라는 별도의 쓰레드에서 구현되기 때문에 GPU의 백 버퍼에서 처리되게 되므로 성능향상에 도움을 줄 수 있습니다.
단, CSS 애니메이션의 경우 컴포지팅에 영향을 주는 속성 즉 opacity, transform 만 이용하는 것이 좋습니다. left, top 등의 레이아웃에 영향을 주는 속성일 경우 오히려 성능 저하를 일으킬 수 있습니다.

 

브라우저의 동작 원리를 간단하게 설명해 주세요.(브라우저의 렌더링 과정)
브라우저의 기본적인 역할은 HTML, CSS 명세에 따라 HTML 파일을 해석해서 표시하는 것이다. 브라우저를 구성하는 요소는 사용자 인터페이스, 브라우저 엔진(크롬, 사파리는 Webkit, 파이어폭스는 Gecko), 렌더링 엔진, 통신, UI 백엔드, 자바스크립트 해석기, 자료 저장소 등이 있다. 렌더링 엔진은 먼저 HTML 문서를 파싱해서 DOM 트리를 구축한다. 그리고 CSS 마크업을 파싱해서 앞서 구축한 DOM 트리와 함께 렌더링 트리를 만든다. 렌더링 트리는 화면에 보여줄 것들만 가지고 있는 트리로, 구축이 되면 순차적으로 화면에 배치한다. 부모에서 자식 순서로 배치는 진행된다. 배치가 완료되면 그리기를 시작한다.

동기와 비동기의 차이

동기(Synchronous) 방식	비동기(Asynchronous) 방식
요청을 보내고 실행이 끝나면 다음 동작을 처리하는 방식	요청을 보내고 해당 동작의 처리 여부와 상관없이 다음 요청이 동작하는 방식
- 순서에 맞추어 진행되기 때문에 제어하기 쉽다. - 여러가지 요청을 동시에 처리할 수 없어 효율이 떨어진다.	- 작업이 완료되는 시간을 기다릴 필요가 없기 때문에 자원을 효율적으로 사용할 수 있다. - 작업이 완료된 결과를 제어하기 어렵다.

SPA (Single Page Application), MPA(Multi Page application)
SPA를 CSR(Client Side Rendering)방식으로, MPA를 SSR(Server Side Rendering)방식으로 렌더링한다고 말한다.

SPA	<장점>	<단점>
단일 페이지로 구성된 웹 어플리케이을 뜻하는 단어입니다. 서버사이드 렌더링을 배제하고, 필요한 데이터만 JSON 등의 형태로 받아 동적으로 렌더링합니다.	- 좋은 사용자 경험을 제공한다. - 페이지의 일부만 바뀌는 것이기 때문에 빠르다. - 개발하기에 더 심플하다. - 로컬 데이터를 효과적으로 캐시할 수 있다. - SPA의 Appication은 서버에게 정적리소스를 한 번만 요청한다. 그리고 받은 데이터는 전부 저장해 놓는다. 이 데이터는 오프라인에서도 사용 가능하다.	- 초기에 웹 애플리케이션에 필요한 모든 정적 리소스를 한번에 다 받기 때문에 초기 구동 속도가 느리다. - SEO(검색 엔진 최적화) 관점에 불리하다.
MPA	<장점>	<단점>
새로운 페이지를 요청할 때마다 정적 리소스가 다운로드 되고, 그에 맞춰 전체 페이지를 다시 렌더링하는 방식입니다.	- SEO 관점에 유리하다. - MPA는 완성된 형태의 HTML파일을 서버 로부터 전달받는다. 따라서 검색 엔진이 페 이지를 크롤링하기에 적합하다.	- 새로운 페이지를 요청할 때마다 전체 페 이지를 다시 렌더링 하기 때문에 페이지를 이동하면 화면이 깜빡인다. - 프론트엔드와 백엔드가 서로 연관이 높아 개발이 복잡해질 수 있다.

CORS와 해결방법
CORS : 다른 도메인에서 리소스 요청 시 cross-origin HTTP에 의해 요청을 하는데, 대부분의 브라우저는 보안 상의 이유로 이 요청을 제한한다. 이를 동일 오리진 정책(Same Origin Policy)이라고 한다.
해결방법 : 요청을 보내기 위해서는 요청 보내는 대상과 프로토콜이 같아야 하고, 포트도 같아야 한다. JSONP(JSON-padding)을 통해 해결하거나 특정 HTTP 헤더를 추가하여 이 이슈를 해결할 수 있다. 이와 같이 타 도메인 간 자원을 공유할 수 있게 해주는 것을 Cross Origin Resource Sharing, 줄여서 CORS라고 한다.

크로스 브라우징
크로스 브라우징은 웹 표준에 따라 서로 다른 OS 또는 플랫폼에 대응하는 것을 말한다. 브라우저별 렌더링 엔진이 다른 상황 등 어떠한 상황 속에서도 문제 없이 동작하게 하는 것을 목표로 한다. 프론트엔드 개발자는 여러가지 전략을 세울 수가 있는데, feature detection (기능 탐지)을 사용해서 해당 기능이 해당 브라우저에 있는지를 확인하는 방법을 사용할 수도 있다. 특히 한 쪽 환경에 최적화를 하는 것보다, 전체적인 웹 표준을 지키는 데에 노력해야 한다.

RESTful API 가 무엇인가, 아는대로 다 말해달라
HTTP 통신에서 어떤 차원에 대한 CRUD 요청을 Resource와 Method로 표현하여 특정한 형태로 전달하는 방식입니다. RESTful API는 아래와 같은 것들로 구성됩니다.
- Resource(자원, URI)
- Method(요청 방식, GET or POST 등)
- Representation of Resource(자원의 형태, JSON or XML 등)

HTTP와 HTTPS의 차이
HTTP(Hypertext Transfer Protocol)는 인터넷상에서 데이터를 주고받기 위한 서버/클라이언트 모델을 따르는 프로토콜이다.
HTTPS는 기존 http에 보안(security)이 추가된 것으로, 서버에서 브라우저로 전송되는 정보가 암호화되지 않는 http의 약점을 보완한 프로토콜이다.