frontend10 Playwright 를 이용한 E2E 테스트 현재 진행하는 출시를 앞둔 e-commerce 프로젝트에서 E2E 테스트를 맡아서 진행하게 되었다. 이 프로젝트를 몇 달 째 진행중이지만, 시작하는 초반에도 유닛 테스트 또는 E2E 테스트에 대한 논의가 이루어졌지만 도입하지 않기로 했었다. 왜냐하면 프로젝트 시작할 때, 스타트업이 다들 그렇듯이, 기획이 확실하게 정해지지 않아서 전체 및 세부적인 기능 및 디자인 등이 계속 요동쳤기 때문이다. 게다가 비즈니스 팀에서는 빠른 출시를 원했다. 그리고 실사용자를 위해 베타 테스트를 프로덕트 출시 이전에도 주기적으로 배포하고 있었다. 그러한 상태에서 유지보수가 필요한 테스트까지 도입되면 기획이 변경될 때마다 테스트도 이에 맞춰줘야 했고, 이러다보면 개발 속도는 최소 1.5배 정도는 더 걸렸을 것이다. 이러한 상.. 2025. 5. 5. 리액트 상태 관리 전략 - Context API 와 상태관리 라이브러리 리액트 애플리케이션을 개발하면서 가장 중요한 부분 중 하나는 상태 관리 전략을 선택하는 것이다. 이 중에는 리액트가 제공하는 Context API 부터, Redux, Recoil, MobX 등 다양한 라이브러리가 이러한 필요를 충족시키기 위해 존재한다. 각각의 도구는 고유의 장단점이 있고 사용하는 방법이 있기에, 프로젝트의 요구 사항에 따라 올바른 도구를 선택하는 것이 중요하다. 리액트의 Context API 와 Redux로 대표되는 상태 관리 도구를 비교하여, 어떤 상황에서 어떤 도구를 사용하는 것이 가장 효과적인지 알아보자. Context API 기본 개념리액트 Context API 는 컴포넌트 트리 전체에 걸쳐 데이터를 전역적으로 공유할 수 있는 메커니즘을 제공한다. 이를 통해 특정 데이터를 여러 .. 2024. 8. 9. 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. CJS vs ESM 자바스크립트는 웹 개발의 핵심 언어 중 하나로서, 자바스크립트로 개발을 하다보면 CJS라 불리는 CommonJS, 그리고 ESM 이라 불리는 ECMAScript이라는 두가지 모듈 시스템을 마주치게 된다. 자연스럽게 "왜 같은 자바스크립트인데 두 개의 모듈 시스템이 존재할까?"라는 궁금증이 들기 마련이다. 이 글에서는 모듈 시스템이 어떻게 탄생하게 되었고, 어떤 특징과 차이점을 가지고 있는지 알아보자. 웹 초기 시절에 JS는 브라우저에서 간단한 동작만을 위해 존재했기 때문에 모듈(애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각) 시스템이 필요하지 않았다. HTML에 script 태그로 간단히 적을 수 있는 정도였다. 하지만 웹앱의 기능이 커지면서 복잡하고 긴 코드를 좀 더 정리하고 재사용.. 2024. 6. 2. SPA vs MPA SPA 는 무엇인가?Single Page Application. 즉, 사용자와의 상호작용을 위해 단일 HTML 페이지를 로딩하고, 추가 데이터는 동적으로 불러와서 페이지를 새로 고치지 않고 갱신하는 형태의 어플리케이션이다. 작동방식: - 초기 페이지 로딩 시, 필요한 HTML, CSS, JavaScript 를 한번에 불러온다. 하나의 HTML을 가져온 후, JS를 이용해서 유저와 상호작용 시마다 필요한 DOM을 만들어준다. 유저가 앱을 사용하면서 필요한 추가 데이터는 동적으로 불러와서 페이지를 새로고침 없이 계속 갱신한다. 주로 CSR(Client Side Rendering) 방식으로 구현된다. SPA의 장점: - 속도 및 반응성: SPA는 대부분의 리소스가 애플리케이션의 수명 동안 한 번만 로드되고 .. 2024. 5. 20. 요즘은 왜 jQuery 를 안쓰는가 ? jQuery 를 더이상 사용하지 않는 이유를 알기 위해선, 그 당시 jQuery를 왜 많이 도입하고 사용했는지를 함께 알아보면서 그 때와 지금의 차이점을 알아볼 필요가 있다. jQuery 의 사용 이유와 더이상 사용하지 않는 이유 1. 브라우저 호환성 + 웹 표준 API 확장 초기 웹 개발에서는 브라우저 호환성 문제가 큰 문제였다. 브라우저 호환성 또는 웹 호환성이란 운영체제 및 브라우저 간 동일한 웹 사이트 경험을 제공하는 하는 것으로, 이를 준수하지 않으면 다양한 운영체제 환경 및 브라우저에서 사용이 불가능한 문제가 발생한다. jQuery는 이 호환성 문제를 해결하는 강력한 도구로 등장하여, 다양한 브라우저에서 일관된 방식으로 JavaScript를 사용할 수 있도록 해주었다. jQuery가 본격적으.. 2024. 5. 14. Why React? | 리액트 왜 사용하세요? 요즘의 프론트엔드 개발자라면 누구나 알고 있어야 하는 리액트. 딱히 프론트엔드 개발자가 아니더라도 웹개발에 관심이 있는 개발자라면 누구나 리액트가 인기있고 대세라는 것은 모두 알고 있는 사실이다. 개발자에게 의미있는 NPM 다운로드 수 기준으로만 본다면, 모던 웹 라이브러리/프레임워크(Modern Web Library/Framework) 즉, Angular, React, Vue 이 3대장 사이에서도 압도적인 다운로드 숫자를 가지며, 프로덕션 환경에서 가장 많이 쓰인다는 jQuery도 따라올 수 없는 수준이다. 그리고 이 격차는 점점 더 벌어지고 있다. React의 출시는 2013년이지만 본격적으로 인기가 많아진 시기는 React Hooks가 출시된 2019년 즈음부터인것 같다. 그 이전에는 클래스형 컴포.. 2024. 5. 14. 웹 페이지 로드 과정 | Google.com 을 입력하면 일어나는 일 - Overview 1. 유저가 사용자 인터페이스에 google.com 이라는 URL을 입력한다.모든 웹사이트 URL은 특정한 IP 주소와 연결되어있다.IP 주소는 DNS에 저장되어 있다.DNS의 주된 목적은 인간 친화적인 탐색을 위한 것이다.2. 브라우저는 입력된 google.com에 해당하는 IP를 찾기위해 DNS 기록에 대한 캐시를 검사한다.캐시는 네트워크 트래픽을 규제하고 데이터 전송 시간을 향상시키기 위해 필수적이다.순서: 먼저 브라우저 캐시를 검사한다. - 브라우저는 유저가 방문했던 DNS 기록을 일정시간동안 유지한다.OS 캐시를 검사한다. 브라우저 캐시에 찾고있는 IP가 없으면, 브라우저는 OS에 system call을 날려서 기록을 검사한다. (OS 또한 DNS 기록에 대한 캐시를 유지한다.)라우터 캐시를 검.. 2024. 5. 13. 이전 1 2 다음
