728x90 반응형 React16 [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. 02] 코드 스타일 및 포맷팅 Biome와 ESLint + Prettier 정적 분석 도구인 ESLint, 코드 포매터인 Prettier 이 2개 조합을 사용해 왔었는데,Biome라는 새로운 도구를 알게 되어 공부 및 비교 분석 겸 이번 프로젝트에 적용해봤다. 들어가기에 앞서, ESLint란?자바스크립트와 타입스크립트를 위한 정적 코드 분석 도구이다.* 정적 코드 분석 : 코드를 실제로 실행하지 않고 코드의 문법, 오류, 스타일 등을 점검하는 것 Prettier란?코드의 형식을 자동으로 정리해 주는 도구이다.여러 개발자가 공동 작업 시 발생할 수 있는 충돌, 코드 스타일 자동화 등을 대비해 사용한다. 보통 이 2개를 조합하여 사용하는데, 이는 2번의 파싱을 거쳐 속도 이슈가 발생하게 된다. (ESLint, Prettier 각각 1번씩 총 2번 파싱) Biome?빠르고 모던한 코.. 2025. 5. 6. [Part. 01] 리액트 프로젝트 개발 환경구성 리액트, 타입스크립트 연습 겸 새롭게 프로젝트를 진행하며 작업 과정을 기록해 보고자 한다. 1. 설치클라이언트 사이드 렌더링(CSR)이면 충분한 프로젝트이기에 "빠른 빌드 속도와 간편한 타입스크립트 제공"이 장점이라고 하는 vite 사용pnpm create vite . [선택한 설치 옵션]- React- Tanstack Router- Code Router : 동적 라우팅에 더 적합하다하여 선택 (파일 기반 라우팅을 원한다면 File Router 선택)- Tailwind CSS Yes- biome- Shadcn, Tanstack Query 2. 상태 관리zustand 혹은 react 기본 내장 훅 사용 고민 중 3. 데이터 패칭Tanstack Querypnpm add @tanstack/react-qu.. 2025. 5. 6. [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. 이전 1 2 3 다음 728x90 반응형
