다른분의 블로그를 참고해 질문에 대한 답을 적어 정리한 글입니다.
https://realmojo.tistory.com/300
⭐⭐⭐⭐⭐
1. 브라우저 렌더링 원리
1-1. 브라우저가 사용자에게 보이는 순서에 대해 설명해주세요.
- 사용자가 브라우저에 URL을 입력
- DNS 서버에 도메인 네임을 이용해 진짜 서버를 찾아간다.
- 서버에서 HTML 파일을 클라이언트로 보낸다.
- HTML 파일 파싱 및 DOM Tree 가 생성
- link 태그를 만나서 CSS 파싱 및 CSSOM 트리를 생성
- DOM, CSSOM 합쳐서 Render Tree 생성
(7. JavaSript를 만나면? HTML 파서는 JS 코드를 실행하기 위해 파싱을 중단, JS 엔진 실행 및 JS 코드 파싱)
2. 호이스팅에 대해서 설명해주세요.
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.
실제로 코드가 끌어올려지는 것은 아니며, 자바스크립트의 파서가 내부적으로 끌어올려서 처리하는 것이기 때문에 실제 메모리에는 변화가 없습니다.
var 변수 선언과 함수 선언에서만 호이스팅이 일어나고,
let/const 에서는 호이스팅이 발생하지 않습니다.
https://velog.io/@hyun/
https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html
3. 클로저는 무엇인가요? 원리와 왜 사용하는지 설명해 주세요.
반환된 내부함수가 자신이 선언되었을 때의 환경인 스코프를 기억하여 자신이 선언되었을 때의 환경의 밖에서 호출되어도 그 환경에 접근할 수 있는 함수, 즉 자신이 생성 되었을때의 환경을 기억하는 함수입니다.
사용하는 이유는
1) 현재 상태를 기억하고 변경된 최신 상태를 유지
2) 전역 변수의 사용을 억제
3) 정보 은닉
https://hoho-hobi.tistory.com/152
4. CSS에서 margin과 padding에 대해서 설명해주세요.
margin은 Border 바깥쪽을 차지하고, 주변 요소와 거리를 두기 위한 영역입니다.
paading은 Content와 Border 사이의 여백을 나타내는 영역입니다.
4-1. position을 어떻게 사용하는지 알려주세요.
CSS의 position은 문서상에 요소를 배치하는 방법을 지정합니다.
static, relative, fixed, absolute, sticky 의 총 5가지가 있습니다.
- static: 원래 있어야할 위치이며, 기본값입니다.
- relative: static을 기준으로 top, bottom, left, right로 지정된 거리만큼 이동해 위치합니다.
- absolute: static이 아닌 가장 가까운 부모의 대해 상대적인 위치를 가지게 됩니다. 만약 포지션을 가지는 부모가 없다면 body에 대해 상대적인 위치를 가지게 됩니다.
- fixed: 뷰포트(전체화면) 에 대해 상대적인 위치를 가지게 됩니다.
- sticky: 사용자의 스크롤의 위치를 기반으로 배치됩니다.
5. GET, POST가 어떻게 다르게 쓰는지 말씀해 주세요.
GET은 데이터를 조회하기 위해 사용되는 방식으로 데이터를 헤더에 추가해 전송하는 방식입니다. URL에 데이터가 노출되므로 보안적으로 중요한 데이터를 포함해서는 안됩니다.
POST는 데이터를 추가하거나 수정하기 위해 사용되는 방식으로 데이터를 바디에 추가해 전송하는 방식입니다. 완전히 안전하다는것은 아니지만 URL에 데이터가 노출되지 않기 떄문에 GET 방식보다는 안전합니다.
⭐⭐⭐⭐
1. this의 용법을 아는대로 설명해주세요.
Javascript의 this에서는 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라집니다. 실행 문맥에 따라 결정됩니다.
2. 브라우저 저장소에 대해 아는대로 설명해주세요. (Localstorage, Sessionstorage, Cookie)
Web Storage(Localstorage, Sessionstorage)
Web Storage는 데이터의 지속성과 관련해 두 가지 용도의 저장소를 제공합니다.
저장된 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능한 Localstorage와 그렇지 않은 Sessionstorage가 존재합니다.
Cookie vs Web Storage
1) Cookie는 매번 서버로 전송합니다. 반면 Web Storage는 저장된 데이터가 클라이언트에만 존재하고 서버 전송은 발생하지 않기 때문에 네트워크 트래픽이 줄어듭니다.
2) Cookie는 개수와 용량에 있어 제한이 있지만, Web Storage는 그렇지 않습니다.
3. Restful API에 대해 아는대로 설명해주세요. (GET, POST, PUT, PATCH, OPTION, DELETE)
Restful API는 두 컴퓨터 시스템이 인터넷을 통해 정보를 안전하게 교환하기 위해 사용하는 인터페이스 입니다.
- GET: 데이터 조회
- POST: 요청 데이터 처리
- PUT: 데이터 변경
- PATCH: 일부 데이터 변경
- DELETE : 데이터 삭제
- OPTION: 웹 서버에서 지원되는 메소드의 종류를 확인할 때 사용
https://aws.amazon.com/ko/what-is/restful-api/
4. JavaScript는 어떤 언어인가요?
JavaScript는 싱글 스레드 언어입니다.
(한번에 하나의 작업만 할 수 있고, 스택에 순차적으로 쌓입니다.)
4-1. 하지만 실제 사용시에는 멀티 스레드 처럼 사용하는데 어떻게 사용하나요?
Web Worker를 통해 웹에서의 멀티 스레드 구현이 가능합니다.
페이지의 퍼포먼스에 영향을 주지 않고 다른 스크립트와는 독립적으로 백그라운드에서 실행되는 javascript 입니다.
4-2. 비동기적으로 실행이 되는 것을 동기적으로 코딩하는 방법이 있나요?
비동기적 처리를 사용하는데 주로 사용되는 함수와 문법으로는 callback 함수와 promise, async/await 문법 등이 존재합니다.
callback
특정 함수가 끝난 다음에 어떤 작업을 진행하고 싶을 때 사용합니다.
promise
기존의 callback 함수의 가독성을 개선시켜 나온 문법입니다. 두개의 파라미터를 받고 각각 성공했을 때와 실패했을 때를 나눠 각각 어떤 작업을 실행할지 정해주는 문법입니다.
async/await
기존의 promise 문법을 보완해서 나온 문법입니다. 해당 문법을 사용하기 위해 반드시 함수 앞부분에 async라는 키워드를 입력해 해당 함수가 비동기 함수라는 것을 선언해줘야합니다. 비동기로 처리되는 부분앞에 await을 붙여주면됩니다.
https://velog.io/@hyundong_kk/
https://velog.io/@pilyeooong/
5. Event Loop에 대해 알고 있으신가요?
자바스크립트 엔진이 아닌, 구동하는 환경에서 가지고 있는 장치입니다. 콜 스택과 태스크 큐(=콜백 큐)를 감시하며, 콜 스택이 비어있을 경우에 태스크 큐에서 태스크(=콜백함수)를 가져와 콜 스택에 넣어 실행하는 기능을 말합니다.
5-1. 마이크로태스크 큐와 태스크 큐에 대해 말씀해주세요.
2개의 큐 모두 콜백함수가 들어가는 것은 동일하지만 어떤 함수를 실행하느냐에 따라 어디로 들어가는지가 달라집니다. 이벤트 루프는 마이크로태스크 큐를 먼저 처리한 후, 태스크 큐의 태스크들을 처리합니다.
https://baeharam.netlify.app/posts/javascript/
6. 이벤트 버블링에 대해서 말씀해주세요.
한 요소에 이벤트가 발생되면, 그 요소의 부모 요소의 이벤트도 같이 발생되는 이벤트 전파를 말합니다.
6-1. 이벤트 버블링은 기본적으로 child -> parent 인데 반대로 구현하는 방법은?
addEventLister() API에서 옵션 객체에 capture:true를 설정해주면 이벤트 버블링과 반대 방향으로 탐색합니다.
6-2. 이벤트 버블링을 막기위한 방법은?
stopPropagation() 웹 API()를 사용합니다.
6-3. 이벤트 버블링을 잘 활용하면 어떻게 사용할 수 있을까요?
이벤트 리스너를 줄일 수 있기 때문에 코드 짜는 시간을 줄일 수 있으며, 성능과 유지보수에도 이점이 있습니다.
https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/
7. 타입스크립트에 대해 사용해 본적이 있나요? 어떤지 말씀해 주세요.
타입스크립트는 컴파일 언어이고, 컴파일 과정에서 오류를 잡아내기 때문에 오류를 잡아내기 쉽습니다. 또한 타입 지정이 되어있으므로 어느 정도의 흐름을 알 수 있기 때문에 협업에 도움이 된다고 생각합니다.
https://babycoder05.tistory.com/entry
8. 실행문맥에 대해 설명해 주세요.
실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 콜 스택에 쌓아 올렸다가 가장 위에 쌓여있는 컨텍스트를 실행하는 식이기 때문에 순서를 보장합니다.
9. 이터러블, 이터레이터 프로토콜에 대해서 설명해주세요.
이터러블이란 자료를 반복할 수 있는 객체를 말합니다. 흔히 쓰는 배열 역시 이터러블 객체입니다.
이터레이터 프로토콜은 next 메소드를 소유하며 next 메소드를 호출하면 이터러블을 순회하며 이터레이터 리절트 객체를 반환합니다.
10. 제너레이터에 대해 설명해주세요.
이터러블을 생성하는 함수입니다.
https://poiemaweb.com/es6-generator
⭐⭐⭐
1. HTML이 렌더링 중에 JavaScript가 실행되면 렌더링이 멈추는데 그 이유는 무엇인가요?
렌더링 엔진은 HTML 한 줄씩 순차적으로 파싱하며 DOM 을 생성해 나가다가 JavaScript를 만나면 DOM 생성을 임시 중단합니다.
DOM 생성을 임시 중단하고, 자바 스크립트 코드를 파싱하기 위해 자바 스크립트 엔진에 제어권을 넘기게 되는데 파싱이 끝나면 다시 렌더링 엔진에 제어권을 넘겨 중단된 부분부터 HTML 파싱을 재개하며 DOM 트리를 생성합니다.
2. 현재 JavaScript 프레임워크를 사용하는 것과 그 선택을 한 이유
2-1. 프로젝트를 진행할 때 어떤 Javascript 프레임워크를 선택할 것인가? 그 이유는?
2-2. 최근 사용되는 Javascript 프레임워크에 대해 차이점과 장단점? 언제 어떻게 사용해야 할까?
현재 JavaScript 프레임워크로 리액트를 사용하고 있습니다. 리액트의 장점중의 하나는 컴포넌트로 개발이 가능해 효율적인 코드 분리가 가능합니다.
두번째로, 많은 라이브러리들이 있고 수 많은 커뮤니티가 있어 활발한 지식공유가 가능해 개발에 용이함을 느꼈습니다.
방대한 학습량과 새로운 버전에 대한 학습이 요구되는 단점이 있습니다.
3. SPA와 서버사이드 렌더링의 차이점은 무엇인가요?
SPA(Single page application)
기본적으로 React.js는 기본적으로 SPA 방식으로 렌더링합니다. 최소 한번 전체 페이지를 로딩한 이후부터는 브라우저 내부에서 데이터만 변경에서 사용하는 방식입니다.
SSR(Sever Side Rendering)
서버에게 웹 페이지를 요청할 때마다 새로고침이 일어나며, 그때그때마다 렌더링 하는 방식입니다.
4. require와 import의 차이점
require와 import는 모듈 키워드로 외부 파일이나 라이브러리 등을 불러올 때 사용합니다.
require는 프로그램의 어느 지점에서나 호출 할 수 있지만 import는 파일의 시작 부분에서만 실행할 수 있습니다. (하지만 import 전용 비동기 문법으로 처리 가능)
5. SASS, SCSS를 사용해본 적이 있나요? 기존 CSS와 비교할 때 어떤면이 더 좋은가요?
사용해 본 적은 없지만, 재활용성와 가독성을 올리는 등 CSS에서 보이던 단점을 보완했다고 알고 있습니다.
6. JavaScript 성능 최적화를 위해 어떤 것을 적용해 보았나요?
DOM 트리를 접근하는 것은 속도가 느리기 때문에, DOM 객체 접근을 최소화 하도록 코드를 작성해 보았습니다. 예를 들어 createDocumentFragment를 사용하면 여러번의 접근을 할 필요없이 한번의 접근으로 추가가 가능합니다.
7. Vue & React
7-1. Vue와 React의 차이는 무엇인가요?
react는 UI 라이브러리 이고 Vue는 프레임워크입니다. 따라서 리액트는 자바스크립트 문법을 응용해 개발자에 따라 자유롭게 개발이 가능하고 뷰는 지정된 문법 방식으로만 개발할 수 있습니다.
7-2. Vue 혹은 React를 사용해보셨다면 상태 관리는 어떻게구현하셨나요?
react 전용 상태 관리 라이브러리인 recoil을 이용했습니다. 가볍고 배우기 쉬우며 비동기 기반으로 작성되어 동시성 모드도 지원합니다.
8. 무작위 데이터에 대해서 테스트는 어떻게 하시나요?
Json generator 페이지를 이용해서 의미가 있는 데이터들을 만들어 테스트를 진행하였습니다.
9. ES6에서 Arrow 함수를 언제 쓰나요? 왜 쓰나요?
Arrow 함수는 보다 간략한 방법으로 함수를 선언할 수 있기 때문에 가독성이 좋은 코드를 작성 할 수 있습니다.
Arrow function은 어디서 쓰던 내부의 this 값을 변화시키지 않습니다. 따라서 내부에서 this 값을 쓸 때 외부의 this 값을 그대로 사용합니다.
10. var, let, const 차이점
var 선언은 변수 재선언, 재할당이 모두 가능합니다.
let 선언은 변수 재선언은 불가능, 재할당은 가능합니다.
const 선언은 변수 재선언과 재할당 모두 불가능합니다.
var는 함수 범위이며 let과 const 는 블록 범위입니다.
11. CORS를 대처하는 방법과 우회하는 방법
1) 웹 브라우저 실행 옵션이나 플러그인을 통한 동일 출처 정책 회피
2) jsonp 방식으로 요청
3) 서버에서 CORS 요청이 허용되도록 구현
12. MVVM 모델에 대해서 설명해주세요.
Model, View, ViewModel 3가지 그룹으로 이루어져 있는 패턴입니다.
Model의 데이터를 가공하는 ViewModel과 ViewModel을 보여주는 View로 이루어진 패턴이라고 정의할 수 있습니다.
