회고13 setState의 효율적인 사용 방법과 React-Query의 initialData, placeholderData useState const [userInfo, setUserInfo] = useState() const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo({ ...userInfo, username: e.target.value }); }; userInfo가 속성이 많은 큰 객체인 경우 스프레드 연산자를 사용하면 전체 객체의 얕은 복사본을 만들 수 있으며 이는 메모리 사용량 및 처리 시간 측면에서 성능에 악영향을 끼칠 수 있다. 따라서 다음과 같이 사용하는 것이 좋다. const onChangeUsername = (e: React.ChangeEvent) => { setUserInfo((prevUserInfo) => ({ ...prevUserInfo, u.. 2023. 8. 2. padding값에 따라 요소의 크기가 변하는 이슈 해결 padding-top 30px을 기준으로 보다 높아지면 배경 애니메이션이 안 보이고, 30px보다 낮아지면 애니메이션이 보이는 문제가 발생했다. 먼저 배경의 height를 확인해 봤다. 그리고 배경 안의 컨텐츠의 height를 확인했다. padding 30px을 기준으로 버그가 발생하고 있었는데, 884px - 854px = 30px과 연관이 있을 것이라는 생각이 들었다. 그리고 pdding 값의 변화에 따라 star의 크기가 달라지고 있었다. star의 크기를 고정시켜 줘야겠다는 생각이 들었다. div로 감싸준 후 height에 100%를 줬다. padding값을 아무리 늘려도, star의 크기가 변하지 않게 되었다. 2023. 7. 19. 리액트에서 터치 이벤트로 스와이프 구현 서비스에 휠 이벤트를 이용해 데이터를 바꿔주는 로직이 있었다 데스크탑에서는 wheel 이벤트를 사용하고, 모바일에서는 touch 이벤트를 사용했는데, 그중 onTouchMove에 이벤트 핸들러를 등록해 사용했다. 그리고 event객체에서 touches[0].clientY와 changedTouches[0].clientY를 받아 둘을 비교한 결과에 따라 위로 스와이프 했는지, 아래로 스와이프 했는지 판단했다. //터치의 시작이 끝보다 위면 up, 아래면 down if (e.touches[0].clientY e.changedTouches[0].clientY) { setDra.. 2023. 7. 17. 모바일에서 브라우저 주소창을 고려한 css height 설정 - svh 서비스 이용 시 위아래 스크롤이 되지 않도록 하고 싶었다. 하지만 별이 떠다니는 애니메이션이 상당한 height를 차지하고 있었다. 이것들을 정리하기엔 쉽지 않다고 생각하여 레이아웃의 크기를 viewport에 맞추기로 결정했다. height: calc(100vh - 55px); // 55px은 헤더의 높이 위 코드를 적용한 후 데스크탑에서는 더 이상 스크롤이 생기지 않았지만, IOS 사파리에서 동일한 증상이 반복되었다. (네이버 브라우저에서 정상 작동하는 것을 확인하고, 다른 브라우저를 확인해보지는 않았다.) 하단의 주소창 때문에 의도대로 동작하지 않고 있다. 주소창을 고려한 높이 설정을 위해 구글링하다 발견한 아래 방법도 사용해 봤지만 해결되지 않았다. const vh = window.innerHeig.. 2023. 7. 11. NextJs를 이용한 SSR / SSG 마스터 하기 - 2 react query로 SSR 구현 일단 루트 파일 useState에 queryClient 저장 set은 갱신될 일이 없기 때문에 필요 없다 hydrate는 처음 봐서 뭔지 잘 모르겠음 서버에서 데이터를 받을 수 있게 해주는 것 Hydrate란, Server Side단에서 렌더링 된 정적 페이지와 번들링된 js파일(Webpack)을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 js 코드를 서로 매칭시키는 과정을 말합니다. 즉 hydrate가 일어나기전엔 자바스크립트 상호작용 x 컴포넌트 안에다 해놓으면 csr로 해야할지 ssr로 해야할지 알 수 없음 그래서 컴포넌트 밖에다 해줘여 함 getServerSideProsp안에 없으니까 ssr이 안되는 것 저 함수 안에서 동작하게 하기.. 2022. 8. 9. NextJs를 이용한 SSR / SSG 마스터 하기 - 1 NextJs폴더 구조 pages폴더의 api폴더에서 백엔드 처리를 할 수 있다. pages 폴더로 라우팅 처리를 할 수 있다. _app.tsx는 리액트에서 index.tsx와 비슷한 기능을 하는 것 같다 props로 pages폴더에 있는 컴포넌트를 폴더명(도메인)별로 받아서 화면에 띄움 동적 라우팅도 매우 편한 것 같다 파일명에 [id]만 붙이면 가능했다. 나는 리액트면 리액트, 넥스트면 넥스트 문법만 쓸 수 있을 줄 알았는데 넥스트 안에서 리액트도 사용할 수 있는 구조였다. 또한 컴포넌트별로 CSR, SSR, SSG가 가능한 것이 아니라 데이터 통신을 할 떄 즉 api 요청을 할 때 어떤 함수로 하느냐에 따라 CSR, SSR, SSG가 가능한 것이었다. CSR, SSR, SSG 의 차이를 눈으로 확인했.. 2022. 8. 8. 이전 1 2 3 다음
