CS면접 준비

✅단방향 바인딩, 양방향 바인딩의 차이점에 대해 설명해주세요. 각각 사용하는 프레임워크는 뭐가 있나요?

단방향 바인딩이란, view와 model간의 데이터의 동기화가 model 즉, 자바스크립트에서 view 즉 HTML의 방향으로만 발생하는 것을 말합니다. 따라서 HTML에서 JS로의 역방향 데이터 갱신은 불가능합니다. 이벤트 함수를 사용해서 자바스크립트에서 HTML로 데이터를 갱신해주어야 합니다. 대표적으로 SPA 프레임워크에서는 React에서 단방향 바인딩을 사용합니다.

양방향 바인딩이란, model과 view 즉 자바스크립트와 HTML 사이에 viewmodel이 존재하여 그 둘이 하나로 묶이기 때문에, 둘 중 어느 한쪽만 변경되어도 함께 변경되는 것을 의미합니다. 대표적으로 SPA 프레임워크에서는 Vue.js, Angular 가 양방향 바인딩을 사용합니다.

✅JS 의 원시타입, 참조타입에 대해 설명해주세요.

원시 타입과 참조 타입은 자바스크립트의 데이터의 타입을 크게 두 가지로 나눈 것인데요, 그 중 원시 타입이란 문자 형, 숫자 형, 논리 형과 같이 실제 데이터 값을 저장하는 타입이고, 참조 타입은 배열, 객체, 함수와 같이 객체의 번지를 참조하는 타입으로, 실제 데이터가 아닌 그 데이터가 있는 메모리 공간의 번지 값을 저장하여 참조하는 타입입니다.
원시 타입은 그 값을 그대로 복사하며, 데이터를 바꿔도 다른 데이터에 영향을 미치지 않는데 비해
참조 타입은 값이 아닌 메모리 주소를 복사하며, 데이터를 바꾸면 그 주소를 참조하는 모두에게 영향을 미치게 됩니다.
추가로 원시 타입은 null 값을 포함할 수 없지만, 참조 타입은 null 값을 포함할 수 있습니다. 또한 타입 스크립트에서 제네릭 타입을 사용할 때 원시 타입은 사용할 수 없지만 참조 타입은 사용할 수 있습니다.
또한 원시 타입은 스택 메모리에 바로 그 값이 존재하는 반면 참조 타입은 번지 정보 만이 스택 메모리에 존재하고 실제 데이터는 힙 메모리에 존재하기 때문에 접근 속도의 경우 원시 타입이 더 빠릅니다.

✅Babel, Webpack 라이브러리의 역할에 대해 설명해주세요.

바벨은 자바스크립트 트랜스컴파일러인데요, ES6 이후 버전의 자바스크립트는 지원하지 않는 브라우저도 존재합니다. 즉 브라우저 호환성과 관련하여 문제가 발생하는 것입니다. 이를 해결하기 위해, 최신 자바스크립트 코드를 더 이전 버전의 자바스크립트 코드로 변환해주는 과정을 트랜스컴파일링이라고 하는데요, 이걸 도와주는 대표적인 트랜스 컴파일러 라이브러리가 바로 ‘바벨’입니다.

웹팩이란 자바스크립트 모듈 번들러인데요, ‘번들러’ 라는 말 그대로, 여러 개의 파일을 하나의 파일로 번들링, 즉 모아주는 역할을 해 주는 라이브러리입니다. HTML, CSS, JavaScript 등의 웹 어플리케이션을 구성하는 파일 하나하나를 모듈이라고 하는데요, 이들은 하나로 압축하고 병합 해 주는 겁니다. 이렇게 브라우저에서 서버로 요청하는 파일의 개수를 줄임으로써 웹 사이트의 로딩 속도를 줄일 수 있습니다. 뿐만 아니라 웹팩의 코드 스플리팅 기능을 통해 원하는 모듈을 원하는 시점에 로딩할 수 있습니다. 이는 초기 로딩 페이지 로딩의 속도를 더욱 빠르게 해 줍니다.