24/1/22 기술면접 (5)

2024. 1. 23. 08:58ㆍ카테고리 없음

기술 면접 대비 질문 리스트

최종 프로젝트

  1. React Query 는 어떤 이유 때문에 사용하기로 결정했나요?
    전역상태관리와 비동기 통신을 용의하게 해주는 React Query를 사용하지 않을 이유가 없었습니다.
    비동기통신으로 가져온 데이터를 캐시형태로 보관해주고 원하는 설정 방식으로 캐시데이터를
    전역적으로 가져와 이용할수 있습니다.
    또한 비동기통신시 여러 옵션을 통해 훨씬 컨트롤 하기 쉬워집니다.
  2. Redux Toolkit 과 Zustand 중에 어떤 상태관리툴을 사용하기로 결정하셨고 그 이유는 무엇인가요?
    Redux Toolkit을 채택했습니다. 둘중 무엇이 나은 상태관리툴이냐고 나뉜 것이 아니라
    단순히 Toolkit에 익숙했고 이미 익숙하지 않은 TypeScript와 Next.js app-router를 채택했기때문에
    새로운 라이브러리인 Zustand까지 커버하기에는 어려움이 있을것이라 생각했습니다.
    Toolkit이 전역관리에 전혀 부족함이 없기에 Zustand의 습득을 잠시미뤘습니다.
    Zustand가 조금 더 직관적이고 경량화되어 사용하기 용이하다는 이야기를 들었습니다.
    추후에 습득할 예정입니다.
  3. Next.js의 Page Router와 App Router 의 차이점에 대해 아는대로 말씀해 주세요.

    Page Router 
    pages 디렉토리를 사용합니다. page 하위 js파일의 파일명이 페이지 경로가 됩니다.
    따라서 페이지의 부분인 컴포넌츠들은 pages디렉토리 외부에 존재해야합니다.
    공통 layout을 만들기 위해서는 _app을 사용합니다.
    컴포넌트 들이 기본적으로 Client component 입니다. SSR을 위해서는 다른 작업이 
    필요합니다.
    getStaticProp의 반환값에 revalidate 필드 추가시 ISR(incremental static regeneration)을 
    할수 있습니다.
    SSR을 이용하기위해서는 getServerSideProps를 이용합니다.

    App Router
    server components가 기본입니다.
    client components로 이용하기 위해서는 해당 js파일 최상단에 'use client'를 명시해 줘야합니다.
    app 디렉토리를 사용하빈다.
    디렉토리및의 폴더명이 곧 주소값이 됩니다. 해당폴더에 page.js 파일이 해당 페이지 화면을 그립니다.
    server-side API를 위한 파일은 route.js 입니다.
    rootLayout은 필수입니다. 각페이지별로 layout을 가질수 있습니다.


  4. Next.js에서 왜 렌더링방식 중 SSG 사용을 권장하고 그에 대한 기술적인 이유는 뭐라고 생각하나요?

    ssg정적생성 은 빌드타임에 페이지를 미리 만들어 놓습니다. 미리 만들어 놓은만큼 페이지 로딩이 매우빠릅니다.
    SEO에 좋습니다 검색엔진이 SSG는 읽을수 있기때문에 검색에 잘 노출시킬수 있습니다.
    캐시데이터로 해당페이지가 저장되어 재사용시에 저장된 캐시데이터를 이용해서 응답이 빠릅니다.

  5. cheerio 를 통한 크롤링은 CSR 페이지에는 적합하지 않은 경우가 많은데, 그 이유가 뭐라고 생각하나요?
    cheerio는 node.js 환경에서 실행되는 HTML파싱 라이브러리 입니다. 서버측에서 데이터수집과 관리를합니다
    CSR에서 파싱하면 크로스 사이트 스크립팅 공격에 노출되어서 보안문제가 생길수 있습니다
    CSR에서 cheerio 수행시 로딩속도를 느리게 만들수 있습니다

