Tree Shaking | splitChunks | Dynamic Imports

Webpack Tree Shaking & Dynamic Import

Vue Atomic 컴포넌트를 구현하였다.

Vue Atomic Design

JWT 는 JSON Web Token의 약자로 클라이언트와 서버, 서비스와 서비스 사이 통신 시 권한 인가(Authorization)를 위해 사용하는 토큰이다.

express에서 JWT사용하기

Intersection 타입은 여러 타입을 하나로 결합한다. 타입 간에 &를 사용하여 정의한다.

Typescript Union & Intersection 타입

mongoose는 MongoDB ODM(Object Document Mapping)중 하나로써, MongoDB Document를 자바스크립트 Object에 매칭시켜주는 역할을 한다.

express에서 mongoose 사용하기

k8s ingress의 superset에 해당하는 Kubernetes Gateway API에 대해 알아본다.

k8s gateway API

VSCode 의 Manage context for AI 문서를 통해 Copilot 에 질의를 할 때 좀 더 적절한 컨텍스트를 제공하기 위한 도구들을 알아본다.

VSCode Copilot chat 활용

팀에서 여러개의 모노레포를 하나의 대형 모노레포로 통합하는 작업을 진행하고 있다. 이를 통하여 기존에 같은 팀에서 여러 레포별로 중복된 설정들과 일관되지 않은 부분들을 통합하고자 한다.

여러개 모노레포의 통합 - 하나의 대형 모노레포로의 전환

nextjs 서버를 k8s 를 통해 운영하고 있는데, 해당 nextjs 서버를 node exporter 를 통해 모니터링 하는 방법에 대해 알아본다.

k8s 에서 node-exporter 를 통한 nextjs 서버 모니터링

현재 팀에서 여러개의 모노레포 프로젝트를 하나의 커다란 모노레포 프로젝트로 통합하는 작업을 진행하고 있다. 이 과정에서 어떤 브랜치 전략이 적합할지에 대해 고민하게 되었고, 대안 중 하나인 Trunk-based Development 에 대해 알아 본다.

Trunk-based Development

cascade layer 는 css 우선순위를 명시적으로 지정할 수 있게 지원하는 css 스펙으로 현재 대부분 브라우저에서 지원하고 있다.

SCSS module 에 cascade layer 적용하기

CSS로 구현할 수 없는 말줄임 처리를 Javascript로 구현한다.

Truncate Text 구현하기

React Fiber에서 lane 모델이 도입된 이유와 이를 통해 해결하고자 하는 것이 무엇인지 알아보자.

React Fiber 알아보기 2 (Lane 모델 도입 이유)

Figma Plugin 으로 할 수 있는 것들, How Plugins Run, Figma Plugin 만들어보기

figma plugin 개발하기

Fiber reconciler 는 위의 Stack reconciler 가지고 있던 취약점을 보완하기 위해 만들어졌다.

React Fiber 알아보기

언제, 어떤 부분을 테스트 해야 하나?

FE Unit Test Guide

App of apps, 말 그대로 앱들의 앱이라는 의미로 여러개의 application을 하나의 application으로 관리하는 패턴을 말합니다.

ArgoCD App of Apps 패턴

Next.js 캐싱을 통해 웹서버 성능을 개선하기 위한 방법들을 알아본다.

Next.js 캐싱

Next.js 와 CDN, 그리고 standalone 과 custom server

인그레스는 위와 같은 기능들에 대해 정의해둔 규칙들을 정의해둔 리소스이고, 이를 실제 동작하기 위해서는 인그레스 컨트롤러가 필요하다.

Ingress Controller

소나큐브는 20개 이상의 프로그래밍 언어에서 버그, 코드스멜, 보안 취약점을 발견할 목적으로 정적 코드 분석을 하여 지속적인 코드 품질 검사용 오픈소스 플랫폼이다.

github action 을 통해 monorepo 프로젝트 sonarqube 연동하기 (with nx, pnpm)

HTTP Protocol 1.1 버전과 함께 브라우저 connection 제한 관련 내용에 대해 알아보고, HTTP 2.0 및 HTTP 3.0 버전의 차이점에 대해 알아본다.

HTTP Protocol 과 browser connection 개수

docker compose는 단일 서버에서 여러개의 컨테이너를 하나의 서비스로 정의해 컨테이너 묶음으로 관리할 수 있는 작업환경을 제공하는 관리도구이다.

Docker compose

Docker Multi-stage builds 를 활용하여 Docker 이미지 크기를 줄일 수 있고, stage를 병렬로 실행하여 빌드 속도를 향상 시킬 수도 있다.

Docker Multi stage builds 와 Docker Layer Caching

