1. BE (app.py)

① 필요한 라이브러리 import

• 여기서 시크릿키는 서버에서 디코딩을 할 때 사용된다.

② 토큰을 받은 후, playload와 user_info 정보를 통해 토큰이 만료되거나 디코딩 에러가 있을 때 메시지를 response 해주는 부분

③ 회원가입 - 비밀번호를 암호화해서 저장하는 부분

• 아이디, 비밀번호, 닉네임을 받아서 DB 저장
• 비밀번호를 암호화처리 해서 저장해준다.

④ 로그인  

• 받은 비밀번호를 암호화한다.
• 암호화된 정보로 해당 유저를 찾는다.
• 유저를 찾으면 JWT토큰을 발행한다. (만료시간도 같이 설정해 준다.)

⑤ 로긘된 유저만 call 할 수 있는 API

2. FE ( 로딩 페이지, 회원가입 페이지, 로그인 페이지 )

① 로딩페이지

② 회원가입 페이지

③ 로그인 페이지

• JWT(JSON Web Token)이란 인증에 필요한 정보들을 암호화시킨 토큰을 의미한다.
• JWT 기반 인증은 쿠키/세션 방식과 유사하게 JWT 토큰(Access Token)을 HTTP 헤더에 실어 서버가 클라이언트를 식별한다.

• 쿠키/세션 인증의 경우 쿠키를 포함한 요청이 외부에 노출되더라도 세션 ID 자체는 유의미한 개인정보를 담고 있지 않지만 해커가 이를 중간에 탈취하여 클라이언트인척 위장할 수 있다는 한계가 존재한다. 그리고 서버에서 세션 저장소를 사용하므로 요청이 많아지면 서버에 부하가 심해지는 단점이 있다.

• 이에 반해 JWT토큰의 경우 Header와 Payload를 가지고 Signature를 생성하므로 데이터 위변조를 막을 수 있기 때문에 보안성이 우수하고, JWT는 토큰에 대한 기본 정보와 전달할 정보 및 토큰이 검증됬음을 증명하는 서명 등 필요한 모든 정보를 자체적으로 지니고 있기 때문에 인증 정보에 대한 별도의 저장소가 필요없다는 장점이 있다. 즉, 클라이언트 인증 정보를 저장하는 세션과 다르게, 서버는 무상태가 됩니다.

• CRUD와 REST는 API(Application Program Interface) 업계에서 가장 널리 사용되는 두 가지 개념 
• REST는 클라이언트와 서버 간의 HTTP 프로토콜 인터페이스를 표준화하기 위해 만들어졌으며 웹 API에 널리 사용되는 디자인 스타일 중 하나 
• 반면에 CRUD는 데이터베이스 응용 프로그램에서 실행되는 네 가지 기본 작업을 나타내는 데 사용되는 약어
• REST와 CRUD는 CRUD가 REST 환경 내에 존재할 수 있기 때문에 함께 작동하며, 이들의 기능은 종종 서로 일치하지만 동일하지는 않다. 
• 이들을 구별하는 가장 좋은 방법은 REST가 표준 (API 아키텍처)이고 CRUD가 함수 라는 점을 기억하는 것 

REST 란 무엇입니까? 

• REST는 Representational State Transfer의 약자입니다. 
• 시스템이 상호 작용하는 방식을 지시하는 웹상의 컴퓨터에 대한 표준을 제공하는 소프트웨어 아키텍처 스타일입니다. 

REST의 간략한 역사

• 2000년 REST 프로토콜이 출시되기 전에 웹 개발자는 웹 API를 개발하거나 사용하는 방법에 대한 표준이 없었습니다. 
• 그 당시에는 많은 프로토콜이 사용되었지만 수행하기에는 너무 지루하고 복잡한 것으로 판명되었습니다. 
• 동료들과 함께 Roy Fielding은 이 문제를 해결하기 위해 노력했고 오늘날 REST 프로토콜로 알려진 것을 개발했습니다. 
• REST의 개발로 두 개의 서버가 전 세계적으로 데이터를 교환할 수 있게 되었습니다. 
• REST 호환 시스템을 RESTful 시스템이라고 합니다. 
• 이러한 시스템은 상태 비저장 및 클라이언트와 서버 문제의 분리가 특징입니다. 

