24/1/15 기술면접(2)

1. useEffect의 실행 순서에 대해 설명해주세요.
   • 답변 - useEffect는 파일의 로직들이 한번씩 다 실행되고 마지막에 실행됩니다.
   • useEffect 랜더링시마다 무조건적으로 실행되는 로직이 아닌 일정한 변경에 대해서만 로직이 작동하도록 하는 훅입니다. 
   • useEffect 실행되는 시점 훅에 대한 프로세스 - 최초의 마운트시 useEffect는 발동합니다. useEffect는 두개의 인자를 받는데 첫번째 인자는 콜백함수이고 두번째 인자는 [] 로 쌓여있는 의존성 배열입니다. 두번째 인자가 존재하지 않으면 리랜더링 때마다 useEffect 내부의 로직이 발동합니다.만약 빈배열인 의존성배열을 갖는다면 useEffect의 내부로직의 경우에 따라 마운트시와 언마운트시에만 발동합니다.
     의존성 배열에 특정 변수를 할당해놓으면 그 변수의 변경을 감지할때마다 useEffect의 내부로직이 작동합니다.
     언마운트시 useEffect를 일으킬려면 useEffect의 첫 콜백함수에 return에 새로운 콜백함수를 두면됩니다.
     이경우 언마운트시 return문의 콜백함수가 작동합니다.
     
     
2. var, let, const의 차이에 대해 알려주세요.
   • 답변 - var는 최초에 있던 변수 선언문입니다. var로 선언된 변수는 재선언과 재할당이 가능합니다.
     그리고 window객체의 속성으로 기록됩니다. var는 선언 할당되면 지역적이든 전역적이든 어디서든 호출할수 있습니다. 다만 함수형스코프안에 있을경우에는 함수 내부에서만 호출 가능합니다.
     제한 없이 마구쓸수 있어서 장점이라고 생각 되어지지만 프로젝트가 커지고 협업을 하고 있을경우 
     통제가 되지 않는 var로 선언된 변수는 어떠한 에러를 일으킬지 알수 없습니다.
     
     let은 최초의 선언이후 할당과 재할당은 가능하지만 재선언은 안되는 선언문 입니다. 주로 할당된값이 바뀔가능성이 있을때 사용합니다. 선언된 스코프의 영향을 확실히 받기 때문에 지역적으로 선언되었다면 전역에서 사용불가능 하고 다른 스코프 내부에서 사용 불가능 합니다. 
     
     const는 선언과 할당이 동시에 이루어져야하며 재할당 재선언이 불가능한 상수적 성격을 띕니다. 지역적 스코프의 영향을 받으므로 선언된곳의 위치에 따라 호출할수 있는곳이 정해집니다. 전역적으로 선언되면 그 밑의 지역에서는 호출 가능합니다.
     
     let과 const의등장으로 var때문에 발생하는 어디서 일어난지 모르는 재선언 재할당의 실수로 인한 오류가 줄어들게 되었습니다. 
   • 호이스팅 스코프(Lexical Scope) 
3. Async/Await와 Promise의 차이에 대해 설명해주세요.
   • 답변 - 최초의 promise들은 로직이 수행된뒤에 수행되는 콜백함수를 많이 이용했습니다.
     그런데 만약 promise가 이루어진뒤 그 결과값으로 이루어지는 로직들이 많이 길게 될경우
     콜백함수 내부에 콜백함수 또 내부에 콜백함수 이런식으로 이루어집니다. 콜백함수의 중첩은 가독성을 매우 떨어뜨리기 때문에 유지보수가 힘들어 코드를 보게 될 많은 사람들이 힘들어집니다.
     
     이보다 나은게 promise이후에 .then .catch .finally등을 이용한 방법인데 무한 콜백지옥보다는 조금더 가독성이 좋고 이해 하기 쉽습니다. 앞의 프로미스 실행후 그 로직뒤에 .then등을 두고 그안에 콜백함수를 두어 콜백함수가 중첩되는 모양을 없앴습니다. 하지만 로직뒤에 끝없이 이어지기 때문에 로직의 꼬리가 길다는 단점이 있었습니다.
     
     이보다 더 나아진 모양이 마로 Async/Await 방식입니다. 수행할 모든 promise적 로직들을 async 화 시킨 함수 내부에 두고 내부에 promise함수들에 앞에 await를 덧붙여 그 결과값이 도출되기 전까지 async 내부의 다음로직 수행을 기다리게 하고 await로 기다릴 결과값을 이용하는 방식입니다.
     물론 async외부의 로직들은 async 함수는 내버려두고 굴러갑니다. 이를 비동기적 처리라고 합니다.}
     원래 동기적으로 순차적으로 처리하는데 async는 비동기적으로 처리합니다.
     
     Async/Await 의 도입으로 가독성이 상승하여서 유지보수가 용이해 졌습니다.
     • 콜백 헬(callback hell) Async/await 코드 스타일에 이점
4. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
   
   
   • 모든 아이템을 렌더링하는 대신 현재 보이는 아이템만 렌더링하여 메모리 사용량과 렌더링 속도를 최적화합니다. 이를 통해 대용량의 데이터셋을 다룰 때 성능 향상을 기대할 수 있습니다. React에서는 **react-window**나 **react-virtualized**와 같은 라이브러리를 사용할 수 있습니다.
   • 데이터 10000개를 일시에 가져오는것은 너무 많은 데이터를 불러옴으로 인해 랜더링속도가 느려지고 메모리 사용량이 많아져서 성능이슈가 생길수 있습니다. 무한스크롤의 경우 스크롤의 이벤트 발생시 다음 데이터를 불러오는 방식이기 때문에 처음에 가져와야할 초기 데이터가 적으므로 랜더링도 빠르고 메모리사용량도 줄일수 있습니다. 무한 랜더링에 도움이 되어줄  
5. • Javascript의 호이스팅에 대해 설명해주세요
      
     • 답변변수와 함수 선언은 선언 단계와 초기화 단계로 나뉩니다. 호이스팅은 선언 단계에서 변수나 함수를 상단으로 옮겨지는 것을 의미하며, 초기화 단계는 코드의 위치에 따라 발생합니다.
     • 실행 컨텍스트 변수 함수선언부가 '끌어올려짐'
     • 호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 컴파일 단계에서 상단으로 옮겨지는 현상을 가리킵니다. 이것은 코드 실행 단계에서 일어나는 것이 아니라, JavaScript 엔진이 스크립트를 해석하기 전에 발생하는 것입니다.
     • 호이스팅이 이루어졌다고 해서 그 변수를 사용할수 있다는것은 아닙니다. 여전히 그 로직은 그자리에 있고 
       선언부만 올라갔기때문에 초기화화 할당이 이루어 지지 않았으므로 변수를 선언한곳보다 위에서는 해당 변수를 호출할수 없습니다.