프로젝트에서 사용중인 Redux에 여러 단점 들이 있어서 이를 대체하기 위한 react-query, zustand 를 알아보았다.

react query & zustand 로 상태관리 하기

웹뷰를 쓰는 이유, 앱과 웹이 통신하는 방법 등 정리

Webview 사용에 대한 내용

서비스 중단없이, 한번에 여러대의 서버 모두 새 버전으로 배포하기 위해서 Blue/Green 배포를 고려하였다.

k8s에서 Blue/Green 배포 전략

HOC는 React에서 컴포넌트 로직을 재사용하기 위한 패턴이다.

React Higher-Order Components (HOC) 유용하게 사용하기

프로젝트에서 CI 과정 앞단의 Lint 에서 이미 수행 하고 있기때문에 중복 과정이라서 유닛 테스트시에는 full type-checking 과정을 제거하여 jest test 속도를 개선하였다.

jest test가 느릴 때 개선방법

Web Crypto API는 웹 애플리케이션에서 암호화 및 복호화 작업을 수행하기 위한 JavaScript API다.

Web Crypto 사용

이는 구조적 타입 시스템에서 의도된 동작입니다. 타입 A가 B의 슈퍼셋인 경우(A는 B의 모든 프로퍼티를 포함) 타입 A를 B에 할당할 수 있습니다.

(번역)왜 타입스크립트는 Object.keys의 타입을 적절하게 추론하지 못할까?

안전한 개발을 위해 일반적으로 조심해야 할 부분을 설명합니다.

Secure Coding - Others

컨텍스트에 기반해 적절하게 출력 인코딩이 이루어지지 않으면 XSS나 SQL 삽입의 공격이 발생합니다. 출력 인코딩으로 이에 대한 대책을 알아봅니다.

Secure Coding - Output Encoding

웹 애플리케이션 보안의 관점에서 말하면 사용자 입력이나 그와 관련된 데이터를 확인하지 않고 이용하는 것은 그 자체로 보안에 위협이 됩니다.

Secure Coding - Input Validation

zero width space 는 존재하지만 사람눈에는 보이지 않는 문자라고 한다.

zero width space 문자 대응하기

touch-action 속성을 통해 어떤 요소 내에서 브라우저가 처리할 터치 액션의 목록을 지정할 수 있다.

CSS touch-action 알아보기

Turborepo 참고

frontend에서 여러 step 들을 통해 상태를 수집하고, 결과 페이지를 보여주는 다음과 같은 "설문조사" 패턴이 있다.

Stepper 구현

웹 개발자로써 ChatGPT 를 사용할 때 유용하게 활용할 수 있는 Prompt 정리

ChatGPT Prompts for Web Developers

Sentry를 통해 긴급한 에러가 발생하거나 에러개수가 급증한다거나 할 때 메일, 슬랙등을 통해 알림을 받을 수 있다.

Sentry Alerts 설정하기

L7 Load Balancer는 L7(Application Layer) 위에서 동작하기 때문에 IP, Port 이외에도 URI, Payload, Http Header, Cookie 등의 내용을 기준으로 부하를 분산한다.

Load Balancer 알아보기(2) - L4, L7 로드밸런서 그리고 nginx

DNS를 기반으로 동작하는 로드밸런서 GSLB(Global server Load Balancing)에 대해 알아본다.

Load Balancer 알아보기(1) - GSLB(Global server Load Balancing)

DFS 문제 풀이

SCSS 문법 정리

SonarQube를 통한 정적 코드 분석, 설치 방법, GitHub와 연결하기

SonarQube로 정적 코드 분석하기

k8s 강의 연습문제 풀기

webpack v4 -> v5, storybook v6 -> v7 migrate

Webpack5, Storybook7 로 migration 하기

Generic으로 타입을 넣어주는 방식은 Compile Time에서 에러가 잡히지 않기 때문에 Run Time에서 예상치 못한 문제가 발생할 수 있다. 이러한 문제를 Schema Validation Layer 를 추가하여 해결해본다.

Schema Validation Layer (with zod)

Nx는 모노레포 구성을 위한 다양한 개발 도구를 제공하고 Angular, React와 같은 프런트엔드 프레임워크 기반의 개발 환경 구성뿐 아니라 Express, Nest.js와 같은 백엔드 기술 기반의 개발까지 폭넓게 지원하고 있다. 이뿐만 아니라 workspace 생성 시 Cypress, Jest 등을 기반으로 한 테스트 환경까지 설정해주기 때문에, 초기 모노레포 개발 환경 구축 비용을 크게 줄여준다.

monorepo nx 사용

