2024. 2. 15. 02:40ㆍWeb
여러가지 프로젝트를 진행하면서 자꾸 똑같은 내용으로 구글링을 하는게 비효율적이라는 생각이 문득 들었다.
그래서 오늘은 리엑트 타입스크립트 프로젝트 만들기 및 파이어베이스 호스팅으로 배포하기에 대해 정리해 보려고 한다.
바탕화면에 react-ts라는 이름의 빈 폴더를 하나 만든 뒤 vsc로 열어서 시작한다.
사전 준비 사항
Node.js, npm, git 설치
1. TypeScript 프로젝트 생성
아래의 명령어를 터미널에 입력 후 엔터.
프로젝트 이름은 영어로 지어주면 된다. 나는 프로젝트 이름 자리에 test라고 적었다.
npx create-react-app 프로젝트이름 --template typescript
잠깐 기다리면 터미널에 이런 문구들이 뜨면서 프로젝트 생성이 완료되었음을 알려준다.
탐색기를 보면 이렇게 폴더들이 생성된 것도 확인할 수 있다. 가장 위에 있는 test 폴더가 모든 파일 및 폴더들을 담고 있는 타입스크립트 프로젝트이다.
2. 프로젝트 실행
사실 위에 첨부한 터미널 사진을 보면 프로젝트 실행을 위한 방법을 알 수 있지만, 한 번 더 정리해보겠다.
우선 프로젝트 디렉토리로 이동해야 한다.
현재 내가 있는 디렉토리는 react-ts 이다.
다음의 명령어로 입력해 프로젝트 디렉토리로 이동한다.
cd 프로젝트이름
내 프로젝트는 test라는 이름이므로, cd test를 입력해주었다.
다음과 같이 test 디렉토리로 이동한 것을 확인할 수 있다.
이제 다음의 명령어로 리엑트 프로젝트를 실행한다.
npm start
잠시 기다린 다음 이런 페이지가 열리면 성공.
터미널에 커서를 놓고 ctrl + c 를 누르면 서버를 종료할 수 있다.
주의할 점!
이런식으로 반드시 [ cd 프로젝트이름 ] 명령어를 통해 프로젝트 디렉토리로 이동한 다음 [ npm start ] 명령어를 사용해야 한다. 그렇지 않고 상위 폴더에서 npm start를 입력하면 이런 오류가 발생한다.
프로젝트 파일에 들어간 다음 해야 할 작업을 파일 바깥에서 했기 때문이다. 굉장히 많이 하는 실수. 이 사실을 모르면 시작하기도 전에 진땀 뺄 수 있으니 주의하길.
3. 배포
웹 개발을 완료했다면 모두가 접속할 수 있도록 배포해야 한다.
index.html 파일을 아주 약간 수정하여 테스트 페이지임을 알아볼 수 있도록 했다.
이제 터미널에 다음의 명령어를 입력해준다.
npm run build
잠시 기다리면 이렇게 build 폴더가 생긴 것을 확인할 수 있다.
터미널에는 이렇게 나온다.
그리고 다음의 명령어를 입력한다.
npm install -g serve
위 명령어 실행이 완료되면 이 명령어를 입력한다.
serve -s build
완료되면 터미널에 이렇게 나온다.
로컬 주소로 배포가 되었고, ctrl + 클릭 or 주소 복붙을 해서 접속해보면 잘 들어가지는 것을 확인할 수 있다.
이제 파이어베이스 호스팅을 할 차례다.
Firebase | Google’s Mobile and Web App Development Platform
개발자가 사용자가 좋아할 만한 앱과 게임을 빌드하도록 지원하는 Google의 모바일 및 웹 앱 개발 플랫폼인 Firebase에 대해 알아보세요.
firebase.google.com
위 사이트에 접속해준다. 회원가입 안했으면 회원가입 후 진행하면 된다.
로그인 후 "시작하기" 버튼 클릭.
"+ 프로젝트 추가" 클릭
"프로젝트 이름 입력" 칸에 원하는 이름 입력.
이렇게 react-test처럼 흔한 이름은 중복 방지를 위해 이름 뒤에 임의로 숫자 및 문자가 붙어서 설정된다. 그게 싫다면 독창적인 이름을 지어주면 된다. 나는 귀찮으니 패스. 프로젝트 이름 작성했으면 "계속" 클릭.
애널리틱스 사용 설정 여부를 선택하고 "계속"클릭. 선택은 필수가 아니니 원하는 사람만 체크하면 된다. 나는 선택하지 않고 진행하겠다. 선택을 해제한 다음 "프로젝트 만들기" 클릭.
참고로 애널리틱스 선택을 하면 단계가 하나 늘어난다.
여튼 잠시 기다리면 이렇게 프로젝트가 만들어진다. "계속" 클릭.
빌드 > Hosting > 시작하기
이 화면에서 [ npm install -g firebase-tools ] 명령어 복사 후 vsc 터미널에 붙여넣고 엔터. 완료되면 "다음" 클릭.
[ firebase login ], [ firebase init ] 명령어를 차례대로 vsc 콘솔에 입력.
firebase init을 입력하면 이렇게 나오는데, Y를 입력하고 엔터.
그럼 또 선택지들이 나오는데, 방향키로 내려서 [ Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys ] 선택 후 엔터. 선택은 스페이스 바를 눌러서 하면 된다. 선택 안하면 옵션을 선택하지 않았다면서 터미널에 오류 메시가 나옴. 아래 사진처럼 괄호 안에 * 표시가 있으면 선택된것.
다음 질문에서 [ Use an existing project ] 선택 후 엔터. (스페이스 누를 필요 없이 그냥 엔터 치면 됨)
연결할 파이어베이스 프로젝트를 선택 후 엔터. 마찬가지로 방향키로 이동 후 엔터 누르기만 하면 된다.
다음 질문들은 이렇게 답변해주면 된다. 파란색 글씨 참고.
파이어베이스 페이지로 돌아가서 "다음" 클릭
[ firebase deploy ] 명령어를 기억해두고 "콘솔로 이동" 클릭
페이지 맨 밑에 있는 "다른 사이트 추가" 클릭
원하는대로 주소 입력하고 "사이트 추가" 클릭. (대문자 불가능)
여기까지 했다면 다시 vsc로 돌아가서 firebase.json 파일에 다음과 같이 작성해준다. [ "site": "주소", ] 이렇게 추가해주면 되고, 끝부분에 콤마를 붙여줘야 오류가 발생하지 않는다.
작성 완료 후 콘솔에 [ npm run build ] 명령어를 입력해 다시 빌드해준다.
npm run build
그리고 아까 기억해두라고 했던 명령어를 입력해준다.
firebase deploy
완료되면 콘솔에 이렇게 뜬다.
Hosting URL에 접속해보면 잘 되는 것을 확인할 수 있다.
끝!
마무리
이 방법의 장점은 1. 간단하고 2.공짜 라는 점. 처음 하면 복잡하다고 느낄 수 있지만, 하다보면 익숙해질 것이다. 구글 짱!