CRUD란?

• CRUD는 CREATE, READ, UPDATE, DELETE의 약자입니다. 이 네 가지 데이터베이스 명령 은 CRUD의 기초입니다. 
• 많은 프로그래밍 프로토콜과 언어에는 이름이 다르고 기능이 약간 변경된 CRUD 버전이 있습니다. 
• 좋은 예는 Insert, Select, Update 및 Delete를 사용하는 SQL(구조적 쿼리 언어)입니다 . 
• 또한 전자 상거래 사이트(Amazon, Mango 등)의 구매자와 같은 동적 웹 사이트에는 CRUD 주기가 있습니다. 
• 사용자는 계정 을 만들고 정보를 업데이트 하고 장바구니에서 항목을 삭제할 수 있습니다. 
• CRUD 프레임워크를 사용하는 다른 프로그래밍 언어로는 Java(JOOQ, iBAtis), Phyton(Django), PHP(Propel, Doctrine) 및 .NET(NHibernate, LLBLGEN Pro) 등이 있습니다.

CRUD의 짧은 역사

• CRUD 약어는 구조적 쿼리 언어(SQL)에서 사용되는 데이터베이스 기능을 설명하기 위해 1980년대에 만들어진 것으로 생각됩니다. 이 용어는 1983년 James Martin 의 책 Managing the Database Environment 에서 처음 알려지게 되었습니다 . CRUD 작업에 대한 첫 번째 언급은 Haim Kilov의 1990년 기사 "From Semantic to Object-Oriented Data Modeling"에 있습니다. 
• CRUD 주기는 종종 이를 시작한 프로세스보다 오래 지속되는 데이터베이스로 영구 저장소를 향상시키는 일련의 기능으로 설계되었습니다. 최신 소프트웨어 프로그래밍 및 개발에서 CRUD는 함수로서의 시작을 넘어 SQL, DDS 및 HTTP 프로토콜과 같은 응용 프로그램에 대한 설계 원칙을 제공했습니다. 

REST와 CRUD의 유사점은 무엇입니까?

일부 순수주의자는 REST와 CRUD가 서로 관련이 없다고 주장할 수 있습니다. 그러나 그들이 사용하는 명령을 자세히 살펴보면 둘 사이의 유사점을 알 수 있습니다. 

REST 명령

• POST – 데이터베이스에 새 레코드를 생성합니다.
• GET – 이 요청은 데이터베이스에서 가져온 정보를 읽습니다.
• PUT/PATCH – 개체를 업데이트합니다.
• DELETE - 데이터베이스에서 레코드를 제거합니다.

CRUD 명령

• CREATE – INSERT 문을 통해 새 레코드를 생성합니다. REST에서 이것은 POST 명령입니다. 
• READ/RETRIEVE - 이 프로시저는 입력 매개변수를 기반으로 데이터를 가져옵니다. REST에서 이는 GET 명령과 동일합니다.
• UPDATE  – 데이터를 덮어쓰지 않고 업데이트합니다. REST에서 이것은 PUT 요청입니다. 
• DELETE- 데이터베이스에서 데이터를 제거합니다. REST는 동일한 요청을 사용하여 데이터를 삭제합니다. 

REST와 CRUD의 차이점은 무엇입니까?

REST와 CRUD의 유사성 때문에 동일한 기능을 가진 것으로 착각하기 쉽습니다. 그러나 그것은 사실과 거리가 멀다. 조금 더 깊이 파고 들면 그들 사이의 차이점을 탐구합니다. 

