공부방

이전에 팀프로젝트로 만든 파일을  로컬에서만 쓰다가 오늘 호스팅 하는 방법을 배워서

호스팅 하는 방법을 올려보려고 한다.

리액트파일과 서버파일이 있어서 두곳에 따로따로 호스팅 해줘야 한다. 

Node.js 서버 호스팅

HEROKU

https://dashboard.heroku.com/apps

위의 사이트에 들어가서 가입을 해줘야한다.

가입을 하면 로그인을 하고 create new app으로 들어가 준다

이제 여기서 이름을 설정해 주고 Create app을 누르면 깃허브리포지터리 같은 게 만들어진다.

만들고 나면 이런 창으로 이동하게 되는데 깃허브처럼 파일을 여기로 보내주면 된다

heroku로 push 하기 위해서는 heroku를 설치해줘야 한다. 

https://devcenter.heroku.com/articles/heroku-cli

링크로 들어가서 해당하는 운영체제와 옵션에 따라 설치해주면 된다.

설치하면 이제 호스팅 할준비가 끝났다 호스팅할 파일들도 준비를 좀 해줘 야한다

1. 호스팅 할 서버 파일이름을 index.js로 변경 

2. 호스팅 하는 파일의 port번호 변경

const port = process.env.PORT || 8080;
//지정해주는 포트번호가있다면 지정번호를사용하고 없다면 8080포트 사용

3.package.json 변경

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },

이렇게 해준 뒤에 이제 깃허브에 push 하는 것과 똑같이 해주면 된다 

cmd 나 터미널을 이용해 주자

서버폴더위치에서 입력해줘야 한다.

주의사항*

서버를 깃허브에서 클론 해온 경우 node.module이 설치되어 있는지 확인 

없다면 npm install로 설치

. git 폴더를 지우고 처음부터 git init 하기 

업로드 전 서버를 실행시켜 보고 잘 실행되는지 확인!

json의 scripts.start 부분이 서버의 파일이름과 일치하는지 확인!!!

터미널에 입력

$ cd 프로젝트 위치
$ git init
$ git add .
$ git commit -m "heroku deploy" //커밋은 넣고싶은메모를 넣으면된다
$ heroku git:remote -a app name //이부분은 deploy에 쓰여있으니 복붙!
 --> 예시 $ heroku git:remote -a zzang9ha

$ git push heroku main //현재브랜치이름을 넣어주자 브랜치변경을 하지않았다면 master일수도 있다

push 까지 해 주고 오른쪽상단에 있는 open App을 눌러서 이런 창이 뜨면 성공이다 다른 에러창이 뜬다면 

json파일과 포트번호 그리고 모듈들이 잘 설치되어 있는지 다시 확인해 보고 리포지터리를 삭제한 다음 다시 만들어서 호스팅을 시도해야 한다..

서버의 데이터를 요청하는 주소로 이동하니 데이터를 잘 보내주는 걸 볼 수 있다! 이제 서버 끝 

React.js 호스팅

Vercel 가입하기

https://vercel.com/

위 사이트를 통해서 github를 연결해서 바로 호스팅 할 수 있다.

깃허브로 회원가입이 가능하니 깃허브로 가입하고 빠르게 진행할 수 있다.

vercel에 리액트 파일을 호스팅 하기 전에 리액트 파일의 서버주소를

호스팅 된 노드서버주소로 변경해 준 다음 npm start로 실행해 보자.

나는 서버주소를 apiurl.js에서 변수로 선언해서 사용하고 있어서 여기 주소만 변경해 주겠다. 뒤에 / 가 필요하면 붙여주고 필요 없으면 때 주면 된다 서버에 요청을 어떻게 하는지 확인하자.

이제 다시 vecel로 돌아가서 

Add new에 project를 클릭하고 들어가서

깃허브를 연결해 주고 호스팅 하고 싶은 파일을 import 해주면 된다.

이제 이 화면에서 Deploy 해주고 기다리면 호스팅이 끝난다.

여기서는 수정할 부분이 있으면 로컬파일을 수정해서 다시 깃허브에 push 해주면

vercel에서 다시 호스팅 해준다.

https://team-project-thenadlee.vercel.app/

호스팅 된 팀프로젝트.

저번 팀플을 끝내고 바로 시작한 혼자하는 리액트 프로젝트는 

