토스트 메세지 구현중에..

문제상황 토스트 메세지가 화면에 보이는 동안 다시 토스트 메세지를 발생시킬 이벤트 핸들러가 동작된다면 현재의 토스트 메세지가 아래로 이동하고 새로운 메세지가 화면에 출력되게 하고 싶었다. 아래 영상처럼 말이다. 하지만 실제 구현했을 때는 토스트 메세지는 변경되지만 아래로 내려가는 애니메이션이 제대로 보이지 않았다. 문제 원인 문제의 원인은 isShow 가 false 로 바뀌긴하지만 동시에 true 로 업데이트 되어버려 위와 같은 원하지 않는 UI 가 발생했다. if (timeout.current) { clearTimeout(timeout.current); timeout.current = null; setMessage((prev) => ({ ...prev, isShow: false })); setMessa..

AWS 과금 해결과정 (RDS 과금)

어억.. AWS 에서 메일와서 보니까 프리티어가 끝나서 요금이 발생했다. 분명히 EC2 다 종료시켜놨는데.. 이게 무슨 일이고.. 찾아보니까 RDS 에서 과금 됐다. 근데 RDS 에는 아무것도 없더라.. 혼란스러웠다. 딱 내 상황에 맞는 해결방법을 찾지못하여 고객센터에 문의 드렸다. 메일 내용은 다음과 같다. 한글로도 문의가 되지만, 영어로 문의는 밤낮없이 받는다고 되어 있어 영어로 문의를 넣었다. 밤낮이 없는 건 아니였다. 하루 있다가 답변이 왔다 ㅋㅋㅋ 아마 주말이여서 그런가보다. 문제는 지역설정을 잘못해서 였다. 오레곤 지역으로 바꾸어보니 DB가 존재했다. 이런~ 답변은 DB 와 스냅샷을 삭제하라는 내용이였다. 스냅샷을 삭제하는 과정에서 삭제를 할 수 없다는 안내를 받을 수 있는데 이를 해결하기 위..

hover에서 벗어날 때 transition 바로 종료

문제 상황 이게 뭐람.. 총체적 난국이다. 1. 우선 transform 에 transition 이 적용되는건 좋으나 hover 가 끝난 이후에 다시 원래자리에 되돌아가는 것이 transition 되는 것이 내가 원하는 동작이 아니였다. 2. transform-origin 은 변경하면 바로 기준점에 적용되지 않고, 이것조차 transition 이 걸려서 기준점이 서서히 변경되었다. 문제 해결 방법 .item 클래스를 가지고 있는 요소에 자바스크립트를 사용하여 transform-origin 을 변경하고 있다. 이때 transition 이 해당 요소에 걸려있기 때문에 자바스크립트에 의해 transform-origin 변경될 때 transition 이 적용되는 것이다. .item { width: 20px; he..

[카테캠 선택 강의] 스타벅스 웹사이트 검색창 연속클릭 버그 수정

문제 상황 문제 상황은 다음과 같다. 검색 input안의 아이콘을 연속클릭하면 검색창이 왔다 갔다한다. 문제 원인 HTML, CSS, JS 의 코드는 다음과 같다. HTML search header .sub-menu .search input { ... /* transition 의 default 값은 all 이지만 아래처럼 width 속성만 지정할 경우 transition 이 width 에만 적용돱니다. */ transition: width 0.4s; } header .sub-menu .search input:focus { width: 190px; border-color: #669900; } /** * 검색창 제어 */ // 검색창 요소(.search) 찾기. const searchEl = document..