• REST는 HTTP 명령을 사용하는 리소스 및 Hypermedia를 중심으로 한 아키텍처 시스템입니다. CRUD는 데이터베이스 설정에서 레코드를 유지하기 위한 주기 입니다. 기본 형식에서 CRUD는 응용 프로그램의 기능을 설명하는 정보를 조작하는 방법입니다. REST는 HTTP 명령을 통해 데이터를 제어합니다. 사용자의 정보를 생성, 수정, 삭제하는 방법입니다. 
• CRUD 기능은 REST API에 존재할 수 있지만 REST API는 CRUD 기능으로 제한되지 않습니다. CRUD는 REST 아키텍처 내에서 작동할 수 있지만 REST API는 CRUD와 독립적으로 존재할 수 있습니다. 예를 들어 REST API를 사용하면 클라이언트가 CRUD 기능에 해당하지 않는 경우에도 서버를 재부팅할 수 있습니다. REST는 적절한 HTTP 메서드를 사용하는 한 이 작업을 수행할 수 있습니다. 
• REST는 일반적으로 HTTP 명령을 통해 데이터를 사용하는 것을 말합니다. 사용자가 화면상의 데이터와 서버에 저장되는 정보를 조작하는 방법을 용이하게 하는 교리입니다. 프로그래머는 필수 CRUD 기능을 처리할 수 있는 REST API를 만들 수 있지만 그 반대의 경우도 마찬가지입니다. 
• REST와 CRUD의 기능은 유사하지만(위에서 설명한 대로) 동일하지는 않습니다. PUT 은 아직 존재하지 않는 리소스를 포함하여 리소스를 대체합니다. POST 는 새 리소스를 추가합니다. 이 두 명령 모두 새 리소스를 생성하지만 PUT 은 일반적으로 이미 있는 리소스를 업데이트하는 데 사용됩니다. PATCH 는 주로 리소스의 일부를 업데이트하는 데 사용되지만 PUT 은 전체 리소스를 교체하여 업데이트하는 데만 사용됩니다. 

REST와 CRUD는 함께 작동하지만 동일하지는 않습니다.

REST와 CRUD는 CRUD가 REST 환경 내에 존재할 수 있기 때문에 함께 작동하며, 이들의 기능은 종종 서로 일치하지만 동일하지는 않습니다. 이들을 구별하는 가장 좋은 방법은 REST가 표준 (API 아키텍처)이고 CRUD가 함수 라는 점을 기억하는 것 입니다. 이 본질적이지만 직접적인 차이점을 이해하는 것은 두 가지 모두를 이해하는 데 필요합니다.

출처

https://www.logicmonitor.com/blog/rest-vs-crud

API 통합이란 무엇인가요?

• API 통합은 클라이언트와 서버 간의 데이터를 자동으로 업데이트하는 소프트웨어 구성 요소입니다.
• API 통합의 몇 가지 예로 휴대폰 이미지 갤러리에서 클라우드로 데이터 자동 동기화 또는 다른 시간대 여행 시 노트북에서 시간 및 날짜 자동 동기화가 있습니다. 기업은 또한 API 통합을 사용하여 많은 시스템 함수를 효율적으로 자동화할 수 있습니다.

 

 

API 유형

1. 크롤링 오류

① 구현하고자 했던 부분 

• 네이버 카타르 경기일정 페이지에서 정보 크롤링 해오기

② 발생한 이슈

• 크롤링해오는 값에 오류가 뜨거나 계속해서 None 값이 나타나는 오류가 발생.

③ 시도한 방법

• 웹 개발 종합반 강의에서 스파르타피디아 크롤링에 사용하였던 beautifulsoup 라이브러리 select() 함수 사용
• 다양한 웹사이트 시도 - 구글 카타르 경기 일정, FIFA 사이트, Radiokorea.com
• 이 중 Radiokorea 사이트에서 필요한 값이 몇 가지 추출되었지만, 어떤 값들은 역시나 None으로 저장됨.

④ 해결 방법

• 기술개발자님에게 도움 요청! - 안타깝게도 시도 중 매니저님 노트북 베터리가 사망하면서 중단됨
• 지나가는 능력자 신원님에게 도움요청 - 파이썬으로 select() 함수가 아닌 find() 함수를 이용해서 코드 시현을 해주심
• 보여주신 파이썬 코드를 참고하여 자바스크립트로 find() 함수를 작성하여 구현 성공 

※ find()와 select()의 차이

• find: html tag를 통한 크롤링
• select: css를 통한 크롤링
• find() 함수에서 사용하는 태그는 이름(name), 속성(attribut), 값(value)으로 구성되어 있기 때문에 find로 해당 이름이나 속성, 값을 특정하여 태그를 찾을 수 있다.
• find와 select는 태그 이름, 속성, 속성 값을 특정하는 방식은 같다. 하지만 CSS는 이 외에도 다양한 선택자(selector)를 갖기 때문에 여러 요소를 조합하여 태그를 특정하기 쉽다.
• 그러므로 더 다양한 조건을 이용하여 더 직관적인 방법으로 태그를 찾기 위해서는 find보다는 select를 사용하는 게 적합
• select 가 문장도 더 간결해 보이고, 속도가 빠르다고 한다.

