배포
과제는 제출했는데, 배포했으면 배포링크를 적어달라하셨다.
선택이었나본데 한 번 해보고싶어 마감3시간전에 후다닥 달리는중.
배포를 하려면, 레포지토리를 선택해야한다. vercel에서 해보려함.
왜냐고?
=> 다른 교육생분들도 여기서 배포하심. 당장 비교해가며 볼 시간이 없다...
그냥 들어가서 읽은대로 뚝딱하니 쉽게 됨.
커밋하니까 자동으로 재배포도 된다. 와웅!
환경변수
열심히 뒤져봤는데 결국 바닐라JS에서 쓰는건 불가능함...
=> node.js에서는 사용 가능하다.
그래서 일단 배포하고 생각해봐야겠음.
참고로 리액트나 nextjs는 node.js기반이라 사용가능하다.
특정 브랜치에서 커밋이력까지 복제하기
git clone --mirror --branch <복제할 브랜치이름> --single-branch <복제할 레포주소>
git remote set-url --push origin <새로 붙여넣을 레포주소>
git push --mirror배포용으로 내 레포지토리에 과제 레포지토리의 브랜치를 복제했다.
--mirror: 커밋내역을 포함하여 리포지토리를 복제한다.--branch <브랜치 이름> --single-branch: 정확히 딱 그 브랜치만 선택하는 기능remote set-url: 원격 저장소의 url을 바꿔준다! 새로 만들 레포지토리 주소를 넣으면 되겠지?
배포 강의
다음날 강의가 배포관련이다...뭐지?
아무튼 들었으니 정리함.
historyApi기반 SPA를 배포하려면, 404에러처리가 필요하다.
=> index.html만 제공하는데, 새로고침을 하거나 주소를 입력하여 들어가면 주소에 매칭되는 html파일이없어서 오류가 남.
배포 방식은 여러개가있다. 제일 자유로운건 서버에서 직접 호스팅하기!
ec2
그냥 가상서버 터미널 들어가서 git clone해버리면 사용하기 편하다
ec2에서 설정뚝딱뚝딱하고 열면 됨.(개인서버 같은 방식)
s3 + cloudfront
s3는 파일만 제공하는 방식. 사실 s3만 올려도 사용할 수 있음.
하지만 cloudFront는 캐싱도 해주고, 404에러도 잘 처리해준다(프록시인가...?)
인프라 레벨 최적화도 프론트에서 한다.
ui가 똥이고, 네트워크 지식이 꽤 필요해보인다.
CS지식은 역시 미리 공부해놓길 잘했다! 필요없는 근본지식이란 없다.
github pages
깃허브에서 제공하는 정적 페이지다.
예전에 nwitter을 firebase기반으로 만든 페이지를 배포할때 사용해봤다.
- 만들고싶은 주소 이름으로 레포지토리 만들어주기
gh-pages패키지 다운받기.- 패키지 파일 설정해주기
//pakage.json
{
"name": "pnp",
"version": "0.1.0",
"private": true,
"homepage": "https://username.github.io/repository/",
"dependencies": {
//...
}
//pakage.json
{
"scripts": {
//...
"predeploy": "npm run build" //혹은 yarn start,
"deploy": "gh-pages -d build"}
}그다음 npm or yarn run deploy해서 빌드!
하지만 바로 보이진 않을 거다.
=> 우리의 파일은 주소/index.html로 처리하는데, github pgaes는 주소/브랜치이름/index.html이 들어간다.
따라서 url파싱은 개발, 배포환경변수 설정하여서 처리하는것이 좋아보인다(어떤걸로 배포할지 미리 정해놓는것도 좋아보인다).
참고로 깃허브에서 "."쩜 누르면 웹 vscode가나옴!
신기한걸?
firebase
구글에서 만든 녀숵이다. hosting기능을 사용하면 된다.
참고로 cli를 사용한다. 프론트엔드 개발자도 터미널과 친숙해져야한다.
=> 공부용 노트북을 구매하고 리눅스로 깔앗는데 역시 좋은 방법이었다!
firebase는 index.html 자동매핑기능을 지원한다!
안되면 rewirtes에 적어준다.
{
// other options...
"rewrites": [
{ "source": "**", "destination": "/index.html" },
]
}Netlify
깃허브 레포지토리를 딱 등록하여 배포하는 기능이다!
완전 편한걸~?
얘는 404에러처리할때 _redirects파일에 /* /index.html 200라고넣어주면 된다.
가상서버에서 에러처리하던 기능을 뚝딱 할수있따니 아주 좋군
Vercel
어제 후다닥 배포하면서 이용했던게 vercel이다.
Netlify서버는 한국이 없다! 그래서 보통 한국에선 Vercel을 이용한다 ㅋㅋ
이것도 그냥 Netlify처럼 읽으면서 뚝딱하면 만들어진다.
느낀점
이번에 제작한 notion클론을 꾸준히 리팩토링하여 포트폴리오 및 개인용으로 사용해보겠다.
아마 대대적인 리팩토링이 있지 않을까? 두렵지만 재밌을 것 같다!
포트폴리오는 JS, React, Next이렇게 새개정도면 괜찮을것 같기도 하고.
내일 까먹지 않기위한 리덕스 조금
createStore(reducer)
//이렇게 전달하여서 각 리듀서마다 스토어 생성!!!!
//반환값은 getState, subscribe, dispatch다.
// 주말에 구현 해보자잉