728x90 반응형 전체 글32 [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. 부트텐트 이력서 챌린지 2기 참여 후기 스나이퍼팩토리 React가 끝나갈 때쯤 구글링 중 부트텐드 이력서 챌린지를 알게되었다. 이력서 피드백을 받아본 적이 없기도 하고,개발자들은 어떤식으로 작성하는지,어떤 능력을 갖춰야 하는지 등 알고 싶은게 너무 많아서 호기심을 잔뜩 가지고 신청했었다. 신청 당시 마감일까지 하루도 남지 않은 상태였고,후기도 없어서 가는 날까지 고민을 많이 했던 기억을 담아 적어보는 나의 후기1회차일주일에 2번 2시간씩 3주간 진행되는데,참여자들끼리 친해져야 더 나은 결과를 만들 수 있다며첫날은 자기소개와 함께 간단한 레크레이션이 진행됐었다. 대부분이 IT분야였지만, 마케팅. 등 다른 분야이신 분들도 있었고,경력/신입 다양하게 있었다. 2~5회차참여자들끼리 더 친해지고 직원분과도 친해질 수 있도록 (?)2회차 시작 전에 4명.. 2024. 11. 20. [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. 이전 1 2 3 4 ··· 6 다음 728x90 반응형
