회사에 있는 다양한 프로젝트 안에 백엔드 테스트 코드는 많았지만, 프론트엔드 테스트 코드가 부족한 상태였다. 검수 과정에서 동일한 작업이 반복되는 문제가 있어, 이를 해결하기 위해 E2E 테스트 코드 도입을 제안했고, 그 과정에서 정리한 내용을 공유하려 한다.E2E 테스트란?E2E(End-to-End) 테스트는 사용자의 실제 행동을 시뮬레이션하여 애플리케이션이 예상대로 동작하는지 확인하는 테스트 방법으로, UI 및 네트워크 상호작용을 포함한 전체 애플리케이션 흐름을 테스트할 수 있다.조사했던 후보로는 Playwright, Cypress, Selenium 등이 있었다.E2E 테스팅 툴 특징 정리Playwright특징Chromium, Firefox, WebKit 지원 → 크로스 브라우저 테스트 가능병렬 실행..
front-end
가장 애용하는 스택 중 하나인 Tailwind CSS의 새로운 메이저 버전인 v4에 대한 베타가 나와 바로 내용들을 확인했고,v4에 나올 피쳐들은 대부분 확정된 것 같아 내용들을 익힐 겸 글도 같이 써보려고 한다.업그레이드 방법npx @tailwindcss/upgrade@next 업그레이드 하는건 크게 어렵지 않게 위 커맨드를 통해 진행할 수 있었고,업그레이드 후 주요 변경 사항으로는 config 파일에 대한 규칙 변경과 기존 클래스 이름 수정 등이 있었는데, 아래 링크에 있는 레포에서도 변경된 내용에 대한 커밋 내용을 기록해 두었습니다. https://github.com/bysxx/next15-ts-template-fullstack/commit/d7d40c7e9dafed9a33884b7b1a360efc..
Next 15 Release Candidate (RC) 발표Next.js 15 RC가 나왔다고 한다. 아직 정식 출시는 이전이고 출시 전에 최신 기능을 테스트할 수 있는 기회를 준다고 하는 것 같은데, 내용을 간단하게 확인해보려고 한다.주요 기능 업데이트:React: React 19 RC 지원, React Compiler(실험적), 하이드레이션 오류 개선캐싱: 기본적으로 fetch 요청, GET 라우트 핸들러, 클라이언트 네비게이션이 캐시되지 않도록 변경부분 사전 렌더링(실험적): 점진적 적용을 위한 새로운 레이아웃 및 페이지 설정 옵션next/after(실험적): 응답 스트리밍 후 코드를 실행할 수 있는 새로운 APIcreate-next-app: 로컬 개발에서 Turbopack 활성화 플래그와 업데이트..
블로그에서 next.js를 주로 다루고 있기도 하고, 조금이라도 이슈를 더 알리고 싶어 글을 작성하게 되었다. 관련 링크: https://github.com/vercel/next.js/security/advisories/GHSA-fr5h-rqp8-mj6g Server-Side Request Forgery in Server Actions### Impact A Server-Side Request Forgery (SSRF) vulnerability was identified in Next.js Server Actions by security researchers at Assetnote. If the `Host` header is modified, and the below conditi...github.com관..
Waku라는 프레임워크에 대한 문서를 읽고 직접 프레임워크를 써보며 가볍게 소개해보려고 한다. 큰 프로젝트 외에도 간단한 프로토타입이나 토이 프로젝트를 만들 일이 종종 생기곤 한다.그럴 때마다 Next.js가 익숙해 자주 집어 들기는 하지만 너무 무겁다는 생각이 들 때가 있다. 이런 생각을 하던 중 Waku의 존재를 알게 되었고 딱 나의 니즈에 맞는 가치관을 가지는 프레임워크였기 때문에 문서를 천천히 읽고 번역하고 사용기를 적어 보려고 한다. 주요 기능사용해 보기 전 문서에서 소개하는 피쳐들을 먼저 간단히 요약하자면 아래와 같다.렌더링- 프레임워크 내에서 서버 컴포넌트, 클라이언트 컴포넌트 모두 만들 수 있음- weaving patterns을 통해 두 컴포넌트를 혼용해서 사용할 수 있음.- SSR, S..
원문: https://mobileappcircular.com/where-is-the-virtual-dom-stored-in-react-41724bc09f4f 글을 읽다가 너무 좋은 글이 있어 번역 및 정리를 해보려고 한다. React를 공부하다 보면 Virtual DOM에 대한 얘기를 지겹도록 듣는다. jquery가 중심인 프론트엔드 판에서 React가 파이를 가져갈 수 있었던 건 Virtual DOM 덕분이다. 그렇기 때문에 React를 공부하거나 사용할 때 기술에 대한 언급을 자주 듣는 건 어찌 보면 당연하다. Why Virtual DOM? 기존에는 직접 DOM에 접근했기 때문에 수정할 때마다 리렌더링 되었다. 하지만 Virtual DOM을 사용해 수정사항을 모아서 최소한의 리렌더링으로 프론트엔드를..
본 글은 React 19가 출시되기 이전에 작성된 글로 실험 중인 기능을 토대로 작성된 글로 실제 출시 됐을 때는 내용이 달라졌을 수도 있음 React의 다음 버전은 18.3이 아니라 19라고 한다. React 19에서는 새로운 훅이 추가될 가능성이 높은데, 이 훅은 data fetching, form 생산성 향상에 대한 내용이다.이 두 주제는 프론트엔드에서는 굉장히 중요한 주제인데, React에서는 이 주제애 대한 생산성 향상을 위해 어떻게 접근했을지 알아보자. use(Promise)Suspense는 이제 리액트와 뗄 수 없는 기술 스택이 되어가고 있다. React-Query에서 제공하는 useSuspenseQuery라는 훅이 있긴 했지만,React에서 제공하는 Suspense를 관리 훅이 따로 없었다..
감히 2024년 프론트엔드의 방향과 트렌드를 예측해보려고 한다. Next.js 2023년에도 이미 프론트엔드의 중심이 되어버린 프레임워크였지만, 2024년에는 더 자리를 잡을 것 같다. SSR,SSG 프레임워크들은 Next.js를 중심으로 계속 발전되고 있으며 이제는 프론트엔드에서 빼놓고 얘기할 수 없는 주제들이 되었다. 하지만 최근 Next.js에 대한 다양한 논쟁이 오고 가고 있다. "Why I Won't Use Next.js" "Why I'm Using Next.js." 모든 기술들이 그렇겠지만 분명 각 프레임워크들이 맞는 상황이 각각 존재할 것이다. 하지만 분명 Next.js가 정말 압도적으로 치고 나온 기술임에는 틀림없다. 여기에는 App router과 같이 Vercel이 개발자 경험을 지속적으..
이전에도 언급한 적이 있지만 React Query는 정말 좋은 비동기 처리 라이브러리이다. 하지만 Suspense와의 연동성이 좋지 않아 최근에는 자주 사용하지 않고 있었다. 저번 달에 React Query v5가 출시되었다. 이 버전에는 Suspense와의 연동은 물론이고 Next.js의 Streaming과의 연동성도 매우 좋아졌다. 이번 글에서는 React Query v5의 주요 변경점과 함께 Next.js과는 어떻게 연결 지어야 하는지 다뤄보려고 한다. One Function One Parameter React Query에 있는 모든 Hook, Method들은 이제 하나의 Parameter를 갖게된다. 여러 개의 Parameter를 갖던 경우에는 Object 형태로 받을 수 있게 바뀌었다. 이 부분..
Next.js 13이 나온 지 얼마 되지 않은 것 같은데 Next.js 14가 출시했다. 바뀐 내용은 아래와 같다. 1. Turbopack 2. Server Actions (안정화) 3. 부분 Prerendering Turbopack https://areweturboyet.com/ Are We Turbo Yet? No 91.1% of next dev tests are passing though✅ areweturboyet.com 큰 내용은 없고 Turbopack의 진행상황을 공유해 줬는데, 위 사이트에서 Turbopack의 테스트 코드 통과율을 확인할 수 있는데 현재 대부분의 테스트 코드를 통과한 상태인데 100% 통과하면 안정화 버전으로 이동된다고 한다. Server Actions (안정화) https:..
