Day by Day

[알고있으면 유용한] 프론트엔드개발자 면접질문정리

차빛 2022. 2. 15. 17:36
반응형

이제 다시 구직중이라 오늘 면접을 다녀왔다.

리액트+next.js로 프로젝트 진행중이라 밤새고 갔다와서 준비를 하지 못했다 ㅠㅠ 내잘못이지 뭐.. 오늘 받은 기술질문 정리를 해보려한다. 

왜 나는 하나도 기억을 못하는가!!! 화남.. 게다가 성격도 후딱 빨리 끝내야하는 성격이라 차근차근 얘기하지 못했다. 

 

 

 

 

1. Vue.js 장점

- 러닝커브가 낮음. (내가 장본인.. 자바스크립트만 알고 있었는데 바로 그냥 실무 투입되서 코드분석하고 인강들으면서 개발함.)

- React.js와 Angular.js의 장점을 모두 가지고 있음. (양방향 데이터 바인딩, 단방향 데이터 바인딩, 가상돔)

- 빠른 렌더링과 가벼움. ( Vue.js가 React.js보다 정말 정말 정말 간소한 차이로 살짝 빠름 )

- 직관성 최고. ( React나 Angular에 비해 코드 보기 쉽고 직관적이다.)

- 커뮤니티 활성화. ( 지속적인 지원 )

- SSR CSR 둘 다 가능.

- 컴포넌트 분리로 코드가 간결함

 

2. MVC패턴 

이건 어딜가나 물어보는건가보다..

자바개발자로 처음 면접 볼 때 빼고는 써먹은적이 없는것같은데 기억하지 못했다.

 

- 프레임워크 디자인패턴 중 하나

- 쓰는 이유 : 서로 분리되어 의존하지 않고 각자의 맡은 역할만을 수행하게 하기 위함 => 유지보수 용이

- MVC는 Model, View, Controller의 약자

- 프로젝트의 구성요소를 3가지 역할로 구분한 패턴

 

출처 : 위키백과

위 그림처럼 사용자의 입력을 Controller가 받고 Controller는 Model을 통해서 데이터를 가져오고 그 데이터를 바탕으로 사용자가 볼 수 있게 View를 제어해서 전달.

 

[ 규칙 ]

Controller 

1. Model & View 서로의 존재를 알고 있어야하고 변경을 모니터링 해야함.

2. 사용자와 Model/View를 연결해주는 중개인이라고 보면 쉬움.

 

Model

1. 사용자가 요청한 모든 데이터를 가지고 있어야 함.

2. View / Controller에 대해 몰라야 함.

3. 변경이 일어나면 변경을 알려주기 위한 처리 방법을 구현해야 함.

 

View

1. Model이 가지고 있는 정보를 따로 저장x

2. Model이나 Controller와 같이 다른 구성요소들을 몰라야 함.

3. Model과 마찬가지로 변경이 일어나면 변경됨을 알려줄 방법을 구현해야 함.

 

 

 

MVC패턴의 View와 Model의 의존성이 높아서 나온게 MVP

이 패턴은 아직 잘 몰라서 패스!

공부하게 되면 추가할 예정.

 

 

3. REST API란?

- 분산 시스템 설계를 위한 아키텍처 스타일

- REST API 메시지를 읽으면 의도하는 바를 명확히 파악 할 수 있음.

- HTTP 인프라를 그대로 사용하기 때문에 별도의 인프라 구축 필요x

- 언어에 상관없이 HTTP를 사용하는 다양한 플랫폼에서 동시에 이 주소를 사용 할 수 있음(서버와 클라이언트를 분리하면 추후에 서버를 확장할 때 클라이언트에 구애되지 않음)

 

4. 쿠키와 캐시?

- 둘 다 클라이언트 단에서 관리하는 데이터 저장소

쿠키 캐시
웹서버에서 PC로 보내는 작은 파일들을 주로 저장
user가 웹사이트에 접속할 때 발생
로그인정보, 방문기록, 방문횟수
웹페이지 요소 임시 저장소
css, 그림파일, 문서파일, 비디오파일 등
사용자 인증을 빠르게 도와줌 웹페이지가 빠르게 렌더링할 수 있게 도와 줌
시간이 정해져있어 만료가 되면 자동 삭제 사용자가 수동으로 삭제 해야 함

 

참고 : http://www.differencebetween.info/difference-between-cache-and-cookie

이렇게 정리는 하나씩 해가지만.. 아직 내가 완벽하게 이해 할 수 있을만큼 정리된 블로그는 못봤다 ㅠㅠ 더 자세히 찾아보고 정리해야겠다.

 

5. em과 rem

이건 css 관련 질문이지만 모르는 사람이 많다고 물어보더라.

rem em
최상위 요소의 size 기준 현재 em단위가 사용되고 있는 요소 기준

 

반응형