0906-TIL-기술 면접 답변 정리

• var, let, const의 차이에 대해 알려주세요.
  • var 변수가 함수 외부에서 선언된다면, 범위는 전역이고, 함수 내에서 선언될 때는 함수 범위로 지정됩니다. 같은 범위 내에서라면 재선언과 업데이트 둘 다 가능합니다. 또한, var 변수는 범위 내에서 맨 위로 호이스팅 됩니다. let으로 선언된 변수는 해당 블록 내에서만 사용가능 합니다. var 처럼 범위 내에서 업데이트가 가능하지만, 동일한 범위 내라면 다시 선언할 수는 없습니다. var처럼 맨 위로 호이스팅되지만, 초기화는 되지 않습니다. const는 해당 범위 내에서 일정한 상수값을 유지합니다. const는 재선언과 업데이트가 둘 다 불가능합니다. let과 동일하게 호이스팅되고, 초기화되지 않습니다.
• Async/Await와 Promise의 차이에 대해 설명해주세요.
  • 둘 다 비동기 처리 문법입니다. 다만, Promise는 .then()을 사용해서 응답값을 받고, 출력할 수 있습니다. 반면에 Async/Await는 await를 작성한 비동기함수의 작업의 처리를 기다리기 때문에 다음 줄에 바로 응답값을 출력할 수 있습니다. 그러므로 Async/Await를 사용할 경우 .then()을 여러번 사용하게 되는 콜백지옥 현상이 해소됩니다. 또한, 에러 핸들링도 간단합니다. try catch문을 작성하면, try 내부에서 발생하는 에러를 핸들링하고, 어떤 위치에서 에러가 발생했는지 찾기 쉽습니다.
• 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?https://velog.io/@theon2/데이터-10000개를-가지고-무한-스크롤-구현시에-가장-중요하게-고려해야-할점은
  • 데이터가 많을 때는 한 번에 모든 데이터를 불러오기 보다는 페이징을 이용해서 적당한 양의 데이터만 불러오도록 설정해야 합니다. 또한, 무한 스크롤을 더 효율적으로 관리하기 위해 스크롤을 할 때마다 새 데이터를 로드하고, 불필요한 데이터를 삭제해야 합니다. 이렇게 작동 시킬 때 데이터를 불러오는 시간이 조금 걸릴 수 있으므로 사용자에게는 스켈레톤 UI같은 것을 활용해 로딩중이라는 것을 보여주는 것이 좋습니다.
• Javascript의 호이스팅에 대해 설명해주세요
  • 호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 범위의 최상단에 선언하는 것을 말합니다. 호이스팅 대상은 변수 선언과 함수 선언 두 가지 입니다. 변수 키워드인 var는 선언과 함께 undefined로 초기화되어 메모리에 저장되지만, let과 const는 초기화되지 않은 상태로 선언만 메모리에 저장됩니다. 함수 선언식은 선언과 초기화, 할당 단계를 동시에 진행합니다. 하지만 함수 표현식은 선언만 호이스팅되는 차이가 있습니다.
• 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
  • 동기적 방식은 위에서부터 아래로 순차적으로 실행되는 것이고, 비동기적 방식은 작업을 위임하고 기다리며, 동시다발적으로 작업이 실행되는 것이다. 현재 웹은 매우 크고, 복잡하기 때문에 동시 다발적인 요청에 빠르게 응답하기 위해 비동기 프로그래밍이 필요하다.
• 브라우저의 작동방식에 대해서 설명해주세요.
  • 사용자가 URL을 입력하면, 웹 서버에서 HTML, CSS, JavaScript, 이미지 파일 등을 응답 받습니다. 응답받은 파일 중 HTML을 렌더링 엔진이 파싱하여 Dom tree를 만듭니다. 이 과정 중 Css 파싱도 일어나며 CSSOM tree도 구성됩니다. 화면에 그리기 직전에 DOM tree와 CSSOM tree를 결합하여 Render tree를 생성하고, 각 노드마다 위치에 배치됩니다. 또한, 이 과정 중에 script태그가 있다면, 자바스크립트 엔진에게 제어권을 넘기고 파싱합니다.
