[코드잇 스프린트] 0412 데일리 퀴즈

 
 

 
1. 빌드, 트랜스파일링, 번들링 각 용어에 대해 설명해주세요
 
1) 빌드란 소스 코드 파일을 컴퓨터에서 실행할 수 있는 독립적인 형태로 변환하는 과정을 말한다.
대부분은 원하는 프로그램을 만들기 위해 고수준 언어(C, JAVA 등)를 사용해서 코딩을 한다. 하지만 컴퓨터는 0과 1이라는 숫자밖에 모르기 때문에 우리가 사용한 고수준 언어를 컴퓨터는 해석하지 못한다.
 
따라서 우리가 원하는 프로그램을 만들기 위해서는 우리가 작성한 언어를 컴퓨터가 이해할 수 있는 기계어로 번역해줘야 한다. 즉, 우리가 사용하는 고수준 언어를 기계어로 번역해서 실행 파일을 만들어내는 과정을 '빌드'라고 한다.(빌드의 단계 중 컴파일이 포함되어 있기 때문에 컴파일은 빌드의 부분집합이라고 할 수 있다.)
 
2) 트랜스파일링
트랜스파일링이란 특정 언어로 작성된 코드를 비슷한 다른 언어로 변환시키는 행위를 말한다.
 
브라우저는 크롬만 있는 것이 아니다. 현재에는 브라우저간 호환성이 많이 높아진 편이지만 익스플로러와 크롬이 혼용되던 시절, 크롬에서는 잘 동작했던 것이 익스플로러에서는 동작하지 않는 문제가 빈번히 발생했다.
브라우저에서 호환되지 않는 사유가 다양해서 (ex. 언어 버전을 지원안함, webAPI가 다름) 익스플로러를 위한 작업 따로, 크롬을 위한 작업을 따로 하는 등 비 효율적인 작업 과정을 거쳐야 했다.
 
최근에는 리액트, 뷰와 같은 프레임워크, typescript 와 같이 문법적으로 변환시켜야 하는 서드 파티들을 필수적으로 사용하게 되면서, 트랜스파일링에 대한 필요성이 대두되었다.
 

서드 파티란?

하드웨어 생산자와 소프트웨어 개발자의 관계를 나타낼 때 사용한다. 그 중에서 서드파티는, 프로그래밍을 도와주는 라이브러리를 만드는 외부 생산자를 뜻한다.

개발자 측면으로 보면?

1. 하드웨어 생산자가 '직접' 소프트웨어를 개발하는 경우 : 퍼스트 파티 개발자
2. 하드웨어 생산자인 기업과 자사간의 관계(또는 하청업체)에 속한 소프트웨어 개발자 : 세컨드 파티 개발자
3. 아무 관련없는 제3자 소프트웨어 개발자 : 서드 파티 개발자

주로 편한 개발을 위해 플러그인이나 라이브러리 혹은 프레임워크를 사용하는데, 이처럼 제 3자로 중간다리 역할로 도움을 주는 것이 서드 파티로 볼 수 있고, 이런 것을 만드는 개발자가 서드 파티 개발자다.

3) 번들링
웹에서 파일을 다운로드할 때 여러 개로 나누어서 다운로드 하는 속도보다 하나로 뭉쳐서 다운로드 하는 것이 훨씬 빠르다.
 
따라서 우리가 프로젝트 작업을 할 때는 여러개로 나누어서 작업을 하지만 최종적으로 웹 서버에 올릴 때 하나의 파일로 압축해서 올리는 것이 번들링이다. 따라서 번들링(Bundling)이란 여러 개로 흩어져 있는 파일들을 압축하여 하나의 파일로 모아주는 역할을 한다.

2. 배열 sort 메서드는 어떠한 방식으로 배열 요소를 정렬하는지 설명해주세요
 
정렬되기 전에 배열 내의 값을 내부적으로 문자열로 변환하기 때문에 원하는 순서대로 정렬되지 않는다. ( 이 부분 때문에 특히 숫자로 이뤄진 배열을 정렬할 때 엉뚱한 결과를 얻을 수 있다.)

[100, 3, 1, 20].sort(); // [1, 100, 20, 3]

 
따라서 원하는 규칙에 따라 정렬하기 위해서는 정렬 순서를 정하는 매개변수가 필요하다.
 
매개변수를 사용해 오름차순이나 내림차순으로 정렬할 수 있다.
만약 숫자배열을 오름차순으로 정렬하기 위해서는 첫번째 인자에서 두번째 인자를 빼준다.
반대로 숫자 배열을 내림차순으로 정렬하고 싶다면 피연산자의 순서를 바꾸면 된다.

// 오름차순
[-3, 2, 0, 1, 3, -2, -1].sort((a, b) => a - b); // [-3, -2, -1, 0, 1,  2,  3]

// 내림차순
[-3, 2, 0, 1, 3, -2, -1].sort((a, b) => b - a); // [3, 2, 1, 0, -1, -2, -3]

3. 배열 filter 메서드에 대해 설명해주세요
 
filter 메서드는 배열의 각 요소를 순회하며 콜백함수를 실행하며 조건에 맞는 요소만을 갖는 배열을 반환한다.
filter 메서드는 sort 메서드와 다르게 원래 배열을 변경하지 않는다.

4. 반복하는 요소의 key props에 배열 인덱스 사용을 지양해야 하는 이유를 설명해주세요
 
리액트에서는 props가 변경되면 컴포넌트를 재렌더링 한다. 
배열에서 list 요소를 추가, 삭제하면 재렌더링 되는데, index를 key prop으로 지정하게 되면 list 요소가 추가, 삭제가 이뤄질 때 재렌더링으로 인해 list의 모든 형제 컴포넌트가 재렌더링 되기 때문에 성능 저하가 일어날 수 있다.