카페의 사이트를 만드는 프로젝트이다. 친구가 카페사장님이라 사진이나 필요한 니즈도 알아내기 쉬울것같아서 카페사이트를 만들어 보기로 했다. 나도 예전에는 빵을 만들었어서 이런기능들이 있으면 좋겠다 싶었던것들을 넣어볼려고 한다.

넣고싶은기능

상품목록 페이지

상품디테일 페이지

예약기능 (픽업시간 날짜설정)

포스팅 슬라이더, 포스팅 디테일 페이지

관리자용기능

포스팅 등록(이미지,타이틀,해시태그)

메인배너의 이미지를 관리자가 변경할수있도록만들기

일 예약금액의 총합 볼수있는 페이지

고객관리(회원가입한 고객의 이름과 번호)

예약확인.

사용하는 라이브러리

react-router-dom

antd

react-icons

styled-components

react-datepicker

axios

넣고싶은 기능들을 모두 넣을수있을지는 모르겠지만 일단은 시간이되는데로 해보려고한다.. dev-Matching도 접수해놔서 학원에서는 데브매칭공부하고 집에오면,, 그거복습하고 포트폴리오 할시간이 정말 너무 모자라다.. 타입스크립트도 복습을 좀 해놔야 써먹을 수있을것같은데 해야할건 너무 많은데.. 잠도모자라고 몸도모자라고 어찌되었는 쥐어짜내서 학원의 마지막달을 아름답게 마무리 했으면 한다. 취업하면 이거보다 더 힘들테니 적응한다고생각해보자ㅎ

이제 3월 23일 수료가 2달 앞으로 다가오면서 슬슬 포트폴리오 압박이 들어오기 시작했다.. 

무조건 리액트로 만들어야하는데 아직 리액트로 엉성한 사이트도 제대로 만들어보지 못해서 걱정이 크다..

검색하다 보면 어떻게든 또 만들겠지 라는 생각으로 일단 함께할 팀원을 모아서 총 4명이서 여행코스를 만들어주는 사이트를 만들기로 했다. 각자 해외에 살다 온 경험이 있는 분들이라서 각 지역별로 추천관광지를 리스트업 하고 사용자가 추천관광지를 클릭하면 지도에 마크가 찍히고 서로 선으로 이어져서 여행동선을 한눈에 보기 편하게 만들어주는 사이트이다.

이걸 위해서 지도이미지와 마크 그리고 경로를 그려주는 기능이 필요했는데 마침 구글 maps API에서 모든 기능을 다 지원한다고 해서 일단 구글맵스를 공부하면서 어떻게 적용할지 고민하고 있다. 

리액트로 처음 페이지를만들면서 가장 고민되는 점은 어떤 변수들을 상태로 관리해야 하는지이다. 아직 해결은 못했지만 돌아가는 구성을 하나씩 맞춰보면서 사용자와 상호작용하면서 계속해서 변경되는 값들을 상태값으로 관리하려고 생각 중이다.

1. 메인페이지

1) 여행선택
2) 사이트소개
3) 이용방법

2. 로그인 페이지

3. 일정 만들기 페이지

1) 달력, 선택목록 컴포넌트
2) 멀티버튼 (지도 div위에 떠있게)
-- 이용방법, 여행기(블로그포스팅), 추천일정, 일정생성
3) 지도(googlemaps api)
3) 추천 여행지.

4. 일정생성 후 뜨는 페이지

일정저장, 이메일전송, 엑셀표출력


이렇게 어떤 페이지를 만들어야 하고 어떤 요소들이 들어가는지 미리 정리해두었고

각 페이지별로 배치를 어떻게 할지도 작성했다.

또 이번에는 제대로 협업을 해보기 위해서 github를 이용해서 collaborate에서

서로 코드리뷰를 하면서 코드를 계속 합쳐가면서 작업해보려고 한다.

(저번에는 그냥 구글드라이브에 각자 올려서 정리했더니 코드 합치는데만 반만년걸렸다..)

모든 게다 처음이지만 나중을 위해서 좋은 경험이 될 거라고 생각한다. 기능에 조금 욕심을 내고 싶지만

우선은 핵심기능부터 만들어보고 일정 안에 끝낼 수 있다면 다른 기능도 추가해서 넣어보려고 한다. 

요즘 chatGPT도 유행이던데 여행코스를 AI가 짜서 넣어준다던가.. 아니면 날씨를 API로 받아와서 일정별로 날씨를 알려준다던가 하는 추가적인 기능도 일단은 고려 중이다. 다 할 수 있으면 좋겠다..ㅎ