Part 1. 기본 React 프로젝트 만들기 및 AWS 배포부터 도메인 연결하기

서론

- 도메인 연결의 필요성

- 글의 목표 및 개요 (독자들이 이 블로그만 보고 배포부터 도메인 연결까지 쉽게 따라할 수 있게 정리하기)

 

준비사항

- VScode를 이용해서 React 프로젝트 생성

- 호스팅 서비스 (AWS S3 + CloudFront +  )

---

도메인의 필요성

디지털 시대에서 온라인의 존재감은 필수적
웹사이트나 블로그를 운영하는데 있어 가치의 의미를 가지기 때문

•  검색 엔진에서 가시성을 높이기 위해 즉, 사용자들이 기억하기 쉽고 관련된 키워드를 포함한 도메인은 검색 결과에 높은 순위를 차지할 가능성이 높음
• 정체성이 있는 주소 이름은 사용자에게 브랜딩과 기억하기 좋은 주소로 쉽게 다가갈 수 있음
  예를 들면 navigate-service.com보다 naver.com이 간략하고 사용자가 더 쉽게 기억하기 쉬운거처럼(naver는 navigate에 er을 붙여 탄생했다고 함)

1. React 프로젝트 생성

• 터미널에서 바로 생성하는 방법도 있지만 저는 VScode에서 생성하는 과정을 보여드림
• 터미널에서 밑에 코드를 입력해줍니다

npm create vite@latest 프로젝트명 -- --template react

// 여기서 -- --template react에서
// --는 무엇이고
// --template가 무엇인지 궁금해할수도있다

// --는 그냥 구분하는 선이다라고 생각하면 쉬움 (npm 옵션 -- 인자)
// --template는 내가 사용할 템플릿을 정하는거임
// 밑에 공식문서 스크린샷을 보면 여러가지 템플릿이 있음

공식 문서 https://ko.vite.dev/guide/

 

npm을 설치하면 아래와 같이 진행하라고 알려준다

터미널에서 한줄씩 따라치면 됨

 

cd blog (blog폴더로 이동)

npm install (의존성을 설치 (npm i 로 줄여 쓸 수 있음))

npm run dev (vite를 실행)

 

package.json에서 scripts를 보며 어떤 명령어가 있는지 확인해 볼 것

npm run dev를 실행하면 밑에와 같이 Localhost가 나온다

MAC기준) commacd 누른 후 local주소를 클릭한다

그러면 밑 사진과 같이 사이트로 들어가지게 되면 완성

2. 프로젝트 빌드

배포를 하기 위해선 build 작업을 해줘야 하는데 왜 해줘야 하는지 알아보자

• 간단하게 얘기하면 코드에 불필요한건 지우고 파일 크기를 줄여줌
• build up이란 단어가 있듯이 배포하기 위한 준비 동작(build)라고 생각하면 쉬움

자 본론으로 VScode로 돌아와 control + C를 누르면 터미널에서 로컬 서버를 취소할 수 있음

 

밑에 코드를 입력해서 build를 해주자

npm run build

 

그러면 이런 식으로 뜨면 성공한거고

옆 탐색기에 폴더랑 파일들을 보면

이렇게 dist안에 assets폴더랑 파일들이 생성됨

 

 

그러면 이제 다음 Part 2로 가봅시다

다음 Part https://ybeen.tistory.com/12