JavaScript

자바스크립트 코드를 디버깅할때 쓰는 툴이 있나요? 어떤 방식으로 디버깅 하시나요?

• 디버킹 툴은 현재 크롬 개발자 도구만 이용해봤습니다. 로직이 길어질경우 임의의 변수에 무슨 값이 들어있는지 확인하기 위해 breakpoint를 찍어서 확인합니다. 그 이외에 간단한 로직인 경우 코드에 console.log를 찍어 확인합니다.

자바스크립트 내에서 변수 let, var, const 가 각각 어떻게 쓰이는지 차이점은 무엇인지 설명해주세요.

• 위 세가지는 변수 선언 방식에 차이가 있는데 var는 재선언이 가능하지만 let과 const는 재선언이 불가능합니다. 여기서 let과 const의 차이는 let은 재할당이 가능하지만 const의 경우 재할당이 불가능합니다. 차이점 두번째는 호이스팅에서 발생합니다. var는 변수의 선언과 초기화가 동시에 이루어지기 때문에 선언되기전 참조가 가능하지만, let과 const는 선언과 초기화가 분리되어 발생하므로 선언되기전 참조할 수 없습니다. 차이점 세번째는 scope 범위의 차이인데 var는 function scope 방식이고 let, const는 block-scope방식이다.

자바스크립트내에서 삼항연산자는 주로 어떨때 사용하시나요?

• 리액트에서 조건에 따라 다른 ui를 렌더링할 경우 사용합니다.

spread 연산자와 rest 파라미터에 대해서 아시는대로 말해주세요.

• spread 연산자는 대상 배열 또는 이터러블을 개별 요소로 분리합니다.

console.log(...[1, 2, 3]); // 1, 2, 3

• rest 파라미터는 함수의 파라미터를 spread연산자 형태로 작성하여 인자를 배열로 받을 수 있게 작성한 방식입니다.

function test(...rest) {
  console.log(rest); // [1, 2, 3]
}
test(1, 2, 3);

모듈 패턴과 전통적 상속, 각각의 장단점을 말해주세요.

• 모듈패턴은 전체 어플리케이션의 일부를 독립된 코드로 분리하여 만들어 놓는 코드 작성 방식을 말합니다. 이를 사용하면 자주 사용되는 코드를 별도의 파일로 만들어서 필요할 때마다 활용할 수 있고 코드 수정 시에 필요한 로직을 빠르게 찾을 수 있습니다. 단점으론 코드량이 많아지고 다운로드해야 하는 파일크기도 늘어난다고 하는데 파일크기가 왜 늘어나는지에 대핸 아직 찾는중입니다.
• 전통적 상속은 프로토타입 기반으로 상속을 구현하는 방식으로 공통적인 속성, 메소드를 구현하여 재사용성을 늘릴 수 있는 장점이 있지만 코드 작성이 어렵다는 단점이 있습니다.

호스트 객체(Host Objects)와 네이티브 객체(Native Objects)의 차이점은 무엇인가요?

• 네이티브 객체는 ECMAScript의 스펙에 의해 정의된 객체로 애플리케이션 환경과 관계없이 언제나 사용할 수 있습니다. Object, String, Number...등등이 있습니다. 호스트 객체는 실행환경에서 제공하는 객체로 OS, Web browser에 따라 제공하는 객체가 달라집니다. window, HTMLElement 객체 등등이 있습니다.

전역 scope를 사용했을 때 장단점에 관해 설명해주세요.

• 장점으로는 어디서든 변수에 접근할 수 있다는 장점이 있지만, 단점으론 코드의 양이 많아질수록 유지보수가 어렵습니다.

React

자바스크립트의 대표적인 라이브러리와 프레임워크에는 react와 vue, angular 가 있는데요 3가지의 공통점과 차이점에 대해서 설명해주실수 있나요?

• react, vue, angular는 프로트엔드 프레임워크 및 라이브러리 입니다. react는 Virtual Dom을 지원하여 성능을 높이고, jsx를 사용하여 컴포넌트 단위 개발을 지원하여 단방향 바인딩을 지원합니다. angular는 typescript 기반이고 양방향 바인딩을 지원합니다. 그리고 라우팅, 상태관리 등 모든 도구를 모아놓은 프레임워크이지만 이 이유로 배울 것이 많고 어렵다는 점이 있습니다. vue는 Virtual Dom 지원하여 성능을 높이고 typescript와 양방향과 단방향 바인딩을 지원합니다. 작은 러닝커프를 갖고 있어 프레임워크 입문자들이 사용하기 용이합니다.

JSX는 무엇인가요?

• JavaScript를 확장한 문법으로 React에서 JS와 html를 함께 사용하여 UI를 그릴 때 사용합니다.

클래스 컴포넌트와 함수형 컴포넌트의 차이는 무엇인가요?

• 클래스 컴포넌트는 라이프 사이클 메소드를 사용하여 sideEffect를 관리할 수 있고, state를 관리할 수 있습니다. 함수형 컴포넌트는 hooks가 나오기전엔 state를 관리할 수 없었지만 hooks이후 state를 관리할 수 있고 useEffect를 이용해 sideEffect까지 관리할 수 있게 되었습니다. 지금은 코드 작성이 편리한 함수형 컴포넌트로 작성하는 추세입니다.

key는 어떻게 사용되나요?

• key는 컴포넌트안에서 리스트를 렌더링할 때 항목들을 식별하기 위해 사용됩니다. key를 이용해 기존 트리와 변경 후 트리가 일치하는지 확인하기 때문에 key를 사용하지 않는다면 변경이 된 부분만 업데이트하는게 아닌 모든 부분을 업데이트하는 비효율성이 발생합니다.

state와 props의 차이는 무엇인가요?

• props는 외부에서 넘겨주는 값을 의미하고 읽기 전용으로 수정을 하면 안됩니다. 반면에 state는 컴포넌트의 상태를 의미하며 컴포넌트안에서 관리됩니다.

왜 state를 직접 변경하지 않고 setState를 이용하나요?

• setState를 사용하여 state를 업데이트해야 라이프 사이클에 따라 리렌더링되기 때문입니다.

prop으로 전달되는 값의 type을 어떻게 강제하나요? 또 prop이 필수적으로 전달되게끔 어떻게 강제하나요?

• prop-types 패키지를 이용해 props에 대한 type을 강제할 수 있습니다. 그리고 props가 필수적으로 전달하게 하는 방법은 defaultProps 속성을 사용하여 props의 기본값을 정의하는 객체를 할당하여 전달합니다.

React 애플리케이션을 스타일링(styling)하는 다양한 방법을 알려주세요.

• className에 class를 설정하여 스타일링을 할 수 있고 css-in-js 라이브러리를 이용하여 스타일링을 할 수 있습니다.