1. 브라우저 렌더링 원리
1. DOM, CSSOM생성 : 가장 첫번째 단계로 서버로부터 받은 HTML, CSS를 다운받는다. ->
단순한 텍스트인 HTML , CSS 파일을 Object Model로 만든다. HTML은 DOM으로 , CSS는 CSSOM으로 만들어진다.
2. Render Tree생성 : DOM Tree와 CSSOM Tree가 만들어졌으면 그 다음으로는 이둘을 이용하여 Render Tree를 생성한다. 렌더트리에는 스타일 정보가 설정되어있고 , 실제 화면에 표현되는 노드들로 구성된다.
3. Layout 단계 : 브라우저의 뷰포트 내에서 각 노드들의 정확한 위치와 크기를 계산한다. 생성된 Render Tree 노드들이 가지고 있는 스타일과 속성에 따라서 브라우저 화면의 어느위치에 어느크기로 출력될지 계산하는 단계이다. 레이아웃 단계에서 %, vh, vw와 같이 상대적인 위치, 크기 속성은 실제 화면에 그려지는 픽셀 단위로 변환된다.
4. Paint : Layout 계산이 완료되면 이제 요소들을 실제 화면에 그리게 된다. 처리해야하는 스타일이 복잡할수록 paint 단계에 소요되는 시간이 길다.
가장 먼저 DOM, CSSOM을 생성 합니다. DOM과 CSSOM을 생성했다면 Render Tree를 생성하고 , 브라우저의 뷰포트 내에서 각 노드들의 위치 크기를 계산하기 위해 Layout 단계에 들어 갑니다. 마지막으로 Layout 단계를 마치고나면 Paint 단계에 들어가 요소들을 실제 화면에 그리게 됩니다.
2. 호이스팅이란 ?
호이스팅은 변수를 선언하고 초기화했을 때 , 선언 부분이 최상단으로 끌어올려지는 현상을 말한다. var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생한다. 반면 let / const의 경우 선언과 초기화 단계가 동시에 일어나지 않는다. 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄진다. 그사이의 시간을 TDZ(Temporary Dead Zone)이라고 한다. 즉 실행 컨텍스트에 변수가 선언은 되었으나 메모리가 할당되지 않아 ReferenceError가 발생한다. 함수 호이스팅은 선언문에서 발생한다. 선언된 함수는 상단에서 참조 , 호출이 가능하다. 함수 표현식은 결국 변수에 할당하는 모습이라 변수 호이스팅의 사례로 볼 수 있다.
호이스팅은 변수를 선언하고 초기화 했을 때 , 선언 부분이 최상단으로 끌어올려지는 현상을 말합니다.
var의 경우 변수를 선언하고 초기화하는 과정이 동시에 일어나서 호이스팅이 발생하지만 , let 과 const는 선언과 초기화 단계가 동시에 일어나지 않기 때문에 실행 시점에서 실제 선언부를 만날 때 초기화가 이뤄지며 호이스팅이 이루어 집니다.
3. 클로저란 ? 원리와 왜 사용하는지 ?
클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합이다. 외부함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수이다. 전역 변수의 사용을 억제하고 , 정보를 은닉하기 위해 사용한다.
클로저란 함수와 해당 함수가 선언된 렉시컬 환경의 조합입니다. 외부 함수가 반환된 후에도 외부 함수의 변수 범위 체인에 접근할 수 있는 함수입니다. 전역 변수의 사용을 억제 하기위해 사용됩니다.
4. this의 용법을 아는대로 설명하시오
this는 함수를 호출할 때 결정되는 것이다. 전역범위에서 사용될 때 this는 전역객체를 가르킨다.
함수에서 사용될때도 전역객체를 가르킨다. 객체에 속한 메서드에서 사용될 때 그 메서드의 객체(점 앞에 명시된 객체)를 가르킨다. 객체에 속한 메서드의 내부함수에서 사용될 땐 전역객체를 가르킨다. 생성자에서 사용될 때 생성자로 인해 생성된 새로운 객체를 가르킨다.
this는 함수를 호출할 때 결정되고 , 전역범위에서 사용될 때와 함수에서 사용될 때는 this는 전역객체를 가르킵니다. 객체에 속한 메서드에서 사용될 때는 그 메서드의 객체를 가르키고 , 객체에 속한 메서드의 내부함수에서 사용될 땐 전역객체를 가르킵니다.
5. 브라우저 저장소에 대한 차이점을 설명하시오
key-value 형태의 만료기한이 있는 쿠키의 단점을 보완해 웹스토리지가 만들어졌다. 로컬 스토리지는 클라이언트의 정보를 영구적으로 저장하는 반면 , 세션 스토리지는 브라우저를 닫을 경우 정보가 삭제된다. 쿠키는 로컬&세션에 비해 용량이 매우작고 , 치명적인 단점에는 암호화가 없어 정보 도난 위험이있다.
용량이 작고 , 암호화가 없어 정보 도난의 위험이 있는 쿠키를 보완해 웹스토리지가 만들어졌습니다.
로컬 스토리지는 클라이언트의 정보를 영구적으로 저장하고 , 세션 스토리지는 브라우저를 닫을 경우 정보가 삭제 됩니다.
6. 이벤트 버블링과 캡쳐링이란 ?
이벤트 버블링은 어떤 요소에 대한 이벤트가 발생했을 때 , 해당 요소의 최상위 부모까지 이벤트가 전달되어지는 과정이다. HTML 구조상 자식 요소에 발생한 이벤트가 상위 부모요소에 영향을 미치는 것이다.
이벤트 캡쳐링은 정반대로 최상위 부모에서 이벤트 발생 요소까지 이벤트가 전달 되는 것이다.
이벤트 버블링이란 이벤트가 발생한 해당 요소에서 부모 요소까지 이벤트가 전달되어지는 과정입니다.
캡쳐링은 정반대로 부모 요소에서 이벤트 발생 요소까지 찾아가는 것을 말합니다.
7. 타입스크립트란 ?
타입스크립트는 자바스크립트 기반의 언어이며 자바스크립트의 상위확장버전이다. 정적타입으로 컴파일 단계에서 오류를 포착할 수 있는 장점이 있고 , 강력한 객체지향 프로그래밍을 지원한다. 명시적인 정적타입 지정은 코드의 가독성을 높이고 디버깅을 쉽게 한다.
타입스크립트는 자바스크립트 기반의 언어이고 , 명시적인 정적타입 지정으로 코드의 가독성을 높이고 디버깅을 쉽게 하는 장점이 있습니다.
8. CSR과 SSR의 차이점은 ?
SSR은 사용자가 웹 페이지에 접근할 때 , 서버에 각각 페이지에 대해 요청하고 서버에서 HTML, JS 파일등을 모두 다운로드하여 화면에 렌더링 하는 방식이다.
CSR은 클라이언트측에서 HTML을 반환한 후에, JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는 것이다.
SSR은 사용자가 웹 페이지에 접근할 때 서버에서 HTML , JS 파일등을 모두 다운로드하여 화면에 렌더링 하는 방식입니다. CSR은 HTML을 반환한 후에 JS가 동작하면서 데이터만을 주고받아 클라이언트에서 렌더링을 진행하는 것입니다.
9. React, Vue, Angular의 차이는 무엇인가요?
우선 3개의 공통점은 SPA기반 프론트엔드 프레임워크/라이브러리이다. 리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능하나는 차이가 있다. 러닝커브는 뷰가 가장 낮고, 리액트는 jsx 문법을 사용하며, 개발 생태계가 가장 잘 활성화 되어있다. 큰 규모의 어플리케이션 개발에 유리하다. 앵귤러는 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋지만 러닝커브가 크다.
우선 3가지의 공통점은 SPA기반 프론트엔드 프레임워크입니다. 리액트는 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달되고, vue나 angular는 양방향 바인딩이 구현 가능합니다.
10. React의 상태관리 방법에 대해서 설명하시오
리액트의 상태관리에는 context API를 통한 방법 및 MoBX, Redux등의 라이브러리를 사용한 방법이 있다. 그중 가장 많이 사용하는 Redux는 전역 상태를 생성하고 관리하며, 상태관리 라이브러리 중 가장 많이 사용된다. 리덕스는 컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 리덕스는 context api와 다르게 전역 상태 관리 외에도 redux-saga, redux-thunk등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런ㄹ 부가기능이 필요하지 않는 소규모 프로젝트에는 context api를 쓰는것이 나을 수도 있다.
리액트의 상태관리 방법에는 context API ,Redux등의 라이브러리를 사용하는 방법이 있습니다.
그중 가장 많이 사용하는 Redux는 상태를 전역으로 관리하고, 액션 크리에이터를 통해 액션을 만들고 , 그 액션을 디스패치 함수로 실행시킵니다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동합니다.
11. React의 라이프사이클에 대해 설명하시오
리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링 되기전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다. 라이프사이클은 총 9개의 과정이 존재하는데 크게는 컴포넌트가 처음 실행될때인 Mount, 데이터 변화가있을 때인 Update, 컴포넌트가 제거 될때인 Unmount 이렇게 세개로 나눌 수 있다.
리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리입니다. 리액트 컴포넌트의 수명은 페이지에서 렌더링 되기전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이납니다. 크게 3가지로 나누어보면 Mount , Update , Unmount 이렇게 존재합니다.
12. var, let, const의 차이점
var는 중복 선언, 재할당이 모두 가능하고, let은 재할당만 가능하다. const는 중복 선언, 재할당 모두 불가능하다.
var는 중복 선언, 재할당이 모두 가능하고 , let은 재할당만 가능합니다. const는 중복 선언, 재할당 모두 불가능합니다.
13. Flex 속성을 설명하시오
Flexbox란 기존 컨텐츠를 수평으로 배치할 때, float나 inline-block으로 마크업할때의 불편함을 쉽게 해결할 수 있도록 추가된 기능이다. 다향한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜줌으로써 반응형 웹 사이트에 유용하게 쓰인다. Flex는 컨텐츠를 감싸는 상위 부모요소인 Flex Container와 각 컨텐츠들인 자식요소 Flex Item으로 구성되어있다. Flexbox css 적용방법은 부모요소인 container에 display:flex를 선언하면 된다.Flex Container에는 전체적인 정렬과 관련된 속성인 display, flex-direction, align-items, flex-wrap 같은 속성을 정의하고, 자식요소인 flex item에는 flex-grow, flex-shrink 같은 크기나 순서 같은 속성을 정의한다.
Flexbox는 수평 배치할때 쓰이는 속성입니다. 플로트나, 인라인블록으로 마크업할때의 불편함을 쉽게 해결해줍니다. 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜주기 때문에 반응형 웹 사이트에 유용하게 쓰입니다.
14. HTTP와 HTTPS의 차이점
HTTP는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜이다. HTTPS는 HTTP에 데이터 암호화가 추가된 프로토콜이다. 공개키/개인키 함호화 방식을 이용해 데이터를 암호화한다. HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약한 반면, HTTPS는 안전하게 데이터를 주고받을 수 있다. 하지만 HTTPS를 이용하면 암호화/복호화 과정이 필요하기 때문에 HTTP보다 속도가 느리다. HTTPS는 인증서를 발급하고 유지하는데에 추가 비용이 발생한다. 개인정보와 같은 민감한 데이터를 주고 받는다면 HTTPS를 이용해야 하지만, 단순 정보 조회 같은 사이트는 HTTP를 적용하면 된다.
HTTP는 암호화가 추가되지 않았기 때문에 보안에 취약하지만, HTTPS는 암호화가 추가되었기 때문에 안전하게 데이터를 주고받을 수 있습니다. 개인정보와 같은 민감한 데이터를 주고 받는다면 HTTPS가 적절하고 , 단순 정보 조회 같은 사이트는 HTTP가 적절합니다.
15. OOP(객체지향 프로그래밍)과 특징에 대해서 설명하시오
객체지향프로그래밍은 컴퓨터 프로그래밍 패러다임 중 하나로, 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 그 객체들간의 유기적인 상호작용을 통해 로직을 구성하는 프로그래밍 방법으로 OOP의 장점은 코드 재사용성이다. 클래스를 한번 만들어 놓으면 계속 이용 가능하고, 상속을 통해 확장 가능하다. 수정해야할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기 때문에 해당 부분만 수정하면 되어 유지보수가 쉽다. 단점은 처리속도가 느리고, 객체가 많으면 용량이 커진다는 것이다. OOP의 특징으로는 클래스와 객체, 캡슐화, 상속 등이 있다. 클래스는 집단에 속하는 속성과 행위를 변수와 메서드로 정의한 것이고, 객체 즉 인스턴스는 클래스에서 정의한 것을 토대로 실제 메모리상에 할당된 데이터이다. 상속은 부모 클래스의 속성과 기능을 그대로 이어받아 사용할 수 있게 하고, 코드의 중복을 없애기 좋다.
객체지향 프로그래밍은 프로그래밍에서 필요한 데이터를 추상화시켜 상태와 행위를 가진 객체를 만들고, 객체들간의 유기적인 상호작용을 통해 코드의 재사용성을 높입니다. 특징으로는 클래스와 객체, 캡슐화, 상속등이 있습니다.
16. useMemo , useCallback
둘다 메모이제이션 훅으로 연산 된 값을 자료구조에 저장 후 재사용시 계산을 반복하지않고 꺼내서 사용가능하게 해준다. 메모이제이션 훅은 리액트의 불필요한 렌더링을 방지하여 퍼포먼스 최적화에 사용된다. 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱한다.
useMemo와 useCallback은 메모이제이션 훅으로 불필한 렌더링을 방지하기 위해 연산 된 값을 저장하여 재사용시 계산을 반복하지않고 꺼내서 사용이 가능합니다. 둘의 차이점은 useCallback은 전달된 함수 그 자체를 캐싱하지만, useMemo는 전달된 함수가 실행되고 반환된 결과를 캐싱합니다.
17. 비동기 함수에 대해 설명하시오
현재 실행중인 코드 완료 여부와 무관하게 즉시 다음 코드로 넘어간다. 즉 요청과 응답이 동시에 이루어지지 않는다. 비동기 방식이 필요한 이유는 화면에서 서버로 데이터를 요청했을 때, 요청에 대한 응답을 계속 기다릴 수 없으니깐(빈 화면을 보여줄 수 없다)& 기다리는 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있다.
현재 실행중인 코드 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 것을 말합니다.
요청에 대한 응답을 계속 기다릴 수 없으니까 기다리는 시간동안 다른 작업을 할 수 있도록 해줍니다.
18. Promise란 ?
비동기 동작을 다루기 위한 패턴으로, 비동기 요청을 보내면 성공 또는 실패가 다양한 형태로 발생한다.
프로미스를 사용하면 이러한 성공이나 실패를 편리한 방식으로 환원할 수 있다. new 연산자와 함께 호출한 promise의 인자로 넘겨주는 콜백함수는 호출할 때 바로 실행, 그 내부에 resolve 또는 reject 함수를 호출하는 구문이 있으면 둘중 하나가 실행되기 전까진 다음 then or catch 구문으로 넘어가지 않는다. pending, fulfilled, rejected 3가지 상태를 가진다.
promise는 비동기 동작을 다루기 위한 패턴으로, 프로미스를 사용하면 요청의 성공이나 실패를 편리한 방식으로 한원활 수 있습니다.
19. Async, Await와 Promise의 차이
promise를 사용할 때는 catch()문으로 에러 핸들링 가능 그러나 async/await는 에러 핸들링 기능이 따로 없어 try-catch()문을 활용해야한다.
promise는.then() 지옥의 가능성이 있어, 코드가 길어질수록 async/await문을 사용하면 가독성이 좋다.
promise를 사용할 때는 catch문으로 에러 핸들링이 가능하나 async/await는 에러 핸들링 기능이 따로 없어서 try-catch문을 활용해야합니다.
20. DOM과 가상 DOM이란?
Document Object Model의 약자로, HTML, XML 문서의 프로그래밍 인터페이스를 의미한다. HTML은 브라우저에서 실행될 수 있게끔 DOM Tree로 파싱되고, 이를 바탕으로 렌더링이 된다. 가상돔은 추상화된 DOM을 뜻한다. 기존 DOM을 조작하고 렌더링하는 부분에서 오는 시간을 줄인다. DOM과 유사한 객체를 메모리에 올려놓고, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현할 수 있다. 리액트도 가상돔을 이용하여 구현되었다.
document object model의 약자로 html, xml 문서의 프로그래밍 인터페이스를 의미합니다.
가상돔은 DOM과 유사한 객체를 메모리에 올려, 변경 사항이 생기면 가상돔을 바꾸고, 실제 돔에서는 변경 사항만 변경하여 더 반응성 빠른 웹을 구현합니다.
21. 웹팩과 바벨은 무엇인가?
바벨은 모든 실행환경에서 자바스크립트가 정상적으로 동작할 수 있도록 ES6 코드를 ES5코드로 변환해주고, 리액트의 JSX, TS 까지 변환해주는 자바스크립트 컴파일러이다. 특정 버전이상에만 실행되는 코드 or 특정 브라우저에서는 실행되지 않는 코드들을 정상적으로 동작하게 만들어준다.
웹팩은 프로젝트의 구조를 분석하고 자바스크립트 모듈을 비롯한 관련 리소스들을 찾은 다음 이를 브라우저에서 사용할 수 있는 번들로 묶고 패킹하는 모듈 번들러(Module bundler)다. 모듈 번들러는 여러개의 나누어져 있는 파일들을 하나로 만들어주는 라이브러리이고, 웹페이지를 보여주기 위해 수많은 파일을 서버에 개별적으로 요청하는 것이 아닌 하나로 줄여서 요청하여 코드를 압축하고 최적화해준다.
바벨은 특정 버전 이상에서만 실행되는 코드 또는 특정 브라우저에서 실행되지 않는 코드들을 정상적으로 동작하게 만들어줍니다. 웹팩은 웹페이지를 보여주기 위해 수많은 파일들을 하나로 줄여서 요청하여 코드를 압축하고 최적화해줍니다.
22. async/await란?
동기식으로 비동기 코드를 적을 수 있다. 함수 선언자 앞에다가 async를 붙여주고, 비동기가 필요한 작업 앞에다가 await를 붙여줘서 결과를 기다린다. 다수의 비동기 처리 작업을 할 때 유용하고, try/catch를 이용해서 에러를 핸들링 할 수 있다.
함수 선언자 앞에 async를 붙이고, 비동기가 필요한 작업 앞에 await를 붙여 동기식으로 비동기 코드를 작성할 수 있고, 다수의 비동기 처리 작업을 할 때 유용합니다.
23. Rest API란?
REST API는 Representational State Transfer의 약자로 소프트웨어 프로그램 아키텍처의 한 형식입니다. 즉 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미한다.
월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식이다.
Rest Api는 소프트웨어 프로그램 아키텍처의 한 형식입니다. 즉 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 것을 의미합니다.
24. 클래스형 컴포넌트와 함수형 컴포넌트를 비교해주세요
리액트에서 컴포넌트를 선언하는 두가지 방식인 클래스형 컴포넌트와 함수형 컴포넌트중, 클래스형의 경우 state의 사용이 가능하여 상태 저장이 가능하고, 리액트 라이프사이클 메서드를 사용 가능하다. 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수가 필수적으로 있어야 JSX 반환이 가능하다. 함수형 컴포넌트보다 먼저 나왔기 때문에 유지보수를 위해 알아두어야 한다.
함수형 컴포넌트는 클래스보다 선언하기 좀 더 편하고, 함수는 한번 실행되고 나면 메모리상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점이다. 함수형 컴포넌트에서는 hook을 사용할 수 있고, return문을 사용한다.
클래스형 컴포넌트는 함수가 아닌 클래스이기 때문에 return문이 없고 render() 함수를 사용하여 JSX 반환을 합니다. 함수형 컴포넌트는 return문을 사용하고, 한번 실행되고 나면 메모리상에서 사라지기 때문에 메모리 자원을 덜 사용하는 것이 장점입니다.
25. redux-thunk를 사용한 이유와 작동원리
리덕스를 사용하는 어플리케이션에서 비동기 작업을 처리할 때 사용하는 미들웨어 중 하나이다.
thunk는 특정 작업을 나중에 하도록 미루기 위해서 함수 형태로 감싼 것을 칭한다. redux-thunk는 객체 대신 함수를 생성하는 액션 생성함수를 작성할 수 있게 해준다. 리덕스에서는 기본적으로 액션 객체를 디스패치하는데, 일반 액션 생성자는 파라미터로 액션 객체를 생성하는 작업만 한다. thunk를 이용하면 특정 액션이 몇 초 뒤에 실행되게 하거나, 조건이 충족되는 경우에만 dispatch 할 수 있다. thunk를 사용한 이유는 리덕스가 비동기처리를 하지 못하여 미들웨어인 thunk를 이용해 API를 호출하고, 비동기 액션을 처리하기 위함이다.
thunk를 사용하면 특정 액션이 몇초 뒤에 실행되게 하거나, 조건이 충족되는 경우에만 dispatch 할 수 있습니다. 리덕스가 비동기처리를 하지 못하기 때문에 thunk를 이용해 api를 호출하고 비동기 액션을 처리하기 위함입니다.
26. props와 state에 대해 설명하시오
props와 state 모두 리액트 컴포넌트에서 다루는 데이터로 그 중 props는 부모 컴포넌트에서 받아온 데이터이다. 리액트는 부모에서 자식으로만 데이터가 흐르는 단방향 형식으로, 이미 상속된 props는 수정이 불가능하다. 반면 state는 해당 컴포넌트 내부에서 선언되기 때문에 수정이 가능하다는 차이점이 있다.
props와 state는 컴포넌트에서 다루는 데이터로 props는 단방향 형식으로 흐르는 특성을 가지고 있고, state는 해당 컴포넌트 내부에서 선언되기 때문에 수정이 가능합니다.
27. use strict이 무엇인가, 사용시 장단점은?
자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킨다. 전역에서 선언하면 모든 소스코드가 대상이고, 로컬로 선언하면 함수 내에서만 대상이 된다. use strict 모드에서는 삭제가 불가능한 프로퍼티를 삭제하거나 함수의 매개변수를 중복해서 사용하는 것 등이 금지된다.
코드의 문제를 더 빨리 알게되기에 디버깅이 쉬워지고 실수로 전역변수를 만드는 것이 불가능하지만, 단점으로는 엄격모드를 지원하지 않는 브라우저에서는 엄격 모드의 코드가 다른 방식으로 동작할 수 있다.
use strict는 자바스크립트 언어의 문법을 보다 엄격히 적용하여 엔진 최적화에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생시킵니다. use strict를 사용하면 디버깅이 쉬워지는 장점이 있지만, 단점은 엄격모드를 지원하지 않는 브라우저에서는 다른 방식으로 동작할 수 있습니다.
28. forEach와 Map의 차이점
두 메소드 다 배열의 모든 원소를 돌면서 해당 요소에 관한 작업을 실행하는데, forEach는 원본을 변경시키고, map은 새로운 배열을 반환한다.
두 메서드 다 배열의 원소를 순회하면서 해당 요소에 관한 작업을하는데 , forEach는 원본을 변경시키고, map은 새로운 배열을 반환합니다.
29. 이벤트 루프란?
싱글 스레드 기반의 언어인 자바스크립트는 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다. 이벤트 루프는 콜스택과 콜백큐의 상태를 체크하여, 콜 스택이 빈 상태가 되면 콜백 큐의 첫번째 콜백을 스택으로 밀어주는 역할을 한다. 즉, 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 JS에서 비동기 작업을 처리할 수 있게 해준다. 모든 비동기 방식의 API들은 이벤트 루프를 통해 콜백 함수를실행한다고 볼 수 있다.
이벤트 루프란 자바스크립트 엔진이 코드 조각을 하나씩 처리할 수 있도록 작업을 스케쥴하는 동시에 자바스크립트에서 비동기 작업을 처리할 수 있게 해줍니다.
30. 이벤트 바인딩이란?
이벤트 바인딩이란, 발생하는 이벤트와 그 후에 어떤일이 일어나는지 알려주는 콜백함수와 연결해준다는 뜻이다.
이벤트 바인딩에는 총 3가지 방법이 있는데, HTML이벤트 핸들러, 전통적인 DOM핸들러, EventListener을 이용한 핸들러가있다. HTML핸들러는 HTML요소의 이벤트 Attribute에 이벤트 핸들러를 넣는 방식이다. 현재에서는 지양하는 방식이고, HTML과 JS가 혼용될 수 있는 문제가 생긴다. 전통적인 DOM이벤트 핸들러는 HTML과 JS가 혼용되는 문제를 해결했으나, 이벤트 핸들러에 하나의 함수만 바인딩 할 수 있고, 함수에 인수를 전달하지 못하며, 바인딩 된 이벤트 핸들러가 2개 이상인 경우 제일 마지막에 추가된 코드의 이벤트 핸들러만 실행된다.앞에서 설명한 것의 단점을 보완하기 위해 만든 것이 EventListener을 이용한 이벤트 핸들러이인데, addEventListener함수를 이용하여 대상 요소에 이벤트를 바인딩하고, 해당 이벤트가 샐행될 콜백함수를 지정한다.하나의 이벤트에 대해 다수의 핸들러를 추가할 수 있고, 캡쳐링과 버블링을 지원하며 HTML뿐만 아니라 DOM요소에도 동작한다는 장점이 있다.
이벤트 바인딩이란, 발생하는 이벤트와 그 후에 어떤 일이 벌어질지 알려주는 함수와 묶어서 연결해 준다는 뜻입니다. 대표적으로는 HTML 이벤트 핸들러 , 전통적인 DOM 이벤트 핸들러, Event Listener를 이용한 이벤트 핸들러가 있습니다.
31. 크로스 브라우징이란?
어떤 환경에서 접근하여도 동등하게 작동하는 것을 말한다. 웹 표준 기술을 채용하여 다른 기종/플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듬과 동시에 어느 한쪽에 최적화되어 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법이다. 쉽게 말하자면 익스플로어에서 이용할 수 있던 사이트가 크롬이나 오페라에서는 보이지 않아 이용할 수 없는 것을 크로스 브라우징을 이용하여 사이트를 100% 이용할 수 있게 만드는 기술이다. 크로스 브라우징을 해야하는 이유는, 여러가지 브라우저들은 각각 다른 속성을 가지고 있기 때문에 동일한 코드를 작성하더라도 브라우저마다 화면이 다르게 보일 수 있기 때문이다. 내가 쓰는 css가 사용되지 않는 브라우저를 can i use 사이트 같은 곳에서 확인하고, 제이쿼리 라이브러리를 사용하거나, css 속성 앞에 브라우저별 접두사인 벤더 프리픽스를 사용하는 것도 해결 방법이다.
크로스 브라우징이란 어떤 환경에서 접근하여도 동등하게 작동하는 것을 말합니다. 어느 한쪽에 치우치지 않도록 공통요소를 사용하여 웹 페이지를 제작하는 기법입니다.
32. 원시값과 참조값의 차이점
원시값은 복제할 때 값이 담긴 주솟값을 바로 복제하고, 참조형은 값이 담긴 주소값들로 이루어진 묶음을 가르키는 주솟값을 복제한다. 원시값은 불변값이므로 원시값을 재 할당하면 새로운 메모리 공간을 확보하고 재 할당한 값을 저장하고 참조하던 메모리 공간 주소를 변경한다. 참조값은 가변값이므로 객체가 할당된 메모리 공간에는 실제 객체의 주소가 저장된다. 객체를 할당한 변수는 재할당없이 객체를 직접 변경할 수 있다. 프로퍼티를 동적으로 추가할 수 있고, 갱신, 삭제도 가능하다.
원시값은 복제할 때 값이 담긴 주소값을 복제하고, 참조형은 값이 담긴 주소값드로 이루어진 묶음을 가르키는 주소값을 복제합니다.
33. 콜백함수란?
다른함수의 인자로써 이용되는 함수이며 제어권도 함께 위임한 함수이다. 위임받은 코드는 자체적인 내부 로직에 의해 콜백함수를 적절히 실행한다. 비동기 처리시 콜백함수를 사용한다. 콜백지옥에 빠지면 들여쓰기 수준이 높아지며 가독성이 떨어진다.
콜백함수란 다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수 를 말합니다.
함수를 등록하기만 하고 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출하는 함수입니다.
34. event.target과 event.currentTarget의 차이점
어떤 것을 반환하느냐의 차이인데, event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치, 내가 클릭한 자식 요소를 반환한다. 하지만 currentTarget은 이벤트가 부착된 부모의 위치를 반환한다.
event.target은 부모로부터 이벤트가 위임되어 발생하는 자식의 위치고, currentTarget은 이벤트가 부착된 부모의 위치를 반환합니다.
35. 스코프란? 스코프체인이란 무엇인가?
스코프란 어떤 변수들에 접근할 수 있는 유효범위로 코드 어디서든 참조할 수 있는 전역스코프, 함수 자신과 하위 함수에서만 참조할 수 있는 지역스코프가있다. 함수안에서 선언된 변수는 해당 함수안에서만 사용할 수 있으니 전역변수에 영향을 끼칠 수 없다. 내부함수는 호출된 변수를 찾기위해 먼저 자신의 스코프에서 찾고 없으면 한단계씩 외부로 나가면서 찾는다. 이렇게 꼬리를 물고 계속 범위를 넓히면서 찾는 관계를 스코프 체인이라고 부른다.
스코프란 변수들에 접근할 수 있는 유효범위로 전역스코프와 지역스코프가 있습니다. 스코프체인은 계속 범위를 넓히면서 찾는 관계를 스코프체인이라고 부릅니다.
36. HTTP요청 메소드 POST와 GET의 차이점은 무엇인가
GET은 주로 데이터를 읽거나 검색할 때 사용되는 메소드인 반면 POST는 update나 create할 때 사용된다.
GET은 데이터의 변형 위험이 없기때문에 POST보다 안전하다고 간주된다. POST요청은 클라이언트에서 서버로 전송할 때 추가적인 데이터를 body에 포함할 수 있지만 GET요청은 필요한 데이터를 URL에 포함하여 요청한다.
get은 서버에서 어떤 데이터를 가져와 상태를 바꾸지 않는 경우에 사용하고, post는 서버상의 데이터 값이나 상태를 바꾸기 위해서 사용합니다.
