BE

빌드랑 배포 과정은 정상적으로 진행했는데 내가 만든 페이지가 아닌 무한 firebase hosting setup complete 창이 뜬다. 구글링해보니 대충 build 과정에서 build 폴더 내 파일이 뭔가 잘 안맞았던거 같다. 다시 npm run build 후 firebase init, firebase deploy로 재배포해서 정상 작동 확인~ PROJECT_ID.web.app 로 안들어가지면 PROJECT_ID.firebaseapp.com 으로 들어가보시길!

1. https://firebase.google.com 파이어베이스 홈페이지에서 로그인 후 우측 상단에 Go to console 클릭 2. 프로젝트 만들기 클릭 3. 프로젝트 이름 입력하고 약관 동의 후 계속 클릭 4. 진행 완료 후 앱을 추가하여 시작하기 중 웹 선택 (ios, android, web 선택 가능) 5. 앱 이름 등록 ( 호스팅은 나중에도 설정 가능하니 패스) 6. Firebase SDK 추가 (npm install 후 아래 내용들 복사) 7. 복사한 내용을 src폴더 내에 firebase.js를 만들어 붙여넣기 ( 외부에서 import해와야 하므로 export default app 입력) 8. index.js에 import 해오기 ( import만 해와도 Firebase 연결됨 )

대부분의 앱을 만들 때 필요한 부분들 인증 데이터베이스 스토리지 푸시 알림 배포 등... 위와 같이 앱을 만들때 필요한 부분들을 자동으로 만들어 주는 플랫폼. 일반적으로 Real Time App 에서는 Front-End - React.js Back-End - Node.js - Database - 데이터베이스와 실시간 통신을 할 수 있게 해주는 모듈 등 으로 구성 되어있지만 Firebase를 활용한 Real Time App에서는 백엔드 파트를 Firebase 플랫폼 하나로 다 구성할 수 있다.

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리. 쉽게 말해서 백엔드랑 프론트엔드랑 통신을 쉽게하기 위해 사용. 자바스크립트 내장 라이브러리인 fetch API보다 좀 더 개발자 친화적인 서드파티 라이브러리. 실무에서 fetch보다 Axios 많이 사용. Axios 사용 방법 npm install axios --save axios.get(API 주소), axios.post(API 주소) Axios 인스턴스화 하기 다양한 API를 요청하다보면 API key값이 겹치는 부분이 발생한다. 그럴때 중복된 부분을 계속 입력하지 않도록 인스턴스화를 한다. get movie by latest https://api.themoviedb.org/3/movie/latest?a..

Express 프레임 워크 사용 이유 Node.js 기반 서버 프레임 워크 Un-opinionated Framework / Micro Framework 프레임워크에서 제약하는 스타일 없음 적은 보일러 플레이트 코드로 앱을 실행할 수 있음 ** 스타일과 구조 관리는 모두 개발자의 몫 ** 메인테이너가 지향하는 완성형에 도달 새로운 기능이 추가되지 않음 = 안정적인 기능 2014년 5.0.0-alpha 버전 release 이후 2022년 2월 5.0.0-beta 버전 release가 마지막 Express 설치 방법 1. 패키지 매니저로 설치하기 (직접 모든 것을 추가해야함) Pros 필요한 것을 직접 추가해가며 서버가 실행되는 과정을 명확히 이해 Cons 모든 파일과 코드를 직접 추가 비즈니스 로직 작성 외..

REST API 란?REST + API 합성어, REST와 API에 대해 알아야 이해할 수 있다. APIApplication Programming Interface인터페이스의 한 종류Interface - 정보를 주고 받을 수 있는 매개 역할 (모니터, 키보드, 마우스, 스피커, USB, HDMI, 한국어 등) 고로 다른 소프트웨어에서 접근할 수 있게 제공되는 연결 방식을 말하며 다양한 방식과 스타일이 존재한다. API 종류SOAP RESTGraphQLRPCWebSocketWebhook각자 나름대로의 장단점을 가지고 있으며 어떤 것이 더 좋다기 보다 지향하는 바가 다른 스타일로 구분된다.  RESTRepresentational State Transfer뜻 그대로 특정한 저원에 대하여, 자원의 상태에 대한 ..