하루 하나씩 작성하는 TIL #69
1. 상태관리를 왜 할까요? 그리고 평소 state 관리는 어떻게 하시나요?
- 답변
statepropsLifeCycledomreduxreact-query
-> 상태관리를 해주면 app 동작을 예측 가능하게 만들며, 코드의 복잡성을 관리하는데에 핵심적인 역할을 합니다. ui와 데이터의 동기화를 유지시키며 ux를 향상시킬 수 있습니다.
-> state와 props로 컴포넌트 간 데이터를 전달하고, lifecycle 메서드를 통해 상태를 관리합니다. 전역 상태 관리가 필요할 경우 리덕스나 주스탠드를 사용하며, 서버 상태 관리가 필요할 경우엔 리액트 쿼리를 사용합니다.
2. Redux가 무엇인가요, 왜 Redux를 사용하시나요?
- 답변
상태관리 Library
SPA Component
-> 상태 관리 라이브러리입니다. 주로 단일 페이지 app(spa)에서 복잡한 상태를 효율적으로 관리하기 위해 사용합니다.
-> 리덕스 사용시 모든 상태를 중앙에서 관리할 수 있어 컴포넌트 간의 데이터 전달이 간편해집니다.
3. Redux 말고 다른 전역 상태관리 아는 것 하나와 차이점을 말해주세요
- 답변
Recoil : 비동기 상태관리 경량화
Zustand : 타입스크립트 지원 간단한 구조
-> zustand입니다. 타입스크립트를 지원하며 간단한 구조로 쉽게 사용 가능합니다.
4. 버츄얼 돔과 리얼 돔의 차이를 설명해주세요.
- 답변
memory 트리구조 rendering 추상화
-> 가상돔은 메모리 내에서 유지되는 트리구조로, 변경 사항을 추적하고 실제 돔에 최소한의 변경만을 반영합니다. 이는 렌더링 성능을 최적화할 수 있습니다.
5. useRef에 대해 설명해주세요.
- 답변
react hook 저장공간, DOM 참조
-> 리액트 훅 중 하나로, 저장공간을 제공하여 dom 요소나 변수 값을 참조할 때 사용합니다. 컴포넌트가 재렌더링 될 때 값을 유지하며, dom 요소에 직접 접근할 때 유용합니다.
6. useEffect의 실행 순서에 대해 설명해주세요.
- 답변
useEffect 훅에 대한 정의 useEffect 실행되는 시점 훅에 대한 프로세스
-> 컴포넌트가 마운트될 때, 업데이트될 때, 언마운트 될 때 실행됩니다. 첫 번째 인자로 전달된 함수는 컴포넌트가 렌더링 된 후 실행되며, 두 번째 인자로 전달된 배열은 의존성 배열로, 배열의 값의 변경될 때만 효과가 재실행 됩니다.
7. var, let, const의 차이에 대해 알려주세요.
- 답변
호이스팅 스코프(Lexical Scope)
-> var는 함수 스코프를 가지며 호이스팅이 발생하여 변수 선언이 최상단으로 끌어올려집니다. let은 블록 스코프를 가지며 호이스팅이 발생하나 선언 전에 접근하면 에러가 발생합니다. const는 블록 스코프를 가지며 상수 선언에 사용됩니다. 재할당이 불가능 합니다.
8. Async/Await와 Promise의 차이에 대해 설명해주세요.
- 답변
콜백 헬(callback hell) Async/await 코드 스타일에 이점
-> Promise는 비동기 작업의 완료를 처리하기 위해 사용되며, .then()과 .catch()를 사용하여 콜백 헬을 방지합니다.
Async/Await는 비동기 코드를 동기식 코드처럼 작성할 수 있게 해주며, 가독성을 높이고 에러 처리를 간편하게 합니다.
9. 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할점은 무엇인가요?
- 답변
모든 아이템을 렌더링하는 대신 현재 보이는 아이템만 렌더링하여 메모리 사용량과 렌더링 속도를 최적화합니다. 이를 통해 대용량의 데이터셋을 다룰 때 성능 향상을 기대할 수 있습니다. React에서는 react-window나 react-virtualized와 같은 라이브러리를 사용할 수 있습니다.
데이터 조회 방식 구현하는 방법이나 구현 시, 사용할 라이브러리를 예시 들기
10. Javascript의 호이스팅에 대해 설명해주세요.
- 답변
호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 컴파일 단계에서 상단으로 옮겨지는 현상을 가리킵니다. 이것은 코드 실행 단계에서 일어나는 것이 아니라, JavaScript 엔진이 스크립트를 해석하기 전에 발생하는 것입니다.
변수와 함수 선언은 선언 단계와 초기화 단계로 나뉩니다. 호이스팅은 선언 단계에서 변수나 함수를 상단으로 옮겨지는 것을 의미하며, 초기화 단계는 코드의 위치에 따라 발생합니다.
실행 컨텍스트 변수 함수선언부가 '끌어올려짐'
11. 동기와 비동기의 차이에 대해 설명해주시고 비동기프로그래밍의 필요성에 대해 답변해주세요.
- 답변
동기는 작업을 순차적으로 진행하며,각 작업은 이전 작업의 완료를 기다리고,한 작업이 시작하면 그 작업이 완료될 때까지 다음 작업이 차단되어 대기합니다.
비동기는 비동기적인 작업이 완료되기를 기다리지 않고, 다른 작업을 동시에 진행할 수 있고
특정 이벤트의 발생,콜백 함수의 실행,또는 Promise와 같은 비동기 패턴을 통해 처리됩니다.
비동기 프로그래밍은 성능 향상,반응성 향상, 효율성,스케일링과 확장성을 위해서 필요합니다.
12. 브라우저의 작동방식에 대해서 설명해주세요.
- 답변
사용자가 URL을 입력하거나 링크를 클릭하면,브라우저는 해당URL로 요청을 보냅니다.
13. GET, POST 방식의 차이점에 대해서 설명해주세요.
- 답변
GET:데이터는 URL에 포함되어 전송되고,URL을 통해 전송되므로 보안에 취약합니다.
POST:데이터는 HTTP 요청의 본문(body)에 포함되어 전송되고,데이터가 본문에 포함되어 전송되므로, URL에 노출되지 않습니다.
14. GET, POST의 개념과 함께 데이터 흐름에 대해서 설명해주세요.
- 답변
GET:주로 데이터를 조회하고, 요청 파라미터를 URL에 포함시켜 전송합니다.
사용자가 브라우저에서 URL을 입력하거나, 링크를 클릭하면 GET 요청이 생성됩니다.
POST:클라이언트에서 서버로 데이터를 전송할 때 사용되는 HTTP 메서드입니다.
HTML 폼의 Submit 버튼을 누르거나, JavaScript를 사용하여 POST 요청을 생성합니다.
15. 쿠키, 세션, 웹스토리지의 차이를 설명해보세요
- 답변
쿠키는 브라우저에 작은 데이터를 저장하고 서버로 전송되며, 세션은 서버에 데이터를 저장하고 세션 식별자를 클라이언트에 전달합니다. 웹 스토리지는 브라우저에 데이터를 저장하고 서버로 자동으로 전송되지 않습니다.