2. mongoDB 오류

① 발생한 이슈 

• 이슈 1 : bson.objectid 라이브러리를 임포트 한 후 사용하지 않게 되어 삭제하였는데, 그때부터 아래와 같은 오류가 발생
• bson 은 다른 여러 라이브러리에서도 참조되어 사용되는 경우가 많은데 이때 버전마다 상이한 기능으로 인해 오동작하게 되는 경우가 많다고 한다.

② 시도한 방법

• pip uninstall bson, pip uninstall pymongo, pip uninstall flask-pymongo 삭제하고 flask-pymongo, pymongo 만 설치하라는 글을 보고 따라서 시도했으나 실패

③ 해결 방법

• 작업하던 파일들 다른 폴더에 백업하고 프로그램 강제 종료. 백업한 파일로 새로 인터프리터를 받아 작업함.
• 같이 화면 공유로 도움을 주신 신원님 은솔님 감사합니다 : )

④ 그리고 이후에 mongoDB 에 데이터가 원활히 저장되지 않는 오류가 발생하였는데, 해당 Cluster를 삭제하고 새로 생성하여 사용하니 해결이 되었다. 초급자는 결국 엎어버리는 것이 최후의 수단인 것 같다. 즉, 백업을 하는 습관을 잘 들이자! 

3. mongoDB 컬렉션에서 필요한 정보만 추출 하기 

① 구현하고자 했던 부분

• mongoDB에 크롤링으로 저장되어 있는 메인 페이지 데이터 중 필요한 값만 추출해서 세부 페이지 이동에 사용하고, 세부 페이지에서 그 값만 가져오기

③ 발생한 이슈

• 저장된 데이터 값만으로는 각 객체별 구분이 어려워 객체를 구분해 줄 수 있는 다른 키값이 필요했다.
• ObjectId만 추출해서 구현을 하라고 기술 매니저님과 신원님이 조언해 주셨지만, 추출한 값을 어디다 어떻게 사용하는지 이해하지 못했다.

④ 시도한 방법

• 무한 구글링을 통해 find_one() 함수로 objectid값을 추출하는 데는 성공했지만, 이걸 어떻게 활용해야 할지 설계가 되지 않음

⑤ 해결 방법

• 기술개발자님에게 도움 요청! - 답을 주셨지만 이해하지 못함
• 지나가는 능력자 신원님에게 도움요청 - 역시나 기술 매니저님과 같은 힌트를 주셨지만, 이해하지 못함
• 천사 은솔님에게 도움 요청 -
  • 크롤링을 하면서 DB에 저장되는 순서에 따라 num값을 부여하고 num=len(count)+1 이라는 조건을 붙여 각 객체마다 id 값을 갖도록 했다. 
  • 그리고 아래와 같이 find_one() 함수를 이용하여 id 값을 추출하고, 메인 페이지에서 세부 페이지로 이동할 때  

onclick="location.href='/review?id=${id}

를 이용하여 사용하였다.

    id_receive = int(request.args.get('id'))
    match = db.world.find_one({'id': id_receive}, {'_id': False})

그리고 이 값을 이용해 세부 페이지에 필요한 객체만 불러오는 것도 구현할 수 있었다.

const param = window.location.search;
const paramData = new URLSearchParams(param)
const id = paramData.get('id')

4.  mongoDB 같은 컬렉션에 저장되어 있는 세부 페이지 댓글을 작성한 세부 페이지에만 추출하는 법

① 구현하고자 했던 부분

• 해당 세부 페이지에서 작성한 댓글은 작성된 세부페이지에서만 보여주는 기능 구현하기

③ 발생한 이슈

• 각각 다른 세부 페이지에서 comment를 작성하더라도 mongoDB 하나의 콜렉션 안에 저장이 되었다.
• 따라서 모든 경기별 세부 페이지에 나와선 안될 다른 세부페이지의 댓글이 섞여 보여지는 상황 발생

