Frontend 기술면접 top30
1.[Frontend 기술면접 top30] 1.상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
Q. 리액트에서 상태관리를 하는 이유는 뭘까? 1. 컴포넌트 간 데이터 공유 리액트는 일반적으로 여러 컴포넌트로 구성되며, 이러한 컴포넌트들이 서로 데이터를 공유해야 한다. 상태 관리를 통해 이를 원활하게 수행할 수 있다. 2. 코드의 예측 가능성과 유지보수 전역
2.[Frontend 기술면접 top30] 2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
Q. Redux가 무엇인가요? 리덕스는 전역 상태를 관리하는 라이브러리다. 리덕스는 상태를 중앙 집중화된 저장소인 스토어에서 관리하며, 이를 통해 애플리케이션 내에서 데이터의 일관성과 관리를 쉽게 해 준다. Q. 왜 Redux를 사용하시나요? 리덕스를 사용하는 이유는
3.[Frontend 기술면접 top30] 3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요.
Context API는 리액트의 내장 API로 컴포넌트 트리 안에서 데이터를 전역적으로 관리할 수 있게 해준다. Redux와 같은 복잡한 기능은 없지만 간단한 전역 상태 관리에 적합하다.복잡성 측면에서 Context API는 사용법이 비교적 단순하고, 상태를 필요로 하
4.[Frontend 기술면접 top30] 4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
리얼 돔은 직접 조작하는 브라우저의 DOM이며, 변경이 느리고 비효율적일 수 있다.버츄얼 돔은 메모리에 저장되는 가상의 DOM으로, 변경이 빠르며 효율적인 업데이트를 가능하게 한다.
5.[Frontend 기술면접 top30] 5. useRef에 대해 설명해보세요.
useRef는 변수를 저장하고 접근하기 위한 hook입니다. useRef는 컴포넌트가 리렌더링될 때마다 동일한 값을 반환하기 때문에, 값을 변경해도 리렌더링되지 않습니다. 예를 들면 특정 부분에 "북마크"를 달아두고 나중에 그 부분을 쉽게 찾아갈 수 있게 해주는 도구라
6.[Frontend 기술면접 top30] 6. useEffect의 실행 순서에 대해 설명해주세요.
useEffect는 기본적으로 컴포넌트가 렌더링 된 후에 실행됩니다. useEffect는 두번째 인자로 배열을 전달할 수 있으며, 이 배열에 포함된 값들이 변경되었을 때만 useEffect내의 코드가 실행됩니다.컴포넌트 렌더링: 컴포넌트의 상태나 props가 변경될 때
7.[Frontend 기술면접 top30] 7. var, let, const의 차이에 대해 알려주세요.
함수 스코프: var로 선언된 변수는 함수 스코프를 가집니다.호이스팅: var 변수는 호이스팅되어 선언 전에 참조할 수 있습니다. 하지만 값이 할당되기 전에 참조하면 undefined가 반환됩니다.재선언, 재할당 가능: var로 선언된 변수는 재선언 및 재할당이 가능합
8.[Frontend 기술면접 top30] 8. Async/Await와 Promise의 차이
Promise는 세가지 상태를 가집니다. pending(초기 상태), fulfilled(연산이 성공적으로 완료된 상태), rejected(연산이 실패한 상태)Promise 객체는 then, catch, finaly 이 세가지 메서드를 제공하여 비동기 연산의 결과나 오류
9.[Frontend 기술면접 top30] 9. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은?
클라이언트 측에서 한번에 너무 많은 데이터를 로딩하면 웹사이트나 앱의 성능이 저하될 수 있습니다. 그래서 한번에 로딩하는 데이터의 양을 적당한 크기로 분할해서 가져와야 합니다.서버에 과도한 부하가 가지 않도록 요청 간격 및 요청량을 조절해야 합니다. 예를 들어 한번에
10.[Frontend 기술면접 top30] 10. Javascript 호이스팅에 대해 설명해주세요.
호이스팅(hoisting) 자바스크립트에서 변수와 함수 선언을 그들이 속한 스코프의 최상단으로 끌어올려지는 현상을 말합니다. 예를 들어, var를 사용하여 변수를 선언하는 경우 변수 선언 전 로그에 출력하려고 하면 대부분의 언어에서는 에러가 발생하지만 자바스크립트에서는
11.[Frontend 기술면접 top30] 11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
동기동기프로그래밍에서 작업은 순차적으로 실행됩니다. 한 작업이 끝나기 전까지 다음 작업은 대기합니다.비동기비동기 프로그래밍에서는 특정 작업의 완료를 기다리지 않고 다음 작업을 실행할 수 있습니다. 즉, 병렬적으로 여러 작업을 수행하는 것이 가능합니다.사용자 인터페이스가
12.[Frontend 기술면접 top30] 12. 브라우저의 작동방식에 대해서 설명해주세요.
사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 페이지 정보를 웹 서버에 요청합니다.웹 서버는 브라우저에게 해당 웹 페이지의 HTML을 전송합니다.브라우저는 받은 HTML을 해석해서 페이지 구조를 파악합니다.브라우저는 페이지에 적용된 스타일(CSS)과 동작(Jav
13.[Frontend 기술면접 top30] react 클래스형과 함수형의 차이를 설명해주세요. 어떤 방식을 주로 사용하였고 그 이유가 뭔지 답변해주세요.
class 키워드를 사용해 컴포넌트를 정의하고, render() 메서드 내에서 JSX를 반환합니다. this.state와 this.setState를 사용해 컴포넌트의 상태를 관리합니다. 또한 라이프사이클 메서드들을 통해 컴포넌트의 생명 주기를 제어할 수 있습니다.단순한
14.[Frontend 기술면접 top30] 쓰로틀링과 디바운싱의 개념과 사용하는 이유에 대해서 설명해주세요.
쓰로틀링은 일정한 시간 간격으로 이벤트나 함수를 실행하도록 제한하는 기술입니다. 예를 들면, 사용자가 스크롤을 빠르게 할 때, 스크롤마다 데이터를 불러오는 것은 비효율적입니다. 따라서 100ms나 200ms 간격으로 한 번씩만 데이터를 불러오게 할 수 있습니다.디바운싱
15.[Frontend 기술면접 top30] 자바스크립트와 타입스크립트의 차이, 장/단점에 대해 설명해주세요.
자바스크립트는 웹 개발에 널리 사용되는 인터프리터 언어입니다.자바스크립트의 장점은 자료형에 대한 제한이 없어 유연하게 코드를 작성할 수 있습니다. 또한 대부분의 웹 브라우저에서 지원되며, 웹 개발 커뮤니티와 리소스가 방대합니다.단점은 변수의 자료형이 동적이기 때문에,
16.[Frontend 기술면접 top30] SEO란 무엇이고 SEO를 진행하는 방법에 대해 설명해주세요.
웹사이트나 웹페이지가 검색 엔진의 검색 결과에서 더 높은 순위를 얻을 수 있도록 하는 작업을 의미합니다. 높은 순위의 검색 결과는 사용자들에게 더 많은 방문자를 가져다주기 때문에 중요합니다.타겟이 되는 키워드를 파악하고 해당 키워드를 웹페이지 내용에 적절히 포함시키는