Beginner 12회차 (8/14) | store 코드 수정, Vercel로 serverless 구현하기 실습
dearsuhyun
2024. 8. 14. 22:40
store 코드 수정
기존 코드
수정코드
기존 코드의 경우 특정 속성이 다른 속성을 가지고 와서 쓸 수 없기 때문에 밑 사진처럼 함수 안에서 다른 함수를 호출할 수 없음
수정 코드의 경우 선언되는 유효범위 안에 다른 함수도 포함되어있어서 호출하는 것이 가능
Vercel
프론트엔드 웹 애플리케이션을 배포하고, 관리하기 쉽게 만들어주는 클라우드 플랫폼
1. Hosting Server
html, css, js, img, font --> 정적 파일들을 저장(like 하드디스크), 연산이 되지 않음
2. Computing Server (연산 기능이 필요할 때)
- Serverless Functions
서버가 없는 데 동작하는 함수(기능)
24시간 서버가 켜져있지 않아도 켜져있는 것 처럼 동작 가능
npm i -D vercel
의존성 패키지 설치 후 vercel 홈페이지에 가입해서 연결해야 함 !
node JS에는 fetch 함수가 기본 내장되어 있지 않음. 따로 설치 필요.
npm i node-fetch
혹은 axios 다운 받아 사용 (fetch 함수보다 기능이 더 많음)
npm i axios
파일 설정 !
vite는 클라이언트 서버, vercel은 백엔드 서버
npm scripts 중에서 watch-로 시작하는 명령을 동시에 시작해 주세요 !
vercel 사용하려면 로그인을 해서 연결해줘야 한다
백엔드 서버 연결 완료 !
vercel 홈페이지에 이렇게 연결된 것을 볼 수 있음
위 pakage.json에 설정해 놓아서 npm run dev 실행 시 vite와 vercel 서버가 동시에 열리는 것을 볼 수 있음 !
main.tsx 파일에서 서버로 데이터 요청
api 폴더에 hello.ts 파일에 백엔드 서버구축
npm run dev해서 서버 열어준 뒤 화면 보면 이렇게 잘 나온다 !
갑자기 대량 오류가 떴을 때 해결 방법
vercel 설치만 했을 뿐인데 저렇게 오류가 났는데 이럴때는 라이브러리 읽어오는 데서 오류가 난거라
vs코드 재부팅이나 TS를 사용하고 있으니 그 부분 재시작 해주면 해결이 되는 경우가 있다고 한다 !
아직 붉은 색 ,, 에러 ,, 무서와요 ,, 이러지마 제발 (?) 하지만 ? 이제 재부팅부터 해본다 ... ㅎ
* AWS EC2 : 24시간 365일 동작하는 서버 사용하는데 여러 리스크 존재(비용 등) ↓ AWS Lambda (serverless function) 접속했을 때만 서버를 켜서 컴퓨팅해서 실행하고 작업하지 않으면 서버를 끄는 24시간 동작하지 않는, 필요시에만 켜지는 !
* npm i -g 전역적으로 무언가를 설치하는 건 부정적인 의미가 강함 지역적으로 관리하는 것이 더 좋음
* 프로젝트 파일명에 띄어쓰기 있으면 인식 되지 않으므로 이 부분 주의
* 일반함수 --> 호이스팅 가능 (밑에 선언(무조건 function으로 시작)해도 위에서 사용 가능)
async function getTodos() {
// updateTodo() --> 일반함수는 호이스팅이 가능하기 때문에 이렇게 사용할 수 있다.
}
but 밑 코드는 함수 표현식이기 때문에, updateTodo가 이처럼 되어있으면 호이스팅이 되지 않음. 함수 선언식은 무조건 function이 붙음 !
const updateTodo = async function (updatedTodo: Todo) {}
* 프론트엔드에서 동작하는 코드는 절대 민감한 내용을 숨길 수 없음 API_KEY 등 ,, 백엔드 코드로 넘어가야 함 --> 프렌드엔드 개발자도 백엔드 부분을 이해하고 어느정도 쓸 수 있어야 함
