프로젝트/복지맵(중단) (12) 썸네일형 리스트형 [복지맵 프로젝트] 환경설정 - Vite 기반 리액트 웹 PWA 설정 PWA 설정 이유모바일 환경에서도 웹을 앱과 유사한 환경에서 구동할 수 있다는 것은 많은 이점을 준다. 현재 내가 개발하고자 하는 웹 사이트는 모바일에서도 오프라인 환경에서도 많은 사용자가 사용할 수 있도록 구축할 것이므로 PWA 를 설정하기로 하였다. vite react 설치npm create vite@latest 선택은 React 와 typescript + SWC 로 설정하였다. Vite 전용 PWA 플로그인 패키지 설치vite 에서 PWA 를 설정하기 위해서는 이를 위한 별도의 플러그인이 필요하다. 따라서 다음을 설치해준다.npm i vite-plugin-pwa -D PWA 초기화를 위한 제네레이터 패키지 설치 PWA Assets Generator라는 플러그인을 설치하.. [복지맵 프로젝트] 프로젝트 환경설정 개발 환경구성하고자 하는 프로젝트 환경은 Husky + lint-staged 를 이용한 린트 및 프리티어, vitest 자동화를 목적으로 한다. 많은 개발 블로그에서 해당 설정에 대한 내용들을 다루고 있어서 몇 몇을 참고하여 본인의 입맛에 맡게 설정을 달리할 것이다. 패키지 설치Vitest 패키지 설치npm install --save-dev vitest 테스팅 라이브러리 외 관련 종속성 설치 npm install -D @testing-library/jest-dom @testing-library/react @testing-library/user-event msw Prettier와 eslint 설치 npm install -D eslint eslint-plugin-react eslint-p.. [복지맵 프로젝트] 기능구현 보호되어 있는 글입니다. [복지맵 프로젝트] 복지맵, 부산지역 복지프로그램정보를 한 곳에서 [CH1. 계획] 프로젝트 방향성이번 프로젝트는 리액트, 타입스크립트, 타일윈드, 쥬스탄드, 리액트쿼리, KaKao Map API, 소켓 IO 등을 기반으로 개발되는 복지서비스 지도 정보와 실시간 정보 공유가 가능한 웹 사이트 이다. PWA 설정을 통해서 모바일 오프라인에서도 웹사이트이지만 모바일과 유사한 환경에서 게임을 즐길 수 있도록 구현할 예정이다. 무엇보다 이번 프로젝트의 컨셉은 부산의 행정구역을 누구나 쉽게 확인할 수 있도록 3D 느낌의 지도를 만들어서 이용할 생각이다(피그마를 사용할 계획이라서 2D 인데 3D 느낌인 지도라고 보면될 것 같다). 기술스택지금 생각하고 있는 주요 기술 스택은 다음과 같다.React : SPATypescript : 타입 안정성Tanstack-query/react : 서버 상태관.. 이전 1 2 다음
