기술면접 단골 질문 12선

• 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?✅

자식 컴포넌트들 간의 다이렉트 데이터 전달은 불가능 합니다. 자식 컴포넌트들 간의 데이터를 주고 받을 때는 상태를 관리하는 부모 컴포넌트를 통해서 주고 받아야 합니다. 그런데 자식이 많아진다면 상태 관리가 매우 복잡해집니다. 상태를 관리하는 상위 컴포넌트에서 계속 내려 받아야합니다.(Props drilling) 그리하여 상태 관리의 복잡성을 해결해주는 라이브러리를 활용해야 합니다. 평소 state 관리는 주로 Redux를 이용하여 전역으로 관리하고, 브라우저가 꺼져도 상태가 유지되도록 LocalStorage같은 웹스토리지를 이용하여 관리하고 있습니다. 백엔드와 실시간 소통이 중요하다면 소켓으로도 관리합니다.

• Redux가 무엇인가요, 왜 Redux를 사용하시나요?✅

리덕스는 액션 이벤트를 이용하여 어플리케이션 상태를 관리하는 라이브러리 방식입니다. 리덕스를 사용하는 이유는 어플리케이션의 많은 부분에서 쓰일 수 있는 상태를 전역으로 관리할 수 있기 때문입니다. 리덕스를 사용하면 인접한 컴포넌트끼리 데이터를 넘겨주는 방식을 거치지 않더라도 여기저기 컴포넌트에 데이터를 쓸 수 있습니다. 그래서 리덕스를 사용합니다.

• Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요 ✅

Mobx를 알고 있습니다. Mobx는 리덕스와 달리, 컴포넌트와 State를 연결하는 번잡한 보일러플레이트 코드들을 데코레이터로 깔끔하게 해결합니다. Mobx는 관찰할 수 있는 특성이 있습니다. 리렌더링 대상이 되는 state를 관찰 대상이라고 하며, observable 데코레이터로 지정한 State는 관찰대상으로 지정되고, 그 State는 값이 변경될 때 마다 리렌더링됩니다. ⇒ 말 조금 이상 뒷부분

• 버츄얼 돔과 리얼 돔의 차이를 설명해주세요 ✅

돔은 문서 객체 모델의 약자로, 웹 페이지를 이루는 태그들을 자바스크립트가 이용 할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미합니다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (즉 메모리에 보관할 수 있는) 객체를 의미합니다. 리얼 돔에서 버그가 발생하거나 브라우저가 죽는 일을 개선하고자 버츄얼 돔이 나오게 됐습니다. 버츄얼 돔을 사용하면, 리얼 돔에 접근하여 조작하는 대신에 이를 추상화한 자바스크립트 객체를 구성하여 사용합니다. 예를 들어, 데이터가 업데이트가 되면, 전체 UI를 버츄얼 돔에 리렌더링합니다. 그리고 이전 버츄얼 돔에 있던 내용과 현재의 버츄얼 돔의 내용을 비교합니다. 그 후 바뀐 부분만 리얼 돔에 적용이 됩니다.⇒ 문서 객체 부분 어색

• useRef에 대해 설명해보세요 ✅

useRef는 크게 두가지 속성이 있습니다. 먼저 current 속성을 가지고 있는 객체를 반환하는데, 인자로 넘어온 초기값을 current 속성에 할당합니다. 이 current 속성은 값을 변경해도 상태를 변경할 때처럼 React 컴포넌트가 다시 랜더링되지 않습니다.
두번째 속성으로는 javascript에서 특정 Dom을 선택하는 역할을 하는 getElementById, querySelector 같은 것들처럼 특정 DOM에 접근할 때 사용합니다. ref 를 사용 할 때에 useRef 훅을 사용하고, 원하는 위치에 ref={} 의 형태로 작성합니다.

• useEffect의 실행 순서에 대해 설명해주세요 ✅

useEffect의 실행 순서는 Bottom -> Top 순입니다. React 컴포넌트 자체가 기본적으로 자식 컴포넌트부터 렌더링됩니다. 따라서 Bottom -> Top -> App 순서로 렌더링 될 것이고, 부모 컴포넌트는 모든 자식 컴포넌트가 렌더링될 때까지 완료 되지 않으므로 useEffect도 마찬가지로 Bottom → Top 순서로 이뤄집니다.

