기술면접 질답 후기

임홍원·2024년 1월 26일

임홍원님 기술 면접

1. 개발자가 된 이유는 무엇인가요?

- 원래부터 프로그래밍에 관심이 많았고
- 이미 고등학교 진학을 프로그래밍 관련 학과를 진학
- 대학교도 컴퓨터 공학을 하기 위해 진학
- 개발자가 되고 싶은 이유는 사람들에게 영향을 많이 주고 싶다고 생각함.

💪🏻 구체적인 목표, 비전을 이야기하는 것이 매력적으로 보일 듯

2. supabase authentication 대신 NextAuth를 사용하는 이유가 무엇인가요?

- supabase auth에는 타겟으로 잡은 연령층이 3~40대 국내
- 네이버 로그인을 지원을 하는 NextAuth를 선택하게 됨
- 카카오와 네이버 로그인을 둘 다 지원하는 NextAuth

💪🏻 Next Auth의 장점을 더 부각하기
참고 링크
https://supabase.com/partners/integrations/nextauth
https://www.reddit.com/r/nextjs/comments/10mue0s/supabase_auth_vs_next_auth/

3. debounce가 무엇이고, debounce를 적용한 이유가 무엇인가요?

- debounce는 이벤트 실행 후 일정 시간 후에 이벤트가 실행되는 것을 말한다.
- 검색 기능이 있다보니 검색 시 계속해서 이벤트가 일어나면 서버에 과부화가 걸릴 위험이 있을 것 이라고 생각해서 debounce를 적용했다.

💪🏻 참고 링크
- https://pks2974.medium.com/throttle-와-debounce-개념-정리하기-2335a9c426ff
- https://www.youtube.com/watch?v=cjIswDCKgu0&t=411s
- https://lasbe.tistory.com/153
- https://www.freecodecamp.org/korean/news/debounce-dibaunseu-javascripteseo-hamsureul-jiyeonsikineun-bangbeob-js-es6-yeje/

4. 프론트엔드 개발자로서 가장 중요하게 생각하는 것은 무엇인가요?

- 소통 능력이라고 생각함
- 디자이너와 소통 & 백엔드 개발자와 소통해야 하는 중간의 역할이라고 생각한다.

💪🏻 본인의 경험을 토대로 이야기하면 더 좋을 것 같다.
참고 링크: https://blog.toss.im/article/toss-frontend-chapter

CSR과 SSR의 차이점에 대해서 말씀해주세요.
- CSR
  - 클라이언트에서 렌더링하는 것
  - 데이터를 전부 받아야하는 문제 → 초기 로딩 속도가 걸린다.
  - 데이터를 동적으로 로딩하기 때문에 SEO에 대한 단점이 존재한다.
- SSR
  - 서버에서 렌더링 → 클라이언트로 보내준다.
  - 요청할 때마다 렌더링을 하다보니 느리다는 단점이 존재한다.
  - html을 미리 만들어주다보니 SEO에 장점이 있다.

💪🏻 초기 로딩 속도 문제 추가로 이야기하기
참고 링크
- https://yozm.wishket.com/magazine/detail/2330/
- https://ajdkfl6445.gitbook.io/study/web/csr-vs-ssr-vs-ssg
- https://ritikchourasiya.medium.com/understanding-the-difference-between-csr-and-ssr-rendering-d2fa0eee50e

HTTP란 무엇이고 어떤 특징을 가지고 있나요?
- 인터넷 상에서 데이터를 주고 받기 위한 규약
- 클라이언트 ↔ 서버
- 서버가 클라이언트의 상태를 저장하지 않는 무상태성
- 비연결성 → TCP 연결 후 바로 끊어서 리소스를 최소화할 수 있음

💪🏻 참고 링크
- https://hanamon.kr/네트워크-http-http란-특징-무상태-비연결성/

7. 프로젝트를 진행하면서 어려웠던 부분이 어떤 것이고, 어떻게 해결하셨나요?

