프론트엔드 스터디를 진행하면서 준비했던 면접 질문들에 대해 정리하고 공유하기 위해 글을 작성합니다.
1. Rest 개념에 대해 설명해보세요.
REST란 Representational State Transfer의 약자로 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 것을 말합니다. HTTP URI를 통해 자원을 명시하고 HTTP Method를 통해 해당 자원에 대한 상태를 주고 받는 방식을 말합니다.
2. 클로저에 대해 설명해보세요.
클로저(Closure)는 함수가 선언될 때의 렉시컬 환경(Lexical Environment)을 기억하고 있는 구조입니다. 즉, 함수가 자신이 선언될 때의 외부 변수와 함께 기억된다는 의미입니다. 이로 인해 외부 함수의 실행이 끝나고 외부함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 것을 의미합니다.
3. webpack의 mode 속성에 어떤 것들이 있는지 설명해보세요.
webpack의 mode 속성에는 크게 development, production, none 모드 3가지가 있습니다.
development 옵션은 개발모드를 의미하며 코드가 압축되지 않은 상태이며 난독화가 되지 않은 상태입니다. 소스맵을 생성하여 디버깅을 용이하게 하고, 개발 중에 필요한 로그와 경고를 유지합니다.
production 옵션은 배포모드를 의미하며 코드가 압축된 상태이며 기본적으로 js파일을 난독화해줍니다. 배포모드를 실행하면 번들링 파일의 크기가 확연하게 줄어들게됩니다.
none 옵션은 mode의 설정이 되지 않았으며 development와 비슷한 상태입니다. 하지만 소스맵이 생성되지 않고, 개발 및 프로덕션 모드에서 수행되는 모든 기본 설정을 무시합니다.
mode의 default값은 product입니다.
4. StateCode 301과 302의 차이점에 대해 설명해보세요.
301과 302는 모두 리다이렉션을 나타내지만, 그 의도와 사용 목적이 다릅니다.
301 상태 코드는 요청한 리소스가 영구적으로 다른 URL로 이동되었다는 것을 의미합니다.
302 상태 코드는 요청한 리소스가 임시적으로 다른 URL로 이동되었음을 나타냅니다. 즉, 원래 URL로 다시 돌아올 가능성이 있습니다.
5. Flux 패턴에 대해 설명해주세요.
Flux 패턴은 Action, Dispatcher, Store, View로 이루어져있으며
1. 사용자의 입력이나 다른 이벤트에 의해 Action이 생성됩니다.
2. 생성된 Action이 Dispatcher로 전달됩니다.
3. Dispatcher는 Action을 각 Store로 전달하며, Store는 해당 Action을 처리하여 상태를 업데이트 합니다.
4. Store가 변경 상태를 알리면 View는 새로운 상태를 반영하여 다시 렌더링됩니다.
Flux 패턴의 장점으로는 단방향 데이터 흐름을 통해 애플리케이션의 상태 변화를 예측하고 이해하기 쉬워지고, 스토어는 각기 다른 상태와 비즈니스를 독립적으로 관리하므로 코드의 모듈화와 재사용성이 높아집니다.
6. React에서 let(또는 const)을 사용할때와 useState를 사용해서 변수를 관리할때의 차이점에 대해 설명해주세요.
let이나 const를 사용하여 변수를 선언하면, 이 변수는 컴포넌트의 함수 실행 동안에만 유지됩니다. 즉, React 컴포넌트가 렌더링 될때마다 이 함수는 다시 실행되므로, 변수를 다시 선언하고 초기화하게 됩니다. 또한 변수가 변경되더라도 React는 이를 인식하지 못해 UI가 업데이트 되지 않습니다.
useState를 사용하여 변수를 선언하면, 상태 변수가 컴포넌트의 렌더링과 함께 지속되며, 상태가 변경될 때마다 컴포넌트가 다시 렌더링됩니다. 이를 통해 UI가 최신 상태를 반영하게 됩니다.
정리하자면 let이나 const를 사용해 변수를 관리하는 것은 단순히 함수 내부의 임시 데이터를 다루는데 적합하고, useState는 컴포넌트의 상태를 관리하고, 상태 변화에 따라 UI를 업데이트 해야하는 상황에 적합합니다.
7. Vue.js와 React의 차이에 대해서 설명해보세요.
Vue.js는 템플릿 기반 문법과 양방향 데이터 바인딩을 제공하며, 점진적으로 도입할 수 있는 프레임워크입니다. React와 비교하여 러닝커브가 낮은 편입니다.
React는 선언적이며 컴포넌트 기반의 UI 라이브러리로, JSX를 사용하여 UI를 정의하며, 단방향 데이터 바인등을 제공합니다. Front-end 프레임워크 중 가장 큰 점유율을 가지고 있어 래퍼런스가 많으며 다양한 서드파티 라이브러리를 제공하고있습니다.
8. 크로스 브라우징에 대해 설명해보세요.
크로스 브라우징은 웹 애플리케이션이나 웹사이트가 다양한 웹 브라우저에서 일관되게 동작하고, 사용자에게 동일한 경험을 제공하도록 하는 기술과 방법을 의미합니다.
9. 웹사이트 최적화 방법에 대해 설명해보세요.
이미지의 크기 조정 및 압축과 지연 로딩을 통해 사용자가 스크롤할때 이미지를 로드하는 방식을 통해 이미지 최적화할 수 있습니다.
브라우저 캐싱과 CDN을 사용하여 페이지 로딩 속도를 최적화 할 수 있습니다.
Javascript와 CSS 최적화를 통해 파일 크기를 축소하고 중복 코드를 제거하여 페이지 로딩속도를 줄일 수 있습니다.
10. 브라우저 저장소에 대해 설명해주세요.
브라우저 저장소는 웹 애플리케이션이 클라이언트 측에 데이터를 저장할 수 있도록 하는 다양한 메커니즘을 의미합니다. 쿠키, 로컬 스토리지, 세션 스토리지 등이 있습니다.
그 중 쿠키는 주로 세션 관리, 사용자 추적에 사용되며 데이터 크기 제한은 약 4KB 정도이며 만료 날짜를 설정하여 지속 시간 제어가 가능합니다. 또한 클라이언트와 서버 간의 모든 HTTP 요청에 자동으로 포함되어 전송됩니다.
로컬 스토리지는 영구적으로 데이터가 저장되며, 사용자가 브라우저를 닫아도 데이터가 유지됩니다. 데이터 크기 제한은 약 5MB 정도이고, HTTP 요청 시 서버에 자동적으로 전송되지 않습니다.
세션 스토리지는 브라우저 세션 동안 데이터가 저장되고, 브라우저 탭이나 창을 닫으면 데이터가 삭제됩니다. 데이터 크기 제한은 약 5MB 정디이고, HTTP 요청 시 서버에 자동적으로 전송되지 않습니다.
