프론트엔드

프론트엔드

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

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

    React Context 올바르게 사용하기

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

    Backend For Frontend는 무엇인가?

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

    [Troubleshooting] Next.js에서 dynamic routing 새로고침 에러

    회사에서 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 에러가 뜨면서 접근을 할 수가 없다고 나오는 것이 아닌가? 분명히 페이지는 처음에 잘 나타났는데, 이후에 새로고침을 하면 페이지가..

    [패캠] The RED : 김민태의 React와 Redux로 구현하는 아키텍처와 리스크 관리

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

    [이펙티브 타입스크립트] 2장 타입스크립트의 타입 시스템

    아이템 6. 편집기를 사용하여 타입 시스템 탐색하기 편집기를 사용하면 어떻게 타입 시스템이 동작하는지, 그리고 타입스크립트가 어떻게 타입을 추론하는지 개념을 잡을 수 있다. 아이템 7. 타입의 값들이 집합이라고 생각하기 런타입에 모든 변수는 자바스크립트 세상의 값으로부터 정해지는 각자의 고유의 값을 가진다. 코드가 실행되기 전, 타입스크립트가 오류를 체크하는 순간에는 타입을 가지고 있다. 가장 작은 집합은 아무 값도 포함하지 않는 공집합이며, 타입스크립트에서는 never 타입이다. never 타입으로 선언된 변수의 범위는 공집합이기 때문에 아무런 값도 할당할 수 없다. 그 다음으로 작은 집합은 한 가지 값만 포함하는 타입이다. 이들은 타입 스크립트에서 유닛(unit) 타입이라고도 불리는 리터럴(liter..

    [이펙티브 타입스크립트] 1장 타입스크립트 알아보기

    아이템 1. 타입스크립트와 자바스크립트 관계 이해하기 타입스크립트는 문법적으로 자바스크립트의 상위집합. → 자바스크립트 프로그램에 문법 오류가 없다면, 유효한 타입스크립트 프로그램이라고 할 수 있다. → 자바스크립트 프로그램에 어떤 이슈가 존재한다면 문법 오류가 아니라도 타입 체커에게 지적당할 가능성이 높다. → 문법의 유효성과 동작의 이슈는 독립적인 문제 타입 시스템의 목표 중 하나는 런타임에 오류를 발생시킬 코드를 미리 찾아내는 것이다. → 그러나 타입 체커가 모든 오류를 찾아내지는 않음 → 타입 체커를 통과하면서 런타임 오류를 발생시키는 코드는 충분히 존재. 타입스크립트 타입 시스템은 자바스크립트의 런타임 동작을 '모델링' 한다. const x = 2 + '3'; // 정상, string const..

    [TIR, Today I Read] W40 (9/27 ~ 10/1)

    회사에서 업무를 하면서 공부해야 하는 것들이 계속해서 생겨난다. 그러한 주제들을 중심으로 글을 읽었다. 월 : 변경에 유연한 컴포넌트 변경에 유연한 컴포넌트 이번 포스트에서는 변경에 유연하게 대응할 수 있는 컴포넌트에 대해 이야기해보려고 한다 TL;DR 컴포넌트는 데이터를 중심으로 추상화한다. 일반적인 인터페이스로 컴포넌트를 디자인한다. 변 jbee.io 화 : node_modules로부터 우리를 구원해 줄 Yarn Berry node_modules로부터 우리를 구원해 줄 Yarn Berry 토스 프론트엔드 레포지토리 대부분에서 사용하고 있는 패키지 매니저 Yarn Berry. 채택하게 된 배경과 사용하면서 좋았던 점을 공유합니다. toss.tech 수 : MVVM 패턴 MVVM 패턴 나의 첫 디자인 패..