본문 바로가기

전체 글125

[ZIMZIM] SEO를 위해 시맨틱태그를 사용하자 ZIMZIM에는 현재 모두 클라이언트 컴포넌트로 되어있다. 하지만 서버컴포넌트로 변경되면 좋을 컴포넌트를 선별하여 리팩토링 할 예정이기에 시맨틱 태그를 먼저 지정해놓기로 했다.  시맨틱 태그가 SEO에 미치는 효과검색엔진의 페이지 이해가 향상되며 페이지의 구조 개선, 접근성 향상 등이 있고 개발자 경험에도 도움이 된다.기존에 단순 로 되어있던 것을 역할에 따라 main, hedaer, section으로 분류하였다.  main(mdn)주요 컨텐츠 영역은 main으로 감싸주었다. header (mdn) sectionaria-labelledby(W3C, mdn)ZIMZIM에는 대시보드에 3개의 차트가 있는데 그 부분을 하나의 section 태그로 묶고 aria-labelledby를 통해 스크린리더로 어떤 목적.. 2024. 9. 10.
[ZIMZIM] next.js(app router)+tanstack-query로 리팩토링하기 react + vite + redux-toolkit + redux-toolkit-query로 되어있던 프로젝트를 next.js+recoil+tanstack-query로 변경하기로 했다. 1. nextjs를 설치npm i next 2. package.json의 script를 변경 3. vite와 관련된 디펜던시, 파일 삭제next.js는 빌드시 webpack을 사용하는데 기존 프로젝트는 vite로 되어있었기 때문에 vite를 삭제하고 관련 파일들을 지워야했다. npm uninstall vite vite-plugin-svgrvite.config.ts 삭제 4. next.config.ts 파일 생성root에 next.config.ts를 만든 후 next docs에 설명되어있는대로 설정해주었다. 5. react.. 2024. 9. 10.
[ZIMZIM] RTK Query + redux-toolkit + axios ZIMZIM에서 RTK Query를 사용하는 이유데이터를 반복적으로 받아오지 않고 한 번 받아오면 캐싱해두고 재사용하려는 목적으로 tanstack-query와 redux toolkit query 중 현재 상태관리 라이브러리로 redux toolkit을 사용하고 있기 때문에 자연스럽게 통합되는 redux toolkit query를 사용하게 되었다. https://redux-toolkit.js.org/rtk-query/overview Overview: a summary of the RTK Query data caching API for Redux Toolkit" data-og-host="redux-toolkit.js.org" data-og-source-url="https://redux-toolkit.js.o.. 2024. 9. 1.
[ZIMZIM] 공통 SelectBox 컴포넌트 만들기 폼에 셀렉트박스를 여러번 사용하게 되어 재사용할 수 있는 공통 셀렉트박스를 만들고자 했다.처음에는 html tag인 select로 구성해보았다. 이렇게 구현했지만 option에 css 요소들을 직접 넣는것이 어려워 다른 방법을 선택해야 했다. 그래서 ul과 li로 리스트를 만드는 것으로 바꿔 구현해보았다. 아이콘을 넣고 css를 정리했다. 마지막으로 react-hook-form과의 연결이 필요했다.사용자가 select box를 제외한 다른 영역을 클릭했을 때 select box가 사라지도록 만들어야 했다. 그래서 useCallback과 addEventlistener로 훅을 useSelectbox 커스텀 훅을 만들었다. 최종적으로 SelectBox 컴포넌트는 이렇게 만들어졌다.  최종적으로 form에 사용.. 2024. 8. 29.
[ZIMZIM] input과 관련된 공통 컴포넌트 controlled component와 uncontrolled component 중 어느것을 따라야 할까? react 공식문서를 살펴보면 controlled component와 uncontrolled component에 대한 설명이 있다(링크). controlled component는 state로 관리되며 input의 onChange 이벤트를 통해 입력값을 즉각적으로 받아볼 수 있으며, 이를 통해 포맷팅, 유효성 검사를 할 수 있다. 복잡한 폼과 데이터 처리가 필요할 때 권장된다.uncontrolled component는 ref로 관리되며 필요할 때만 해당 데이터를 참조하는 방식으로 단순한 폼에 사용하여 성능을 향상 시킬 수 있다.  ZIMZIM에서 로그인 폼은 uncontrolled component, 회원가입은 controlled component로 구성하였다.로그인 시 사용자가 아이디와 패스워드를 입력하.. 2024. 8. 25.
[ZIMZIM] 지금 tanstack-query 필요할까? 로그인한 유저에게는 token을 부여하는데 그 토큰은 쿠키에 저장하기로 했다.쿠키에 저장한 이유는 로컬 스토리지, 세션 스토리지는 이전에 구현해 보기도 했고 XSS(교차 사이트 스크립트)공격에 취약한 점이 있어 보안에 강한 쿠키를 사용해보기로 했다.로그인한 유저에게는 서버에서 쿠키에 토큰을 넣어 보내주며 이후에도 쿠키에서 토큰을 꺼내 사용하는 것으로 했다. 최초에는 redux의 useSelector를 통해 값을 가져왔지만 이렇게 할 경우 새로고침을 하게 되면 메모리에 저장해 두었던게 날라가기 때문에 적절한 방법은 아니었다.import React from 'react';import { Outlet, Navigate, useLocation } from 'react-router-dom';import { use.. 2024. 8. 22.

티스토리툴바