[DAY-24] VanillaJS를 통한 자바스크립트 기본역량 강화Ⅱ (1)
😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!
오늘의 소감은?
프론트 프로젝트 배포는 대부분 Heroku, netlify를 이용했으며, 현재 이 블로그는 Github Pages입니다.
다양한 프론트 배포 방식에 대해 알 수 있었고, 직접 실습을 진행했습니다.
Notion 클로닝 프로젝트 결과물인 Jungsion을 배포해봤습니다. 👏짝짝
배포의 과정은 하단에 있는 [2]번 에서 확인할 수 있답니다.
아쉽게도 해당 Jungsion의 링크는 데브 분들에게만 공개한답니다.
하단에 제 PR 링크 넣어놨습니다!
추후에 리팩토링 + API 생성 후 다시 재배포 할 예정입니다.
강의 듣다가 한참 웃었습니다.
로토님께서 저희의 흔적을 발견하셨더라고요...!
XSS 공격(?)의 일종인 버튼 '깜짝' 이벤트 구현하신 분 누구신가요.
로토님이 언급해주시니 너무 재미있었습니다.
[1] Project Deploy
프론트 프로젝트 배포에는 여러 방법이 있습니다.
저는 Heroku, Github Pages, netlify, Amazon S3를 사용해봤었는데 사전 지식 없이 오로지 구글링으로만 배포했었네요.
기본적으로 History API 기반의 SPA를 배포하기 위해서는,
해당 서비스에서 404 에러에 대해 처리할 수 있는 옵션이 필요합니다.
[1-1] 서버에서 직접 호스팅
이 방법을 학부생 프로젝트 때 가장 많이 사용했던 것 같아요. 그 중에서도 EC2를 사용했습니다.
또한 친구는 현재 지금 쇼핑몰 운영에 CAFE24를 사용하고 있어요.
서버에서 직접 호스팅을 하는 방법에서 이용할 수 있는 서비스는 정말 많습니다.
EC2, Google Compute Engine, Azure, Naver CLOUD PLATFORM, CAFE24, iwin, ORACLE CLOUD 등이 있습니다.
이런 서비스들은 이용료가 발생합니다.
따라서 저도 프로젝트를 하면서 사용하다가 프로젝트가 끝나면 바로 배포를 중지했었던 기억이 있네요.
[1-2] AWS S3 + CloudFront
AWS S3는 파일(html, js, img … )만을 저장하는 서비스 입니다.
CloudFront는 404페이지 문제를 해결해줍니다. 물론 따로 설정하는 과정이 필요합니다.
자체적으로 cash도 제공해서 요청 속도도 빠르게 변환해줍니다.
[1-3] Github Pages
제 개발 블로그도 Github Pages를 이용합니다.
뭐니뭐니 해도 가장 큰 장점은 부과되는 비용이 없습니다.
블로그 소스 코드가 궁금하시다면 👇 (리팩토링 안했어요… 놀라지 마세요..)
참고로 저는 Ruby jekyll을 사용했습니다.
아마 대부분의 github page 블로그를 만드시는 분들이 해당 사이트 생성기를 사용하실 것 같아요.
저는 추후에 블로그를 더 보강한 다음, 도메인도 구입할 생각입니다.
또한 gh-pages를 사용해서 배포할 수 있습니다.
[1-4] Firebase
Firebase는 굉장히 많은 기능을 제공합니다.
심지어 서버를 사용하지 않고도 데이터를 조작할 수 있습니다.
[1-5] Netlify
Netlify는 배포가 비교적 간단합니다.
저는 Git blog를 Netlify로 배포했었다가 다시 철회했었습니다.
Netlify는 Github 레포지토리를 연결해 바로 배포를 할 수 있습니다.
404에러를 해결하는 방법은 _redirects 파일을 생성해서 index.html을 넣어주면 됩니다.
다만 Netlify가 쓰는 서버에 한국이 없어서 사이트가 굉장히 느린 단점이 있습니다.
[1-6] Vercel
Vercel은 Netlify와 배포 과정이 비슷합니다.
Vercel은 NEXT.JS를 만드는 곳 입니다.
참고로 NEXT.JS는 리엑트의 서버사이드 렌더링 관련된 프래임워크입니다.
Vercel 또한 Git 레포지토리를 연결해서 바로 배포를 할 수 있습니다.
똑같이 404 에러를 해결하기 위해서는 별도의 설정 파일인 vercel.json 파일을 넣어서 경로를 지정해주면 됩니다.
[2] Notion-cloning Project Deploy
일단 저는 private 레포를 따로 생성했으며 외부에 코드를 공개하지 않습니다!
오로지 연습을 위한 배포라고 생각해주세요 🙂
Vercel을 처음 사용해보는데 정말 간단합니다..
1분도 채 걸리지 않아 바로 배포가 된 것을 확인할 수 있었어요.
그리고 강사님이 말씀해주신 404에러는 저에게도 찾아왔습니다..
따라서 저도 vercel.json 파일을 생성하고 해당 코드를 넣어줬습니다.
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}
해당 코드가 반영된 것을 확인한 후, 다시 배포된 페이지로 들어가봤습니다.
Jungsion이 궁금하시다면 👇
★ JUNGSION LINK! ★
짜잔! 노션 배포 완료입니다.
해당 프로젝트는 코드 리뷰 반영 + 수많은 리팩토링 + 직접 API를 만들어서 재배포할 예정입니다. 🙂
댓글남기기