학습내용
Firebase 특강 복습
CS
- 프로세스와 스레드
- 비동기
기초프로젝트
- 데이터 설계
- 기능
Firebase
필수 체크 권장 항목
SPA에 대해 설명할 수 있다.
Authentication 서비스의 용도를 설명할 수 있다.
Cloud Firestore 서비스의 용도를 설명할 수 있다.
Cloud Storage 서비스의 용도를 설명할 수 있다.
AWS S3를 사용하여 정적 웹호스팅을 할 수 있다.
기초 프로젝트부터 Firebase를 적용할 수 있다선택 체크 권장 항목
가비아에서 구입한 도메인을 S3 정적 웹호스팅 주소와 연결할 수 있다.
로그인, 회원가입 시 입력값에 대한 유효성검사를 적용할 수 있다.
GitHub 로그인 기능
1. GitHub 활성화
- Authentication 시작
- Sign-in method에서 GitHub 선택
- 사용 설정 활성화
2. Register a New OAuth application
- GitHub 홈페이지 접속
- 프로필 드롭다운 메뉴 Settings - Developer settings - OAuth Apps - New OAuth App
- Application name 작성
- Authorization callback URL: Firebase Authentication의 GitHub 활성화 페이지 하단 링크
- Homapege URL: Authorizatino callback URL에서 경로를 제거한 주소
- Register application 클릭
3. 클라이언트 ID
GitHub의 Client ID값 입력
4. 클라이언트 보안 비밀번호
- Github의 Client secrets
- Generate a new client secret
- 비밀번호 입력 후 나온 값 입력
- 저장
CS
프로세스(Process)와 스레드(Thread)에 대한 개념을 설명할 수 있는가?
멀티 프로세스와 멀티 스레드에 대한 개념을 설명하고 각각의 장단점을 설명할 수 있는가?
비동기(Asyncronous)에 대한 개념을 설명할 수 있는가?
비동기가 왜 필요한지에 대한 설명을 할 수 있는가?
프로세스와 스레드
정의
- 프로세스 : 메모리에 적재되어 실행되고 있는 프로그램의 인스턴스
- 스레드 : 프로세스 내에서 프로세스의 자원을 이용하는 여러 실행 흐름의 단위
인스턴스
설계된 것을 바탕으로 구현된 구체적인 실체
ex) PC에 크롬을 설치한다고 가정했을 때, 크롬을 설치한 것은 설계이고 크롬 브라우저가 실행되면 인스턴스라고 함
멀티 프로세스와 멀티 스레드
정의
- 멀티 프로세스 : 하나의 프로그램을 여러개의 프로세스로 구성하여 각 프로세스가 하나의 작업을 처리하는 것
- 멀티 스레드 : 하나의 프로그램을 여러개의 스레드로 구성하고 각 스레드가 하나의 작업을 처리하는 것
장점
- 멀티 프로세스
프로세스 중 하나에 문제가 발생해도 해당 프로세스만 죽고 다른 프로세스는 영향을 받지 않음 - 멀티 스레드
- 프로세스에 비해 메모리 공간과 시스템 자원 소모가 적음
- 간단한 통신 방법
- 적은 비용과 빠른 속도
단점
- 멀티 프로세스
- 복잡한 통신 방법
- 문맥 교환 과정에서 캐쉬 메모리 초기화 등 무거운 작업이 진행되고 많은 시간이 소모되는 오버헤드가 발생
- 멀티 스레드
- 자원 공유 동기화 문제 발생
- 하나의 스레드에서 문제가 발생해도 전체 프로세스에 영향
비동기
동기와 비동기
함수A와 함수B를 호출한다고 가정했을 때,
- 동기
함수A가 함수B의 작업 완료 여부를 신경쓰는 것 - 비동기
함수A가 함수B의 작업 완료 여부를 신경쓰지 않는 것
자바스크립트의 비동기
싱글스레드 논블로킹 모델의 환경에서 실행. 대표적인 비동기 프로그래밍으로는 callback, Promise, .then(), .catch(), async/await가 있다.
블로킹과 논블로킹
함수A가 함수B를 호출 후,
- 블로킹
함수B의 리턴값이 올 때까지 기다린 후 진행 = 제어권을 넘겨줌- 논블로킹
함수B의 작업 완료 여부와 상관없이 진행 = 제어권을 넘겨주지 않음
싱글스레드는 무거운 작업을 수행시 뒷순서에 있는 작업을 진행하지 않는다. 이 같은 환경에서 동기 프로그래밍을 사용시 웹페이지를 실행시 화면 로딩과 통신 연결에 많은 시간이 소요된다. 비동기 프로그래밍을 사용하면 이러한 단점을 보완하고 훨씬 효율적으로 작업을 수행할 수 있다.
기초프로젝트
데이터 설계
- 메인피드
- 게시글 내림차순 정렬
- 내 게시글에 수정 버튼 -> 클릭시 게시글 수정 페이지로 이동
- 내 게시글에 삭제 버튼 -> 클릭시 게시글 삭제 페이지로 이동 or 모달창
- 마이피드
- 프로필 이미지 + 닉네임 + 소개글(선택)
- 내 게시글 내림차순 정렬
- 게시글 수정/삭제 버튼 -> 클릭시 메인피드와 동일한 동작
원래는 마이피드만 하는 거였는데 슬라이더 유무와 내 게시글 모아보기 정도를 제외하면 마이피드와 메인피드와 레이아웃도 데이터도 같기 때문에 메인피드도 내가 하기로 했다. 이런 이유로 마이피드는 별도로 제작하지 않고 메인피드에서 프로필을 클릭시 마이피드에 해당하는 데이터를 보여주는 방식으로 해야할 것 같다.
기능
- 더보기
피드의 게시글이 일정갯수를 넘어가면 더보기 버튼으로 이전 게시물 열람 - 로딩 스피너
피드에 데이터를 불러오는동안 스피너 띄우기
