728x90 반응형 react21 [Part .06] React 프로젝트에서 Recharts 사용하기: Vite + React 19 + Tailwind CSS 환경에서의 선택과 적용기 시스템 개발을 하다보면 다양한 차트를 시각적으로 표현한 대시보드 페이지를 제작할 일이 생긴다.이를 위해 리액트에서는 어떤 라이브러리를 사용하여 대시보드를 제작할 수 있을지 공부해 보고자 했다. 차트 라이브러리 비교 검토1. Chart.js (react-chartjs-2) 바닐라 자바스크립트, 제이쿼리 사용 시 주로 사용했었다.장점가장 널리 사용되는 차트 라이브러리다양한 차트 타입 지원커뮤니티와 문서가 풍부성능이 우수함단점React와의 통합이 완전히 매끄럽지 않음커스터마이징이 복잡할 수 있음TypeScript 지원이 아쉬움 2. D3.js장점무한한 커스터마이징 가능가장 강력한 데이터 시각화 도구세밀한 제어 가능단점학습 곡선이 매우 가파름개발 시간이 많이 소요됨React 컴포넌트로 래핑하기 복잡 3. Vic.. 2025. 7. 6. [Part. 04] 라우팅된 페이지 새로고침 시 404 에러, 왜 뜨는걸까? React로 프로젝트를 생성하고 배포한 후 root가 아닌 경로에서 새로고침을 해보면 404가 뜨는 것을 볼 수 있다. 분명 NavLink(a 태그)로 이동했을 때나, 배포 전 새로고침 시에도 잘 되던 것이 왜 배포 후에는 안되는 걸까? 이는 React와 Spring Boot가 라우팅을 처리하는 방식이 달라 생기는 문제이다. React의 클라이언트 사이트 라우팅React는 BrowserRouter 방식으로 클라이언트 측에서 라우팅이 이루어지며, 경로에 매핑된 컴포넌트를 보여준다.또한, 브라우저의 URL은 변경하지만 실제로 서버에 요청을 보내지는 않는다. 브라우저의 기본 동작브라우저에서 새로고침하거나 URL을 직접 입력하여 접근하면 서버에 해당 경로에 대한 요청을 보낸다. 이러한 차이로 문제가 발생하며,.. 2025. 5. 14. [Part. 03] Github 비공개 저장소 vercel배포 본격적으로 페이지를 구성하고 작업을 들어가기 전,배포 시스템을 먼저 구축해보고자 한다. 어느정도 틀을 갖춘 후 진행할까 했지만, 현재 가장 궁금한 부분이라서 해당 내용부터 다루게 되었다. 배포는 vercel에 github 저장소를 연결해서 진행했다.master (main) 브런치를 등록해 놓으면 내가 작업한 것을 master 브런치에 merge 시키고 문제가 없는 것으로 판단되면, 자동 배포가 되어 편리하다. 우선, 깃헙 계정으로 vercel에 로그인 했다.https://vercel.com/ Vercel: Build and deploy the best web experiences with the Frontend Cloud – VercelVercel's Frontend Cloud gives develope.. 2025. 5. 11. [Part.1] React 달력 제작하기 프로젝트를 진행하다보면 달력을 필요로 하는 일이 많다.초기에는 달력 라이브러리 사용을 고려했으나, 다음과 같은 이유로 직접 제작하여 사용해 보기로 결정했다. 1. tailwindcss를 활용한 커스텀의 어려움2. 다른 프로젝트에서도 사용 가능한 달력 컴포넌트 제작 [목표]1. 단일/범위 선택 기능2. 오늘 기준 이전 달 이동 X3. 오늘 기준 이전 날짜 클릭 X Part.1 달력 구현하기 이전 달 이동, 이전 날짜 클릭을 막기 위해 today 변수를 추가하고,달력 기능 구현을 위해 useState 추가.초기 값은 today로 설정해 주었다.const today = new Date();const [currentDate, setCurrentDate] = useState(today); 달력을 구성하기 위한 변.. 2024. 11. 20. 리액트에서 카카오맵 api 사용하기 (ft.TypeScript) 본 내용을 들어가기에 앞서.. 발급 받은 key가 git이든 배포된 주소를 통해서든 직접적으로 노출되는 것은 굉장히 위험하다.** 유출된 키 값을 가지고 예상치 못한 큰 지출이 생길 수 있다. 이를 대비하기 위해 키 값은 root 폴더에 .env라는 파일을 만들어 관리하는 것이 좋다.그리고 .gitignore 파일에 .env 를 추가해준다.// .gitignore...# API Key.env 1. .env 파일에 KEY 변수 추가변수명은 반드시REACT_APP_ 으로 시작해야한다.본인의 리액트 환경이 vite라면 VITE_REACT_APP_ 으로 시작해야한다.** vite인 경우와 아닌 경우 다르게 시작되는 규칙을 몰라 한참을 헤매였었다..// .envVITE_REACT_APP_JAVASCRIPT_KE.. 2024. 11. 17. [React] styled-components : 실무에서 자주 쓰이는 패턴 정리 1. styled-components란?styled-components는 React에서 CSS-in-JS를 구현하기 위해 사용하는 방법 중 대표주자이자 인기가 많은 라이브러리이다.컴포넌트 기반으로 스타일을 관리할 수 있어 React의 철학과도 잘 어울린다. 2. 설치 방법// npm 설치 시npm install styled-components// yarn 설치 시yarn add styled-components 3. 기본 사용법- 기본적으로 스타일을 적용하고자 하는 파일 안에 작성하며, 이 때 styled-components를 import 해줘야 한다.- 변수 작성하듯 작성하고 태그처럼 사용하면 된다.import styled from 'styled-components';// 기본적인 사용 방법const S.. 2024. 9. 30. 이전 1 2 3 4 다음 728x90 반응형