쿠버네티스(Kubernetes)는 컨테이너화 된 애플리케이션의 대규모 배포, 스케일링 및 관리를 간편하게 만들어주는 오픈 소스 기반 컨테이너 오케스트레이션(Container Orchestration) 도구다.

Kubernetes 개념 정리

kubeconfig 파일은 k8s의 설정 파일로, kubectl 명령어로 apiserver에 접근할 때 사용할 인증정보를 담고 있다.

Kubernetes 커맨드

Docker 홈페이지에 접속하여 자신의 OS에 맞는 Docker를 내려 받아 설치한다.

Docker를 사용하여 MongoDB 설치하고 authentication 설정하기

서로에게 칭찬하는 문화를 만들기 위해 Hey! Taco와 같은 역할을 하는 Slack Bot을 개발하게 되었다.

Slack Bot 개발기 (with hubot)

performance.timing 브라우저 내장 API를 사용하여 페이지 로드 완료 까지의 구간별 이벤트 시간을 확인할 수 있다.

javascript로 performance 측정하기

오류를 탐지하기 위한 FE 모니터링 툴인 Sentry가 제공하는 기능과 사용방법에 대해 알아본다.

Sentry로 FE 에러 추적하기

Chrome 에서 performance를 측정할때, network 영역에서 보여주는 내용을 살펴본다.

Chrome Performance - network 분석하기

staleTime은 얼마나 오래 response를 fresh(or not stale)한 것으로 여길지를 정의한다. response가 fresh 하다면 새로운 request를 보낼 필요가 없다.

React Query에서 cacheTime과 staleTime의 차이

Headless라는 개념은 스타일링을 담당하게 되는 부분을 과감하게 제외하고 상태와 관련된 부분만을 다루자고 이야기한다.

Headless UI Library

useImperativeHandle은 ref를 사용할 때 부모 컴포넌트에 노출되는 인스턴스 값을 커스텀할 수 있게 한다.

useImperativeHandle 사용하기

monorepo 구축 & yarn berry 참고

변경에 유연한 컴포넌트를 만들기 위해서는 컴포넌트를 적절하게 분리해야 한다. 이를 위한 방법으로 다음 세가지를 정리한다.

변경에 유연한 컴포넌트 만들기

dot notation export 패턴을 사용하여 modal component를 구현한 예제를 살펴본다.

React Component 합성과 Dot Notation Exports

infer는 타입 변수를 선언하면서 패턴 매칭되는(추론된) 타입을 저장한다.

Conditional Type과 infer

Typescript의 Exclude, Extract, NonNullable, Parameters and ReturnType 유틸리티 타입은 내부적으로 어떻게 구현되어 있을까?

Conditional Types

Typescript의 Partial, Required, Readonly and Pick 유틸리티 타입은 내부적으로 어떻게 구현되어 있을까?

Mapped Types

dom-to-image는 html 스크린 캡쳐가 가능한 라이브러리이다. 이를 사용하면서 IOS에서만 이미지 화질이 떨어지는 이슈를 겪었는데, 이에 대한 원인과 수정방법을 정리하였다.

dom-to-image 이미지 해상도 이슈 해결하기

React Server Component Demo를 사용해보고 어떻게 동작하는지 확인해본다.

React Server Component Demo 사용해보기

모노레포란 두 개 이상의 프로젝트가 동일한 레포지토리에 저장되는 소프트웨어 개발 전략이다.

monorepo 개념

Power of generator

redux-saga-test-plan은 사가(Saga) 제너레이터 함수를 테스트할 때, 실제 구현 로직과 테스트 코드가 갖는 커플링, 그리고 매뉴얼 한 테스트에 대한 문제를 해결해준다.

Redux Saga 테스트하기

preload를 통한 페이지 로딩 속도 개선

preload 적용 관련 참고내용

테크 리더는 다양한 직책을 수행한다. 아키텍트, 프로젝트 관리자, 소프트웨어 엔지니어, 멘토 및 팀원 역할을 동시에 수행한다.

테크리더의 책임

리액트 커스텀 훅을 테스트하기 위해서 여러 가지 방법을 사용할 수 있다. 그중에 testing-library를 사용하여 진행한다.

React Testing Library 로 React Hook 테스트하기

React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리다.

React Testing Library 로 React 컴포넌트 테스트하기

null과 undefined 둘 중 하나만 사용해야 한다. 그 중에 버려야 한다면 null을 버려야 한다. 왜냐하면 js엔진이 undefined를 사용하고 있기 때문이다.

stop using null

transition으로 애니매이션 적용시 display:none 이 시작설정에 있는 경우, transition 애니매이션이 동작하지 않는다.

display none 요소 animation 적용하기

