220628 프론트엔드 부트캠프 49일차 : 배포를 해보자!(2) - 정적 배포 실습, refreshToken 권한분기, reactNative
오늘은 정적배포에 대해서 배웁니다~
그리고 이번주에 실무에서 많이 쓰는 도커도 배울 거임~~~
정적 배포 실습
정적 배포를 하기 위한 새로운 프로젝트를 만들 것이다...
npx create-next-app class_build뒤에 class_build는 바꿀 수 있음!
package.json 들어가서 react 버전을 수정하고, 노드모듈즈 지우고 다시 yarn install
index.js 들어가서 Image 부분은 주석처리 한다.
yarn dev - 페이지 이동 속도가 느리다. 소스코드 수정하면 자동으로 refresh 된다. 하지만 실제 배포에선 그러면 안되잖아?!
yarn start - 페이지 이동속도 빠르다. 소스코드 수정해도 refresh되지 않음. yarn build 후에 가능하다.
스토리지에 업로드 하고 싶다면! start가 아니라 build하고 그 결과에서 html, css, javascript 파일을 뽑아내야 한다.
SSG - 정적 사이트 만들어내는 것
Static Site Generation
yarn add --dev typescript @types/node
yarn build:ssg
하면 따란,,, out이 생겼다!
404.html은 없는 페이지에 접속하면 실행되는 소스코드. 신기해
out안에 있는 걸 긁어다가 스토리지에 올리고 그 주소를 치면 해당 페이지를 다운로드 받아서 보여주는 것.
→ 무한 트래픽o, 24시간 yarn dev할 필요x
BUT 정적으로 미리 파일을 만들어놓는 것이기 때문에, 동적으로 변할 수 있는게 아니야.
boardId 자체가 주소값이 되어버린다.
다이나믹 라우팅 동적이라서 미리 html 파일 등을 만들어놓을 수가 없다.
이때까진 yarn dev가 다 알아서 동적으로 바꿔서 처리해줬던거야.
CloudFront에서 분기처리해서 정적 배포 가능한 건 정적으로, 동적으로 해야할 건 동적으로~
저 엑스친 부분(storage), 즉 정적 배포는 없어도 배포 가능하지만 트래픽이 많아지면 컴퓨터 계속 모니터링 하기가 힘들어지니 정적 파일에 대해서는 트래픽을 나눠주는 것!!!! 그럼 F쪽으로 들어오는 부하를 줄일 수 있다.
정적 배포 실습(AWS)
{
"extends": ["next/babel", "next/core-web-vitals"]
}.eslintrc.json 에 추가한다.
EC2랑 컴퓨터는 완전 별개,
EC2는 물리적으로 받아볼 수 있거나 그런 컴퓨터는 아님.
터미널로 접근할 수 있게끔 권한을 받는 것
일단 스토리지에 업로드 하는 걸 해보겠습니다.
스토리지 이름 : S3 (SSS 심플 스토리지 서비스)
AWS 자격증도 있대! ㅎ오~…
S3 → 버킷 만들기 → ACL 활성화됨, 버킷 소유자 선호 → !!모든 퍼블릭 액세스 차단!! 지금은 모두가 보기 위한 데이터, 그래서 체크 해제
버킷이름은 도메인이름과 동일하게 하는 게 좋다.
AWS 리전 : 아시아 태평양(서울)
객체 업로드 후에 권한주기
모두 선택 → 작업 → ACL을 통하여 퍼블릭으로 설정
속성→ 정적 웹사이트 호스팅(하나로 묶어서 이런 주소로 만들어주겠다~)
친구, 가족들 다 볼 수 있어요! 부산에서도.. 가능...ㅠㅠ ㅋㅋㅋ 멘토님 말씀이 너무 귀엽다.
가비아/고대디 Router53 DNS 작업하면 도메인으로 접속할 수 있게끔 해보겠음. ..
아직까지 클라우드 프론트는 필요없다. 분기할 때 필요함.
router53
route 53 → 호스팅 영역 생성
NS, SOA 레코드라고 부른다.
단순 레코드 정의
subdomain 만들고 싶으면 입력하면 된다.
도메인과 ip주소 일대일 매핑 시켜주는게 A 레코드
dig naver.com A (naver의 A 레코드를 보고 싶다 → DNS에서 바꿔줌)
CNAME 레코드 www. 입력했을 때 주소를 바꿔주는 역할
www.codecamp-deploy.shop 입력하면 밑에 있는 곳으로 접속이 되는 거야.
MX (Mail Exchange)
TXT 이것도 많이 사용된다.
도메인 소유권을 증명해야할 때가 있다. 도메인 가지고 특정작업 하려고 한다.
너가 정말 주인이면 TXT에다가 aaa라고 써봐~ 그럼 믿어줄게. 이런 식으로 요청을 많이 한다.
NS (Name Server)
방금 봤던 레코드가 네임 서버 레코드
가비아에서 DNS 관리할 수 있다.
AWS, 가비아 어디서 관리하는 게 진짤까?
가비아에서 구매했기 때문에 가비아에서 설정하는게 작동한다.
가비아 - 통합관리툴- 도메인 들어가서 - 네임서버 설정 변경해줄 것임
그럼 이제 가비아의 설정 내용들은 적용 안되고 AWS의 설정내용이 먹히게 된다.
(복사 붙여넣기 할 때 맨 마지막 .은 빼고 입력한다)
이건 원래 위험한 작업… 레코드 엄청 많다면, 변경하는 순간 설정 뒤엉켜버림
터미널에
dig 도메인(.xyz까지 입력) NS / A뒤에 NS나 A 입력하면 해당 레코드가 나온다.
NS가 먼저 등록되어있어야 한다. 그 뒤에 A레코드 특정 ip값 들어왔는지 확인.
A 레코드의 값은 계속 바뀐다.
refreshToken 권한분기
이젠 로컬 스토리지를 쓰지 않아~
// 그럼 이 방법은?
const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
if (!accessToken) { // 이렇게하면 새로고침하면 토큰 받아오는 중간에 실행되어버려서 튕김
alert("로그인 후 이용 가능합니다!");
router.push("/23-04-login-check");
}새로고침하면 토큰 받아오는 중간에 if문이 실행되면서 로그인 상태인데도 튕겨버린다.
1. restoreAccessToken을 두 번 요청하기
// [ 해결 방법: 첫번째 ] - restoreAccessToken 두 번 요청
// restoreAccessToken 을 두 번 요청하기! 비효율적
if (!accessToken) {
getAccessToken().then((newAccessToken) => {
if (newAccessToken) {
setAccessToken(newAccessToken);
} else {
alert("로그인 후 이용 가능합니다!");
router.push("/23-04-login-check");
} // 같은 걸 두 번씩 요청. 비효율적인 방법
})
}
2. 로딩 활용하기
// [ 해결 방법: 두번째 ] - 로딩 활용하기
// 아폴로 세팅에서
const [isLoaded, setIsLoaded] = useRecoilState(isLoadedState);
getAccessToken().then((newAccessToken) => {
setAccessToken(newAccessToken);
setIsLoaded(true);
}); // 로드가 완료되면 그때 true돼서 useEffect 실행되게끔 한다.
// withAuth에서
const [isLoaded, setIsLoaded] = useRecoilState(isLoadedState);
useEffect(() => {
if (isLoaded && !accessToken) {
// 있는지 없는지 찾아갖고 옴
alert("로그인 후 이용 가능합니다!");
router.push("/23-04-login-check");
}
}, [isLoaded]); // isLoaded가 바꼈을 때 useEffect 살행되게끔
3. recoil selector 활용하기
recoilValue는 그냥 읽는 것
API 요청할 것이기 때문에 ValueLoadable
// [ 해결 방법: 세번째 ] - recoil selector 활용하기
// store에서 ( 로직 실행 후 그 결과를 반환 )
export const restoreAccessTokenLoadable = selector({
key: "restoreAccessTokenLoadable",
get: async () => {
const newAccessToken = await getAccessToken()
return newAccessToken;
}
});
// 아폴로세팅에서
const aaa = useRecoilValueLoadable(restoreAccessTokenLoadable);
// (useEffect 안에서)
aaa.toPromise().then((newAccessToken) => {
setAccessToken(newAccessToken);
})
// 1번이랑 다른 점은, 요청해서 받는 건 같지만
// 요청한 selector를 withAuth랑 공유할 수 있다는 것!
// withAuth에서
const aaa = useRecoilValueLoadable(restoreAccessTokenLoadable);
useEffect(() => {
aaa.toPromise().then((newAccessToken) => {
if (!newAccessToken) { // 재발급 받았는데도 없다면
alert("로그인 후 이용 가능합니다!");
router.push("/23-04-login-check");
}
});
}, []);이렇게 하면 요청은 한 번만 가고, 받는 건 둘 다 받을 수 있다!
그리고 withAuth에선 재발급 받았는데도 없는지 확인해줘야 한다!
적용해볼 것
divRef.current.scrollIntoView({behavior:”smooth”});
갈수록 블로그 정리하는 게 어려워지고 있다=ㅅ=ㅎ그리고 미루게 된다... 분명 하루의 마무리 블로그, 일기! 꽤 재밌었는데 약간 의무화 되고 있어... 오늘은 한 2, 3주 미뤄온 이론 포스팅도 몇 개 했다... 미루는 건 정말 무서워 끝도 없어ㅠ_ㅠ 그리고 정리하다보면 진짜 내가 아는 건 티끌이구나 싶다. C++ 배울 때처럼 기본 이론서 한 권, 그리고 soen 같은 사이트가 있으면 좋을 것 같다'ㅅ' 있는데 내가 모르고 있는 거겠지? 일단 책은 학원에 있는 거 먼저 찾아봐야겠다.,,!! ! 아 맞다 드디어 팀이 나왔다. 7월 1일에 나올줄 알았는데 저녁먹다가 디스코드 와있는 거 보고 놀랐다. 팀은 정말 마음에 든다 ^3^ 사실 뭐 누구랑 되어도 맘에 안들것까지야 없겠지만, 내가 좋아하는 분들이랑 돼서 매우 좋다!!! 누군가에게 자랑하고 싶은데 자랑할 데가 없네, , , ! 같이 일하고 싶은 개발자가 되도록 열심히 하겠습니다~~~ 개인적으로 협업 능력을 많이 배우고 싶다!!! 내일 점심 떨려~~!!!
마지막주라고 생각하니까, 아니 팀플 있으니까 마지막주는 아니지만... 수업은 마지막주니까 조금 슬프다. 이제 bean 멘토님한테도 더이상 여쭤볼 수 없는거야? 지나가다 마주치면 물어볼 수 있다고 하셨지만... 마주친 적 한 번도 없잖아욧.... 그리고 곧 junny is cute 의 쥔공멘토님의 알고리즘 수업도 끝... 흑흑ㅎ긓흑흑... 오늘 여쭤본 것에 대해서도 바로 맹점이 되는 테스트케이스 잡아내시고 멋졌는데... 아니 진짜 이런 수업을 한 번의 실수없이 진행한다는 거 자체가 대단하시다 진짜루... 악 아무튼 끝이라고 생각하니까 다 아쉬워죽겠다. 20살 때 편의점 알바 그만둘 때 마지막 날 단골 손님들보면 눈물날 것 같았던 것 생각난다. 솔직히 아직도 몇몇분은 기억나는데 ㅠ 그분들은 나 기억도 못하겠지... 아니 어쩌다 이런 생각을 하게 되는거야...? ? ? ?? ? 접은글 안에서는 진짜로 막 다 쓰게 되네
어쨌든 요즘 기분은 아쉽고 아쉽다... 팀플이라는 또 다른 시작이 있지만! 팀플 끝날때도 아쉽겠다 막?!?~ 아 맞다 이쯤되면 내 freeboard.. 가 완성되어있을 줄 알았는데^^; 디데이까지 센 보람없이 완전 미완성 상태다. 오히려 시험 친게 더 나아서ㅋㅋㅋ 조금씩 이식 수술 하고 있다ㅠㅠ 그래도 오랜만에 프리보드 만질 수 있어서 좋았어~~~ 요즘 비오는데, 밤에 바람이 많이 불어서 기분이 좋다. 내일은 비 많이 온다던데 장화 신을 수 있을까?! 흐흫ㅎ