프로젝트를 시작한 지 한 주가 지나고 있다. 진행도는 다른 팀의 진행 상황을 몰라서 잘 얘기하지 못하겠지만 꽤 빠른 편이 아닐까 라고 생각한다. 내가 속도가 더뎌서 오히려 팀원 분들께 민폐를 끼치고 있는 것 같아 걱정이다.
(그래도 걱정해서 뭐하나... 그 시간에 하나라도 더 배우는 게 팀에게도 나에게도 좋은 일일 것이다...)
1. react-icons 용량 줄이기
React 프로젝트에서 아이콘을 쉽게 컴포넌트 형태로 사용할 수 있도록 도와주는 라이브러리이다.
(링크)에서 사용할 수 있는 아이콘과 아이콘을 현재 프로젝트에 적용시키는 방법도 제공해준다.
그 중 우리는 ionicons5 를 사용하기로 했다. 제일 아이콘 종류가 많았기 때문에...
ionicons 자체만 사용하려면 script 태그로 설치하여 사용해야했고,
컴포넌트처럼 사용하고 싶었기 때문에 ionicons를 지원하는 react-icons 라이브러리를 사용하게 되었다.
그렇게 통일을 하고 없는 아이콘의 경우는 따로 svg 파일을 assets 폴더에 저장해 이미지로써 보여주었다.
그러나 오늘 코치님께서, 모든 아이콘이 저장되어 있는 라이브러리를 사용하면 용량이 크지 않겠냐는 얘기를 했다. 이것밖에 방법이 없지 않나? 라고 생각했었는데, 코치님께서 대안을 주셨다.
Heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
heroicons.com
해당 아이콘 사이트에서 필요한 아이콘을 받아와 자체적으로 컴포넌트화 시켜 사용하는 방법이었다.
[React] React에서 SVG 활용하기
React 프로젝트에서 PNG? JPG? 아니요, SVG!
velog.io
그러나 해당 방법은 (내가 잘못 작성했을 수도 있지만) Vite내에서는 적용이 안되어 추가 라이브러리의 설치가 필요한 것으로 알고 있다. (틀리다면 수정하겠다.)
나는 그래서 또 다른 방법이 없을까 했었는데, react-icons 외에 @react-icons/all-files 라이브러리를 사용하면 빌드 시 트리 셰이킹(사용하지 않는 코드를 제거하는) 방식으로 인해 더 적은 크기의 chunk를 생성한다고 한다.
[react-icons] bundle size 줄이기
react-icons 리액트 환경에서 브라우저에 다양한 아이콘을 제공하는 대표적인 라이브러리이다. 사용 이슈 사내에서 리액트 프로젝트를 담당하고 있었는데 lighthouse 측정 결과 성능이 매우 좋지 않
eratosthenes.tistory.com
2. JWT 전송 방법
기존 1차 프로젝트에선 로그인 시 서버에서 JWT토큰 값을 responseBody에 넘겨주었고, 클라이언트는 그것을 받아 localStorage에 저장, 이후 인증이 필요한 요청 시 header에 토큰 값을 붙여서 보내주었다.
이번에는 토큰 값을 cookie로 전송하고, 받아오기로 했다. axios로 쿠키 값을 보내려면, axios의 withCredentials 값을 true로 해주어야 한다고 한다. 그리고 동시에 서버에서도 CORS 설정을 해주어야 한다고 한다.
#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript
