Web Frontend Developer

내가 자주 헷갈리는 개념인 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..

이번 포스팅에서는 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..

최근에 BFF에 대해서 공부를 해 보아야 할 필요성을 느껴서 블로그에 정리해 보았다. BFF에 대한 설명을 하기 전에 먼저 MSA에 대해서 이야기를 해 보려고 한다. MSA MSA는 작은 자율 서비스 컬렉션으로 구성된다. 각 서비스는 독립적이며 제한된 컨텍스트 내에서 단일 비즈니스 기능을 구현해야 한다. 제한된 컨텍스트는 비즈니스 내의 자연스러운 분할이며 도메인 모델이 존재하는 명시적 경계를 제공한다. 마이크로 서비스란 다음과 같은 특성을 가지고 있다. 작고, 독립적이며, 느슨하게 결합되어 있다. 각 서비스는 작은 개발팀이 관리할 수 있다. 서비스를 독립적으로 배포할 수 있다. 팀이 전체 어플리케이션을 빌드한 후 재배치하지 않고도 기존 서비스를 업데이트 할 수 있다. 서비스가 잘 정의된 API를 사용하여..

이번 포스팅에서는 SVG와 Canvas, viewport 그리고 viewbox에 대한 개념을 간단하게 정리해 보려고 한다. 1. SVG란? 바로 찾아볼 수 있는 레퍼런스 중 가장 공신력 있다고 판단되는 Mozilla Developer Network(MDN)에서 SVG에 대해서 다음과 같이 설명하고 있다. SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL 등 다른 웹 표준과도 잘 동작하도록 설계되었습니다. SVG는 달리 말하면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. SVG는..

회사에서 Next.js 프로젝트를 개발하다가 이슈를 만났다. /pages/some...path/[id]/index.tsx 이런 식으로 컴포넌트를 만들었고 이 페이지 url은 id=123인 경우 https://domain..name/some...path/123 이렇게 된다. 라우터 훅을 사용해서 router.push('/some...path/123') 이렇게 처리를 하면 동적 라우팅(dynamic routing) 처리가 되어 문제 없이 해당 페이지로 페이지가 이동한다. 문제는 이 페이지에서 새로고침(refresh)을 할 경우이다. 분명히 컴포넌트가 있는데 새로고침을 하면 403 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가? 분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가..

오늘은 패스트캠퍼스에서 최근에 수강했던 김민태님의 강의를 듣고 학습했던 내용을 정리해 보려고 한다. 시작하기에 앞서서 이 강의는 패캠에서 어떠한 대가도 제공받지 않고 직접 수강하고 내용을 정리하는 것임을 밝힌다. 목차 1. 프론트엔드 개발자가 갖춰야 할 필수 소프트 스킬 한 회사에 종속된 기술을 사용하는 것은 위험하다. e.g. Flash 개발자가 개발만 잘 한다고 좋은 제품이 나오는 것은 아니구나. e.g. 모바일 서비스 어떻게 하면 기술을 쉽게 이해할 수 있을까? e.g. 외계어 스터디 WEB 개방형 스탠다드 웹을 제외하고는 벤더 디펜던시가 있다(iOS, Android, Java-Spring 등) 웹도 지금 100% 개방형 기술이라고 보기는 어렵다. FRONT 제일 앞에 있다. 시각적 요소 중요 EN..