HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 3기 교육생/
📚
3기 스터디 가이드/
🧑‍💻
CS 학습 및 면접대비 스터디 /
✨
모의면접 /
5/30 모의면접

5/30 모의면접

생성일
May 30, 2023 01:04 AM
태그
면접기록
✨
서로의 성장을 위한 피드백입니다. 보완할 점이 있다면 자세하게 작성해주세요 ~.~
 

특이사항

피드백

천욱 15분~ (45 ~ 00)
면접관 피드백
  • 수화
    • 주소창에 google.com 입력 시 일어나는 일 : 흐름을 잘 알고 있는 거 같음
      • 어디서 IP 주소를 찾나요? → 브라우저 캐시 ? → OS캐시
      • 렌더트리 → 브라우저 렌더링: layout(flow), paint 과정을 의도하고 질문함.
        • js에 접근할 땐 렌더트리? DOM ? → DOM이 맞음
        • DOM, 렌더트리의 차이점
          • 스타일 유무라고 했는데, DOM에도 스타일이 접근가능하지 않나??
          • display:none과 visibility: hidden
    • CORS
      • 개념 정리하기
      • 출처가 뭔가요? 호스트, 도메인, 포트번호 ⇒ 프로토콜, 도메인, 포트번호
    • http 1.1 | 2.0 차이
      • 텍스트 기반 요청 → 바이너리 : 더 빨라짐 (의문)
      • 파이프라이닝 2.0 도입?? 1.1 도입!
  • 명재
    • 브라우저 렌더링 과정에서 정확하게 서버 통신(네트워크 내부 통신)을 알고 있지 않다면 간단하게 설명하고 넘겨도 될듯 (하지만 정확한 동작 방식을 알면 좋을듯)
    • 리플로우와 리페인트에 대해 설명해주세요. ⇒ 정의에 대해서 정리하면 좋을듯
      • 리페인트가 발생하면 리플로우도 같이 발생하나요? → 꼬리질문으로 같이 준비하면 좋을듯
    • REST api에 대해 설명해주세요. → 규칙과 함께 설명하는 점이 굳 (전체적으로 REST api에 대해서 알고 있다.)
      • 한국의 대부분 회사는 REST full api를 지키고 있나요? 꼬리 질문을 위한 빌드업인데 이 부분도 자신의 생각을 명확하게 같이 말해줘서 좋았음
      • 처음에 설명한 규칙만 지킨다면 REST full api인가요? REST API를 만든 사람은 아니라고 하지만 자신의 생각을 명확하게 들어내서 좋았음
명재 20분 ~ (13- 33)
  • 수화
    • 브라우저 렌더링 : 잘 설명했음. 흐름대로 엄청 길게 말하지않아서 좋았음
      • reflow, repaint : 잘 알고있다는 느낌이 듬.
      • async, defer : 정리가 조금 필요해보입니다.
        • async, defer 순서보장하는지? → async : 보장 X, defer: 보장함
    • CSR, SSR
    • SPA, MPA
      • 깜빡거림은 왜 발생하는지?
    • CORS
      • CORS 에러 개념이 살짝 애매합니다. ~~ 에러입니다.라고 했는데 에러기보단, 동일출처가 아닐 때 리소스를 공유하는 정책이고, 해당 정책을 어길경우에 CORS 에러가 발생합니다.
        • 프론트에서 해결할 수 있는 방법 - proxy를 의도하고 물었습니다.
    • 브라우저 캐싱
      • cache-control 활용
  • 천욱
    • 브라우저 렌더링, 리플로우 리페인트 - 설명 좋았습니다. 제대로 알고 있는 느낌!
    • script태그의 async, defer - async태그?
    • http1.1과 http2 차이, TCP와 UDP - 대략적인 차이점을 알고있는것 같은데 자세히 물어보게될 수도 있어서 보완해야할듯!
    • CSR과 SSR
      • SPA, MPA
        • MPA 왜 깜빡거리는가? - 매번 재렌더링을 하니까?
    • CORS, 해결과정 - 교차 출처를 허용하는 것을 서버쪽에서 허용을 해줘서 해결했다 이런식으로 얘기해도 될것같다! 그 cross-origin 뭐시기 기억안날수도있으니
    • RESTful API란?
      • REST란? - 잘 알고있는것같음!
    • 크로스브라우징이란?
    • 브라우저 캐싱.. 나도 잘 모르겠다 tanstack-query가 알아서 해주던ㄷㅔ
면접관 피드백
수화 30분 ~ (20 ~ 50)
면접관 피드백
  • 천욱
    • 객체지향 프로그래밍이란 - 깔끔
    • 선언형, 명령형 - 설명좋음!
    • 브라우저 렌더링 과정 -
    • 브라우저 성능 최적화 방법 -
      • 경험이 없어서 아쉽!!
    • 웹 접근성이란? 높이는 방법은?
      • alt, 색체 사이트 - 설명 좋았음! 스크린 리더기까지 얘기해줘서 많이 알고 있구나 라고 생각듦.
    • SEO에 대해 설명해주세요.
      • React에서의 문제도 꼬리질문으로 물어보려고 했는데 알아서 잘 설명해줬음! 해결방안도 제시해주고 경험도 굿
  • 명재
    • 객체 지향 프로그래밍이란 무엇인가요? ⇒ 정의 잘함
    • 다른 프로그래밍이 있나요? ⇒ 명령형 프로그래멍, 함수형 프로그래밍가 같은 프로그래밍 기법이 있다고 함 → 꼬리 질문 끊김
    • 객체 지향 프로그래밍 기법을 사용해본 경험이 있나요? 객체를 추상적이 부분으로 설명함 (이게 오답은 아닌듯) ⇒ 선언형 프로그래밍으로 만든 느낌이 들엇음. 대부분 객체 지향 프로그래밍은 패턴, 또는 클래스를 사용해서 명확한 방법을 사용한다. (하지만 꼬리 질문에서 구현한 부분을 클래스의 상속을 사용한 점을 통해서 설명해서 어느 정도 해결됨)
    • 웹사이트 성능 최적화에는 어떤 방법이 있나요? ⇒ 렌더링을 줄이는 방법(리플로우 리페인트를 통해 설명 굳), 캐싱을 통한 방법도 굳
    • 리플로우가 발생하지 않고 리페인트만 발생하는 조건 → 굳… 너무 깔꼼
    • 쿠키, 세션, 웹스토리지에 대해 설명해주세요. → 쿠키의 정의는 완벽, 하지만 웹 스토리지와, 세션에 대해서는 정리하면 좋을듯
    • 브라우저에서 탭 이동 혹은 탭 종료 시에는 세션 스토리지에 어떤 영향을 끼치나요? 정확히 답변했다. 근데 새로고침해도 세션 스토리지 그대로 유지되지 않나?
    • Webpack에 대해서 설명해주세요. → 정의 깥꼼, 번들링의 정의도 깔끔, 왜 웹팩을 사용해야하는지에 대한 설명도 같이 설명해서 좋음
    • 모듈이 뭔가요? → 각 파일이 모듈이라고 해서 정의가 조금 부족하다고 생각했는데 예시를 통해서 부족한 정의를 적절하게 설명
    • JS에서 사용하는 모듈 종류에 대해서 설명해주세요. → ESM, CommonJS, AMD, UMD 등 잘 설명함 → 왜 ESM이 등장했는지 물어보려고 했는데 알아서 설명해버리누…