• var, let, const의 차이에 대해 알려주세요. ✅

var는 전역 스코프(블록) 변수이고 let은 선언된 블록안에서만 쓸 수 있는 변수입니다. const도 지정된 블록 안에서만 쓸 수 있습니다만 var, let 변수와 차이점이라면 변수가 아닌 상수라는 차이입니다. 즉 선언한 값에 재할당을 하지 못 합니다. 하지만 const는 재할당이 완전 불가능 한 것은 아닙니다. const를 배열로 선언하면 push 메서드를 이용하여 재할당이 가능합니다. ⇒ var, let의 차이점이라고 오해 할 수 있음.

• Async/Await와 Promise의 차이 ✅

Promise는 자바스크립트에서 비동기 처리에 사용되는 객체입니다. 내용은 실행 되었지만 결과를 아직 반환하지 않은 객체라고 설명 할 수 있습니다. Asyn/Await와의 차이점이라면 Promise의 단점들을 해소하고자 Asyn/Await를 만들었다는 것입니다. 코드의 간결성, 유리한 에러 핸들링, 에러 위치 확인이 쉽다는 특성은 async/await의 강점을 보여줍니다.

• 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은? ✅

중요하게 고려해야 할 점은, 무한스크롤은 트위터나 페이스북 같은 단발성 메시지가 주가 되는 SNS에서는, 최근 글에만 신경쓰게 할 수 있지만, 그렇지 않은 사이트들은 가령 열 페이지 뒤쪽의 게시물을 보기 위해서 페이지 로딩을 열 번을 해야 되는 번거로움이 고려해야 할 점입니다. 즉 과거 데이터를 보고 싶은 사람들이 많은 사이트라면, 무한스크롤 구현을 하기에 적합하지 않다는 것을 고려해야 합니다.

• CloudFront를 사용해본적이 있나요? 사용해봤다면, CloudFront로 배포하는 이유를 설명해주세요.✅

S3 버킷은 선택한 리전 내에만 생성되기 때문에 해당 리전에서 멀어질수록 접속 속도가 느려지게 되는데요. 또한, 동시 접속수가 많아질수록 느려지기도 하고요. 그렇기 때문에 이 문제를 해결하기 위해 CloudFront 라는 서비스를 S3와 함께 사용하게 됩니다.
CloudFront란 전 세계의 정적/동적 웹 콘텐츠, 비디오 스트림 및 API를 안전하게 대규모로 전송할 수 있는 콘텐츠 전송 네트워크 서비스라고 할 수 있어요.
CloudFront는 전 세계에 분포된 엣지 로케이션이라고 하는 데이터 센터의 엣지 서버를 사용해 콘텐츠를 캐싱하고, 사용자가 위치한 곳에서 가장 가까운 엣지 로케이션에서 콘텐츠를 제공받을 수 있도록 해주는 역할을 합니다(CDN).
또 호스팅을 HTTPS로 하게 할 수도 있는 점에서 보안을 향상 시킬수 있어서 CloudFront로 배포를 합니다.

• useEffect와 useLayoutEffect 차이에 대해 설명해주세요

useEffect는 DOM이 화면에 그려진 이후에 이펙트 함수를 호출합니다. 그리하여 화면이 복잡해지면 느려진다는 것을 체감할 수 있을 정도로 렌더링 시간이 증가하게 됩니다. 그러면 State의 초기값을 보게 되버리죠. 그래서 useLayoutEffect를 써서 화면에 DOM이 그려지기 전에 호출해서 이러한 것을 못 보게 미리 방지합니다. 즉 useLayoutEffect는 DOM이 화면에 그려지기 전에 이펙트 함수를 호출하는 겁니다.

• Closure란?

클로저(closure)란, 외부 함수에 접근할 수 있는 내부 함수 혹은 이러한 개념입니다. 스코프에 따라서 내부 함수의 범위에서는, 외부 함수 범위에 있는 변수에 접근이 가능하지만 그 반대는 불가능합니다.
즉 외부함수는 외부함수의 지역변수를 사용하는 내부함수가 소멸될 때까지 소멸되지 않습니다. 예를 들어 한 함수안에 다른 함수가 있다면 그 안의 함수는 바깥에 정의해 놓은 변수를 사용할 수 있지만 그 반대는 가능하지 않습니다. ⇒ 소멸될 때까지 소멸되지 않습니다 어색