FE 기술면접 top30 (23.08.14)
2023. 8. 2. 21:05- 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
: state, 즉 상태란 프로그램의 현재 데이터를 말합니다. 웹 사이트를 구성하는 모든 데이터, 예를 들면 테마, 사용자 정보.. 이런 것들을 담고 있는 변수. 이 모든 것들을 상태라고 말할 수 있습니다. 이러한 데이터를 마구 흩뿌려 놓으면 코드 가독성과 유지보수성에 큰 문제가 생기겠죠. 데이터의 변화를 추적하거나 예측하는 것도 힘들어지고요. 그래서 필요한 것이 상태의 중앙관리입니다.
저는 주로 리액트를 사용하는데, useState라는 훅을 이용해서 state를 관리합니다. 간단하게 상태의 초기화, 업데이트, 변경을 할 수 있기 때문이죠. 만약 전역관리가 필요한 경우에는 리덕스와 context API를 사용합니다.
핵심키워드: state, props, LifeCycle, dom, redux, react-query
리액트에서 "상태(state)" 관리를 하는 이유에서 핵심 키워드는 "렌더링" 입니다. 데이터를 효과적으로 저장하고 관리하는 부분은 부가적인 요소 입니다.리액트는 DOM 노드의 트리가 점점 복잡해질 수독 jQuery나 순수 자바스크립트만으로 컨트롤 하기 어렵다라는 것을 느껴서 탄생된 라이브러리이고,기본적인 철학은 "상태가 바뀌면 Virtual DOM 비교 후, 리렌더링 여부를 판단하자"이기 때문에 답변에 렌더링이 나와야 합니다.
모범답안: 화면을 리렌더링할지 말지 결정할 땐 state의 변화를 확인하기 때문에 state가 중요합니다. state관리는 평소에는 react 에 내장된 useState 훅을 사용하고 범위가 더 커지면 redux를 사용합니다. - Redux가 무엇인가요, 왜 Redux를 사용하시나요?
: 리덕스는 상태를 전역적으로 관리하기 위해서 사용하는 라이브러리입니다. 소규모의 프로젝트에서는 useState와 props만으로도 상태관리가 가능하겠지만, 부모 컴포넌트에서 자식 컴포넌트로 props를 끊임없이 내려줘야 한다면 코드 하나를 이해하기 위해 살펴봐야 하는 코드가 많아져서 협업에 부적합하고 효율성도 떨어집니다. 그렇기 때문에 모든 컴포넌트를 중앙에서 관리해야 합니다.
리덕스는 store라는 단일 저장소에서 모든 상태를 관리하기 때문에 데이터의 흐름을 파악하고 변화를 예측하는 데에 매우 유용합니다. 또, 변경 이력을 기록하는 기능을 제공하기 때문에 문제가 발생한 시점을 파악하고 복원 하는 등 디버깅이 쉽기 때문에 사용하고 있습니다.
핵심키워드: 상태관리 Library, SPA, Component
전역상태 라이브러리를 사용하지 않고 Props를 사용하는 경우,발생하는 문제와 그에 따른 해결책은 전역상태 라이브러리를 사용하는 것이고, 어떠한 이점이 있는지에 대해서 설명하는 게 필요합니다.
모범답안: 리덕스는 전역상태관리 라이브러리 입니다. 단방향 데이터 바인딩을 하는 리액트에서는 반대로 props를 끌어올릴수가 없습니다. 이를 리덕스라는 전역상태를 이용해 자식컴포넌트 에있는 state를 부모컴포넌트로 끌어올릴수 있게합니다. - Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
: 리덕스는 분명 훌륭한 상태 관리 라이브러리지만, 보일러 플레이트가 많다는 단점이 있습니다. 하나의 상태를 관리하기 위해서 액션 타입, 액션 생성 함수, 리듀서 등 개발자가 반복적으로 적어야 하는 코드가 너무 많죠. 번거로울 뿐만 아니라 휴먼 에러가 발생할 가능성도 높습니다.
1) 그래서 저는 리덕스 툴킷을 사용하는데, createSlice로 리듀서, 액션 타입, 액션 생성 함수를 한꺼번에 정의할 수 있고 immer 라이브러리로 불변성 유지도 자동으로 처리할 수 있다는 장점이 있습니다. 또, createAsyncThunk로 비동기 작업도 더 쉽게 처리할 수 있습니다.
2) 그래서 소규모의 프로젝트에서는 리액트에 내장되어 있는 context API를 사용하고 있습니다. 별도의 설치나 설정의 번거로움이 없고 작성해야 하는 코드도 적어서 프로젝트를 경량화 하는 데에도 도움이 됩니다. 그래서 상태의 구조가 복잡하지 않고 상태를 자주 변경해야 하는 경우에는 오히려 장점이 될 수 있죠.
핵심키워드:
- Recoil : 비동기 상태관리, 경량화
- Zustand : 타입스크립트 지원, 간단한 구조
전역 상태관리 라이브러리의 장점고 단점을 비교하고, 기능 중심적으로 말하는 것이 가장 중요합니다.
모범답안: Redux는 불변성을 강조하고 단순한 함수를 통해 상태를 변화시키는 방식으로 상태를 관리하며, 상대적으로 러닝 커브가 높을 수 있습니다. 반면에 MobX는 가변 상태를 허용하고 어노테이션과 데코레이터를 활용하여 좀 더 간편하고 간결한 코드 작성을 제공하며, 학습 곡선이 더 낮습니다. 프로젝트의 크기, 요구 사항 및 개발자의 선호도에 따라 선택되어야 하는데, Redux는 예측 가능성과 엄격한 상태 관리를 중요시하는 경우에, MobX는 빠른 개발과 유연한 상태 관리를 선호하는 경우에 적합합니다. - 버츄얼 돔과 리얼 돔의 차이를 설명해주세요
: 돔이란 문서 객체 모델의 줄임말..
리얼 돔은 브라우저가 웹 페이지를 표시하는 데 사용하는 HTML 문서의 실제 돔 구조로 웹 페이지가 로드되면 HTML이 파싱되면서 브라우저가 리얼 돔을 생성, 컨텐츠에 표시된다.
버츄얼 돔은 리얼 돔을 추상화한 복제본.. 실제로 화면에 표시되지 않고 메모리 상으로만 존재한다. 상태 변화를 빠르게 추적하고 업데이트 할 수 있다. 성능 향상과 빠른 랜더링에 도움이 된다..???
핵심키워드: memory, 트리구조, rendering, 추상화
Virtual DOM이 리액트의 어떤 부분에서 사용이 되고 있는지 여부와 Real DOM이 존재하는데 어떤 단점이 있고, Virtual DOM에는 어떤 장점이 있어서Virtual DOM을 사용하는지 묻는 질문입니다.
모범답안 : 버츄얼 돔(Virtual DOM)은 메모리에 존재하는 가상의 DOM 구조로, 리액트와 같은 라이브러리에서 사용됩니다. 리얼 돔(Real DOM)은 실제로 브라우저에 표시되는 실제 DOM 구조입니다. 버츄얼 돔은 가상의 DOM을 메모리 상에 구성하여, 변경전의 DOM과 변경의 DOM 비교하여 변경된 최소한의 DOM 요소를 화면에 적용합니다. 전체 페이지를 다시 렌더링 하지 않기에 빠르고 효율적인 리렌더링이 가능합니다. 일반적으로 브라우저는 렌더링할 때 DOM 조작에 많은 리소스를 사용합니다. 리소스 사용이 증가할 수록 페이지는 느려지며 성능이 저하된다. 그렇기 때문에 버츄얼 돔의 사용이 중요합니다. 또한 버츄얼 돔은 사용자의 인터렉션에 대한 반응성이 향상되어 사용자 경험을 보다 부드럽고 반응적으로 만들어주기 때문에 사용자 경험이 중요한 SPA에서 매우 유용하게 사용됩니다. - useRef에 대해 설명해보세요
: useRef는 리액트에서 제공하는 Hook으로, DOM에 접근하거나 컴포넌트 내부 변수를 유지하기 위해 사용합니다.
모던 자바스크립트에서는 querySelector 선택자를 사용해서 DOM 요소에 접근해야 한다는 번거로움이 있었는데 useRef를 사용하면 쉽게 접근할 수 있습니다.
또한 useRef는 작성된 컴포넌트가 처음 랜더링 될 때 참조변수 ref를 생성하고, 더이상 값의 변경을 감지하거나 리랜더링 하지 않고 컴포넌트의 생명주기 동안 유지합니다. 즉, 컴포넌트 내부 상태가 변경되더라도 처음 설정해둔 대로 고정하고 싶거나, 변경된 값과 비교하고 싶을 때 유용하게 사용할 수 있습니다.
예를 들어 input에서 ref 사용하면 current 속성으로 사용자의 input의 접근해서 사용자가 처음 브라우저에 접속했을 때 자동으로 검색창에 포커스가 생겨서 별도의 작업 없이 검색할 수 있게 하거나, 컴포넌트가 리랜더링 되어도 변경되지 않는다는 속성을 이용해서 current 속성으로 이전에 저장해둔 변수와 현재의 값을 저장한 변수를 비교할 수 있습니다.
핵심키워드: react hook, 저장공간, DOM 참조
useRef hook의 정의와 기능을 아주 잘 설명해주고 있고, 바닐라 JS와 비교하면서 설명하는 것 또한 매우 좋았고, 어떤 기능을 구현할 때 해당 훅을 사용하면 좋은지도 예시를 들어 설명해주는 것이 사용한 경험과 정확한 이해도가 있다는 것을 증명해줌. 사용 시 유의사항까지 넣으면 더 좋을듯.
모범답안 : 함수형 컴포넌트는 렌더링 될 때마다 함수의 변수들이 초기화되지만, useRef로 생성한 변수는 컴포넌트가 리렌더링 되어도 그 값을 계속 유지합니다. 또한 useRef로 생성한 변수는 값이 변경되어도 컴포넌트의 리렌더링을 유발하지 않아서 컴포넌트가 리렌더링 되지 않아야 할 값들을 관리할 때 유용합니다. 하지만 주의해야 할 점은 useRef를 사용하여 상태를 관리할 때. 값의 변경이 화면에 바로 반영되지 않으며, .current를 통해 값을 가져와야 한다는 점입니다. 더불어 상태의 변경으로 인한 렌더링이 필요한 경우에는 useState를 사용하는 것이 좋습니다. - useEffect의 실행 순서에 대해 설명해주세요
: useEffect는 리액트에서 제공하는 Hook으로, 컴포넌트의 생명주기와 밀접한 관계가 있습니다. 개발을 하다보면 랜더링 전후로 수행되었으면 하는 작업이 있거나, 리랜더링이 될 때 마다 수행하고 싶은 작업이 생기는데 이런 흐름을 관리해줍니다.
useEffect는 컴포넌트가 처음 랜더링되고 화면에 나타났을 때, 즉 컴포넌트가 마운트가 되었을 때 내부의 첫번째 인자로 전달한 함수가 실행됩니다. 이후 컴포넌트가 리랜더링 되고 화면이 업데이트 되면. 두번째 인자인 의존성 배열이 실행됩니다. 이때 의존성 배열에 state나 props가 있다면 배열 내부가 변경 될 때 마다 다시 첫번째 인자인 함수가 실행되고, 비어있다면 그대로 종료됩니다.
그리고 컴포넌트가 언마운트 될 때도 첫번째 인자 함수가 호출됩니다. 언마운트란 컴포넌트가 더이상 쓰이지 않아 화면에서 사라지는 걸 말하는데 이때 정리(clean-up) 작업을 할 수 있습니다.
(+ 예시 추가 필요) - var, let, const의 차이에 대해 알려주세요.
: var는 호이스팅 되기 때문에 선언하기 전에 사용할 수 있습니다. 호이스팅이란, 선언이 스코프 내부 어디에서든 변수 선언이 최상위에서 된 것 처럼 행동하는 것을 말합니다. var 선언은 호이스팅 되지만 할당은 호이스팅 되지 않기 때문에 undefined가 출력됩니다. 이런 특징이 코드의 예측을 어렵게 하고 치명적인 버그를 만들 수 있기 때문에 let과 const라는 새로운 키워드가 도입되었습니다.
var는 선언과 초기화 즉, undefined 할당 단계가 동시에 이루어지며 스코프가 함수 내로만 한정되어 있습니다. 반면 새로운 키워드들은 함수 바깥에서도 사용할 수 있는 블록 스코프로 이루어져 있습니다.
let과 const도 호이스팅의 영향을 받지만, TDZ의 영역 안에 있기 때문에 선언하기 전에는 변수에 접근할 수 없습니다. 선언과 초기화가 동시에 이루어지는 var와 달리 let은 선언한 이후에 초기화와 할당이 이루어집니다. 그렇기 때문에 선언되지 않은 상태에서는 ReferenceError가 출력됩니다.
const는 let과 달리 선언과 할당이 동시에 이루어져야 합니다. 그렇기 때문에 나중에 값을 바꿀 수 없고, 마찬가지로 선언되지 않은 상태에서 변수가 사용되면 ReferenceError가 출력됩니다. - Async/Await와 Promise의 차이
: Promise객체는 자바스크립트에서 복잡한 콜백 패턴을 대체하기 위해 사용할 수 있는 비동기 프로그래밍의 패턴입니다. 비동기 작업의 실행 단계에 따라 대기, 이행, 거부로 상태를 구분할 수 있습니다. then과 catch 블록을 체이닝한 형태로 작성한 뒤 비동기 작업이 완료되면 현재 어떤 상태인지에 대한 결과를 반환합니다.
Async/Await은 Promise객체를 좀 더 쉽게 다룰 수 있게 해주는 패턴입니다. 함수 앞에 Async를 붙여 비동기 함수로 선언하거나, Await을 붙여 Promise객체의 완료를 기다린다는 뜻으로 사용할 수 있습니다. 기존의 Promise 객체가 상태를 대기, 이행, 거부로만 나타냈다면 Async 내에서 사용하는 Await의 도입으로 함수의 응답 순서를 조정할 수 있게 되었고, 기존 Promise에서 여러 블록을 중첩해서 사용해야만 했던 단점을 보완하여 가독성을 높였습니다. - 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은?
: 메모리 관리, 성능 최적화 등 고려해야 할 점이 많지만, 저는 대량의 데이터를 처리하다 보면 생기는 로딩 시간을 어떻게 처리하는지가 가장 중요하다고 생각합니다. 스크롤로 새로운 데이터를 로드해오는 동안 로딩 이벤트를 표시하고, 로드 시에 발생하는 애니메이션을 추가하는 등의 시각적인 피드백을 제공함으로써 사용자 경험을 개선하고 사용자가 웹사이트를 이용하면서 느낄 수 있는 지루함과 그에 따른 이탈을 막을 수 있습니다. - Javascript 호이스팅에 대해 설명해주세요.
: 자바스크립트는 위에서 아래로 한줄씩 순차적으로 실행되기 때문에 윗줄이 실행될 때 아직 선언이 실행되지 않은 변수가 나오면 참조 에러가 발생해야 합니다. 하지만 실제로는 선언부가 먼저 처리되어 undefined가 출력됩니다. 아랫줄에서 작성한 변수의 선언이 순차적으로 실행된 게 아니라 그 이전 단계에서 먼저 실행되었기 때문입니다. 이것을 호이스팅이라고 합니다. Javascript는 변수 선언이 어느 줄에 있는지와 상관없이 다른 코드보다 우선해서 실행합니다. 그런데 왜 특정한 값이 아니라 undefined가 출력되느냐, 변수가 선언되었다는 것 자체는 호이스팅 되지만 값이 초기화되었다는 사실 자체 즉, 실제 할당된 값은 호이스팅 되지 않기 때문입니다. - 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
: 동기란 앞선 연산이 끝날 때 까지 기다렸다가 다음 연산이 순차적으로 실행되는 방식입니다. 반대로 비동기는 앞선 연산의 실행여부와 무관하게 다음 연산이 비순차적으로 실행되는 방식을 말합니다. 그렇기 때문에 두 프로그래밍을 비교했을 때 비동기 프로그래밍이 소모시간이 훨씬 적고, 빠릅니다. 앞선 연산이 완료될 때 까지 대기하느라 낭비되는 시간이 없기 때문입니다.
하지만 비동기적 프로그래밍에도 문제점은 있습니다. 바로 '콜백지옥' 입니다. 비동기 프로그래밍은 결과를 처리하기 위해서 콜백함수를 호출해서 사용하는데, 이 콜백함수들이 중첩되어서 사용하다보면 코드가 초과 부등호 '>' 모양이 되면서 가독성이 떨어지고 유지보수가 어려워집니다. 이런 현상을 막기위해 등장한 것이 ES7의 키워드 async / await입니다. - 브라우저의 작동방식에 대해서 설명해주세요.
: 사용자가 URL을 입력하거나 클릭하면 브라우저가 해석해서 웹 서버로 HTTP 요청을 보내고, HTML 문서를 받아옵니다. HTML 내부의 태그들은 DOM요소로 변환되어 화면에 표시되기 위한 구조가 됩니다. 이후 브라우저는 CSS파일을 파싱해서 요소들에 스타일을 적용합니다. DOM과 CSS정보를 기반으로 렌더 트리가 생성되고, 화면에 픽셀로 그려집니다. 이후 JS가 실행되면서 정적이었던 웹 페이지에 동적인 기능을 구현해서 사용자와 상호작용을 하거나 이벤트 처리, 데이터의 비동기 요청이 가능해집니다. - GET, POST 방식의 차이점에 대해서 설명해주세요.
: GET, POST는 HTTP프로토콜을 사용해서 서버와 클라이언트 간 데이터를 주고받는 요청 방식입니다. GET은 데이터를 전송할 때 URL 뒤 쿼리 파라미터에 포함하므로 데이터가 노출되어 보안에 취약하며 길이가 제한됩니다. 대신 브라우저에서 캐싱해서 재사용할 수 있습니다. 그렇기 때문에 데이터를 서버로부터 가져오는 조회 등 읽기 작업에 적합합니다. POST는 요청 본문에 데이터를 담아 전송하므로 노출되거나 길이에 제한이 없습니다. 대신 캐싱되지 않아 브라우저에서 재사용 할 수 없습니다. 그렇기 때문에 서버로 데이터를 보내는 전송, 업데이트와 같은 쓰기 작업에 주로 쓰입니다. - GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.
: GET, POST는 HTTP프로토콜을 사용해서 서버와 클라이언트 간 데이터를 주고받는 요청 방식입니다.
먼저 GET의 데이터 흐름에 대해서 설명해보겠습니다. 클라이언트 즉, 브라우저는 GET요청을 통해 데이터를 URL 뒤에 쿼러 파리미터에 포함시킨 뒤 서버에 전송합니다. 서버는 URL로 요청을 받은 뒤 처리하여 클라이언트로 다시 응답을 보냅니다. 클라이언트는 서버로부터 받은 데이터를 웹 페이지에 반영하는데 주로 조회, 읽기작업을 위해 사용합니다.
클라이언트가 POST요청을 생성한 경우에는 데이터를 요청 본문에 담아서 서버에 전송합니다. 서버는 받은 요청 본문의 데이터를 처리해서 클라이언트에 다시 응답하고, 클라이언트는 응답을 처리해서 웹 페이지에 반영합니다. 서버에 전송할 때 길이에 제한이 없고 노출되지 않아 GET보다 보안이 좋기 때문에 주로 데이터 전송과 업데이트를 위해 사용합니다. - 쿠키, 세션, 웹스토리지의 차이를 설명해보세요
: 쿠키, 세션, 웹스토리지는 모두 웹에서 클라이언트와 서버 간 데이터를 저장하고 관리하기 위해 사용되는 방식입니다.
쿠키는 브라우저에서 작은 데이터 조각을 저장하는 방식입니다. 주로 유저의 정보를 저장해서 로그인 등 인증하거나 개인 PC에서 노출되어도 괜찮은 정보를 저장, 상태를 유지하기 위해 활용됩니다. 만료 기간을 설정해서 정보를 일정 기간마다 폐기할 수 있고, 세션 쿠키를 사용해서 브라우저가 세션되는 동안에만 유지되게 할 수도 있습니다. 또한 클라이언트 내에서 바로 수정도 가능합니다. 다만 보안상 취약점이 있기 때문에 중요한 데이터를 보관하기에 적합하지 않습니다.
세션은 데이터를 서버에서 저장하는 방식입니다. 클라이언트에서 보낸 요청에 고유한 세션 식별자를 부여해서 저장합니다. 쿠키보다 보안적으로 안전하지만, 서버에 부하를 주기 때문에 메모리 관리 측면에서 단점이 될 수 있습니다. 그렇기 때문에 모든 데이터를 세션으로 관리하기 보다는 쿠키와 분산할 필요가 있습니다.
웹 스토리지는 클라이언트의 로컬 브라우저에 데이터를 저장하는 방식으로, 도메인과 관련된 모든 페이지에서 사용 가능한 로컬 스토리지와 특정 세션에서만 사용 가능한 세션 스토리지로 나뉩니다. 쿠키보다 더 많은 데이터를 비교적 안전하게 저장할 수 있지만, 서버와의 통신이 불가능하다는 단점이 있습니다. - 클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 개념에 대해 설명해주시고, 장/단점을 설명해주세요.
: CSR과 SSR은 웹의 렌더링 방식을 말하는데,
CSR은 웹페이지를 텅 빈 상태로 로드한 후에 JS를 사용해서 동적으로 렌더링합니다. 그렇기 때문에 최초 로딩 시간이 짧지만, JS렌더링 과정에서 사용자가 컨텐츠를 볼 수 있을 때 까지는 추가적인 로딩 시간이 발생합니다. 하지만 JS를 사용한 동적인 상호작용이 가능하기 때문에 사용자 경험을 향상시킬 수 있습니다. 하지만 최초에 텅 비어있는 상태로 로드되기 때문에 검색 엔진이 인덱싱하기가 어려워 SEO에는 취약하다는 단점이 있습니다.
SSR은 웹 페이지의 초기 내용을 서버에서 렌더링 한 후에 클라이언트로 전달하는 방식입니다. 서버에 저장되어 있던 내용이 완전한 상태로 로드되기 때문에 SEO에 최적화 되어있고, 사용자가 컨텐츠를 보기까지에 추가적인 로딩 시간이 발생하지 않습니다. 하지만 서버 자원을 더 많이 사용하기 때문에 서버 부하가 증가하고, 서버 통신을 위한 추가적인 시간이 필요하다는 단점이 있습니다.
그렇기 때문에 검색 엔진 최적화를 통해 검색 엔진 상위에 노출되고 싶다면 SSR을 사용하는 대신 서버 관리에 좀 더 관심을 기울이는 게 좋고, 만약 동적인 상호작용이 많은 웹을 개발한다면 CSR을 사용해 빠른 초기 로딩과 향상된 사용자경험을 제공하는 것이 좋습니다. 그보다 크고 복잡한 규모의 애플레케이션이라면 SSR과 CSR을 적절히 조합한 하이브리드 렌더링을 사용하는 것이 바람직하겠죠. - TCP/UDP에 대해서 설명해주세요.
: 데이터 전송을 관리하고 보장하기 위해 사용하는 프로토콜로, 동작 방식과 용도가 다릅니다.
TCP는 신뢰성 있는 데이터 전송을 보장하기 위해 연결 기반 프로토콜로 동작합니다. 데이터의 손실이나 손상을 최소화하며, 데이터 전송의 순서를 보장하고 재전송을 통해 에러 복구를 시도합니다. 그래서 파일 전송, 이메일 전송, 웹 페이지 로딩과 같이 데이터의 정확성과 신뢰성이 중요한 경우에 사용됩니다. 하지만 연결 설정과 종료, 에러 검출 및 복구와 같은 추가적인 기능으로 인해 오버헤드가 발생할 수 있고, 속도가 상대적으로 느릴 수 있습니다.
반면에 UDP는 신속한 데이터 전송을 중요시하는 프로토콜로, 연결 설정이 없어 빠른 속도를 보장합니다. 데이터의 신뢰성이나 순서를 보장하지 않고, 에러 발생 시 복구가 이루어지지 않습니다. 그렇기 때문에 실시간 스트리밍, 온라인 게임, DNS조회 등에 많이 사용됩니다. UDP는 오버헤드가 적어서 상대적으로 빠르지만, 데이터의 신뢰성과 정확성이 필요한 경우에는 적절하지 않을 수 있습니다. - http, https 차이점에 대해 설명해주세요
- 라이프사이클이 의미하는 바에 대해서 설명해주세요.
- 라이프사이클 메소드에 대해 설명해주세요.
- react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.
- 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
- 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.
- SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.
- 이미지 최적화에 대해 설명해주시고 방법에 대해 설명해주세요.
- 프론트엔드 개발 시 개발자 도구를 활용한 경험이 있다면 설명해주세요.
- 프론트엔드 성능최적화를 위한 방법이 있다면 말씀해주시고 그 중 프로젝트에서 활용한 경험이 있다면 설명해주세요.
- Javascript event loop에 대해서 설명해주세요.
- Array, LinkedList에 대해 설명해주시고 각각 어떻게 사용하는지 말씀해주세요.
- AWS S3를 사용하는 이유와 사용 경험에 대해서 답변해주세요.