용로그

문제점 우리 서비스는 유리병을 공유하고 편지를 주고받는 서비스이다. 하지만 링크가 너무 그대로 노출되는 문제가 있었다. 특정 사람에게만 응원받고 싶을 수도 있는데, 이렇게 되면 제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..

Zustand를 사용하는 이유 프로젝트에서 닉네임을 보내주는 api 로직이 하나인데, 닉네임을 다른 컴포넌트에서도 띄워야 했다. 그렇기에 해당 값을 전역적으로 관리할 필요를 느꼈고, 이에 따라 상태관리 라이브러리를 도입하게 됐다. 상태관리 라이브러리를 처음 사용해보는 만큼, 간단하고 빠르게 사용할 수 있다는 Zustand로 결정하게 되었다. https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 주스탠드 공식문서를 참고했다. 사용법 npm install zustand Zustand를 설치해 준다. import { create } from 'zustand' const useStore = create((set) => ({ count: 1, inc: () =>..

뭔가 내가 저렇게 검색했었던 것 같아서 제목을 이렇게 지었다. 데이터 배열을 map함수로 쪼개서 렌더링 하는 코드이다. onClick을 적용했기에, 분명 클릭했을 때 console.log(“ㅎㅇ”)가 실행될 거라고 생각했지만, 항상 실행이 안 됐다. 그래서 위와 같은 방식으로, div 태그를 한번 더 씌우고 div에 onClick 이벤트를 적용했었는데, 오늘 해결책을 알았다!.! 일반 HTML 요소에 직접적으로 이벤트 핸들러를 추가할 때는 해당 요소에 이벤트 리스너를 직접 연결하고, 클릭 등의 이벤트가 발생하면 이벤트 핸들러가 실행되지만! 리액트 컴포넌트는 클릭과 같은 이벤트를 처리하도록 내장된 기능이 없으며, 대신 props로 전달하여 처리할 수 있도록 한다고 한다. 즉! 지금까지 내가 컴포넌트에 적용..