블로그 메인 canvas에 이스터에그 만들기

최근에 블로그 메인 애니메이션에 내가 어디에 있냐는 질문을 3번 받았다. 사실 내 이미지를 넣지 않아서 나는 여기에 없다. 맨날 없다고 말하는 것도 부끄러우니까. 이미지 넣고 이스터에그도 추가해봤다. 우선 추가할 이미지를 아이패드로 그렸다. 그리고 해당 이미지를 추가하여 무료 사이트에 호스팅했다. 이거 서버터지면 블로그 어쩌지. 하지만 돈이 없다. https://www.zpat.info/ Zpat - 무료 이미지 호스팅 무료 이미지 호스팅, 이미지 업로드, 사진 편집 제공 www.zpat.info 이미지 스프라이트 사용해서 한장만 있으면 된다. 음 이러고 끝났는데, 뭔가 아쉬웠다. 이전에 친구 한명이 나를 찾아서 클릭하면 깃허브나 포트폴리오 사이트로 이동되게끔하면 좋겠다라고 조언해준게 생각이 났다. 그래..

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

문제상황 토스트 메세지가 화면에 보이는 동안 다시 토스트 메세지를 발생시킬 이벤트 핸들러가 동작된다면 현재의 토스트 메세지가 아래로 이동하고 새로운 메세지가 화면에 출력되게 하고 싶었다. 아래 영상처럼 말이다. 하지만 실제 구현했을 때는 토스트 메세지는 변경되지만 아래로 내려가는 애니메이션이 제대로 보이지 않았다. 문제 원인 문제의 원인은 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..

[카테캠] 카카오 테크 캠퍼스 굿즈

굿즈 수령 오오.. 수령을 학교 건물 7번 라인에서 했는데, 너~어무 멀어서 힘들었다. 그래도 굿즈 받으니 광대 승천. 상품 구성 언박싱 언박싱하려고 두고 갔는데 조카가 다 풀어놨길래 다른분이 올려주신 사진으로 대체합니다 🤣 출처: [카테캠] 백엔드 과정 1기 웰컴키트(굿즈) 리뷰 오호~ 그립톡도 있고 , 에코백도 있고, 펜도있고 노트도 있고. 근데 뱃지는 왜..? 옷에 장착하면 간지 나긴 할 것 같다. 출처: [카테캠] 백엔드 과정 1기 웰컴키트(굿즈) 리뷰 근데 스티커가 없어서 아쉬웠다.. ㅠㅠ 그래서 그립톡 분해해서 노트북에 붙혔다. ㅋㅋ 없으면 만든다는 정신 맥북 리셀할때 기스 날까봐 밑에 스티커를 깔고 분해된 그립톡을 붙혔다. 후기 웰컴키트는 해커톤에서 받은거 빼고 처음 받는데 역시 선물은 언제..