React Typescript 기반 Electron 개발 환경 구축
2022-05-02
우선 CRA 라이브러리를 통해 typescript 기본 프로젝트를 생성 Electron 모듈 설치 package.json 수정 public/elctron.ts 작성 Run 자동으로 elctron.ts 파일을 elctron.js로 컴파일 하여 실행됨 Build package.json에 build 관련 내용 추가 빌드 파일만 생성...
React CRA & Typescript & craco & Cypress & Jest 테스트 환경 세팅
2022-04-16
cypress란 프론트엔드를 위한 E2E(End-to-End) 테스팅 프레임워크 입니다. 사내에서 진행 중인 프로젝트에 cypress를 도입하였는데, CRA(Create React App)의 기본 테스트 프레임워크인 Jest 로 유닛 테스트를 작성하고 있던 상태에서 두 테스트 프레임워크를 병행해서 사용하기 위한 설정 방법을 공유하고자 합니다. ...
React 18 변경점
2022-02-01
현재 날짜(2022년 2월 1일) 기준으로 React 18 버전이 RC 단계이다. React 18에서의 변경사항들을 정리하자면 다음과 같다. React 18 버전부터 react-dom 의 render 함수는 deprecated 되고, 아래에 나열된 React 18의 기능들을 적용하려면 새로 생긴 createRoot 함수를 이용해야 한다. 기존 ...
React Styled Components 에서 Fade in/out Modal 컴포넌트 만들기
2021-07-04
Styled Components 를 사용하여 모달을 직접 구현해볼 상황이 생겨서 직접 구현해보고 정리해보았습니다. 환경 react - v17.0.2 styled-components - v5.3.0 typescript 구현하고자 하는 것 일반적인 모달처럼 배경 투명화 처리 열었을 때, 닫았을 때 Fade in, Fade out 애니메이션 효과...
React에 Storybook 도입하기
2021-06-22
Storybook은 컴포넌트 단위의 UI 개발 환경을 지원하는 도구입니다. Storybook을 사용하면 실제 웹 어플리케이션의 환경과 별개로 컴포넌트 단위의 UI 개발 진행이 가능합니다. 그 외에도 컴포넌트의 문서화 도구로도 사용이 가능합니다. 다양한 프론트엔드 웹 프레임워크(React, Vue, Angular 등등)을 지원합니다. Reac...
React Query 사용해보기
2021-05-04
React에서 비동기를 쉽게 다루게 해주는 라이브러리입니다. 글로벌 상태관리 라이브러리(Redux, MobX 등) 없이 서버에서 데이터를 가져오고 그 데이터를 모든 컴포넌트에서 사용 가능하게 캐싱하거나, 그 이외에도 주기적으로 데이터 패칭, Optimistic Updates(데이터 변경을 요청 후 실제로 요청이 성공하기 전 미리 UI만 변경한...
