[React + TypeScript + TailwindCSS] 모바일청첩장 개발하기 1일차

다가오는 친구 결혼식에 모청을 만들어주기로 했다~! 이왕 만드는거 내가 해보고 싶었던거 맘껏 써보려고 기록해둔다.

 

개발 환경 

방명록 기능때문에 백엔드는 어떻게 할지 고민...
일단 프론트엔드는 Vite + React + TS + Tailwind CSS로 구현할 예정이다.
사실 거의 정적 + 단일 페이지여서 바닐라 JS로 할까 하다가.. 그래도 평소에 TypeScript를 잘 안다뤄봐서 써보면서 익숙해지고 싶다고 생각했기 때문에 사용하기로 결정했다.

 

필요 기능

• 노래 넣기
• 달력
• 디데이
• 사진
• 약도
• 지도 연동
• 방명록

 

환경 설정

1. vite로 프로젝트 생성

깃허브를 둘러보니 내가 학교다녔을 때는 거의 CRA를 통해 프로젝트 생성을 했었는데 요즘은 vite를 주로 사용하는 걸 볼 수 있었다. Vite는 빠르고 가벼워서 개발자 경험을 크게 개선한다고 한다.

아래의 명령어를 통해 프로젝트를 생성해줬다.

npm create vite@latest wedding-invite -- --template react-ts

 

 

2. Tailwind css 설치

tailwind는 인라인으로 바로 스타일을 설정할 수 있기 때문에 편리해서 사용하기로 했다. 인터넷에 많이 나오는 설치 명령어로 설치했는데 오류남..

npm ERR! could not determine executable to run

구글링해보니 Tailwind가 업데이트되면서 tailwind intellisence 확장 프로그램과 호환이 되지 않아 발생하는 에러라고 한다. 따라서 아래의 명령어로 설치해줬다.

npm install -D tailwindcss@3.4.17 postcss autoprefixer

 

Tailwind Css 실행

npx tailwindcss init -p

 

개발 환경 설정을 끝내고 나서의 폴더 구조는 다음과 같다.

 

 

콘텐츠 영역 설정

보통 모바일 청첩장은 대부분 모바일 브라우저에서 열리기 때문에, 일반 웹뷰에서도 모바일 뷰 기준으로 작동하도록 설정한다.
따라서 콘텐츠 영역의 폭을 모바일 크기로 제한했다.