전체 글18 Playwright 를 이용한 E2E 테스트 현재 진행하는 출시를 앞둔 e-commerce 프로젝트에서 E2E 테스트를 맡아서 진행하게 되었다. 이 프로젝트를 몇 달 째 진행중이지만, 시작하는 초반에도 유닛 테스트 또는 E2E 테스트에 대한 논의가 이루어졌지만 도입하지 않기로 했었다. 왜냐하면 프로젝트 시작할 때, 스타트업이 다들 그렇듯이, 기획이 확실하게 정해지지 않아서 전체 및 세부적인 기능 및 디자인 등이 계속 요동쳤기 때문이다. 게다가 비즈니스 팀에서는 빠른 출시를 원했다. 그리고 실사용자를 위해 베타 테스트를 프로덕트 출시 이전에도 주기적으로 배포하고 있었다. 그러한 상태에서 유지보수가 필요한 테스트까지 도입되면 기획이 변경될 때마다 테스트도 이에 맞춰줘야 했고, 이러다보면 개발 속도는 최소 1.5배 정도는 더 걸렸을 것이다. 이러한 상.. 2025. 5. 5. Polyfill Polyfill 은 최신 웹 기능을 지원하지 않는 구형 브라우저에서도 그 기능을 사용할 수 있게 해주는 JavaScript 코드 또는 플러그인을 의미합니다. 즉, Polyfill 은 최신 기능을 구형 브라우저 환경에 맞춰주는 보완 코드입니다. Polyfill 이 필요한 이유웹 표준과 JavaScript 는 꾸준히 발전하면서 새로운 기능과 API가 추가되고 있습니다. 예를 들어, 2015년에 JS의 메이저 업데이트로 추가된 ES6 등이 있습니다. 이 중 Promise, fetch, Array.prototype.includes 등은 오래된 브라우저에서는 지원되지 않습니다. 더 정확히 말하면 구형 브라우저의 엔진이 해당 기능을 지원하지 않기 때문에 위와 같은 코드를 만나면 코드가 제대로 실행되지 않거나, 오.. 2024. 10. 1. 번들러와 기능 번들러는 무엇인가?번들러는 JavaScript, CSS, HTML, 이미지 등 웹 어플리케이션을 구성하는 다양한 파일과 모듈을 최적화된 파일로 결합하는 도구입니다. 이 결합 과정을 번들링이라고 하며, 이를 통해 서버 요청 수를 줄이고, 파일 크기를 최소화하여 웹 페이지의 로딩 속도를 개선하는 등 개발 과정에서 매우 중요한 역할을 합니다. 번들러의 탄생배경번들러가 탄생한 배경에는 웹 개발의 복잡성과 성능 문제가 크게 작용했습니다. 초기 웹 개발에서는 수많은 스크립트와 라이브러리가 단일 페이지에 존재했고, 이는 유지보수와 성능 최적화를 어렵게 만들었습니다. 가령, 웹 페이지 개발을 위해 처음에는 100 줄의 JS 코드로 시작했지만, 시간이 지나면서 기능이 추가됨에 따라 코드는 계속해서 증가했습니다. 프로젝트.. 2024. 9. 20. 리액트 상태 관리 전략 - Context API 와 상태관리 라이브러리 리액트 애플리케이션을 개발하면서 가장 중요한 부분 중 하나는 상태 관리 전략을 선택하는 것이다. 이 중에는 리액트가 제공하는 Context API 부터, Redux, Recoil, MobX 등 다양한 라이브러리가 이러한 필요를 충족시키기 위해 존재한다. 각각의 도구는 고유의 장단점이 있고 사용하는 방법이 있기에, 프로젝트의 요구 사항에 따라 올바른 도구를 선택하는 것이 중요하다. 리액트의 Context API 와 Redux로 대표되는 상태 관리 도구를 비교하여, 어떤 상황에서 어떤 도구를 사용하는 것이 가장 효과적인지 알아보자. Context API 기본 개념리액트 Context API 는 컴포넌트 트리 전체에 걸쳐 데이터를 전역적으로 공유할 수 있는 메커니즘을 제공한다. 이를 통해 특정 데이터를 여러 .. 2024. 8. 9. React - useQuery 를 사용할 때 에러가 발생한다면..? 리액트 쿼리(React-Query)는 리액트 애플리케이션에서 서버 상태를 효과적으로 관리하고 캐싱할 수 있도록 도와주는 라이브러리이다. 서버에서 데이터를 가져오고, 캐시하고, 동기화하는 작업을 단순화하며, 데이터를 더 쉽게 관리할 수 있게 해준다. useQuery 를 사용해서 서버와 통신을 하다가 에러가 발생하면 어떤 현상이 생길까? 그리고 이 에러를 어떻게 처리할 수 있을지 알아보자. 아래는 기본적인 useQuery 사용예시이다. `getUserInfo` 함수를 이용해 유저 정보를 요청하고, useQuery를 이용해서 받아온 데이터를 필요한 곳에서 사용할 수 있다. const getUserInfo = async (id: string) => await api.get('/user').json(); /.. 2024. 7. 11. 로컬 스토리지 (Local Storage) | Web Storage API 로컬 스토리지는 Web Storage API 가 제공하는 두 개의 저장소(sessionStorage, localStorage) 중 하나로, 사용자의 로컬 컴퓨터에 데이터를 저장할 수 있게 해주는 기능이다. 로컬 스토리지는 클라이언트 측 저장소 중 하나이며, 브라우저 탭을 닫거나 컴퓨터를 재부팅해도 데이터가 사라지지 않는다는 특징이 있다. 로컬 스토리지의 주요 특징 1. 영구성: 브라우저를 닫더라도 데이터가 유지된다. 사용자가 명시적으로 데이터를 삭제하거나 브라우저 캐시를 지우지 않는 한 데이터는 남아 있다. 2. 용량: 대부분의 브라우저는 도메인 당 약 5MB 의 저장 공간을 제공한다. 3. 보안: 로컬 스토리지에 저장된 데이터는 동일한 도메인에서만 접근할 수 있다. 이는 보안 문제를 어느 정도 방지하.. 2024. 7. 6. Suspense in React | 리액트 서스펜스 리액스 Suspense 란?비동기 작업을 보다 효과적으로 관리하여 사용자 경험을 개선하는 기능을 가지고 있다. 서스펜스를 이용하면 컴포넌트에서 필요한 데이터가 준비될 때까지 렌더링을 지연(suspense)시킬 수 있다. 리액트 16.6 버전에서 처음 도입되었다. 주로 아래 두 기능을 위해 사용되지만 이미지, 스크립트 또는 다른 비동기 작업을 위해서도 사용될 수 있다.1. 코드 분할(Code split)2. 서버 API 호출과 같은 데이터 가져오기(Data fetching) 코드 분할 시 Suspense 사용 예import React, {suspense, lazy} from 'react';const LazyComponent = lazy(() => import ('./lazy/component');fun.. 2024. 6. 22. ErrorBoundary in React || 리액트 에러 바운더리 기본적인 리액트 웹앱에서 렌더링시 에러가 발생한 경우, 리액트는 에러가 발생한 UI를 스크린에서 제거한다. JS에서 에러는 호출자(caller) 방향으로 전파된다. 즉 콜 스택의 아래 방향(실행 중인 실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파되기 때문에, 리액트에서도 마찬가지로 하위 컴포넌트에서 에러가 발생하면 에러가 상위 컴포넌트까지 전달되고, 에러 바운더리가 없는 경우에는 사실상 앱 전체가 스크린에서 제거되면서 흰 화면이 나타나게 된다. 이 때 에러 바운더리를 사용하면 상위에 전파되는 에러를 적절하게 끊을 수 있고 앱 전체가 보이지 않게 되는 불상사를 막을 수 있다. ErrorBoundary 란?React에서 'ErrorBoundary' 는 컴포넌트 하위 트리 내에서 발.. 2024. 6. 17. find() - Lodash 유틸함수 직접 구현 | TypeScript 복잡한 형태를 처리할 수 있는 Lodash 의 find를 구현하기 전에, 가장 기본적인 형태인 JS의 find를 구현해본 후, Lodash 가 제공하는 find 함수를 만들어보자. JS 기본 'find' 함수 구현 - Array.prototype.find()→ 배열을 받아 넘겨주는 콜백 함수로 검사하는 find를 만들어보자. 구현 순서배열 순회: 배열을 순회하며 각 요소를 조건과 비교한다.조건 만족 여부 확인: 요소가 조건을 만족하면 첫번째 해당 요소를 반환한다.조건을 만족하는 요소가 없으면 undefined를 반환한다.구현 코드function find(collection: T[], predicate: (el) => boolean): T | undefined { // 배열 순회 for (l.. 2024. 6. 9. CJS vs ESM 자바스크립트는 웹 개발의 핵심 언어 중 하나로서, 자바스크립트로 개발을 하다보면 CJS라 불리는 CommonJS, 그리고 ESM 이라 불리는 ECMAScript이라는 두가지 모듈 시스템을 마주치게 된다. 자연스럽게 "왜 같은 자바스크립트인데 두 개의 모듈 시스템이 존재할까?"라는 궁금증이 들기 마련이다. 이 글에서는 모듈 시스템이 어떻게 탄생하게 되었고, 어떤 특징과 차이점을 가지고 있는지 알아보자. 웹 초기 시절에 JS는 브라우저에서 간단한 동작만을 위해 존재했기 때문에 모듈(애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각) 시스템이 필요하지 않았다. HTML에 script 태그로 간단히 적을 수 있는 정도였다. 하지만 웹앱의 기능이 커지면서 복잡하고 긴 코드를 좀 더 정리하고 재사용.. 2024. 6. 2. 캐싱 전략 - Cache-Control 'Cache-Control' 헤더는 요청과 응답 모두에서 캐싱 지시어를 정의하는 데 사용되며, 캐시의 작동 방식에 영향을 준다. 이 지시어들은 단방향으로, 요청(Request)에서 설정된 지시어가 응답(Response)에 자동으로 적용되지 않음을 의미한다.(반대의 경우도 같음) 캐시 종류에는 여러 종류가 있지만 Cache-Control 헤더만 잘 사용하더라도 웹 앱의 성능과 동작에 중대한 영향을 미칠 수 있으며, 리소스의 재검증 방식이 로드 시간과 대역폭 사용에 영향을 줄 수 있다. 주요 지시어max-age= : 리소스가 사용가능하다고 간주되는 최대 시간, 즉 캐시할 시간을 초 단위로 지정한다. 요청과 응답 헤더에서 흔히 사용된다.no-cache : 캐싱은 허용하지만, 캐시된 데이터의 사용은 모든 .. 2024. 5. 29. Design System - 개발자, 디자이너, 기획자의 입장에서 디자인 시스템(Design System)의 개념디자인 시스템은 제품이나 서비스의 사용자 경험을 일관되고 효율적으로 구축하기 위해 사용되는 일련의 표준화된 가이드라인과 구성 요소 모읍집이라고 할 수 있다. 개발자 입장에서 단순하게 보면, 사내 규격화된 UI 컴포넌트 모음집이라고도 할 수도 있지만, 디자인 시스템은 그 이상의 의미를 가진다. 조직의 디자인 철학, 가치, 그리고 목표를 달성하기 위한 시스템으로서, 효과적인 사용자 경험을 만들어내는 방법론과 원칙을 제공한다. 디자인 시스템의 장점1. 생산성과 개발 속도 향상: 디자인 시스템은 기획-디자인-개발로 이어지는 제작 과정에서 일관된 UI 컴포넌트를 사용함으로써 개발 속도를 높이고, 동시에 비용을 절감할 수 있도록 한다. 디자인 및 개발 프로세스가 표.. 2024. 5. 26. 이전 1 2 다음
