[10분 테코톡] 루피의 우아한 테크코스 도서관리시스템

[우아한 테크코스]
루피의 우아한 테크코스 도서관리시스템
https://www.youtube.com/watch?v=PCXlgnYekBg

제한된 환경에서
서비스를 강제적으로 사용할 수 있게 함?

>> 서비스 개발에 있어.. 
서비스 기획 -> 구현 -> 배포 
-> 서비스 운영 -> 유지보수 -> 이용자 피드백 반영

아무도 안하는 것 같아 혼자서 와이어프레임을 작성..

[5인조 팀과 함께..]

1. 전략 수립
   - 장소를 조회, 검색 기능을 빠르게 구현하고 배포
        => 시장 선점, 진입 장벽 구축
   - UI, UX에 익숙해진 사용자에게 추가기능 구현 및 배포
        => 시장 장악

2. 뭘로 만들지?
   - QR코드를 사용하니 앱?
        => 깔기 귀찮고(만들기도) 본인을 더 불편하게 할 수 없음
   - 웹?
        => 가능한지 모르겠음..
        => 그럼 도서관은 바코드로 하니까 QR코드로 해야겠다고 가정
               >> 근데 카메라를 써야 하는데 웹으로 가능?
                   == 가능
               >> 프론트를 뷰(Vue.js)로해야겠다고 결론
                   >> QR reader를 만들 수 있는가?
                      == 또 누가 만들어놨음 == 가능
      >> 사용할 프로그램
        : Vue.js(프론트)
        : Node.js(백)

 >> 프론트 - Vue.js
    : 유저가 사용할 유저 페이지
       - 서버에 등록해 놓은 책을 보기만 하는 것
 
    : 책 관리할 관리자 페이지
       - 책을 등록하는 것
          : 서버를 통해 N사 검색 API를 이용하여 
            책을 검색하면 바로 등록할 수 있게 함

 >> 백 - Node.js
    : 서버

3. 배포

  > AWS
   (기존 사용)
      - EC2 인스턴스
   (새로 사용)
      - S3
      - Cloudfront

  - 유저페이지의 내용(간단히)
     
       >> 
             S3의 정적 파일들 
                    ↓↑
      EC2 인스턴스의 서버(REST API) 

     >>...교환만 하면 되는 줄 알았는데?
        1. QR code 리더기 작동 불가
            why? 
              - http로 접속하면 QR code 리더기 사용 불가
                기기권한 접근 - 보안상 문제로 불가
                >> https로 접속하는 방법
                    1. SSL(Secure Socket Layer)
                       아마존 인증서(무료) - 도메인 필요
                    2. Route 53. ELB(Elastic Load Balancing)
                        부하분산, EC2,...(유료)  
                    3. Cloudfront(aws)
                      - https로 접속하게 해줌
                      - 도메인도 필요 없음
                      - 무료
                        >> 빨리 배포 & 전송 성능이 뛰어남
    >> 결국...
          : QR code 리더기를 https를 통해 실행시키기 위해
           'Cloudfront' 사용     
 
           S3의 정적 파일들 
                    ↓↑
           Cloudfront의 https, QR code 리더기 ↔ EC2 인스턴스의 서버(REST API)
 
   >> 문제점 해결?   -  No!! 
        - 데이터베이스에 저장한 데이터가 뜨질 않음
          >> https에서 http서버로 요청을 보내는게 불가능하기 때문
               아주 안되는 것은 아니지만 보안상의 이유로 불가능
       >> Cloudfront를 하나 더 붙여서 Cloudfront 끼리 연결
              - 둘이 연결을 시킬 것

            S3의 정적 파일들                            EC2 인스턴스의 서버(REST API)
                    ↓↑                                                     ↓↑
     Cloudfront의 https, QR code 리더기 ↔ Cloudfront의 https, QR code 리더기

   >> 문제 해결? - No...

      - XMLHTTPRequest
         : 보안성의 이유로 동일한 도메인으로만 요청을 보내도록 함
       ex ) 
        woowahan.com ↔ woowahan.com/order/register (O)
        woowahan.com ↔ baeminriders.kr/order/register (X)
           >> 403 forbidden
           >> 불가능한 이 상황을 타파해주는 규약
                  == CORS(Cross Origin Resource Sharing)
                       : Cross-Site HTTP Request를 가능하게 하는 표준 규약

           >> CORS 사용 시....
        woowahan.com ↔ woowahan.com/order/register (O)
        woowahan.com ↔ baeminriders.kr/order/register (O) < 가능하게 해줌

   >> 이 밖에 다른 문제점
    
                S3의 정적 파일들                                 EC2 인스턴스의 서버(REST API)
                        ↓↑                                                         ↓↑
     Cloudfront(S3)의 https, QR code 리더기 ↔ Cloudfront(EC2)의 https, QR code 리더기
     
    - Header
       >> Cloudfront(S3)와 Cloudfront(EC2) 사이에 
            존재하는 header에
            Access-Control-Allow-Origin 추가하는 것을 요청
                >>간단하게 추가 가능?
                       > S3의 Cloudfront에서 추가 가능
    - POST
       >> Cloudfront(EC2)와 Cloudfront(S3) 사이에
            response에 Post를 따로 허용해주어야 함
                 > EC2의 Cloudfront에서 추가 가능
    - GET 요청
       >> Cloudfront(S3)와 Cloudfront(EC2) 사이에
            GET요청을 보낼 때 query param을 같이 보내면 응답이 안 옴
            >아직도 난제..
       >> GET 요청을 POST로 변경

>> Android && IOS 
    > 둘다 가능

- 현재 기능
    >> 우아한테크도서관 보유 장서 조회
    >> 우아한테크도서관 보유 장서 검색

- 추가 예정
    6월 내로
    >> PWA 적용
    >> 버튼 눌러서 대여 반남

    7월 내로
    >> QR코드 대여 반납
    >> 모두 대출중인 도서 예약
    >> 예약 도서가 반납되었을 때 알림

TODO LIST
- 서버를 Java Spring으로 다시 만들기
- Java Spring으로 만든 걸 kotlin으로 바꿔서 만들기
- (욕심)MSA을 공부하면서 적용까지?