밴드부 티켓 예매를 거의 휴대폰으로 할테니 웹이어도 앱느낌이 나게끔 기획을 했었다. 레이아웃을 휴대폰 레이아웃에 고정시키고 , 일정 범위 이상 화면이 크게되면 , 레이아웃이 더이상 늘어나지않게끔 디자인이되었다. 완성도를 높이기위해서 애니메이션을 넣고 싶었고, framer motion같은 것으로 구현을 할 까 하다가 react transition group 이란걸 알게되었다. Route를 사용한 애니메이션엔 가장 적절한 라이브러리가 아닐까 싶다. ( 하지만 도큐멘트로는 너무나도 부족하다. 유툽찾아보시는걸 추천드린다.) 우선 이글을 통해서 얻을 수 있는것을 알려드린다. react transition group 을 이용한 route 사이의 애니메이션을 넣는방법 양방향(왼쪽, 오른쪽)의 방향을 지원하는것이아닌 ..
react-router-dom v6로 업그레이드 되면서 switch 가 routes로 바뀌고... 뭐든 옛날 소스를 절대로 가져다 쓸수 없는 상황이 되었다. 가장 불편했던점은 공식문서나 어디에서도 history 객체를 전역으로 가져와서 액션이든 어디든 react element 밖에서 쓸 수 없던 상황이였다. 물론 action에 callback으로 navigate를 넘겨서 처리하는 방법이있지만, 그건 뷰에 로직이 포함되 너무 깊게들어가버리는 상황이다. 이글을 통해 얻을 수 있는 점 react-router-dom v6 에서 history 객체를 전역으로 선언하는 방법 react-router-dom v6 에서 histroy 객체를 전역으로 받아 push 하는 방법 history GitHub - remix-ru..
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 하면 웹팩 세팅이 아주 끝내주게 해서 들어온다..