Recoil은 기존의 상태 관리 라이브러리들과 무엇이 다른가?

Recoil (React 상태 관리 라이브러리)

추가적인 ci/cd툴을 사용하지 않고 깃허브 하나로 버전관리부터 테스트 배포까지 가능하다.

github actions 사용하기

barrel 파일을 통해 외부에 공개할 기능을 관리하고 외부에서 깔끔하게 import 할 수 있다. 하지만 re-export가 때로는 성능 문제를 야기할 수 있다.

barrel 파일을 통한 re-export와 performance

decorator는 자바스크립트 함수로 클래스 자체 또는 클래스의 field, method를 수정하는데 사용된다.

Javascript decorator 사용하기

GTM container에 어떤 Tag를 추가했는지에 따라 페이지 로드속도에 영향을 줄 수 있다. GTM Tag 설정시 어떤 과정을 거쳐야 하고 개선점에 대해 알아본다.

Google Tag Manager vs Page Speed

우리가 사용하는 Store가 상당 부분 API 통신을 위한 코드들로 비대해진다. API 통신과 Server Side 상태 관리를 위한 더 나은 방법은 없을까?

Store에서 비동기 통신 분리하기 (with React Query)

RSC는 무엇이고 왜 등장하게 되었는지, 어떻게 사용하는지 살펴본다.

React Server Component(RSC) 소개

잘 모를 수도 있는 크롬 개발자 도구 팁 정리

크롬 개발자 도구 팁

코드 리팩토링, DOM 엘리먼트 구조 변경등이 발생한다면, 작성해놓은 UI 테스트 결과에 영향을 미칠 수 있다.

변경에 유연한 selector 사용하기 (UI 테스트)

Prefetch는 브라우저가 idle time에 미래에 사용될 리소스들을 미리 다운로드 받아서 캐시하여, 미래에 방문할 페이지의 로딩 속도를 빠르게 해주는 기능이다.

Prefetch Component in React

storyshot은 storybook 공식 애드온으로 작성된 story에 대한 html형태의 스냅샷을 생성하고, 이전 스냅샷과 비교한다.

storybook addon storyshot 활용

cypress code coverage 측정이 어떻게 이루어지고, 이를 위한 설정 과정을 정리하였다.

cypress code coverage 측정

Intersection Observer API는 Target Element가 Viewport내에 노출되었는지 여부를 구독할 수 있는 API이다.

Intersection Observer 를 사용한 Infinite Scroll

useEffect와 useLayoutEffect를 비교해보고, 언제 useLayoutEffect를 사용해야 하는지 알아본다.

useEffect vs useLayoutEffect

Tree shaking 개선, 자원 외부화로 번들 사이즈 감소, Dynamic Import와 모듈 chunk, Promise.all 조합

Web App 성능 개선 참고

functional extention 유틸 및 unit test 구현

functional extention 유틸

Javascript 코딩 컨벤션을 정리하였다.

Javascript 코딩 컨벤션

IOS 12에서 Input focus시 Keyboard가 나오면서 viewport를 위로 올린후에, input blur되면 Keyboard가 사라지면서 viewport가 원래 위치로 내려와야 하는데, 내려오지 않는 문제가 있다.

IOS 12, 13 에서 Keyboard가 사라질 때 viewport가 다시 내려오지 않는 문제 대응하기

React Query 에서 지원하는 mutations 사용방법에 대한 정리

React Query의 mutations 사용하기

react query 에서 지원하는 infinite query 사용방법에 대한 정리

React Query의 infinite query 사용하기

React에서 Page 단위로 JS 번들을 분리할 때 다음과 같이 Page 컴포넌트 번들의 lazy loading을 구현한다.

React.lazy 실패 시 retry하기

logger 구현

Performance optimizations 를 위한 useCallback, useMemo 사용은 공짜가 아니다.

언제 useMemo와 useCallback을 사용해야 하나

Typescript 코딩 컨벤션을 정리하였다.

Typescript 코딩 컨벤션

Polymorphic component (with typescript)

SWR이란? | useSWR 사용 | 그 밖에...

useSWR 사용

useRef는 일반적인 declarative한 React data flow에서 벗어나서 DOM 엘리먼트에 접근할 수 있는 방법을 제공하여 imperative하게 DOM을 제어할 수 있게 해준다.

useRef를 활용한 React App 성능 개선

코딩 컨벤션 (React + Typescript)

Webpack을 통한 빌드시 App의 Config를 설정하는 방법에 대하여 정리하였다.

All Posts

Webpack Tree Shaking & Dynamic Import

Vue Atomic Design

express에서 JWT사용하기

Typescript Union & Intersection 타입

express에서 mongoose 사용하기