OOSIE 프로젝트 5분 기록
식단 달력 제작
열심히 달력을 만들었수다 지순아 고마워
| 주별로 | 월별로 |
|---|---|
 |  |
면접 준비
JS
1. var, let, const의 차이
| var | let | const | |
|---|---|---|---|
| 스코프 | 함수 | 블록 | 블록 |
| 호이스팅 | undefined로 초기화 O | 초기화 X | 초기화 X |
| 재할당 | O | O | X |
변수 생성 단계 : 선언 -> 초기화 -> 할당
호이스팅은 코드 실행 전에 변수와 함수 선언을 실행하여 초기값을 메모리에 저장하므로 선언이 스코프(scope)의 최상단으로 올려져 실행되는 것처럼 보이는 현상을 의미합니다.
2. 쓰로틀링과 디바운싱의 개념 | 사용하는 이유 | 대표적인 사용처
- 공통점: 특정 함수의 실행 빈도를 조절하는 기술
- 쓰로틀링: 일정 간격마다 함수를 실행하도록 횟수를 제한하는 기술
- 디바운싱: 연속된 함수의 호출이 들어올 경우 무시하고 있다가 제일 마지막에 호출된 함수만을 실행하도록 하는 기술
중간 호출도 중요하면 쓰로틀링(스크롤 이벤트)을, 마지막 호출만이 중요하면 디바운싱(검색어 자동 완성)을 사용하는 것이 좋음
3. 호이스팅 설명
Hoisting: 끌어올리다
변수나 함수의 선언을 스코프의 최상단으로 끌어올리는 것
자바스크립트는 실제로 선언된 위치와 상관 없이 최상단으로 선언부가 끌어올려지기에 선언 위치 앞에서도 호출이 가능해집니다.
function = 어디서든 호출이 가능 (선언 전인 경우에도)
var = 선언 전에 호출 시 undefined
const/let = 선언 전에 호출 시 REFERENCE ERROR, TDZ
4. 이벤트 버블링과 캡처링에 대해 설명
- 버블링: 하위 요소에서 상위 요소로 이벤트가 전파되는 것
- 캡처링: 상위 요소에서 하위 요소로 이벤트가 전파되는 것
버블링 및 캡쳐링을 방지하기 위해서는 이벤트 객체의 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지시키거나, 이벤트 핸들러에서 이벤트가 발생한 요소를 확인하여 처리해야 합니다.
React
1. 상태관리 하는 이유 | 평소 상태관리 방법
저는 평소에 커스텀 훅을 이용하여 상태 관리를 합니다. 커스텀 훅을 사용하여 재사용성과 독립성을 향상시킬 수 있습니다.
또한 props-drilling의 문제를 해결하기 위해 Redux나 Recoil, Zustand 같은 전역 상태 관리 도구를 사용했습니다.
2. Redux 외 전역 상태 관리 라이브러리 사용 경험
저는 zustand와 recoil을 사용한 경험이 있습니다.
redux는 복잡해서 러닝커브가 높다, 간단한 상태관리라도 처음에 작성해야 할 코드의 양이 많다는 단점이 있습니다.
먼저 세상에 나온 redux에 비해 둘은 복잡함을 극복. 쉽게 쓸 수 있도록 개선/개량돼서 나왔기 때문에 훨씬 편하고 간단해서 좋았습니다.
모범 답안
저는 Redux 외에 Zustand라는 전역 상태 관리 라이브러리를 사용한 경험이 있습니다. 기존 리덕스와는 다르게 Zustand는 보일러 플레이트가 단순하여 더욱 빠른 환경 설정이 가능하다는 장점이 있습니다. 예를 들어 리덕스에서 작성해야 했던 액션, 리듀서, 디스패치, 미들웨어 등 대신에, Zustand에서는 create 메서드를 통해 atomic 한 객체를 생성하는 것으로 앞선 과정을 단축할 수 있습니다.
또한 Redux에서 채택했던 Flux 아키텍처를 그대로 가져와 사용하였기에 이 또한 저에게 아주 큰 매력으로 다가왔습니다. 왜냐하면 Redux Tool Kit을 포함해 리덕스를 사용할 때의 가장 큰 장점으로 체감할 수 있었던 것은 바로 개발자 도구(devtool)의 유용함 덕분이었습니다. Zustand는 리덕스의 Flux 아키텍처를 그대로 채택하였기에 기존 리덕스의 개발자 도구를 이어서 사용할 수 있게 되었고, 이는 곧 저에게 있어서 더 이상 리덕스를 사용해야 할 이유를 모두 잃은 것과 다름 없었습니다.
3. 리액트에서 가상 돔을 사용하는 이유
가상 돔은 실제 돔을 경량화한 복사본으로, 리액트의 최적화를 위해 사용
실제 돔을 직접 조작하는 것은 성능 비용이 큰 작업이기 때문
리액트의 상태 업데이트
-> 빠르고 가벼운 가상 돔을 업데이트하고, 결과를 실제 돔과 비교
-> 변경된 부분만 실제 돔에 반영
불필요한 리소스 사용을 최소화하고 성능을 향상시킴
useState를 통해 상태를 업데이트하면 상태 값이 곧바로 반영되지 않습니다. 왜냐면 상태 업데이트는 그저 변수에 데이터를 담아내는 것이 아니라, 앞서 설명했던 가상 돔과 실제 돔의 비교 과정이 실행되기 때문입니다. 상태 값이 자기 자신을 참조하여 상태를 업데이트할 때 생기는 오류는 대부분 이 때문입니다. 이러한 문제를 해결하기 위해 useState 훅에 값이 아닌 콜백 함수의 참조를 인자로 전달할 수 있습니다.
4. useEffect의 실행 순서를 컴포넌트 라이프 사이클에 관련지어 설명
컴포넌트 라이프 사이클
- create: 말 그대로 생성된 것
- mount: 컴포넌트가 생성된 후에 실제 돔에 렌더링 되는 순간
- useEffect 내부의 코드가 실행되는 시기
- HTML 태그를 가져와 이벤트를 등록하거나, 데이터를 fetching 해오는 등의 작업을 처리
- update: 컴포넌트에 변화가 생겼을 때
- useEffect의 의존성 배열을 사용하면 특정 값이 변경될 때마다 내부의 작업을 실행
- unmount: 컴포넌트가 실제 돔에서 사라지는 순간
- useEffect 내부의 return 값에 함수의 참조를 넘겨주어 unmount시 특정 작업이 실행되게 하는데, 이를 클린업 함수라고 함
- mount시에 등록했던 이벤트를 제거하는 등 메모리 누수를 막기 위한 작업을 실행