④ 시도한 방법

• 세부페이지에 사용된 경기정보가 담겨있는 컬렉션의 나라 키값과, 코멘트 정보가 들어있는 컬렉션 안에 들어있는 나라의 키값이 일치하면 화면단으로 보여주는 작업을 하면 될 거라는 생각이 들었다.
• 그러나 이 두 개의 컬렉션을 어떻게 하면 동시에 사용할 수 있을지 잘 답이 서지 않았다. Objectid를 이해 못 한 연장선이다.
• 찾아보니 몽고 디비의 $lookup 함수를 용하면 두 개의 컬렉션을 하나로 합칠 수 있고, 그렇다면 그 안에서 키값을 비교하여 가져올 수 있다는 가설이 생겼다. 그러나 구현에 성공하지 못함
• https://www.mongodb.com/docs/v4.2/reference/operator/aggregation/lookup/

• 또다시 은솔님에게 도움 요청...(나란 민폐녀 ^_ㅠ) - 사전 프로젝트 대나무 숲을 구현하셨던 코드가 저장되어 있는 깃허브를 공유해 주셨다. 사용하신 방법은 인 배딩 방식으로 하나의 컬렉션 안에 배열을 넣고, 그 배열에 다른 컬렉션을 넣어서 사용하는 방식이다.
• 코드를 참고해서 따라 해보려 했지만, 중간에 암호화된 아이디 값과 비밀번호 값을 처리하는 코드와 내가 필요한 코드를 잘 분별하지 못해서 구현을 하지 못했다.

⑤ 해결 방법

• 또 다른 능력자 민승님에게 도움 요청 - 프론트엔드 개발자를 준비하시는 민승님은 내가 화면 공유로 화면을 보여드리자 마자 바로 주소창에 있는 아이디 값을 가져오면 되겠다고 하셨다.

• 위의 페이지 주소 값 마지막에 있는 숫자를 아래와 같은 방법으로 추출하여 코멘트가 저장될 때마다 같이 저장하도록 했다. ['POST']
• let order = window.location.href.slice(-1)
• 그리고 코멘트를 ['GET']으로 호출할 때 if문을 사용하여 저장된 값과 페이지 주소 값의 마지막 자릿수가 일치하는 댓글들만 보여주는 코드로 구현에 성공!

function show_comment() {
    let order = window.location.href.slice(-1)

    $.ajax({
        type: "GET",
        url: '/show/comment',
        data: {},
        success: function (response) {
            let rows = response['comments']
            for (let i = 0; i < rows.length; i++) {
                if (order == rows[i]['order']) {   //이부분에서 위의 order와 콜렉션 order값을 비교하여 추출
                    let comment = rows[i]['comment']
                    let team = rows[i]['team']
                    let title = rows[i]['title']

5. AWS 키체인 permission 

① 발생한 이슈

• 배포를 위해 Terminal 창으로 작업을 하던 중 'aws permission denied (publickey)'이라는 오류와 함께 파이 질라에서 서버와의 연결 오류가 발생하였다.

② 시도한 방법

• 키 페어 문제라 생각되어 새로 키 페어를 생성하였지만 역시나 같은 문제가 발생했다.

③ 해결 방법

• 같이 있던 현빈님이 블로그 글에서 키 페어를 다른 디렉토리로 옮겨서 해결했다는 글을 공유해줘서 설마라는 생각으로 키페어를 데스크톱 아무 폴더에 넣었더니 오류가 해결되었다.

결국 내 문제 해결의 90% 이상은 같은 반 사람들 덕분에 해결이 되었다. 스스로 구글링을 통해 해결하는 것이 가장 베스트이겠지만, 혼자 했으면 훨씬 더 오래 걸렸을 오류들을 훨씬 더 효율적으로 해결한 것 같다. 다들 미니 프로젝트로 바쁘신 와중에 긴 시간 공을 들여 도와주셔서 감사합니다 ㅠㅠ 아 그리고 이 모든 과정을 같이 옆에서 찾아봐주시고 도와주신 팀원들께도 감사를 !! 힘들었지만 너무 훈훈한 첫 시작으로 기억될 것 같다.