공통 질문

  1. Virtual DOM이란 무엇이며, 실제 DOM과 어떤 차이가 있나요?

    버츄얼DOM은 실제DOM을 본떠 만든 가상 DOM입니다. , 실제DOM은 화면 변경 리랜더링시 전체페이지를
    새로 고쳐야하지만 버츄얼DOM은 해당 컴포넌트만 리랜더링시켜서 속도개선과 비용감소 효과가 있습니다.
    화면 업데이트시 버츄얼DOM의 가상트리를 업데이트하고 실제 변경된 부분을 실제 DOM에 적용합니다.
    속도와 비용개선을 통해 UX가 좋아집니다.

  2. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?
    바닐라 자바스크립트는 실제DOM을 조작하고 React는 가상 DOM을 조작합니다.
    가상DOM을 이용하는 만큼 화면전환 속도가 개선됩니다.
    한파일안에 페이지의 모든것을 그리는 바닐라 자바스크립트는 파일하나가 무겁습니다.
    react는 페이지를 구성하는 부분부분을 각 컴포넌트로 독립적이고 재사용가능하게 분리할수 있어서
    개발에 용이합니다.
  3. Redux와 같은 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?
    전역적으로 이용해야하는 데이터를 유지보수하기 좋습니다. 단순히 프롭스나 useContext를 이용하면
    불필요한 코드만 많아지고 관리가 어렵습니다. 전역적 데이터를 관리해줄수 있는 Redux와 같은 라이브러리
    는 이를 잘 해결해줍니다.
    상태관리로직을 따로 외부 JS 파일에 담아 놓기 때문에 간결하고 재사용이 용이합니다.

  4. JavaScript의 동기식과 비동기식 프로그래밍의 차이점은 무엇인가요?

    동기식프로그래밍
    순차적으로 로직이 진행됩니다. 작업하나가 끝나야 다음 작업으로 넘어갑니다.
    코드의 예측이 용이하지만 시간이 걸리는 로직이 사이에 있으면 전체 로직수행에 시간이 걸립니다.

    비동기식프로그래밍
    작업하나를 돌려놓고 다음작업으로 바로 넘어갑니다.
    비동기식프로그래밍을 돌려놓은작업은 콜백함수 Promise async/await 등으로 처리됩니다.
    시간이 소모되는 작업을 비동기적으로 돌려놓고 다음작업을 수행하면 속도개선에 유리합니다.

  5. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?
    SPA
    하나의 HTML을 기준으로 페이지 전환시 데이터를 받아서 HTML안의 화면을 그리는 요소를 바꿔줍니다.
    클라이언트 사이드 라우팅을 통해 페이지 전환을 합니다. 부드러운 사용자 경험 빠른 반응속도 적은 서버요청의
    장점이 있습니다

    MPA
    각페이지마다 별도의 HTML 요소를 갖습니다. 페이지 전환시 전체를 화면을 다시 그립니다.
    서버사이드 라우팅을 채택합니다.
    미리 서버에서 화면을 만들어 놨기때문에 초기로딩속도가 빠르고 SEO에 유리합니다
    화면전환이 부드럽지 않습니다.

  6. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?
    사용자가 주고창에 URL을 입력합니다.
    브라우저는 URL을 파싱합니다. 프로토콜 호스트명 포트 경로 등의 요소로 분리합니다.
    호스트명을 DNS서버에 쿼리를 보내서 IP주소로 변환합니다. 반환받은 IP주소를통해
    TCP연결을 시도합니다.
    브라우저는 서버에 HTTP요청을 보냅니다.
    요청을 받은 서버는 HTTP응답을 반환합니다. 응답에는 페이지의 요소인 상태코드 헤더 본문등이 있습니다.
    브라우저는 받은 HTML문서를 파싱해서 DOM트리를 생성합니다.
    이후에 CSS와 javaScript파일 이미지 같은 외부 리소스를 서버에 요청하여 받아옵니다.
    받아온 HTML CSS javaScript를 이용하여 화면을 랜더링합니다.

티스토리툴바