한국그린데이터

RSS

게시글: 20
등록: 2026년부터

All Frontend Backend AI DevOps Architecture Etc

Frontend
E2E Test를 Cypress로 해보자.
이 글은 E2E 테스트 도구인 Cypress를 사용하여 React 컴포넌트를 테스트하는 방법을 소개합니다. Cypress는 브라우저에서 실행되는 모든 것을 테스트할 수 있는 강력한 프론트엔드 테스팅 도구입니다. 글에서는 `data-cy`와 같은 Cypress가 권장하는 셀렉터를 사용하여 컴포넌트 요소를 선택하는 방법을 설명하며, 이는 CSS 태그나 클래스 선택자보다 더 안정적이고 권장되는 방식임을 강조합니다. React 컴포넌트 작성 예시와 함께 Cypress의 테스트 작성 모범 사례를 참고하여 E2E 테스트를 효과적으로 수행하는 방법을 다룹니다.
CypressE2E TestReact
한국그린데이터·2022년 2월 18일
Frontend
StoryBook을
Storybook은 UI 컴포넌트 개발을 위한 오픈소스 도구입니다. 개발자는 Storybook을 사용하여 개별 UI 컴포넌트를 독립적으로 개발하고 테스트할 수 있으며, 이를 통해 개발 생산성을 향상시키고 일관된 디자인 시스템을 구축하는 데 도움을 받을 수 있습니다. 이 글은 Storybook의 기본적인 사용법과 장점을 소개하며, 프론트엔드 개발 과정에서 Storybook이 어떻게 활용될 수 있는지 설명합니다. 특히, 컴포넌트 기반 개발 방식과 디자인 시스템 구축에 있어 Storybook의 중요성을 강조합니다.
StorybookUI 컴포넌트디자인 시스템
한국그린데이터·2022년 2월 16일
Frontend
React 18 에서 추가된 기능
이 글은 React 18에서 새롭게 추가된 주요 기능들을 소개합니다. 특히 Concurrent Mode의 도입으로 인해 애플리케이션의 성능과 사용자 경험을 크게 향상시킬 수 있는 새로운 기능들이 가능해졌습니다. 주요 기능으로는 Suspense의 향상된 기능과 Server Components의 등장 등이 있습니다. Suspense는 비동기 데이터 로딩 시 로딩 상태를 선언적으로 관리할 수 있게 하여 UI 렌더링을 더욱 부드럽게 만듭니다. Server Components는 서버 측에서 컴포넌트를 렌더링하여 초기 로딩 속도를 개선하고 번들 크기를 줄이는 데 기여합니다. 이러한 기능들은 React 개발자들이 더욱 효율적이고 사용자 친화적인 웹 애플리케이션을 구축하는 데 도움을 줄 것입니다.
ReactReact 18Concurrent Mode
한국그린데이터·2022년 1월 18일
Frontend
Loadable Components
이 글은 싱글 페이지 애플리케이션(SPA)에서 번들 사이즈 증가로 인한 로딩 속도 및 성능 저하 문제를 해결하기 위한 코드 스플리팅 기법과 그중 하나인 Loadable Components에 대해 설명합니다. Loadable Components는 React.lazy와 React.suspense의 대안으로, 서버 사이드 렌더링(SSR)까지 지원하며 사용법이 간편하다는 장점이 있습니다. 컴포넌트를 동적으로 import하여 초기 로딩 속도를 개선하고, 라우트나 용량이 큰 라이브러리 기준으로 코드 스플리팅을 적용하는 방법을 예시와 함께 제시합니다. 이를 통해 사용자 경험을 향상시킬 수 있는 방법을 소개합니다.
Loadable ComponentsCode SplittingReact
한국그린데이터·2021년 8월 23일
Frontend
React with webpack (2) — webpack설정
이 글은 React 프로젝트에서 webpack 설정을 다루는 기술 블로그 게시물입니다. React와 React DOM을 설치하고, TypeScript 및 Babel 설정을 위한 패키지들을 설치하는 과정을 상세히 안내합니다. `@babel/preset-env`, `@babel/preset-react`, `babel-loader`, `ts-loader`, `html-loader`, `style-loader`, `css-loader` 등 다양한 로더와 플러그인 설치 및 사용법을 설명합니다. 또한, `webpack`과 `webpack-cli` 설치, `html-webpack-plugin`을 이용한 HTML 파일 생성을 다룹니다. 마지막으로 프로젝트 루트에 `src` 폴더를 생성하고 `index.tsx`와 `App.tsx` 파일을 만들어 기본적인 React 컴포넌트 구조를 설정하는 방법을 보여줍니다. 이 글을 통해 React 프로젝트의 초기 webpack 빌드 환경을 구축하는 데 필요한 전반적인 과정을 이해할 수 있습니다.
ReactWebpackTypeScript
한국그린데이터·2021년 4월 24일
Frontend
React with webpack
이 글은 React 프로젝트를 webpack으로 빌드하는 과정을 다루는 시리즈의 첫 번째 글로, webpack의 기본적인 개념을 소개합니다. Create React App(CRA)과 같은 보일러플레이트 없이 직접 webpack 설정을 통해 React 애플리케이션을 빌드하는 경험을 공유하며, webpack이 무엇인지, 그리고 왜 필요한지에 대한 설명을 제공합니다. CRA에 익숙한 개발자들이 직접 빌드 도구를 설정하는 과정을 이해하고 학습하는 데 도움을 줄 수 있습니다.
ReactWebpack빌드
한국그린데이터·2021년 4월 9일