React
-
Virtual DOM이 무엇이고, Virtual DOM이 어떤 면에서 좋은가요?
JS에서 DOM조작을 하게되면 해당 페이지의 하나의 콘텐츠만 수정이 되더라도 페이지 전체가 새로 리렌더링이 되는 비효율적인 업데이트가 자주 발생한다. 이 경우 프레임 드롭과 같은 사용자 경험을 저하시키는 요소가 발생할 수 있다. 여기서 '바뀐 부분만 비교해서 그 부분만 렌더링 할수 없을까?' 에 대한 아이디어를 기반으로 Virtual DOM이 나오게 되었다.
Virtual DOM은 어떠한 상태가 변경될 때마다 가상 DOM을 생성하는데 이때 실제 DOM과 비교해 달라진 부분만 실제 DOM에 업데이트를 해준다. 그리고 데이터를 이용한 상태변경을 해야할 경우에는idx값이 아닌 고유한key값을 넣어줘서 똑같은 데이터가 다시 제랜더링 되는것을 막아주는것이 성능향상에 도움이 된다. -
Class Component와 Function Component의 차이점이 무엇인가요?
과거 React에서 component를 만들때 class를 이용해 컴포넌트를 만들었다. 이는 컴포넌트가 복잡해질수록 이해하기 어려워졌고 컴포넌트 사이에서 생긴 로직을 재사용하기 어렵다는 단점이 있었다. 이에 React는 점차적으로 Function Component로 넘어갔는데 함수형 컴포넌트는 훨씬 직관적이기 때문에 보기 쉬워지는 특징을 가지고 있다. 하지만 상태값을 사용하거나 최적화할 수 있는 기능들이 조금 미진했는데 Hook이라는 개념을 도입해 이러한 단점들을 보완해 지금은 함수형 컴포넌트를 사용하고 있다.
TypeScript
-
TypeScript는 정확히 무엇이며 JavaScript와 어떻게 다른가요?
JS는 예로 숫자 타입 1과 문자타입 2를 더할시 강제로 문자타입 12로 만들어준다. 이렇게 JS에서는 타입의 명시를 안해줘도 동작을 하는경우가 많아 예상치 못한 오류들을 많이 접하게 되고 만약 타입관련 오류였다라고 한다면 프로젝트의 크기가 커질수록 찾아내기 어려울 것이다. 이러한 문제점들을 보완하기위해 TS가 나오게 되었다. -
TypeScript를 사용할 때 어떤 장단점이 존재하나요?
인터페이스(Interface), 제네릭(Generic), 데코레이터(Decorators) 등의 기능을 제공하여 객체 지향 프로그래밍을 보다 쉽게 할 수 있도록 도와준다. TS를 사용시 객체에 직접 타입을 지정 해주거나 interface와 type 등을 이용해 객체의 타입을 미리 지정 해줄수 있기 때문에 코드의 가독성도 높아지고 협업시 다른 개발자가 코드를 이해하기 쉬워지는 장점이 있다. 그리고 런타임 에러를 미리 방지할 수 있기 때문에 유지보수성도 높아진다.
