리액트-route transition animation (1) 밴드부 티켓 예매를 거의 휴대폰으로 할테니 웹이어도 앱느낌이 나게끔 기획을 했었다. 레이아웃을 휴대폰 레이아웃에 고정시키고 , 일정 범위 이상 화면이 크게되면 , 레이아웃이 더이상 늘어 devnm.tistory.com 전편을 안보고 오신분들은 전편을 보고오시라. 우선 이글을 통해 얻어갈 수 있는 것들을 알려주겠다. 전역 history 객체를 이용해 history.listen 이벤트를 설정하는 방법 이벤트를 통한 redux에 pathname 을 저장해 , 이전 패스와 비교하는 방법 저장된 pathname을 통해 바뀐값을 비교하여, 애니메이션 방향을 결정하는 방법 TransitonGroup 의 childFactory 속성을 이용해서 classNa..
밴드부 티켓 예매를 거의 휴대폰으로 할테니 웹이어도 앱느낌이 나게끔 기획을 했었다. 레이아웃을 휴대폰 레이아웃에 고정시키고 , 일정 범위 이상 화면이 크게되면 , 레이아웃이 더이상 늘어나지않게끔 디자인이되었다. 완성도를 높이기위해서 애니메이션을 넣고 싶었고, framer motion같은 것으로 구현을 할 까 하다가 react transition group 이란걸 알게되었다. Route를 사용한 애니메이션엔 가장 적절한 라이브러리가 아닐까 싶다. ( 하지만 도큐멘트로는 너무나도 부족하다. 유툽찾아보시는걸 추천드린다.) 우선 이글을 통해서 얻을 수 있는것을 알려드린다. react transition group 을 이용한 route 사이의 애니메이션을 넣는방법 양방향(왼쪽, 오른쪽)의 방향을 지원하는것이아닌 ..
1,2,3 편을 거쳐 react 컴포넌트 라이브러리 만들기 시리즈의 막을 내릴 차례이다. storybook 상에서 컴포넌트 작업을 하고, husky로 prettier와 커밋 린트를 지켜서 커밋을 하고 , rollup 을 통해 cjs , es 형식의 파일을 만들 수 있다면... 끝이다. 이상태에서 로컬에서 npm version을 수동으로 올리고 npm 을 올려버리면 된다. 하지만.. 우리는 협업을 하고 있지 않는가? 로컬에서 나혼자만 작업하고 있는것이 아닌 스토리북 레포지토리에서 같이 작업을 하고 있다. 따라서 github action을 통해 1편에서 storybook을 gh-page로 올려서 작업물을 공유하는 것 처럼. semantic-relase라는 것을 활용해서 버져닝과 npm 배포를 github a..
2편까지 우리는 storybook으로 컴포넌트 작업환경을 만들고 ,husky로 협업의 기반 커밋룰을 만들었다. 이제는 빌드를 해야할때다. 스토리북도 빌드가 가능하고, 리액트도 빌드가 가능하고.. 우리가 만든 컴포넌트들도 빌드를해야 배포를 하든 뭘 하든 할수 있다. 그 빌드에 대해서 알아보도록하자. 시리즈다 2편 먼저 첨부해두겠다. 고티켓-react 컴포넌트 라이브러리 만들기(2)-husky 시리즈 물이다. 차근차근 1편부터 보는것을 부탁드린다. 고티켓-react 컴포넌트 라이브러리 만들기(1)-storybook 아니 고티켓이 뭐냐?? 고스락 티켓 프로젝트이다. 시작하기 앞서 궁금하면 들어가보 devnm.tistory.com 우린 create-react-app 하면 웹팩 세팅이 아주 끝내주게 해서 들어온다..
