전체 글24 Cucumber : 자연어 기반 테스트 자동화 최근 몇개월동안 Cucumber를 이용해 테스트 자동화를 구축하고 있습니다. Cucumber는 BDD(Behavior Driven Development, 행위 주도 개발) 방식을 지원하는 오픈소스 테스트 자동화 프레임워크입니다. 특히나 Cucumber는 자연어로 시나리오를 정의할 수 있어 테스트 시나리오를 자연어로 작성할 수 있어 QA Engineer 외 기획, 디자인, 개발팀과 같이 타 부서와 시나리오를 작성하고 함께 공유할 수 있습니다. Cucumber는 꽤나 오래된 프레임워크로 저도 2018년도 즈음 사용해본 프레임워크입니다. 허나 당시 저는 QA Engineer들만 속해있는 부서에 있어 Cucumber를 통해 타 부서와 소통할 일이 없었고 테스트 자동화를 자연어로 개발하는 것이 많은 리소스를 사용.. 2025. 7. 13. Next.js에서의 상태관리 webapp을 개발하다보면 상태관리가 필요한 순간들이 있습니다. 각 컴포넌트에서의 상태 동기화라던지 상위로 상태 정보를 보내줘야하는 상황들을 직면합니다. 이번 블로그에서는 이러한 상황에서 어떻게 상태를 관리하는지에 대해 알아봅니다. Next.js에서 상태 관리는 여러 컴포넌트가 공유해야 하는 데이터(예: 로그인 상태, 장바구니 정보)를 효율적으로 관리하기 위해 필요합니다. 문제는 같은 데이터를 여러 곳에서 사용할 때 발생하는 "데이터 동기화 문제"와 "복잡한 컴포넌트 구조"입니다.예를 들어 사용자 프로필 정보를 헤더, 사이드바, 메인 콘텐츠에서 모두 보여줘야 한다면, 각 컴포넌트에 일일이 데이터를 전달하는 건 비효율적입니다. 이때 Context API나 Redux 같은 도구를 사용하면 중앙 저장소를 만들.. 2025. 2. 10. Next.js에서 다국어 지원 다국어를 지원하는 서비스에서 언어별로 화면을 만드는 것은 불필요한 반복이 생기는 업무이며 관리 또한 어려워집니다. Next.js에서는 다국어를 손쉽게 지원할 수 있는 라이브러리를 지원하며 추가로 이를 동적으로 수정/반영할 수 있습니다.오늘은 다국어 지원과 언어별로 동적으로 반영할 수 있는 Crowdin 툴이 사용되는 방법까지 알아보겠습니다. Next.js에서 다국어 지원을 하는 경우 I18n이라는 명칭을 사용하고 있습니다. I18n은 'Internationalization'의 줄임말로, 첫 글자 'I'와 마지막 글자 'n' 사이에 18개의 글자가 있다는 의미입니다. 이는 긴 단어를 간단하게 표현하는 방법으로, 개발자들 사이에서 널리 사용되는 관행입니다. 국제화의 주요 목표는 다음과 같습니다:다국어 지원.. 2025. 2. 3. Next.js의 렌더링 방식 비교 (SSR, SSG, CSR) 오늘은 web에서 페이지를 렌더링 하는 방식을 비교해보며 어떤 특징이 있는지 알아보겠습니다. 사용자 입장에 각각 어떤 장점이 있는지 QA Engineer의 관점는 어떤점을 확인해야하는지 알아보겠습니다. 1. 각 렌더링 방식의 개념SSR (Server-Side Rendering)SSR은 서버에서 페이지의 HTML을 생성하여 클라이언트에 전송하는 방식입니다. 사용자가 페이지를 요청할 때마다 서버에서 HTML을 동적으로 생성하여 보냅니다3. Next.js에서는 getServerSideProps 함수를 사용하여 SSR을 구현합니다.SSG (Static Site Generation)SSG는 빌드 시점에 페이지의 HTML을 미리 생성하여 저장해두는 방식입니다. 사용자 요청 시 미리 생성된 HTML을 제공하므로 매우.. 2025. 1. 27. Next.js 라우팅 시스템 라우팅 시스템이란?라우팅 시스템은 웹 애플리케이션에서 URL 경로와 해당 경로에 표시될 콘텐츠를 연결하는 메커니즘입니다. 사용자가 특정 URL로 이동할 때 적절한 페이지나 컴포넌트를 렌더링하는 역할을 합니다.NextJS의 라우팅 시스템NextJS는 파일 시스템 기반 라우팅을 사용합니다. 이는 프로젝트의 파일 구조가 곧 애플리케이션의 라우트 구조가 되는 방식입니다NextJS의 파일 기반 라우팅은 웹 애플리케이션의 라우트 구조를 직관적이고 효율적으로 관리할 수 있게 해주는 시스템입니다. 이 시스템의 주요 특징과 작동 방식을 살펴보겠습니다. 파일 기반 라우팅의 기본 개념파일 기반 라우팅은 프로젝트의 파일 구조가 곧 애플리케이션의 URL 구조와 직접적으로 연결되는 방식입니다. 이는 'convention over.. 2024. 12. 23. Next.js 파일구조와 FSD 이번 시간에는 Next.js 프로젝트를 생성했을 때 기본적인 폴더 구조에 대해 알아보려고합니다. 각 파일들의 기능과 역학 그리고 프론트엔드 아키텍쳐 중 하나인 FSD (Feature-Sliced Design, 기능 분할 설계)에 대해서도 알아보겠습니다.Next.js 프로젝트 생성프로젝트 생성 명령어 실행: 터미널을 열고 다음 명령어를 입력합니다npx create-next-app --use-npm 프로젝트 설정: 명령어 실행 후 몇 가지 설정 옵션을 선택해야 합니다타입스크립트 사용 여부ESLint 사용 여부src/ 디렉토리 사용 여부App Router 사용 여부기타 설정 옵션들설정을 완료하면 기본 프로젝트가 생성됩니다. Next.js 초기 프로젝트 구조Next.js 프로젝트를 생성하면 기본적으로 다음과 .. 2024. 12. 9. 이전 1 2 3 4 다음
