소개
이제 스터디 마무리 및 발표까지 얼마 남지 않았으며, Streamlit을 통한 서비스 고도화는 UI 관점에서 평소 생각했던 것보다는 고점이 더 높았으나 결국 한계가 있어서 프론트와 백으로 분할하여 개발을 진행하고자 합니다.
진행 방법
초기 계획은 Flutter와 FastAPI 조합이었지만, 플레이스토어나 앱스토어의 심사 과정에 따른 소요 시간을 고려하여 Fluuter 기반 크로스플랫폼 앱 개발에서 React 기반 PWA 형태의 웹앱 개발로 방향을 틀었습니다.
React 선택 이유 :
Claude에서 생성해주는 UI를 최대한 활용하고자 했습니다.
React를 해본 적이 없기에 초기 환경 설정 없이 간편하게 배포할 수 있는 웹 기반 개발 환경을 고려하였습니다.
Replit vs Codesandbox :
Replit : 유료 결제 없이 배포가 불가능
Codesandbox : Github 연동은 매력적이였지만, 그렇게 될 경우 Virtual machine credits 제한(월 40시간)이라는 단점이 있고, 사용해보니 불편한 점들이 많았습니다.
로컬 환경 구축 및 개발로 결정 :
니꼬쌤의 영상 "AI가 정말 개발자를 대체할 수 있을까" 을 보고, 그냥 환경 구축부터 개발까지 로컬에서 진행하기로 결정했습니다.
로컬 환경 구축 시작 :
우리 GPT와 함께 즐거운(?) 개발 환경 세팅을 진행했지만, Create-React-App 을 활용한 프로젝트를 생성부터 React Ver 충돌 발생하며 에러 발생... 😢
1차 : 프로젝트명은 대문자가 안됨
brew install node npx create-react-app My-AppCannot create a project named "DayCoach_React" because of npm naming restrictions: * name can no longer contain capital letters2차 : 프로젝트명 소문자로 바꾸고 재진행 시 충돌 발생
create-react-app은 19를, @testing-library/[email protected] 은 18을 요구함
brew install node npx create-react-app my-appnpm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/[email protected]
GPT가 제시해준 1,2안 모두 실패
1안 : npm 의존성 검사 완화
npx create-react-app my-app --legacy-peer-deps2안 : react ver 고정
npx create-react-app daycoach-react --use-npm
구글링하다가 찾은 글에서 보니 리엑트 팀에서 Create-React-App 관리하기 귀찮아서 던져버렸다고...?!
(블로그 해당 부분 캡쳐 사진)
해당 블로그 글 참고해서 React+Vite로 다시 처음부터 진행
brew uninstall node brew install nvm mkdir ~/.nvm echo ~~~ echo ~~~ source ~/.zshrc > nvm install 18 > nvm install --lts 18 > nvm install > nvm use 18 npm create vite@latest # 프로젝트명 입력 : my-app # framework 선택 : React # variant 선택 : JavaScript cd my-app npm install npm run dev
결과와 배운 점
뭔가 손에 들린거는 없는데 시간만 계속 지나가고 있어서...시작이 반이다! 화이팅!!