- 인증, 인가 부분이 어려웠다.
- 비밀번호 해싱 혹은 쿠키, 세션
- 유효성 검사 등에 대해서 어려운 부분이 있다.

💪🏻 본인만의 해결책 및 프로세스를 말하면 좋겠다.

8. cors 에러가 무엇인지 아는데로 설명해주세요.

CORS는 더 공부가 필요함

💪🏻 참고 링크
- https://docs.tosspayments.com/resources/glossary/cors
- https://inpa.tistory.com/entry/WEB-📚-CORS-💯-정리-해결-방법-👏

9. 바닐라 자바스크립트 대신 React를 쓰는 이유는 무엇인가요?

- 가상 돔을 통해서 실제 DOM에 비해서 속도가 빠르다
- React는 선언형 프로그래밍이다. → 가독성이 좋다.

💪🏻 좀 더 구체적으로 이야기하면 좋을지도?
참고 링크
- https://yoosioff.oopy.io/d7e35b36-4ddd-4c9c-b515-4920248447b2
- https://code-lab1.tistory.com/374

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

- 실제 DOM은 느리다?
- 실제 DOM을 자바스크립트 객체로 만든 것
- 업데이트 되는 부분만 렌더링된다.
- 실제 DOM은 하나만 업데이트되어도 전체 트리가 업데이트된다.

💪🏻 batch update
참고 링크
- https://www.howdy-mj.me/dom/what-is-dom
- https://www.jeong-min.com/22-virtual-dom/
- https://callmedevmomo.medium.com/virtual-dom-react-핵심정리-bfbfcecc4fbb

11. 전역 상태 관리 라이브러리를 사용하는 이유는 무엇인가요?

- 리액트에서는 state 업데이트를 할 때
- props의 교환이 어렵다.

💪🏻 props의 교환이 어렵다. → 구체적으로 말해보기
props drilling(자식 컴포넌트로 props 를 계속 내려줌)을 막아 코드 파악 및 유지보수가 쉬워진다.

12. 동기과 비동기의 차이점은 무엇인가요?

- 동기
    - 코드가 한 줄씩 실행
    - 연산이 끝나면 다음 줄이 실행
    - 순서 파악을 해야할 때
- 비동기
    - 순서 보장X
    - 병렬적
    - 데이터를 병렬적으로 받아올 때

💪🏻 참고 링크
- https://dev-coco.tistory.com/46
- https://poiemaweb.com/js-async

13. Single Page Application(SPA)과 Multi Page Application(MPA)의 차이점은 무엇인가요?

- SPA
    - 하나의 페이지로 이루어진 어플리케이션
    - 하나의 페이지에서 동기적으로 렌더링을 하다보니 크롤러에서는 아무것도 인식을 할 수 있음
    - SEO에 대한 단점이 있음
- MPA
    - 여러 페이지로 이루어짐
    - 요청할 때마다 페이지를 렌더링해야 함
    - 깜빡임 존재할 수 있음
    - 주로 서버사이드렌더링이다보니 SEO에 대한 장점이 있다.

💪🏻 참고 링크
- https://hanamon.kr/spa-mpa-ssr-csr-장단점-뜻정리/
- https://leesangwondev.vercel.app/spa와-mpa-그리고-csr-ssr-ssg

14. 브라우저에 웹사이트 주소를 입력하고, 그 웹사이트가 브라우저에 나타나기까지 내부적으로 어떤 일이 벌어지나요?

- DNS 캐시 확인 → 존재 여부 확인 → DNS 서버의 네이밍을 통해 ip를 찾아서 웹서버에 요청
- 웹서버는 받은 요청으로 html 파일 등을 응답해줌
- 웹 브라우저는 그 응답으로 렌더링 진행

💪🏻 참고 링크
- https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-5/what-happens-when-type-google.md
- https://253eosam.oopy.io/post/input-url-on-the-browser
- https://yozm.wishket.com/magazine/detail/2055
- https://woojeongmin.com/2022/study-log/what-happens-when-you-type-wwwnavercom/