두둥서비스는 한 ec2 안에 nginx를 프록시로 활용하여 next js , redis , spring , react 어플리케이션을 도커로 띄우고 있다. 금일 오후 오후 1시 3분... nextjs 프론트 도커이미지가 다운되어버렸다. 출시이후 3개월만에 처음 있는 일이였다. 3개월째 잘 굴러가던 서비스가 이렇게 다운이되니깐 매우 당황했었다. 이슈가 있었던 부분을 살펴보고 트러블슈팅한 경험을 공유하고자 한다. 목차 1. 에러 원인찾기 : 도커 event,syslog 2. 이유가 뭘까 : 이미지 처리 3. 해결하기 : sharp install 3.1. 근데왜 squoosh 가 문제일까? 에러 원인찾기 : 도커 event ,syslog 두둥 서비스는 근검절약(돈이없따 ㅠ)을 위해 ec2 micro 에 swap..
리액트-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 사이의 애니메이션을 넣는방법 양방향(왼쪽, 오른쪽)의 방향을 지원하는것이아닌 ..
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..
