이번에 새로운 프로젝트에 참여하게되었다. 짧은 기간이지만, 개발해야할 기능들이 많고 테스트 코드까지 작성해야 하기에 바쁜 나날이 될거같다. 이번 프로젝트에서는 Story Book을 이용해 컴포넌트 UI 테스트를 진행한다. 그렇기에 간단한 지식정도는 알고 진행하는 것이 팀원들에게 대한 예의라 생각한다. 본 글은 Story Book의 공식 문서에 나온 튜토리얼 중 시작부터 Redux를 이용한 상태 관리 까지의 과정을 기록한 글입니다. 1. 스토리 북(Story Book)이란? UI를 컴포넌트 단위로 테스팅 할 수 있는 툴이다. 컴포넌트 단위로 테스팅 하는 점에서 잘 분리된 컴포넌트를 재사용하는 React와 잘 맞는 UI 테스팅 툴이라 생각한다. 스토리 북을 사용하는 이유는 아래와 같다. 독립적인 환경에서 컴..
FE 이모저모 공부
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 등이 있다. 트랜스파일러 ..
모듈 module 이란? 모듈은 여러기능들에 관한 코드가 모여있는 하나의 파일로 다음과 같은 것들을 위해 사용한다. 유지 보수성 기능들이 모듈화가 잘 되어있다면, 의존성을 그만큼 줄일수 있기 때문에 어떤 기능을 개선한다던가 수정할 때 훨씬 편하게 할 수 있다. 네임스페이스화 JS에서 전역 변수는 전역 공간을 갖기에 코드가 만을수록 곂치는 네임스페이스가 많아질 수 있다. 그러나 모듈로 분리하면 모듈만의 네임 스페이스를 갖기에 문제가 해결된다. 재사용성 똑같은 코드를 반복하지 않고 모듈로 분리시켜 필요할 때마다 사용가능하다. CommonJS JS 공식 스펙이 브라우저만 지원했기에 SSR 및 데스크탑 어플리케이션을 지원하기위해 범용적인 언어로 쓰이기 위한 스펙을 모듈방식으로 정의한 것이 CommonJS 방식의..
BOM (Browser Object Model) 브라우저에서 웹 페이지와 관련된 객체들을 조작하고 제어하는데 사용되는 객체모델. 주요 사용법 열려있는 창의 URL 얻어오기 브라우저의 정보를 받아올 수 있는 기능 도큐먼트 제어 대신 브라우저를 제어한다 주요 객체 window 객체 : 브라우저 창 객체. 브라우저의 창 크기 조작, 새창 열기, url 변경가능 location 객체 : 현제 페이지 url을 다루는 객체, 페이지의 url 변경 및 분석에 사용 screen 객체 : 사용자 환경의 디스플레이(해상도, 색상) 관련 정보 접근 navigator 객체 : 브라우저와 사용자의 시스템 정보에 접근 가능 (브라우저 정보, 버전, 플렛폼 등의 정보 확인) history 객체 : 브라우저 창의 페이지 이동 히스토..
