![]()
React를 이용해 웹을 개발하며 컴포넌트를 만들때 예상치 못한 에러로인해 추가적인 커밋과 PR을 경험한 적있다. 이번에 새롭게 참여한 프로젝트에서는 UI 테스팅 도구인 Storybook과 다른 테스팅 도구인 Testing-library/react를 사용하게되었다. 만드는 컴포넌트를 테스트하는 과정을 통해 발생 가능성이 있는 에러를 사전에 방지할 수 있기에 이번 프로젝트에서는 테스트 과정을 본격적으로 다룰 예정이다. 왜 React Testing-Library 인가? React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리 이며, 실사용 환경과 비슷한 환경을 인스턴스가 아닌 실제 DOM 노드를 사용해 테스트하므로 더욱 신뢰할 수 있는 환경을 제공한다. 또한 props..
![]()
이모션은 CSS-in-JS 라이브러리이다. React와도 함께 사용할 수 있다. 1. 설치 // 기본적으로 React환경에서 사용하는 Emotion npm i @emotion/react // Styled-Component 처럼 사용할 수 있는 Emotion // @emotion/react가 설치되어 있어야 한다. npm i @emotion/styled 해당 글에서는 styled 형식으로 컴포넌트를 생성하는 방법에 대해 작성할 예정이다. 2. Emotion Styled Component 컴포넌트와 구성요소 스타일링 기존에 사용했던 Styled-Component의 사용법과 비슷하게 컴포넌트나 요소를 생성할 수 있다. import styled from '@emotion/styled' const Button =..
이번에 새로운 프로젝트에 참여하게되었다. 짧은 기간이지만, 개발해야할 기능들이 많고 테스트 코드까지 작성해야 하기에 바쁜 나날이 될거같다. 이번 프로젝트에서는 Story Book을 이용해 컴포넌트 UI 테스트를 진행한다. 그렇기에 간단한 지식정도는 알고 진행하는 것이 팀원들에게 대한 예의라 생각한다. 본 글은 Story Book의 공식 문서에 나온 튜토리얼 중 시작부터 Redux를 이용한 상태 관리 까지의 과정을 기록한 글입니다. 1. 스토리 북(Story Book)이란? UI를 컴포넌트 단위로 테스팅 할 수 있는 툴이다. 컴포넌트 단위로 테스팅 하는 점에서 잘 분리된 컴포넌트를 재사용하는 React와 잘 맞는 UI 테스팅 툴이라 생각한다. 스토리 북을 사용하는 이유는 아래와 같다. 독립적인 환경에서 컴..
CSS 애니메이션 호버 효과나 버튼의 전환과 같이 간단한 애니메이션의 경우 CSS로 처리한다. JS를 이용해 스타일 속성의 변화를 주게된다면 브라우저 렌더링 과정에서 reflow(layout) 단계를 발생시키기 때문에 애니메이션이 끊기는 느낌을 받게된다. 이런 점에서 JS를 이용하는 대신 CSS를 이용해 간단한 애니메이션을 구현하는 것이 좋다고 할 수 있다. 장점 반응형 애니메이션을 구현하기 유용하고, 미디어 쿼리로 애니메이션을 적용할 수 있다. 추가적인 외부 라이브러리가 필요하지 않다. CSS 자체가 선언형 이기 때문에 어떤 요소가 애니메이션을 가져야 하는지 직관적인 표현 가능 메인 쓰레드가 아닌 별도의 컴포지터 쓰레트에서 그려지기 때문에 메인 쓰레드에서 작업하는 JS보다 효율적이다. 단점 JS 애니메..
![]()
CI (Continuous Integration) CI는 개발자를 위한 자동화 프로세스인 지속적인 통합 (Continuous Integration)을 의미한다. 빌드와 테스트를 자동화해서 공유 저장소에 병합시키는 프로세스를 뜻한다. 사용하는 이유는 버전관리 시스템을 사용할 때 다수의 개발자가 하나의 공유 저장소에 코드를 작성할 때, 코드의 변경 사항이 저장소에 통합되지 않는 문제를 해결하고, 빌드/테스트 자동화부터 코드의 일관성을 제공하기 때문이다. CD (Continuous Delivery/Deploy) CD는 지속적인 서비스 제공 및 지속적인 배포를 의미하며, 두 용어는 상호 교환적으로 사용된다. 지속적 전달 : 변경사항이 테스트를 거쳐 저장소에 자동으로 업로드된 상태, 배포 자체는 수동으로 실행한다..
모듈 번들러 모듈이란 여러 기능들에 관한 코드가 모여있는 하나의 파일로써 유지보수성, 네임스페이스화, 재사용성 문제를 해결하기 위해 사용한다. 프론트엔드 개발은 모듈단위로 파일을 엮어 개발하는 방식을 사용한다. 즉, 모듈 끼리 의존성을 띄고있는데 아래와 같은 문제들이 생긴다. 많은 모듈들의 순서 처리(의존성 처리) 모듈이 많아질수록 HTTP 요청이 많아저 발생하는 오버헤드 해결방법 ES6+ 스펙의 코드를 처리하는 방식 이러한 문제들을 해결하기 위해 나타난 것이 모듈 번들러(Module Bundler)로 각각의 모듈 의존성을 해결해 하나의 JS 파일로 만드는 도구이다. 이미지 압축, 최소화 등의 여러가지 기능들도 제공하며 유명한 번들러는 Webpack, Parcel, Rollup 등이 있다. 트랜스파일러 ..
