잡다한 CS지식

1. 라벨 태그의 역할과 htmlFor 옵션을 사용한 이유에 대해 설명해보세요

• 라벨은 input의 이름을 적는 태그이고, htmlFor은 input의 id | name을 적어 input과 연결한다.
  • htmlFor

2. Javascript의 비구조화 할당 방식과 과제 코드의 어느 부분에서 사용되었는지 설명해보세요.

• 비구조화 할당이란 배열이나 객체의 속성 혹은 값을 해체하여 그 값을 변수에 각각 담아 사용하나느 JS 표현식이다.
  비구조화 를 참고하여 Props를 사용해 버튼을 하나로 묶어 사용한다.

3. 인터프리터와 컴파일러의 차이와 이를 중점으로 Javascript의 특징에 대해설명해보세요. (Javascript는 단순한 인터프리터 언어가 아니에요!)

• 인터프리터 => 코드를 한 줄씩 읽고 기계어로 변환한 후 즉시 실행한다. 특정 프로그래밍 언어로 쓰여 있는 문서를 다른 프로그래밍 언어로 옮기는 언어 번역 프로그램을 의미한다. 코드 변경 사항을 신속하게 테스트하고 구현할 수 있어 개발 프로세스가 더 빠르고 유연해진다.
  반면 컴파일러 => 전체 코드를 읽고 한번에 기계어로 변환한다. 때문에 컴파일은 더 느리지만 실행 파일은 더 빠르고 효율적이다.
  Js는 인터프리터 언어이고 함수형 프로그래밍을 지원하여 함수를 다른 데이터 유형처럼 취급할 수 있다. 이를 통해 더 많은 모듈과 재사용 가능한 코드를 작성할 수 있다. JS는 기계에게 전달되기전 바이트 코드로 변환되고 이를 받아 가상머신에 의해 기계어로 변환된다.

1. 바이트 코드로의 변환
2. 기계어로 변환
3. CPU 코드 실행

• 이러한 JS는 인터프리터로서 기능을 해왔지만 점차 많은 기능이 필요함에 따라 성능상 무거워지게 되었다. 구글에서는 이를 개선하기위해 Chrome V8엔진을 개발하였고, 이를 통해 컴파일을 진행하게 된 계기가 되었다. V8 이전에는 Parser, AST, Interpreter를 거쳐 ByteCode로 변환되었고 이후엔 Profiler를 사용하여 모니터링 후 코드 내에 반복 실행되는 것이 있다면 이를 컴파일러에게 넘겨 실시간으로 컴파일 하도록 하였다. 이처럼 필요할때마다 컴파일 하는 컴파일러를 JIT(Just-In-TIme)컴파일러라 한다.
  결과적으로 JS는 인터프리터 언어로서의 성질을 가지지만, 성능상의 최적화를 위해 컴파일 언어의 특성도 함께 갖는다.
  참고

4. Javascript에서 var보다 let, const 사용을 지향해야하는 이유를 설명해보세요. (변수 호이스팅에 대해 공부해보면 좋겠어요)

• let과 const는 블록 범위 선언이고 var는 함수 범위 선언이다. 즉, let 및 const는 정의된 블록 범위로 지정되고 var는 정의된 함수 범위로 지정된다. let은 똑같은 변수를 선언했을 떄 오류가 발생하고, var는 이를 썼을 때 오류가 발생하지 않는다. let은 {}안에서만 사용이 가능하고 var는 이외의도 사용이 가능하다. 그러므로 let은 함수마다 사용하여 겹치는 오류가 발생하지 않고, var는 전역으로 쓸 수 있기에 변수가 겹쳐 사용될 수 있다. 즉 let은 typescript와 비슷하게 중복되는 변수의 선언을 금지한다.
• var,let의 차이

5. Javascript에서 함수 선언식과 함수 표현식에 대해 설명해보세요. (함수 호이스팅에 대해 공부해보면 좋겠어요)

• 함수 선언식 : function onClick(){return null;} onClick()
• 함수 표현식 : const onClick = () =>{return null;} onClick() 식으로 사용한다.
• 호이스팅 : 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언하는 것
  • 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다.
    • 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다.
    • 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다.
    • 유효 범위: 함수 블록 {} 안에서 유효
    • 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다.
    • 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다.
    • 실제 메모리에서는 변화가 없다.
• 호이스팅의 대상
  • var 변수 선언과 함수선언문에서만 호이스팅이 일어난다.
    • var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않는다.
    • let/const 변수 선언과 함수표현식에서는 호이스팅이 발생하지 않는다.
• 선언식, 표현식의 장단점

6. Javascript에서 콜백함수와 비동기 처리에 대해 설명해보세요.

1. Js에서 콜백 함수는 다른 함수에 매개변수로 전달되어 어떤 이벤트가 발생한 후에 실행되는 함수이다.

• 콜백 함수의 목적은 개발자가 이벤트를 트리거한 원래 함수를 수정하지 않고도 이벤트 발생 후 발생해야 하는 작업을 정의할 수 있도록 하는 것이다. 이렇게 하면 코드가 더 모듈화되고 유지 관리가 더 쉬워진다.
• 일반적으로 AJAX, 이벤트 리스너와 같은 비동기 처리를 위해 사용된다.

