투명한유리구슬처럼보이지만 투명한유리구슬처럼보이지만

문제의 시작은 메인페이지에서 고명, 그외 정보들을 받는 2개의 get요청이 있는데 처음 로직을 서버컴포넌트에서 데이터를 받아와서 클라이언트 컴포넌트에 데이터를 뿌려서 UI를 그려주게 되는데 내떡국을 조회하려면 토큰으로 고명외 정보를 받아오고 받아온 정보에서 떡국 키값으로 고명을 조회하게 되는데 그러다보니 data fetching를 하려고 로직을 다 구현했는데 이후 고명 페이지네이션을 하려다보니 페이지네이션 처리하는 로직은 클라이언트 컴포넌트였고.. 화살표를 누를때마다 증가되는 번호를 어떻게 ssr에서 알아서 처리를하는지? 에 봉착해버렸다.. 그러다보니 로직을 뒤집어 엎어야하는가? .. .. 고민을 많이하다가 구글링 도중 해당 블로그를 발견해서 구현해보기 시작했다. https://tilnote.io/pag..

html-to-image를 사용했을때 pc에서는 캡쳐가 정상적으로 이루어지는데 모바일 웹브라우저에서는 동적컨텐츠가 캡쳐될때 제외되는 현상이 있었다 그래서 모든 로직이 다 그려지고 나서 캡쳐를 실행하게 했는데도 동일하게 발생됬다.. ㅠㅠ 그래서 다시 꺼냈던건 html2canvas 처음에 저 라이브러리를 사용했을때 이런식으로 동적 이미지태그의 안에 이미지가 확대되서 짤려보이는 문제 때문에 다른 라이브러리를 찾았던건데 모바일에서 동적인걸 나오게 하려고 블로그란 블로그는 다 찾아봤으나 해결되지 않았고 차라리 저 이미지 하나의 문제인거라면 저게 더 해결하는데에 접근이 쉽겠다고 생각이 들었다. [원래 로직] 원래는 이미지 태그에 가로, 세로길이를 지정해서 했는데 확실한지는 모르겠지만 넥스트는 이미지 최적화로 크기에..

우리 프로젝트에 인증샷을 남길 페이지를 캡쳐해서 저장하는 로직을 만드는데 처음에 html2canvas를 사용했는데 useRef를 이용해서 캡처할 영역(DOM)을 지정하고 해당 영역에 대한 스크린샷을 찍을 수 있도록 도와주는 라이브러리인데 우리는 현재 페이지에서 상단 안내글, 하단 버튼은 안보이면서 추가 글귀가 들어가야 되는 상황이라 ssg로 컴포넌트를 사용하려했는데 그냥 다 클라이언트 컴포넌트로 사용하면서 저장 버튼을 눌렀을때 캡쳐될 화면이 3초정도 보여지면서 캡쳐되고 3초후에 다시 원래 페이지가 보여지게끔 구현을 했다. const handleDownload = async () => { setScreenshot(true) setTimeout(async () => { if (!divRef.current) ..

넥스트를 사용한 테일윈드 백그라운드 이미지를 적용하려는데 그냥 로컬에 저장된걸 바로 불러와서 사용하게되면 정상적으로 적용이 된다. 참고로 이미지는 그냥 빨간색 저 자체이다. 문제는 이렇게 했더니 아예 백그라운드 이미지가 뜨지를 않는다는 것이다. 참고자료 : https://tailwindcss.com/docs/background-image Background Image - Tailwind CSS Utilities for controlling an element's background image. tailwindcss.com 그래서 이미지로 잘뜨나 확인을해도 정상적으로 작동을 한다. 그래서 저 떡국.테이블매트정보에 저장되어있는 값이 red.png여서 red로만 바꾸고 이렇게 적용해도 아무런 변화가 없었다. ..

slug에 my가 들어올때 그거에 해당하는 데이터를 가지고 와야하는데 자꾸 slug가 undefined라고 뜬다. [data] [ { "id": "my", "nickname": "공주", "디데이": 30, "편지총개수": 7, "고명정보": [ { "닉네임": "123", "고명키값": "딸기" }, { "닉네임": "456", "고명키값": "고수" }, { "닉네임": "789", "고명키값": "오이" }, { "닉네임": "135", "고명키값": "페퍼론치노" }, { "닉네임": "245", "고명키값": "파" }, { "닉네임": "567", "고명키값": "계란" }, { "닉네임": "64544", "고명키값": "고기" } ], "테이블매트정보": "빨강", "인입유저떡국설정완료여부..

오류 내역 오류가 발생한 경로 북마크를 연타했을때 간혈적으로 500에러가 남 원인 : API요청에 의해 로직을 처리하는 도중에 새로운 요청이 들어와서 500에러가 남, 추측 : 데이터베이스 lock에 의해 북마크 추가 및 삭제가 불가능 했을것으로 추측이됨 오류 해결 방법 const onClickBookMarkHandler = async e => { if (timerId) { clearTimeout(timerId); // 이전 타이머 취소 } const newTimerId = setTimeout(() => { if (loginUser) { bookmarkMutation.mutate(); } else { setIsLogin(!isLogin); } }, 300); setTimerId(newTimerId); /..

오류 내역 오류가 발생한 경로 storeLocation.forEach에서 location 객체의 latitude와 longitude값을 읽을 때 undefined가 나타나는 문제가 발생 오류 발생된 코드 storeLocation.forEach(location => { const marker = new kakao.maps.Marker({ position: new kakao.maps.LatLng(location.latitude, location.longitude), image: markerImage, }); 오류를 해결하기 위해 시도해본 것들 시도1 State에게 들어올 값의 타입을 미리 알려줘서 undefined가 나타나지 않고 [] 빈배열 상태로 들어가게 한다. const [date, setData] =..

오늘은 인증번호 발송 후 3분내에 입력을 못하거나 메일이 안왔을 경우 재 발 송 이라는 버튼을 눌렀을때 3분 타이머가 초기화되어 다시 3분으로 리셋되는걸 만들었다. 이것도 엄청 찾아 헤매긴 했는데 일단 useState로 재발송을 눌렀을때 렌더링되도록 하고 const [timerKey, setTimerKey] = useState(0); 재발송 버튼에 온클릭 이벤트로 const toggleTimer = () => { setTimerKey(timerKey + 1); //key값이 달라져서 렌더링되버려서 타이머가 초기화 되는방식 setIsTimeOver(false); setTimerActive(true); }; 해당 코드로 setTimeKey에 timerKey가 0일때 + 1을해서 key갑이 달라져 렌더링이 되..