Next.js 프레임워크는 Data Fetching 시에 SSR(Server-side Rendering), SSG(Static-site Generation), 그리고 Dynamic Routing 등의 세 가지 방법을 제공한다. 각각의 방법에 대해서 하나씩 깊게 알아보고 언제 어떻게 써야 하는지 사용법을 공부해 보고자 한다. SSR(Server-side Rendering) 만약 어떤 페이지에서 getServerSideProps 함수를 호출하면, Next.js는 getServerSideProps에서 데이터를 반환받을 때 마다 이 페이지를 pre-rendering 할 것 이다. export async function getServerSideProps(context) { return { props: {}, //..
내가 자주 헷갈리는 개념인 reflow와 repaint에 대해서 공부한 내용을 정리해 보려고 한다. 브라우저 렌더링 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 여기서 자원은 일반적으로 HTML 문서이지만, 다른 형태의 파일(e. g. 이미지, PDF 등)일 수도 있다. 브라우저는 HTML과 CSS 명세에 따라 HTML 파일을 해석하여 표시하는데 이 명세는 웹 표준화 기구인 W3C에서 정한다. 브라우저의 주요 구성 요소는 다음과 같다. 사용자 인터페이스 : 요청한 페이지를 보여주는 창 제외한 나머지 모든 부분 (e.g. 북마크, 주소 표시줄 등) 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작 제어 렌더링 엔진 : 요청한 콘텐츠 표시. 예를 들..
오늘은 많은 분들이 사용은 하지만 헷갈리기 쉬운 useCallback과 useMemo에 대해서 이야기를 해볼까 합니다. 실제로 웹 프론트엔드 개발자 면접 질문에서 신입/경력 구분없이 단골로 나오는 인터뷰 주제 중 하나이기도 해요. 먼저 React 공식 문서에는 useCallback과 useMemo가 다음과 같이 설명이 나와 있어요. useCallback : Returns a memoized callback. 메모이제이션된 콜백을 반환한다. useMemo : Returns a memoized value. 메모이제이션된 값을 반환한다. 이 문장만 읽어서는 이해가 쉽지가 않습니다. 조금 더 살펴보도록 하겠습니다. useCallback과 useMemo 둘 다 공통적으로 가지고 있는 속성은 메모이제이션(Memoi..
동시성 프로그래밍에서 여러 프로세스 사이의 협조가 필요한데, 프로세스 사이에 타이밍 동기화, 데이터 업데이트 등을 협조적으로 수행하는 처리를 동기 처리(synchronous processing)라 부른다. 3.1 레이스 컨디션 레이스 컨디션(race condition)은 경합 상태라고 불리며, 여러 프로세스가 동시에 공유하는 자원에 접근함에 따라 일어나는 예상치 않은 이상이나 상태를 의미한다. 동시성 프로그래밍에서는 이 레이스 컨디션을 일으키지 않고 올바르게 프로그래밍을 하는 것이 중요한 문제이다. 예를 들어 공유 메모리 상에 있는 변수를 여러 프로세스가 증가시킨다고 가정하자. 이 때 메모리에 읽기와 쓰기를 동시에 수행할 수는 없고, 각각 다른 타이밍에 수행한다고 가정한다. 아래 그림은 프로세스 A, B..
이번 포스팅에서는 React의 내재된 상태관리 API인 Context에 대한 사용 방법을 알아보려고 한다. 리액트에서 데이터는 일반적으로 props, state로 관리하며 부모 컴포넌트에서 자식 컴포넌트로 흐르게 된다. 이 부분에 대해서는 이번 글에서는 길게 설명하지는 않겠다. 예를 들어 E 컴포넌트에서 state를 만들고 그걸 prop drilling 방식으로 G에 내려 주어서 사용하는 식이다. 그런데 때에 따라서는 정말 많은 컴포넌트에서 데이터를 써야 할 일이 있을 수도 있다. 위의 그림처럼 많은 컴포넌트에서 데이터를 사용해야 한다면, 사실상 전역으로 사용한다고 보아도 무방하다. 이 경우는 Root Component에서 state를 만들고 각각 자식 컴포넌트로 props 를 내려주는 식으로 사용을 해..
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 MVC(Model-View-Controller) 패턴은 웹 어플리케이션에서 가장 많이 쓰이는 디자인 패턴 중 하나이다. MVC 패턴은 개발자들이 어플리케이션을 관심사에 따라 레이어 분리를 하도록 지향한다. 이는 어플리케이션을 확장하고, 테스트하고 유지하는데 필요한 노력의 크기를 줄여준다. 사용자가 컨트롤러를 통해 모델을 변화시키면 뷰가 업데이트 된다. 비즈니스 로직의 경우 모델에 있어야 하지만, 컨트롤러에 있을 수도 있고 뷰에 있을 수도 있다. Model : 모델은 비즈니스 로직을 나타내고 클래스의 집합으로 특징된다. 이 부분은 데..
1.1 프로세스 존재론적으로 설명하는 물질에는 사물과 프로세스가 있다. 사물은 공간상에서 넓이를 갖지만 시간적인 넓이는 갖지 않는 것이며, 프로세스는 공간과 시간의 넓이를 모두 갖는 것이다. 즉, 사물은 특정한 시점에 전체가 존재하지만 프로세스는 특정한 시점에 일부만 존재한다. 다만, 이 책에서는 어떤 계산을 수행하는 추상적인 계산 실행 주체라는 계산과 관련된 프로세스만 가리킨다. 이 책에서는 프로세스를 다음과 같이 정의한다. 프로세스란 계산을 실행하는 주체를 가리키며 크게 다음 네 가지 상태를 변경하면서 계산을 진행한다. 실행 전 상태 : 계산을 실행하기 전의 상태. 실행 상태로 전이할 수 있다. 실행 상태 : 계산을 실행하고 있는 상태. 대기 상태 또는 계산 종료 상태로 전이할 수 있다. 대기 상태 ..
