직무는 프론트엔드 신입 개발자
먼저 포트폴리오 기반의 간단한 질문들이 오갔다.
이후 기술 면접을 진행했다.
질문들이 프린트 된 종이를 건네주셨고, 3~40분 정도의 시간동안 자유롭게 풀라고 하고 자리를 비켜주셨다.
주로 함수를 구현하는 손코딩 문제였다.
기술 면접 부분이 특히 준비가 부족하다는 것을 느꼈다.
회고할 겸 공부할 겸 정리해보려고 한다.
1. filter, map, reduce
JavaScript에서 배열과 관련된 함수들
1) map
- 배열의 모든 요소에 콜백함수를 적용시켜 새로운 배열을 만들고 싶을 때 사용하는 메서드
2) filter
- 특정 조건에 일치하는 요소만 배열에 담고 싶을 때 사용하는 메서드
3) reduce
- reducer 함수를 이용해 하나의 데이터를 반환하는 메서드
1-1) Object
Object (객체)
- 속성의 컬렉션
Object.entries()
- 객체의 [key, value] 쌍을 담은 배열을 반환
Object.keys()
- 객체의 키만 담은 배열을 반환
Object.values()
- 객체의 값만 담은 배열을 반환
Object.is()
- 두 객체의 값이 같은지 비교
object.hasOwnProperty(property)
- 특정 property가 해당 객체에 존재하는지 검사
2. debounce
이벤트를 최적화하는 Debounce, Throttle
debounce
- 짧은 시간 동안 여러 번 발생하는 이벤트를 하나로 합쳐서 마지막 이벤트만 실행되도록 하는 기술
- 성능 최적화를 위해 자주 쓰이는 기술
- 검색창, 자동저장, 실시간 입력에 사용
function debounce(callback, delay) {
let timer;
return (e) => {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
callback(e);
}, delay);
};
};
throttle
- 이벤트를 일정한 주기마다 발생하도록 하는 기술
- 정기적으로 호출하며, 과도한 호출을 제한하기 위해 사용
- 스크롤, 리사이즈, 마우스 이동에 사용
function throttle(callback, delay) {
let lastCall = 0;
return (e) => {
const now = Date.now();
if (now - lastCall >= delay) {
lastCall = now;
callback(e);
}
}
}
3. window resize event
브라우저 & 윈도우 화면 높이 / 너비 구하는 법
window.innerWidth; // 브라우저 화면의 너비
window.innerHeight; // 브라우저 화면의 높이
window.outerWidth; // 브라우저 전체의 너비
window.outerHeight; // 브라우저 전체의 높이
React의 resize custom hook
4. react 성능최적화
- useMemo
- useCallback
- React.memo
5. IntersectionObserver
- 브라우저의 viewport와 원하는 요소의 교차점을 관찰하며 요소가 viewport에 포함되는지 아닌지 구별하는 기능을 제공
- 비동기적으로 실행되기 때문에 메인 스레드에 영향을 주지 않으면서 요소들의 변경사항들을 관찰할 수 있음
관찰자 생성
let options = {
root: document.querySelector("#scrollArea"),
rootMargin: "0px",
threshold: 1.0,
};
let observer = new IntersectionObserver(callback, options);
(threshold는 root 옵션으로 지정된 요소 내에서 타겟 요소가 100% 보이면 콜백이 호출된다는 의미)
root
- 대상의 가시성을 체크하기 위한 뷰포트로 사용되는 요소
- 반드시 타겟의 상위 요소여야 함
- 뷰포트를 지정하지 않거나 null 이면 브라우저 뷰포트가 기본으로 설정됨
rootMargin
- 루트 주위의 여백
- 기본값 : 0
threshold
- 관찰자의 콜백이 무조건 실행되어야 하는 대상의 가시성 백분율을 나타내는 숫자 또는 숫자 배열
- 가시성이 25%만큼 넘어갈 때마다 콜백을 실행하고 싶다면, [0, 0.25, 0.5, 0.75, 1]을 지정하여 사용할 수 있음
- 기본값 : 0 (1픽셀이라도 보이면 콜백 실행)
관찰 타겟 요소 전달
let target = document.querySelector("#listItem");
observer.observe(target);
6. Redux
Redux는 전역상태관리 라이브러리이다.
상태를 매번 props로 내려주는 불편함을 개선하기 위해 사용한다. (props drilling 이슈 해결)
또, 상태값을 컴포넌트에 종속시키지 않고, 컴포넌트 바깥에서 관리할 수 있다.
Redux는
Action, Dispatch, Reducer, Store로 구성되어 있으며,
Action -> Dispatch -> Store -> View 순서로 데이터가 단방향으로 흐른다.
Store
- 상태가 관리되는 공간
- 상태 정보가 필요할 때 스토어에 접근한다.
const {createStore} = require("redux");
const store = createStore(counterReducer);
Action
- 어떤 동작을 할 것인지 객체 형태로 정의한다.
- type 값이 필수이다.
const incrementAction = {type: "INCREMENT" }:
const decrementAction = {type: "DECREMENT" };
Reducer
- Action이 상태를 어떻게 변경할지 명시한다.
function counterReducer(state = 0, action) {
switch (action.type) {
case "INCREMENT":
return state + 1;
case "DECREMENT":
return state - 1;
default:
return state
}
}
Dispatch
- Action을 Store에 전달한다.
store.dispatch(incrementAction);
store.dispatch(decrementAction);
6-1. Recoil
Atom
- 공유 상태(state)의 최소 단위
- 여러 컴포넌트에서 읽고 쓸 수 있음
Selector
- 파생 상태를 만들거나 상태를 가공
useRecoilState
- useState처럼 atom을 읽고 쓰는 훅
useRecoilValue
- 상태를 읽기 전용으로 가져옴
useSetRecoilState
- 상태를 쓰기 전용으로 사용
import {atom} from "recoil";
export const counterState = atom({
key: "counterState",
default: 0,
});
import React from "react";
import { RecoilRoot, useRecoilState } from "recoil";
import { counterState } from "./CounterState";
function Counter() {
const [count, setCount] = useRecoilState(counterState);
return (
<div>
<h2>카운트: {count}</h2>
<button onClick={() => setCount(count + 1)}>+1</button>
<button onClick={() => setCount(count - 1)}>-1</button>
</div>
);
}
function App() {
return (
<RecoilRoot>
<Counter />
</RecoilRoot>
);
}
export default App;