분류 전체보기46 전략 패턴, 팩토리 패턴으로 데이터 처리 로직 리팩토링 안녕하세요! 프론트엔드 개발이라면, 한 번쯤 백엔드에서 받아온 데이터를 그룹화하거나 정렬하는 등의 데이터 처리를 해본 경험이 있을 것입니다. 최근 디자인 패턴을 공부하고 직접 적용하면서, 데이터 처리 관련하여 리팩토링 한 경험을 공유하고자 합니다. 디자인 패턴전략 패턴전략 패턴은 실행 중에 알고리즘 전략을 선택하여 객체 동작을 실시간으로 바뀌도록 할 수 있게 하는 행위 디자인 패턴 입니다. 즉, 어떤 일을 수행하는 알고리즘이 여러가지 일때, 동작들을 미리 전략으로 정의함으로써 손쉽게 전략을 교체할 수 있는, 알고리즘 변형이 빈번하게 필요한 경우에 적합한 패턴입니다. → 여기서, 저는 다양한 그룹핑 및 정렬 알고리즘에 전략 패턴을 적용해 리팩토링을 진행했습니다. 팩토리 패턴객체 생성을 .. 2025. 4. 30. 자료구조 원리 파헤치기 ArrayListArrayList는 Array(배열) 과는 다르게 동적으로 데이터를 저장할 수 있는 자료구조입니다. 특징으로는 다음과 같습니다.연속적인 데이터(중간에 빈공간 x)의 리스트이다.배열을 이용하기 때문에 인덱스를 이용해 요소에 빠르게 접근할 수 있다. 크기가 고정되어 있는 배열과 달리 공간을 늘리거나 줄입니다.배열 공간이 꽉찰 때마다 배열을 복사하는 방식으로 늘리는데, 이때마다 지연이 된다. 데이터를 리스트 중간에 삽입/삭제하는 경우에 중간에 빈 공간이 생기지 않도록 요소들의 위치를 앞뒤로 이동시키기때문에 삽입/삭제 동작은 느리다. 핵심은 '배열을 이용하여 구현한다' 와 크기가 꽉찰 때 리사이즈가 발생되어 기존 용량 2배로 확장된다는 점입니다. (이 때 기존 데이터도 복사함) 코드를 통해 알아.. 2025. 4. 14. React의 Suspense 동작 원리 Suspense란? React.Suspense는 비동기 상태에 따라fallback UI 또는 children 컴포넌트를 동적으로 렌더링할 수 있도록 도와주는 기능입니다. 하위 컴포넌트에서 Promise를 throw하는 것이 핵심입니다. 즉, 자식 컴포넌트가 데이터를 아직 받지 못한 상태라면렌더링 도중 Promise를 던지고, React는 이를 감지해 fallback을 보여줍니다. function wrapPromise(promise) { let status = "pending"; let response; const suspender = promise.then( (res) => { status = "success"; response = res; }, (err) .. 2025. 4. 9. 전역 상태 관리 파헤치기 상태 관리는 왜 필요한가?상태어떠한 의미를 지닌 값애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값 상태 종류UIURLForm서버에서 가져온 값 MVC 패턴 양방향 데이터 바인딩의 모습애플리케이션이 비대해지고 상태도 많아짐에 따라 복잡해짐3번째 View에서 어떤 Model을 사용했는지 추적하기 어려움 Flux 패턴단방향 흐름으로 만든 것이 Flux 패턴action → 액션 타입과 데이터를 정의해 디스패처로 보낸다.dispatcher → 액션을 스토어에 보낸다. 콜백 함수 형태다. 애플리케이션 내에서 단 하나만 존재한다.store → 실제 값과 상태를 변경할 수 있는 메서드를 가지고 있다.view → 컴포넌트 부분, 액션을 호출해서 상태를 업데이트 한다. useState와 useReduce.. 2025. 4. 6. 서버 사이드 렌더링 SPA라우팅에 필요한 대부분의 기능을 브라우저의 자바스크립트에 의존하는 방식최초 내려받은 HTML에서 모든 작업을 처리한다. (오직 하나의 HTML을 가진다.)최초에 로딩해야 할 자바스크립트 리소스가 커지는 단점이 있다.한번 로딩된 이후에는 서버를 거쳐 필요한 리소스를 받아올 일이 적어져 빠르게 쾌적한 페이지 전환이 가능하다. 웹서비스의 새로운 패러다임많은 양의 자바스크립트가 리소스로 넘어오며 코드 규모가 점점 방대해진다.모바일 환경에서는 웹 사이트의 로딩 속도가 느리다.더 나은 웹 서비스 환경에 대해 고민해야 한다. 서버 사이드 렌더링 (SSR)렌더링에 필요한 작업을 모두 서버에서 수행한다.클라이언트 렌더링은 사용자 기기 성능의 영향을 받지만 서버 사이드 렌더링은 비교적 안정적인 렌더링이 가능.. 2025. 4. 4. Debounce과 Throttle Debounce와 Throttle은 함수가 너무 자주 호출하는 것을 방지한다. Debounce이벤트가 연속적으로 발생할 때, 제일 마지막 이벤트가 발생한 후 일정 시간이 지난 후에 함수를 호출한다. export function useDebounce(value, delay) { const [debouncedValue, setDebouncedInput] = useState(value); useEffect(() => { const timerID = setTimeout(() => { setDebouncedInput(value); }, delay) return () => { clearTimeout(timerID); } }, [value, delay]) return d.. 2025. 4. 4. 이전 1 2 3 4 ··· 8 다음
