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

리액트 설치 Vite개발황경에서 진행 yarn create vite ${폴더명} --template react 이전에는 Create React App 을 이용해서 리액트를 설치했었는데 2021-12-14이후로 업데이트 되고있지 않으며 웹팩의 결속력이 강하고 커스텀도 강하며 엣날 환경이기 때문에 느리다. State 상태란? 사물이나 현상이 놓여있는 모양이나 형편 컴포넌트 상태, 전역 상태, 서버 상태(ex: TanStack Query), 상태 변경, 상태 최적화, 렌더링 최적화, 불변성, 상태 관리자 올바른 초기값 설정 초기값을 넣지 않으면 undefined가 된다. 업데이트가 되지 않는 값 이경우에는 리액트 컴포넌트 내부에 있기 때문에 매번 렌더링 될때마다 같은 값이더라도 또다시 참조에 대해서 트리거하고..

문제의 시작은 메인페이지에서 고명, 그외 정보들을 받는 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", "고명키값": "고기" } ], "테이블매트정보": "빨강", "인입유저떡국설정완료여부..

toSorted const arr1 = [3,1,2,5,4] const arr2 = [...arr1] console.log(arr1,arr2) // [3,1,2,5,4],[3,1,2,5,4] 2개의 배열이 있다고 가정을 했을때 sort()와 toSorted()를 사용해서 정렬을 해준다. const arr1Sorted = arr1.sort(); const arr2Sorted = arr2.toSorted(); console.log(arr1Sorted,arr2Sorted) // [1,2,3,4,5],[1,2,3,4,5] 둘다 잘 정렬되는걸 볼 수 있다. 여기서 push(6)을 해준다면? arr1Sorted.push(6) arr2Sorted.push(6) console.log(arr1Sorted,arr2Sort..