2. JavaScript의 비동기 처리는 메인 실행 스레드를 차단하지 않고 코드를 실행하는 언어의 기능을 말한다. 이는 다음 프로세스로 이동하기 전에 프로세스가 완료될 때까지 기다리는 대신 JS가 여러 작업을 동시에 실행하여 웹 애플리케이션의 성능과 사용자 경험을 향상시킬 수 있음을 의미한다.

• 콜백, Promise, async/await등을 사용한다.
• 콜백&비동기

7. 바벨이란?

• 개발자가 최신 Js 코드를 언어의 최신 기능을 지원하지 않는 이전 브라우저나 환경에서 실행할 수 있는 호환 가능한 버전의 JS로 변환하는데 사용하는 도구이다.

• Webpack, Gulp와 같은 널리 사용되는 빌드 도구용 플러그인을 통하거나 CodePen 또는 JSFiddle과 같은 도구를 사용하여 브라우저에서 직접 사용하는 등 여러 가지 방법으로 사용할 수 있다.

• 바벨 동작은

  • 파싱(parsing) : 코드를 읽고 추상 구문 트리로 변환하는 단계,
  • 출력(printing) : 변경된 결과물을 출력하는 단계
    로 이루어 진다.

• 바벨이란?

8. React 엘리먼트와 JSX에 대해서 설명해보세요.

1. 엘리먼트는 컴포넌트의 구성요소이며 React의 가장 작은 단위이다.

• root 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하며 이것을 root DOM 노드라고 부른다. 일반적으로 React로 구현된 앱은 하나의 Root DOM 노드가 있다.
• React 엘리먼트를 root DOM 노드에 렌더링 하려면 ReactDOM.render(element, document.getElementById('root'))에 전달하면된다.

2. JSX(JavaScript XML)는 JS에 XML을 추가한 확장된 문법이다.

• React를 사용할 떄 사용되므로 공식적인 Js 문법은 아니다.
• 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
• 엘리먼트
• JSX

9. 브라우저의 DOM과 React의 virtual DOM에 대해서 설명해보세요.

1. DOM => Document Object Model => 웹 페이지에 대한 인터페이스

   • HTML, XML 문서의 프로그래밍 Interface이다.
   • 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근 할 수 있는 방법을 제공하여 문서 구조, 스타일, 내용등을 변경할 수 있게 해준다.
   • 웹 페이지(일종의 문서)를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결된다.
   • 동일한 문서를 표현, 저장, 조작하는 방법을 제공하고, JS등의 스크립트 언어를 이용해 수정할 수 있다.
   • 결론적으로 문서에 접근하기 위해서 DOM이 필요하고 이로 인해 HTML,XML등의 요소들의 정보를 보여주게 된다.
   • 웹 개발 맥락에서 브라우저의 DOM은 웹 페이지의 구조와 콘텐츠를 나타내는 개체 및 메서드의 모음이다. DOM은 웹 페이지가 로드될 때 브라우저에 의해 생성되며 JavaScript를 사용하여 액세스하고 조작할 수 있다.

2. Virtual Dom

   • SPA(Single Page Application)에서는 DOM 조작이 많이 발생한다. 그 변화를 적용하기 위해 브라우저가 많이 연산을 해야하고, 전체적인 프로세스를 비효율적으로 만든다.
   • 이 때 Virtual DOM이 사용되는데, 뷰에 변화가 있다면, 그 변화는 실제 DOM에 적용되기전에 가상의 DOM에 먼저 적용시키고 최종적인 결과를 실제 DOM으로 전달해준다.
   • 이로써, 브라우저 내 발생하는 연산의 양을 줄이면서 성능을 개선한다.

• virtualDom
• Dom

10. React의 리렌더링 조건에 대해서 설명해보세요.

1. state 변경이 있을때

   • state 값을 바꾸기 위해서는 state 값을 조작하는 것이 아니라 setState() 메서드를 사용해 변경한다.

2. 새로운 Props가 들어올 때

   • 전달받은 props 값이 업데이트 됬다면 리렌더링 한다.

3. 부모 컴포넌트가 렌더링 될 떄

   • 새로운 Prop이 들어오지 않고 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트도 리렌더링 된다.

4. shouldComponentUpdate에서 true가 반환될 때

   • 각각의 컴포넌트는 shouldComponentUpdate 라는 메소드를 가지고 있는데 이는 state가 변경되거나 새로운 props를 전달받는경우 실행이 된다.
   • 이때 기본적으로 return 값은 true가 되어 리렌더링이 시작되지만 리렌더링이 필요하지 않은 부분이라면 개발자가 return value 를 false 값으로 지정함으로써 리렌더링 되는 상황을 막아줄수 있게된다.

5. forceUpdate가 실행될 때

   • React는 위의 조건 중 어느 것도 충족되지 않는 경우에도 개발자가 구성 요소를 강제로 리렌더링할 수 있는 'forceUpdate()' 메서드를 제공한다. 성능 문제가 발생할 수 있으므로 드물게 사용해야 한다.

• 리렌더링 조건