Weekly I Learned 1주차/후기

주제: 웹 개발 미니 프로젝트

---

이노베이션 캠프 in강원/1주차 프로젝트(웹 개발 미니 프로젝트)를 마치며..

WIL :

1. JWT :

---

2. API

   : 소프트웨어 구성 요소가 서로 통신할 수 있게 하는 메커니즘,
   일반적으로 클라이언트와 서버사이의 통신 매커니즘을 담당한다.
   
   Ex)
   서버 : [기상청의 소프트웨어 시스템 내부 일일 기상데이터]
   클라이언트 : [모바일 기상 어플리케이션]

---

2-1 API 의 종류

이름	설명
SOAP API	단순 객체접근 프로토콜(과거에 사용)
RPC API	원격 프로시저 호출
Websocket API	JSON객체를 사용하여 데이터를 전달
REST API	클라이언트가 서버에 요청을 데이터로 전송(가장많이사용)

---

2-2 REST API

: REST구조의 API
REST 구조: Method+Resource+Representaion of Resource

• Method:
  POST/GET/PUT/DELETE
  (이중 학습내용인 POST와 GET만 다룰예정)

  GET : HTTP Request Message의 Header 부분의 url에 담겨서 전송
  POST : 'GET'과 달리 Header가 아닌 Body 부분에 데이터를 담아 전송. 서버의 값이나 상태를 변경하기 위해 사용

• Resource:
  자원, 즉 URI를 의미
  

• Representaion of Resource:
  클라이언트가 서버에게 자원에 대한 조작을 요청하면, 서버는 적절한 응답을 해줘야한다. 이 응답 메세지의 포맷을 의미한다.
  주로 JSON,XML을 사용한다.!

Javascript에서...

$.ajax({
                type: 'GET',
                url: '/test',
                data: {info_id: id},
                success: function (response) {
                  let name = response['name']
                  ...이후 생략

python에서...

@app.route('/test', methods=["GET"])
def call_info():
    call_id = request.args['info_id']
    #
    info = list(db.user.find({'id': call_id}, {'_id': False}))
    reviews = list(db.bucket.find({'ID': call_id}, {'_id': False}))
    count = len(reviews)
    call_name = info[0]['name']
    if count == 0:
        review_1 = {"title": 'None', "bucket": 'None'}
        review_2 = {"title": 'None', "bucket": 'None'}
    elif count == 1:
        review_1 = reviews[0]
        review_2 = {"title": 'None', "bucket": 'None'}
    else:
        review_1 = reviews[0]
        review_2 = reviews[1]

    print(count, review_1, review_2)
    return jsonify({'name': call_name, 'count': count, 'review_1': review_1, 'review_2': review_2, 'myreview': reviews})

다음과 같은경우 Javascript에서 /test라는 URL에 info_id라는 키값을갖는 id를 GET방식으로 전달한다.(이때 id는 qwerq)
즉, http://localhost:5000/test?info_id=qwerq라는 요청을 한다
이후 Python에서 request.args를 통해(POST방식일 경우 request.form)info_id를 불러온다.
그 다음 이후 명령들을 수행한뒤
return jsonify를 통해 name이라는 키 값을 갖는 call_name등을 다시 Javascript로 보낸다.
마지막으로 Javascript에서 Success:function(){...}이 실행되고 생성된 함수의 이름(예시에서는 request)을 통해 name을 불러올수 있다.

위의 스크립트들은 Myreview페이지 접속시 현재 아이디info_id를 서버에 보내 그 아이디와 관련된 정보name,count등 을 DB에서 확인후 다시 Myreview페이지로 전달하는 과정이다.

그런데 A페이지에서 서버에 Data를 전달하고 서버에서는 받은 Data를 계산하여 B페이지를 띄움과 동시에 B페이지에 Data2를 전달하는 과정을 구축하는데에 어려움이 있었다.
return jsonify대신 return render_template('B페이지','Data2')를 사용시 B페이지에는 데이터가 전송되지만 B페이지가 띄워지질 않았고, 이후 B페이지를 호출시 Data2는 초기화 되었다.

---

3. Session storage
   그래서 사용하게 된 방법이 Session storage였다.

function saveinfo() {
            $.ajax({
                type: 'GET',
                url: '/',
                data: {},
                success: function (save) {
                    console.log('{{ user_id }}')
                    sessionStorage.setItem('id', '{{ user_id }}')
                }
            })
        }

즉, A페이지에서 Data를 Session storage에 저장한뒤 B페이지를 호출하고 B페이지에서 Session storage에 들어간 Data를 꺼내 서버에 전송한뒤 Data2를 받아오는 방식을 사용하였다.

Session storage는 웹 스토리지 객체 중 하나로, 다른 storage로는 Local storage가 있다. 둘의 차이점은

Local storage	Sessions storage
오리진이 같은 탭, 창 전체에서 공유	오리진이 같은 브라우저 탭,iframe에서 공유
브라우저 재접속시에도 남아있음	페이지 새로고침해도 남아있으나 탭이나 브라우저 종료시 삭제

이며 cookie와는 또다른 성격을 갖고있다.
(storage 매커니즘을 공부할 시 cookie에 대한 지식이 전무했다.)
storage는 cookie와 달리 서버에 전송되지않기 때문에 더 많은 자료를 보관하는것이 가능하다. 또한, 서버가 HTTP헤더를 통해 객체를 조작할수 없으며 storage내 객체 조작은 Javascript에서만 가능하다.

If..
	- Cookie를 사용했다면?
    - @app.route('/A/<B>')와같이 <>를 통하여 변수를 이용했다면?

---

프로젝트를 마치며..

아쉬운점은 API명세서를 작성하지 못한점이다. Python내의 여러 function들과 5개가 넘는 html 파일을 만드는 과정에서 서로 공유되어야 하는 Data들이 있었는데 이를 API명세서를 통해 사전에 작성하지 않아 각자의 파일이 완성되어 공유되기 전까지는 작업의 진행이 어려웠다. 또한 최종적으로 app.py와 html들을 하나로 묶는과정에서 어려움이 있었다.

또, index.html을 합치는 과정에서 오류가 발생하였다. 단순히 img를 변경하였을 뿐인데 함수가 정상적으로 작동되지않았고 이 부분은 차후에 꼭 고쳐보고싶다.

또한, JWT와 상관이 없는 파트를 맡아 이에 대한 학습을 진행하지못했고, 추후에 시간을 내어 꼭 수강한뒤 내용을 추가할 예정이다.