interview
1.면접질문정리
이직하려는 친구에게 보내는 프런트엔드 개발 면접 질문
2.🔍 [단골질문] - 01. 브라우저 저장소에 대해서 설명해보세요.
ex) 로컬 스토리지, 세션 스토리지, 쿠키 각각 설명ex) 로컬 스토리지와 쿠키의 차이점 설명로컬 스토리지와 세션 스토리지는 HTML5에 추가도니 저장소로 간단한 key와 value를 저장할 수 있고, 두개의 차이로는 영구성에 있다.로컬 스토리지는 사용자가 지우지 않
3.🔍 [단골질문] - 02. 자바스크립트 this란?
ex) 화살표 함수, call, bind, apply 등this에 대해 찾아보면 엄격모드에 대해 많이 볼 수 있습니다.엄격모드란 무엇일까?자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 되었습니다.덕분에 기존에
4.🔍 [단골질문] - 03. 자바스크립트 이벤트 관리 방법? 보통 어떤 식으로 이벤트를 설계해야 하는지?
ex) 이벤트 캡쳐링 & 버블링 ex) 이벤트 등록 & 해제 ex) 이벤트 위임 방식 💬 Answer 🌏 이벤트 캡쳐링 & 버블링 이벤트 버블링 - Event Bubbling 특정 화면 요소에서 이벤트가 발생했을 때 이벤트가 더 상위의 화면 요소들로 전달되어 가는
5.🔍 [단골질문] - 04. 자바스크립트 비동기 처리에 대한 설명
ex) 콜백, 프로미스, async await ex) 비동기 처리의 특성 및 에러 처리 방법? 💬 Answer 🌏 동기와 비동기 동기(synchronous) 동기란 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식 모든 일이 순차적으로 실행됨. 비동
6.🔍 [직무 관련 질문] - 01. 프런트엔드 빌드 시스템에 대해서 설명해보세요.
모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서, babel이 브라우저가 이해할 수 있도록 변환해 줍니다.즉, 호환성을 위해 코드를 다시 작성할 필요가 없습니다.파싱(Parsing) - 변환(Transforming) - 출력(Printing)단계로 빌드를 진행
7.🔍 [직무 관련 질문] - 02. 웹팩이란? 모듈 번들러가 무엇인가요?
WebPack이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러 입니다.파일 확장자에 맞는 로더에게 위임해서 하나로 묶어준다.최종 배포용 파일을 만들어 줌.<script>태그가 여러개 있을 때 순서보장도 중요하기 때문에 이런 것도 WebPack에서
8.🔍 [직무 관련 질문] - 03. 자바스크립트 프레임워크를 써봤는지?
써봤다면 어떤 걸 쓰는지? 만약 쓴다면 쓰는 이유와 썼을 때의 장점?Vue는 컴포넌트 기반의 자바스크립트 프레임워크 입니다.Model, View, ViewModel의 MVVM의 구조화된 패턴으로 개발합니다.MVVM패터을 이용하여 화면의 요소를 제어하는 코드와 데이터 제
9.🔍 [직무 관련 질문] - 04. “기획 - 디자인 - API 개발 - 프런트엔드 개발”의 서비스 절차에서 프런트엔드 개발자의 역할은 무엇이라고 생각하는지?
저는 프론트엔드 개발자의 역할이 연결다리 역할이라고 생각합니다.기획자와 디자이너들이 기획 및 디자인을 하고, 계획한 대로 사용자들에게 보여 주고,기획한 내용을 토대로 백엔드 개발자들이 만든 API를 가지고, 알맞는 데이터를 가져와 올바른 정보를 사용자들에게 보여주어야
10. 🔍 [직무 관련 질문] - 05. CORS란?
CORS를 해결하기 위한 방법을 아는 대로 모두 설명해 주시고 보통 어떤 방식으로 해결하는지 자주 사용하는 방법 1가지함께 실제 해결하신 경험을 공유해 주세요.우선 CORS란 Cross-Origin Resource Sharing으로 교차(다른) 출처 리소스 공유이다.출
11.🔍 [직무 관련 질문] - 06. 프런트엔드 성능 최적화란?
프런트엔드 성능 최적화 경험이 있다면 자세하게 설명해달라.호스트의 도메인 이름을 실제 IP주소로 변환하기위해 DNS에 요청한다.이 IP주소의 서버에게 리소스를 요청하여 받아올 준비를 마침.서버로부터 받은 파일 중 HTML,CSS를 각각 DOM Tree, Style Tr
12.🔍 [직무 관련 질문] - 07. 백엔드 개발 경험이 있는가?
REST API 구축 경험과 구현 관점에서의 간단한 REST API 설계 방식 설명해 보세요. (브라우저의 URL 요청을 받아서 서버의 데이터를 화면에 다시 뿌려주기까지의 백엔드 쪽의 플로우를 알고 있는지 확인하는 차원.)처음 vue에 익숙해지기위해 만들었던 cafe
13.🔍 [직무 관련 질문] - 08. Virtual DOM이 뭔지 아시는지?
썼을 때의 장점브라우저의 동작 원리지난번에 한번 정리를 했었기 때문에 간단하게 요약만 하고, 넘어가보자.HTML 마크업을 처리하고 DOM 트리를 빌드합니다.CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.DOM 및 CSSOM을 결합하여 렌더링 트리를 형성합니다.렌
14.🔍 [직무 관련 질문] - 09. 웹 서비스 배포 시스템 구축 경험?
CI, CD가 무엇인지 아는지? 구축해본 경험 혹은 사용해본 경험이 있는지삼성 청년 소프트웨어 아카데미(SSAFY)에서 Docker와 Jenkins를 이용하여 배포를 했었지만, 팀원 한명이 그 부분을 맡아서 하여 어떻게 배포하는지는 잘 모릅니다.대신 CI, CD에 대해
15.🔍 [직무 관련 질문] - 10. SEO(검색 엔진 최적화)란?
적용 사례가 있으면 구체적인 적용 방법도 같이 설명검색자(유저)의 의도를 이해하고, 이에 맞춰 웹 페이지의 콘텐츠를 제작하고, 이 페이지가 검색 결과 페이지에서 잘 노출 되도록 웹페이지의 태그와 링크 구조를 개선하여 자연 유입 트래픽을 늘리는 시책.웹 페이지 레벨에서
16.🔍 [직무 관련 질문] - 11. 웹 접근성과 시맨틱 마크업이란?
이 2가지를 지키기 위해 보통 어떤식으로 마크업을 작성하는지?「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.즉, 장애인이나 고령자 분들
17.🔍 [나올 수 있는 질문] - 01. 타입 시스템에 대해서 알고 있는지?
타입스크립트를 써봤는지?자바스크립트와 타입스크립트의 차이점?타입스크립트의 장점과 단점?자바스크립트에 타입을 부여한 언어.타입 스크립트는 JS와 달리 브라우저에서 실행하려면 파일을 한번 변환(컴파일)해주어야 함.2가지 관점에서 JS의 품질과 개발 생산성을 높일 수 있다.
18.🔍 [직무 관련 질문] - 12. REST API로 받은 객체와 배열은 보통 어떤 자바스크립트 API나 로직을 이용해서 화면에 맞게 가공을 하는지?
map, filter, reduce API 사용 경험과 각각 설명map메소드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.map1이 x => x \* 2 이 식으로 계산된 새로운 배열로 반환됩니다.요소들에게 일괄적으로
19.🔍 [나올 수 있는 질문] 02. 자바스크립트 관련해서 모르는 문법이나 API가 나왔을 때 관련 정보를 어떻게 검색하는지?
우선 모르는 문법이 나오게 되면 구글에 해당 문법에 대해 검색해봅니다.처음엔 이게 문법인지도 모르기 때문에 구글 검색을 통해 무엇인지 부터 파악하고, MDN에 검색해봅니다.MDN에서도 예제가 나오긴 하지만, 이해를 못 할때가 있습니다.그래서 저는 MDN검색 후에 다시
20.🔍 [직무 관련 질문] - 13. 함수형 프로그래밍이란?
자바스크립트 클로저란? 자바스크립트 프로토타입이란?