• GET, POST 방식의 차이점에 대해서 설명해주세요.
  • post는 리소스를 생성하고 변경하기 위한 방식이기 때문에 전송해야 할 데이터를 body에 담아서 전송합니다. body에 길이에 제한이 없어 대용량 데이터 전송이 가능합니다.
  • get은 요청을 전송할 때 필요한 데이터를 body에 담지 않고, 쿼리스트링을 통해 전송합니다. url의 끝에 ?와 함께 이름과 값으로 요청하는 것입니다. 그리고 get 요청은 캐시가 가능합니다.
• GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.
  • 데이터를 조회할 때는 리소스를 조회하는 get 메소드를 사용합니다. 클라이언트에서 get으로 정보를 달라고 요청하면, 서버에서 요청 메세지를 분석해 내부의 정보를 조회한 뒤 결과 response를 만들어 응답합니다. 데이터를 전송할 때는 전달한 데이터를 처리하거나 생성하는 post 메소드를 사용합니다. 클라이언트에서 body에 정보를 담아 서버로 전송합니다. 서버에서는 받은 메세지를 분석해 처리합니다.
• 쿠키, 세션, 웹스토리지의 차이를 설명해보세요
  • 쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조합니다. 이와 달리 세션은 서버 측에서 관리합니다. 즉, 저장 위치가 서버인 것입니다. 그러므로 보안적 측면에서 세션이 더 우수하지만, 속도는 쿠키가 더 우수합니다. 웹스토리지는 클라이언트에 데이터를 저장할 수 있는 저장소로 로컬 스토리지와 세션 스토리지가 있습니다. 쿠키보다 큰 저장 용량을 지원합니다. 서버가 HTTP 헤더를 통해 조작할 수 없습니다.
• 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.
  • 클라이언트 사이드 렌더링은 페이지의 내용을 브라우저에서 자바스크립트로 렌더링 하는 방식입니다. 후속 페이지 로딩 속도가 빠릅니다. 하지만, 초기 페이지 로딩 속도는 ssr에 비해 느립니다. 또한, 처음에 HTML에 아무 내용도 없기 때문에 웹 크롤러가 읽어갈 수 있는 정보가 없어 SEO적 측면에서 좋지 않다는 단점이 있습니다. 서버 사이드 렌더링은 서버에서 사용자에게 보여줄 페이지를 모두 구성해 렌더링하는 방식입니다. 앞서 말했던 csr의 단점인 느린 페이지 로딩과 seo 문제가 해결된다는 장점이 있습니다. 하지만 TTV(TIME TO VIEW)와 TTI(TIME TO INTERACT)의 공백 시간이 발생하는 단점이 있습니다.
• TCP/UDP에 대해서 설명해주세요.
  • TCP는 전송을 제어하는 프로토콜입니다. 패킷 전송을 제어하여 신뢰성을 보증하는 프로토콜입니다. 즉, IP 규칙에 써있는 대로 목적지에 도착한 후 TCP 규칙에 써있는 대로 올바르게 도착했는지, 정확히 누구에게 전달되어야 하는지 따져보기 위한 프로토콜입니다. UDP는 사용자 데이터그램 프로토콜입니다. 패킷 간의 순서가 존재하지 않는 독립적인 패킷을 사용합니다. 즉, UDP는 신뢰성을 확보하기 위해 거치던 TCP 과정을 거치지 않기 때문에 속도가 빠릅니다. 주로 고용량 데이터를 다루는 곳에 이용됩니다.
• http, https 차이점에 대해 설명해주세요
  • 둘 다 데이터를 주고 받기 위한 프로토콜로 HTTPS는 HTTP에 데이터 암호화가 추가되어 있습니다. 즉, HTTP로 데이터를 주고 받을 경우 암호화가 되어 있지 않아 중요한 개인정보 노출 위험이 있어서 HTTPS를 사용해야 합니다. 그러므로 검색엔진은 신뢰성이 더 높은 HTTPS를 더 선호합니다.