react
-
Vite 환경 변수로 Proxy 설정하기개발 프로젝트: 핀더펜 2024. 12. 2. 17:48
이번 포스트에서는 Vite의 Proxy 설정을 환경변수를 활용해 적용하는 과정을 보여드리겠습니다. 왜 Proxy 설정을 해야 함?가장 중요한 이유는 cors 에러를 해결하기 위해서이다.cors란?Cross-Origin Resource Sharing의 준말로 현재 웹 페이지의 경로와 다른 출처(도메인, 프로토콜, 포트)에서 자원을 가져오는 것을 말한다. 기본적으로는 동일한 출처에서 가져오는 리소스만 허용한다.왜 그럴까?보안의 문제가 있을 수 있기 때문이다. 외부에서 리소스를 가져오는 것 을 허용하면 해커가 심어놓은 코드로 인해 사용자가 모르는 웹 페이지로 사용자의 개인 정보가 넘어가는 문제가 발생할 수 있다.따라서 이런 위험을 방지하기 위해 기본적으로 동일한 출처에서만 리소스를 가져올 수 있게 제한하고 있..
-
[Vercel] SPA 새로고침 오류 해결방법개발 프로젝트: 핀더펜 2024. 11. 8. 11:26
문제상황루트 경로가 아닌 페이지에서 새로고침할 때 404에러가 뜨는 상황 원인핀더펜의 경우 ssr을 지원하지 않으며, SPA로 구현되어 있기 때문에 어떤 경로에서 접근하든 루트 경로의 index.html 에서 리소스를 찾아야 한다. 그러나 현재 상황에서는 페이지 경로에 해당하는 위치에서 리소스를 찾으려고하기 때문에 리소스를 찾을 수 없다는 오류가 나는 것이다. 요약하면 https://fin-the-pen/home에서 새로고침하더라도 루트 경로의 index.html을 끌고와야하는데 현재는 /home에서 index.html을 찾고있어 오류가 나는 것이다. 해결 방법github pages에 react 페이지를 배포해본 경험이 있다면 동일한 문제를 겪어봤을 것이다. github pages에서 문제를 해결하기 위..
-
[react + vite + vercel] 페이지 배포하기개발 프로젝트: 핀더펜 2024. 11. 7. 13:14
Vercel이란?Next.js 개발 팀에서 만든 프론트엔드 호스팅 사이트로 배포 자동화할 수 있게 빌드,배포,호스팅 서비스를 제공한다 깃허브와 연동해 배포할 수 있기 때문에 자동으로 변경사항을 파악하고 빌드, 배포를 도와준다. 브랜치에서 작업하고 변경 내용을 push하면 vercel이 자동으로 빌드해주기 때문에 PR을 올리기 전에 빠르고 편하게 문제를 파악할 수 있다는 점이 아주 큰 장점이라고 생각한다. 왜 Vercel을 적용하나?현재 프로젝트는 AWS의 S3와 Cloud Front를 이용해 배포하고 있었다. 앱 출시가 계속해서 미뤄지고 있는 상황에서 AWS 무료 계정의 종료 기한이 다가오고 있으며, 앞으로의 유지관리를 위해서는 무료 호스팅 사이트로 넘어가는 것이 좋을 것 같다는 판단이 들었다. 배포하기..
-
[핀더펜] Vitest 적용하기개발 프로젝트: 핀더펜 2024. 6. 4. 01:10
React Testing Library란?개발자가 단위 테스트, 통합 테스트 및 구성 요소 테스트를 작성할 수 있도록 하는 테스트 프레임워크 BDD(행동 중심 개발) 및 TDD( 테스트 중심 개발 ) 를 포함한 다양한 테스트 스타일을 지원하므로 개발자가 최상의 접근 방식을 선택 가능핵심 기능확장성모듈식 아키텍처를 통해 개발자는 맞춤형 플러그인 및 확장 기능을 사용하여 기능을 확장 가능 테스트 도구 요구 사항에 맞게 Vitest를 맞춤화하여 매우 유연하고 사용자 정의 가능한 단위 테스트 프레임워크로 만들 수 있음언어 지원 광범위한 프로그래밍 언어를 지원단일 테스트 프레임워크 내에서 다양한 언어로 작성된 코드를 테스트 가능 Jest에서 더 쉽게 마이그레이션할 수 있도록 Jest 호환 API로 설계 IDE ..
-
리액트 주요개념 - React로 사고하기IT/리액트 2022. 1. 16. 23:54
React는 JavaScript로 규모가 크로 빠른 웹 애플리케이션을 만드는 가장 좋은 방법입니다. 이번 글에서는 React로 상품을 검색할 수 있는 데이터 테이블을 만드는 과정을 살펴볼 것입니다. 목업으로 시작하기 애플리케이션을 설계하기 전 디자이너로부터 JSON API와 목업을 받습니다. // JSON API [ {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, {category: "Sporting Goods", price: "$29.99", stocked: false,..
-
리액트 주요개념 - 합성 vs 상속IT/리액트 2022. 1. 16. 20:34
React는 강력한 합성 모델을 가지고 있으며, 상속 대신 합성을 사용하여 컴포넌트 간에 코드를 재사용하는 것이 좋습니다. 컴포넌트에서 다른 컴포넌트를 담기 어떤 컴포넌트들은 어떤 자식 엘리먼트가 들어올 지 미리 예상할 수 없는 경우가 많습니다. 특히 범용적인 박스 역할을 하는 Sidebar 또는 Dialog와 같은 컴포넌트에서 흔히 볼 수 있습니다. 이러한 컴포넌트에서는 특수한 children prop을 사용하여 자식 엘리먼트를 출력하여 그대로 전달하는 것이 좋습니다. function FancyBorder(props) { return ( {props.children} ) } 이러한 방식으로 다른 컴포넌트에서 JSX를 중첩하여 임의의 자식을 전달할 수 있습니다. function WelcomeDialog(..
-
리액트 주요개념 - State 끌어올리기IT/리액트 2022. 1. 16. 19:28
동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 때가 온다면 가장 가까운 공통 조상으로 state를 끌어올리는 것이 좋습니다. 예제: 주어진 온도에서 물의 끊는 여부를 추정하는 온도 계산기 BoilingVerdict: 섭씨온도를 의미하는 celsius prop를 받아 물이 끓기에 충분한 온도인지에 대한 여부를 출력 function BoilingVerdict(props) { if (props.celsius >= 100) { return The water would boil.; } return The water would not boil. } Calculator: 온도를 입력할 수 있는 을 렌더링하고 그 값을 this.state.temperature에 저장, 현재 입력값에 대한 BoilingVe..
-
리액트 주요개념 - 폼IT/리액트 2022. 1. 16. 01:32
제어 컴포넌트 (Controlled Component) JavaScript 함수로 폼의 제출을 처리하고 사용자가 폼에 입력한 데이터에 접근 할 수 있도록 도와주는 기술 HTML에서 폼 엘리먼트(input, select, textarea, ..)는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. 그러나 React에서는 변경할 수 있는 state가 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 이때 React state를 신뢰가능한 단일 출처(single source of truth)로 만들어 두 요소를 결합할 수 있습니다. 그러면 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어할 수 있고 이러한 방식으로 React에..