밴드부 티켓 예매를 거의 휴대폰으로 할테니 웹이어도 앱느낌이 나게끔 기획을 했었다. 레이아웃을 휴대폰 레이아웃에 고정시키고 , 일정 범위 이상 화면이 크게되면 , 레이아웃이 더이상 늘어나지않게끔 디자인이되었다. 완성도를 높이기위해서 애니메이션을 넣고 싶었고, 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..
고스락 티켓 예매 프로젝트에서 이번에 배포는 각 프로젝트 레포지토리(어드민, 프론트 , 백엔드)에서 main 브런치에서 github action 을 통해 도커를 빌드하고, deploy 레포지토리에서 github-action을 통해 도커 이미지를 배포하고 있다. elasticbeanstalk은 로깅까지 자동으로 설정해 주지만, 이번 프로젝트는 ec2 에 docker를 깔고 (ligthsails는 안그래도될지도..) docker-compose를 이용해서 배포를 하고 있다. 환경변수 다음으로 중요한게 로깅아니겠는가... 아무리 프로젝트라도 로깅 방법은 알아보는게 좋을것 같아 시도하게 되었다. 필자는 쿠버네티스에서 fluentd 를 이용해 json format의 로그만 필터링해 elasticsearch로 보내 ..
1,2,3 편을 거쳐 react 컴포넌트 라이브러리 만들기 시리즈의 막을 내릴 차례이다. storybook 상에서 컴포넌트 작업을 하고, husky로 prettier와 커밋 린트를 지켜서 커밋을 하고 , rollup 을 통해 cjs , es 형식의 파일을 만들 수 있다면... 끝이다. 이상태에서 로컬에서 npm version을 수동으로 올리고 npm 을 올려버리면 된다. 하지만.. 우리는 협업을 하고 있지 않는가? 로컬에서 나혼자만 작업하고 있는것이 아닌 스토리북 레포지토리에서 같이 작업을 하고 있다. 따라서 github action을 통해 1편에서 storybook을 gh-page로 올려서 작업물을 공유하는 것 처럼. semantic-relase라는 것을 활용해서 버져닝과 npm 배포를 github a..
