전체 글

전체 글

    [웹 프론트엔드 인터뷰] #4. useCallback과 useMemo는 언제 어떻게 사용하나요?

    오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..

    [동시성 프로그래밍] Ch3. 동기 처리 1 (상)

    동시성 프로그래밍에서 여러 프로세스 사이의 협조가 필요한데, 프로세스 사이에 타이밍 동기화, 데이터 업데이트 등을 협조적으로 수행하는 처리를 동기 처리(synchronous processing)라 부른다. 3.1 레이스 컨디션 레이스 컨디션(race condition)은 경합 상태라고 불리며, 여러 프로세스가 동시에 공유하는 자원에 접근함에 따라 일어나는 예상치 않은 이상이나 상태를 의미한다. 동시성 프로그래밍에서는 이 레이스 컨디션을 일으키지 않고 올바르게 프로그래밍을 하는 것이 중요한 문제이다. 예를 들어 공유 메모리 상에 있는 변수를 여러 프로세스가 증가시킨다고 가정하자. 이 때 메모리에 읽기와 쓰기를 동시에 수행할 수는 없고, 각각 다른 타이밍에 수행한다고 가정한다. 아래 그림은 프로세스 A, B..

    React Context 올바르게 사용하기

    이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..

    Apollo Client에서의 Caching에 대하여

    Apollo Client란 나는 회사에서 React + GQL 기반의 웹 프로덕트를 많이 만들고 있고, 그 때 데이터를 관리 도구로 Apollo Client를 사용한다. 많은 라이브러리 중에서 Apollo Client를 사용하는 이유는 캐싱이 잘 되어있고, 데이터를 선언적으로 접근하기 때문에 적은 코드로 생산성 높은 개발을 할 수 있다는 장점을 가지고 있다. Apollo Client에서 캐싱은 정규화가 되어 있어서 여러 컴포넌트에서 데이터의 일관성을 유지 시켜준다. Apollo Client의 주요 특징 중 하나는 로컬 인메모리 정규화된 캐시를 사용한다는 것이다. import { ApolloClient, InMemoryCache } from '@apollo/client'; const client = new..

    MVC, MVP 그리고 MVVM 패턴에 대하여

    어플리케이션을 개발할 때 고민해야 할 MVC, MVP, MVVM 패턴에 대해서 조금 더 명확하게 공부를 해야 할 필요성을 느껴서 정리해 보는 글을 작성해 보려고 한다. MVC MVC(Model-View-Controller) 패턴은 웹 어플리케이션에서 가장 많이 쓰이는 디자인 패턴 중 하나이다. MVC 패턴은 개발자들이 어플리케이션을 관심사에 따라 레이어 분리를 하도록 지향한다. 이는 어플리케이션을 확장하고, 테스트하고 유지하는데 필요한 노력의 크기를 줄여준다. 사용자가 컨트롤러를 통해 모델을 변화시키면 뷰가 업데이트 된다. 비즈니스 로직의 경우 모델에 있어야 하지만, 컨트롤러에 있을 수도 있고 뷰에 있을 수도 있다. Model : 모델은 비즈니스 로직을 나타내고 클래스의 집합으로 특징된다. 이 부분은 데..

    [동시성 프로그래밍] Ch1. 동시성과 병렬성

    1.1 프로세스 존재론적으로 설명하는 물질에는 사물과 프로세스가 있다. 사물은 공간상에서 넓이를 갖지만 시간적인 넓이는 갖지 않는 것이며, 프로세스는 공간과 시간의 넓이를 모두 갖는 것이다. 즉, 사물은 특정한 시점에 전체가 존재하지만 프로세스는 특정한 시점에 일부만 존재한다. 다만, 이 책에서는 어떤 계산을 수행하는 추상적인 계산 실행 주체라는 계산과 관련된 프로세스만 가리킨다. 이 책에서는 프로세스를 다음과 같이 정의한다. 프로세스란 계산을 실행하는 주체를 가리키며 크게 다음 네 가지 상태를 변경하면서 계산을 진행한다. 실행 전 상태 : 계산을 실행하기 전의 상태. 실행 상태로 전이할 수 있다. 실행 상태 : 계산을 실행하고 있는 상태. 대기 상태 또는 계산 종료 상태로 전이할 수 있다. 대기 상태 ..

    [Ringle] 튜터 피드백 정리 (November 2021)

    November/05/2021 (8.75) When I get hard and difficult -> When things get difficult They have to start from basic -> they have to start from scratch I can speak my own voice -> I can speak my mind / I have my own voice I graduated Korea University -> I graduated from Korea University After those kind of experience -> after that kind of experience / after those kinds of experiences November/19/202..

    [알고리즘 문제 해결 전략] Ch03-3. 알고리즘 설계 패러다임 (동적 계획법)

    8 동적 계획법 8.1 도입 동적 계획법(dynamic programming)이라는 말은 최적화 문제를 연구하는 수학 이론에서 왔으며, 우리가 전산학 전반에서 일반적으로 사용하는 동적(dynamic), 혹은 프로그래밍(programming)이라는 단어와는 아무런 관련이 없다. 중복되는 부분 문제 동적 계획법은 큰 의미에서 분할 정복과 같은 접근 방식을 의미한다. 동적 계획법을 사용하는 알고리즘들 또한 처음 주어진 문제를 더 작은 문제들로 나눈 뒤 각 조각의 답을 계산하고, 이 답들로부터 원래 문제에 대한 답을 계산해 내기 때문이다. 동적 계획법과 분할 정복의 차이가 발생하는 부분은 문제를 나누는 방식이다. 동적 계획법에서 어떤 부분 문제는 두 개 이상의 문제를 푸는데 사용될 수 있기 때문에, 이 문제의 ..