이벤트 버블링 이벤트 버블링이란 위의 그림처럼 가장 깊게 중첩된 요소(3)에 이벤트가 발생했을 때, 이벤트가 위로 전달되는 것을 의미한다. 3번 요소, 2번 요소, 1번 요소에 그 이벤트에 대한 핸들러가 있다면, 3번->2번->1번 핸들러 순으로 실행된다. FORM DIV P 가장 안쪽의 태그를 클릭하면 우선 p태그에 할당된 onclick 핸들러가 작동된다. 그리고 div->form 순서대로 작동한다. document 객체를 만날 때까지 각 요소에 할당된 onclick 핸들러가 동작한다. 즉 위의 코드를 클릭하면 3개의 alert가 뜬다. event.target과 this의 차이점 event.target은 실제 이벤트가 시작된 ‘타깃’ 요소, 즉 버블링이 진행되어도 변하지 않는다. this는 ‘현재’ 요..

카카오테크캠퍼스를 통해 CSS를 다시 처음부터 공부하고 있습니다. 덕분에 평소에 잘 모르고 사용하던 transition과 transform의 개념에 대해 더 잘 알게 되었습니다. 하지만 유독 3차원 변환 함수 자체가 많이 낯설었습니다. 2차원 변환 함수 중 하나인 translate는 여러 번 사용해 봤어도, 3차원 변환은 사용해 본 적이 없었기 때문입니다. 그래서 익숙해질 겸, 연습 겸 조금씩 두드려보다가 문득 생각나는 것이 있어서 만들어봤습니다. ★transform 개념 빠른 정리☆ 더보기 transform transform: 변환함수1 변환함수2 변환함수3 .... ; 요소의 변환 효과를 줄 수 있는 CSS 속성입니다. transform 변환 함수들 1. 2D 변환 함수 translate(x, y) ..

문제점 우리 서비스는 유리병을 공유하고 편지를 주고받는 서비스이다. 하지만 링크가 너무 그대로 노출되는 문제가 있었다. 특정 사람에게만 응원받고 싶을 수도 있는데, 이렇게 되면 제3자가 링크의 숫자만 변경해서 유리병에 접근할 수도 있다. 즉 링크를 숨길 필요가 생겼다 그러기 위해 암호화 복호화를 이용했다. 원래는 사용자 정보를 서버에 보내기 전 보호하기 위해 사용한다고 한다. 하지만 그냥 링크를 쉽게 접근하지 못하게 하기 목적이기에, 단순하게 사용하기로 했다. crypto-js를 통한 암호화,복호화 훅 생성 encrypt는 텍스트와 고유키를 넣으면 텍스트를 암호화 시켜주고, decrypt는 암호화된 텍스트와 고유키를 넣어주면 암호화된 텍스트를 복호화 시켜주는 커스텀 훅이다. 복호화에 실패할 때는 0을 리..

문제점 백엔드와 통신까지 잘 연결했기에 더 이상의 난관은 없을 거라 생각했지만, 사진이 늦게 렌더링 되면서 사용자 경험이 저하되는 문제가 생겼다. 대부분 페이지가 마운트 될 때, 빈 화면이었다가 갑자기 배경이미지가 뜨는 현상이 일어났다. 예쁘게 다 완성해 놨는데, 사진 뜨는 속도가 느려서 완성도가 확 떨어진다는 게 너무 속상하고 스트레스였다. 물론 이렇게 한번 깜빡거리면 그 뒤로는 안 그랬지만, 그래도 너무 신경 쓰이는,,, 해결 시도 1) 이번 프로젝트에서는 이미지를 클라이언트 폴더 내부에 저장했기에, 용량이 너무 커서 그런가 싶기도 했다. https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save ins..

문제점 아이폰에서 달력화면의 각 요소들이 밀리는 문제가 발생했다. 밀리는 양상이 position의 문제라는 생각이 들어서 relative와 absolute를 체크하고, 조정하는 것을 며칠 동안 반복반복반복... 해도 해결이 안 됐다. 무엇보다 답답했던 것은 갤럭시, 맥북, 윈도에서는 멀쩡함! 왜 아이폰에서만 그런 것인가에 대한 고찰을 하던 중... 해결 병멘과 쯔란 뭐시기 덮밥을 먹던 중 이에 대한 얘기를 나눴는데, 넌지시 형이 이런 말을 했다 position쓰면 브라우저마다 다르게 나오잖아 마사카! 그러면 반응형이 된다면 해결이 되려나?! 바로 실행에 옮겼다. 기존의 코드이다. 아주 position과 top으로 개떡같이 해놨다. 라이브러리를 커스텀해서 달력을 구현했기에 내가 할 수 있는 최선이었다. t..

react-query는 요청을 전송하는 로직이 내장되어 있지 않고, 단순히 요청을 관리하는 로직을 제공하기에, 내가 요청 전송 로직을 따로 생성해줘야 한다. 궁금해!궁금한 점이 생겼다. 보통의 http 요청 로직에서는 try-catch문을 통해 에러 핸들링을 했었다. 근데 리액트 쿼리는 isError와 error라는 메서드를 통해 에러 정보를 제공해 준다. 그러면 try-catch문을 따로 사용하지 않아도 되는 것.. 인가?? 아니 당연한 거 같기도 한데.. 맞나?! 실험jsonplaceholder의 잘못된 경로로 요청을 보내봤다. try-catch문을 통해 error가 출력되게 했다. 늘 먹던 대로 하던 대로 에러가 출력되는 것을 확인할 수 있다. 이제 진짜 궁금한 것을 확인해 봤다. try-catch..