개발 프로젝트: 핀더펜
-
Vite 환경 변수로 Proxy 설정하기개발 프로젝트: 핀더펜 2024. 12. 2. 17:48
이번 포스트에서는 Vite의 Proxy 설정을 환경변수를 활용해 적용하는 과정을 보여드리겠습니다. 왜 Proxy 설정을 해야 함?가장 중요한 이유는 cors 에러를 해결하기 위해서이다.cors란?Cross-Origin Resource Sharing의 준말로 현재 웹 페이지의 경로와 다른 출처(도메인, 프로토콜, 포트)에서 자원을 가져오는 것을 말한다. 기본적으로는 동일한 출처에서 가져오는 리소스만 허용한다.왜 그럴까?보안의 문제가 있을 수 있기 때문이다. 외부에서 리소스를 가져오는 것 을 허용하면 해커가 심어놓은 코드로 인해 사용자가 모르는 웹 페이지로 사용자의 개인 정보가 넘어가는 문제가 발생할 수 있다.따라서 이런 위험을 방지하기 위해 기본적으로 동일한 출처에서만 리소스를 가져올 수 있게 제한하고 있..
-
Chromatic 배포 옵션 추가하기개발 프로젝트: 핀더펜 2024. 11. 21. 17:01
현재 Storybook 배포를 chromatic을 사용하고 있으며, github actions를 통해 자동 배포를 해주고 있다. 여기서 계속 신경쓰였던 것은스토리북에 변경사항이 없음에도 깃허브에 코드를 업데이트할 때마다 chromatic에 지속적으로 새롭게 배포가 됨새롭게 배포가 된 것을 매번 approve해줘야 storybook 배포가 성공함 해결 방법은 간단했다.1. 코드 업데이트가 있을 때만 재배포하기 : onlyChangedhttps://www.chromatic.com/docs/github-actions/#enable-turbosnap Introduction • Chromatic docsChromatic is a cloud-based toolchain that integrates with Stor..
-
[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 무료 계정의 종료 기한이 다가오고 있으며, 앞으로의 유지관리를 위해서는 무료 호스팅 사이트로 넘어가는 것이 좋을 것 같다는 판단이 들었다. 배포하기..
-
[에러] Error: EPERM: operation not permitted, unlink '...'개발 프로젝트: 핀더펜 2024. 11. 5. 17:40
사건의 발달그동안 스토리북 자동 배포를 과정에서 npm ci를 하기 전 npm install을 해야한다는 오류가 생기는 문제가 있었다. 그래서 package-lock.json을 업데이트하기 위해 npm install을 해줬다. 그로 인해 pakcage-lock.json과 yarn.lock 파일 모두 업데이트 되었고, 이걸 푸쉬한 이후로 vercel에 배포가 안되는 문제가 생겼다. 그래서 로컬에서 다시 시도를 해봤는데 yarn install이 안되는 문제를 파악했다. 현재 핀더페의 경우 storybook은 npm 으로 배포하고 vercel은 yarn으로 배포되고 있다. vercel을 도입하기 전에는 github action을 통한 자동 배포인 storybook과 github pages는 npm 으로 배포하..
-
[핀더펜] Cloudfront 대체 도메인개발 프로젝트: 핀더펜 2024. 7. 11. 23:57
CloudFront에서 자동으로 부여해주는 도메인 주소 대신 별도로 구매한 도메인을 사용할 수 있도록 대체 도메인을 설정했다.( Route53에 도메인 호스팅이 등록되어 있으며, S3와 CloudFront로 정적 페이지 배포가 완료된 후 상황부터 작성함) 1. ACM 인증서특정 도메인을 적용하고 싶은 CloudFront 베포 프로덕트에서 일반-설정-편집 을 선택한다. 도메인 네임 항목 추가 선택사용할 도메인 입력SSL 인증서 요청사용할 도메인을 작성하고 나머지는 기본 옵션으로 설정한 후 인증서를 요청했다.2. CloudFront 대체 도메인 설정 완료인증서 요청이 완료되면 생성한 인증서를 선택하고 설정을 완료하면 된다.그럼 이렇게 대체 도메인 설정이 완료되고 도메인이 추가된 것을 확인할 수 있다.3. R..
-
[핀더펜] Vitest 적용하기개발 프로젝트: 핀더펜 2024. 6. 4. 01:10
React Testing Library란?개발자가 단위 테스트, 통합 테스트 및 구성 요소 테스트를 작성할 수 있도록 하는 테스트 프레임워크 BDD(행동 중심 개발) 및 TDD( 테스트 중심 개발 ) 를 포함한 다양한 테스트 스타일을 지원하므로 개발자가 최상의 접근 방식을 선택 가능핵심 기능확장성모듈식 아키텍처를 통해 개발자는 맞춤형 플러그인 및 확장 기능을 사용하여 기능을 확장 가능 테스트 도구 요구 사항에 맞게 Vitest를 맞춤화하여 매우 유연하고 사용자 정의 가능한 단위 테스트 프레임워크로 만들 수 있음언어 지원 광범위한 프로그래밍 언어를 지원단일 테스트 프레임워크 내에서 다양한 언어로 작성된 코드를 테스트 가능 Jest에서 더 쉽게 마이그레이션할 수 있도록 Jest 호환 API로 설계 IDE ..
-
[핀더펜] 이미지 스프라이트 적용개발 프로젝트: 핀더펜 2024. 6. 3. 15:39
이미지 스프라이트란?나의 이미지 파일에 페이지에서 사용할 여러가지 이미지들을 넣어 좌표와 범위를 통해 특정 이미지를 불러오는 기법한번의 이미지 로딩을 통해 여러가지 이미지를 불러올 수 있음 적용 방법1. spritebot 설치2. 이미지 선택, sprite sheet 생성 스프라이트 시트를 저장한 결과 svg 파일이 태그로 감싸져 있는 것을 확인할 수 있었다. ... Spritebot에서 제공한 사용 방법은와 같은 방법이었지만 나의 경우 xlink에서 오류가 나는 문제가 발생했다. 그래서 xlink를 제거하고 아래의 방법으로 사용했다. 아이콘..