[FE Study] Javascript - (2)

1. 프론트앤드 라이브러리, 프레임워크(React, Angular, Vue)

1) FE 라이브러리 & 프레임워크를 사용하는 이유

• 프로젝트 규모가 커지고, 다양한 유저 인터렉션이 전달된다면 그만큼 DOM 요소들 또한 변화가 이루어져야 한다.
• DOM 요소들이 변화하면 렌더 트리를 재생성하거나 리플로우, 리페인트 과정을 거쳐야 한다.
• 이런 과정이 반복될수록 많은 연산을 해야한다는 것이고, 이는 전체적인 프로세스의 비효율성을 야기한다.
• 또한 많은 DOM 요소의 변화를 개발자가 직접 관리하는 것은 적지 않은 짐으로 다가온다.
• 결국 React, Angular, Vue와 같은 라이브러리는 DOM 관리와 상태 변화 관리를 최소화하고, 개발자 오직 기능 개발, 사용자 인터페이스에 더 집중할 수 있도록 도와주기 때문에 사용한다.

2. 명령형 vs 선언형

Key Ponint 💡

• 명령형 프로그래밍은 무엇을 어떻게(How) 할 것인가에 가깝고, 선언형 프로그래밍은 무엇(What)을 할 것인가와 가깝다.

3. React를 사용하는 이유

Key Ponint 💡

• 생산성과 유지보수를 용이하게 한다

• 리액트에서는 컴포넌트 단위로 작성을 한다.
• 컴포넌트는 UI를 구성하는 개별적인 뷰 단위로서, UI 개발을 레고라고 한다면, 컴포넌트는 블록 역할을 하게 된다.
• 이러한 블록을 조립해 하나의 완성품을 만드는 것과 같다. 이러한 특징은 하나의 컴포넌트를 여러 부분에서 재사용할 수 있게 해준다.

4. JSX(Javascript + xml)란?

Key Ponint 💡

• 생산성과 유지보수를 용이하게 한다

• 자바스크립트에 대한 확장 구문으로서, 리액트에서 요소를 제공해준다.
• 그래서 개발자가 단순히 마크업 코드에 익숙하다면 그것만으로도 JSX를 통해 컴포넌트를 구성하는데 쉽게 적응할 수 있다는 장점이 있다.
• JSX 코드는 Babel이 트랜스파일링해준다. 덕분에 익숙한 HTML 문법과 유사한 JSX를 통해 컴포넌트를 생성할 수 있게 된다.

5. Virtual DOM이란?

• 가상

유저의 인터렉션에 의해 상태변화가 일어나면 브라우저 작동 원리에 의해 렌더링 과정을 반복하게 된다. Virtual DOM은 이러한 과정에 의해 발생하는 비효율성을 최소화하기 위해 탄생하였다. 리액트는 성공적으로 가상돔의 개념을 적용한 선발 주자라고 할 수 있다.

6. 변수란?

7. 자바스크립트에서 변수를 사용하는 이유?

8. 변수 호이스팅이란?

9. 가비지 콜렉터란?

10. 예약어