타임어택 구현 1

3일차에 보았던 타임어택에 대해서 코드하나하나 분석하고 공부해보려고 한다!!

먼저 데이터를 복붙 실행하라고 받았는데

from pymongo import MongoClient

client = MongoClient("mongodb://localhost:27017/")

db = client.dbStock

codes = [
    {"group": "market", "code": "market-1", "name": "코스피"},
    {"group": "market", "code": "market-2", "name": "코스닥"},
    {"group": "sector", "code": "sector-1", "name": "반도체와반도체장비"},
    {"group": "sector", "code": "sector-2", "name": "양방향미디어와서비스"},
    {"group": "sector", "code": "sector-3", "name": "자동차"},
    {"group": "tag", "code": "tag-1", "name": "메모리"},
    {"group": "tag", "code": "tag-2", "name": "플랫폼"},
    {"group": "tag", "code": "tag-4", "name": "전기차"},
]
db.codes.insert_many(codes)


stocks = [
        {"name": "삼성전자", "code": "005930", "sector":"sector-1", "market": "market-1", "tag": "tag-1"},
        {"name": "SK하이닉스", "code": "000660", "sector":"sector-1", "market": "market-1", "tag": "tag-1"},
        {"name": "리노공업", "code": "058470", "sector": "sector-1", "market": "market-2", "tag": "tag-1"},
        {"name": "DB하이텍", "code": "000990", "sector": "sector-1", "market": "market-1", "tag": "tag-1"},
        {"name": "솔브레인", "code": "357780", "sector": "sector-1", "market": "market-2", "tag": "tag-1"},
        {"name": "카카오", "code": "357780", "sector": "sector-2", "market": "market-1", "tag": "tag-2"},
        {"name": "네이버", "code": "035420", "sector": "sector-2", "market": "market-1", "tag": "tag-2"},
        {"name": "아프리카TV", "code": "067160", "sector": "sector-2", "market": "market-2", "tag": "tag-3"},
        {"name": "자이언트스텝", "code": "289220", "sector": "sector-2", "market": "market-2", "tag": "tag-2"},
        {"name": "키다리스튜디오", "code": "020120", "sector": "sector-2", "market": "market-1", "tag": "tag-2"},
        {"name": "현대차", "code": "005380", "sector": "sector-3", "market": "market-1", "tag": "tag-4"},
 ]
db.stocks.insert_many(stocks)

mongoClient에 접속하라는 건 알겠는데 뒤에 있는건 뭐야? 라는 생각이 들었다. 이거에 대해서 2시간 정도 구글링을 해보았는데 나온건 27107은 몽고DB에 기본 포트번호라는것 이것 밖에는 안나온다. 포트라는 것도 사실 잘 모르는데 어떻게 이해해야 하지 싶었는데.

MongoDB Compass Download | MongoDB

MongoDB Compass Download

mongo Compass를 깔고 거기에서 기본주소를 "mongodb://localhost:27017/" 라고 치고 들어갔더니 뭔가 느낌이 왔다.

from pymongo import MongoClient

client = MongoClient("mongodb://localhost:27017/")

이건 다시말해서 오프라인에서도 쓸 수 있는 내 컴퓨터에 있는 mongoDB database야~~ 라는 것이다. 

만약 저 자리에 mongoDB atlas에 접근할 때 썼던 주소를 적으면 atlas에 연결 되는 것이다.

'mongodb+srv://taehyeki:<PASSWORD>@cluster0.73dgs.mongodb.net/cluster0?retryWrites=true&w=majority'

저게 너무나도 기본적인건진 모르겠는데 어떻게 구글에 이걸 알려주는 사람이 단 한명도 없을까?..

무튼 기본셋팅으로 내 컴퓨터에 많은 데이터를 집어 넣었다는 것을 알고있자.

 

.

flask기반의 서버이다. 나도 flask는 이번이 처음이라 잘은 모르지만, 일단 '/' url로 들어가면 index함수를 실행해주는 것 같다. 따라서 render_template함수를 사용해서 templates(아마 default경로?)에 있는 index.html을 render해 줄 것이다.

 

위와 같은 화면이 나타날 것이고 index.html에 연결 되어있는 js를 보고 유추할 수 있는 것이

전역변수로 3개가 설정이 되어있고, 시작하면 getBaseCodes를 실행시켜라라는 것이다. 순서대로 하나하나씩 따라가보자. getBaseCodes를 실행시키려고하니까 ajax가 있네..? 이게 뭐냐고...

AJAX란 무엇인가? (velog.io)

AJAX란 무엇인가?

이 사이트에 잘 설명이 되어있는데 요약하자면

자바스크립트를 통해서 서버에 데이터를 비동기 방식으로 요청하는 것이다. 

비동기방식의 한 예를 들자면, 내가 서버에 요청을 보내서 값을 받아올 때까지 시간이 걸릴 것이다. 순식간에 일어나지만 그래도 시간이 소요된다. 그 동안 뒤에 있는 코드들은 가만히 기다리고 있을까? 가만히 기다리고 순차적으로 앞에것이 끝나고 실행된다면 동기적이라고 하고 "응 ~ 너 안기달려 줘~ 나 먼저 갈거야~" 하면서 뒤에 있는 코드들이 앞 코드가 끝나지도 않았는데 실행이 되는 것을 비동기적이라고한다. 이걸 확인할 수 있는 방법이 아래와 같다.

getBaseCodes에있는 ajax문 앞 뒤로 console.log를 찍어보겠다. 우리가 지금까지 배웠던 로직에 의하면

'ajax실행 전 콘솔'
'ajax 다 끝났다'
'ajax실행 후 콘솔'

이렇게 찍힐 것 같지만 실제로는 아래와 같다. 이로써 ajax는 비동기구나 ~ 라는 것을 이해할 수 있었다.

AJAX로 할 수 있는 것은

AJAX라는 네트워크 기술을 이용하여 웹페이지(크롬)에서 서버(flask)로 데이터를 요청하고 그에 대한 결과를 돌려받을 수 있다 .

자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능이다.

단순하게 WEB화면에서 무언가 부르거나 데이터를 조회하고 싶을 경우, 페이지 전체를 새로고침하지 않기 위해 사용한다고 볼 수 있다.

 

그래 그럼 ajax는 그렇다 치고 ~ 그럼 그 다음은 뭔데?

type, url data success는 ajax의 옵션들이다.

$.ajax({
  "url": "접속할 페이지 주소",
  "type": "get/post",
  "data": "파라미터 문자열 key=value&key=value",
  "dataType": "text, jsp, xml, json, jsonp(원격 스크립트 허용)",
  "timeout": 밀리세컨드단위 제한시간,
  "cache" : 이전 요청에 대한 캐시 저장 여부 (true=사용함, false=사용안함),
  "success": function (data) {
  … 통신이 성공했을 때 실행되는 함수 …
  },
  "error": function(xhr, textStatus, errorThrown) {
  … 통신에 실패했을 때 실행되는 함수 …
  }
});

우리가 url에 들어가면 기본적으로 get 요청이 보내지는 것이다. (get이 기본값) 

get요청을 보내고, url은 "/base/codes" 이고 get요청이니까 data는 안보내고, 그리고 요청해서 받아온 값은 response로 받고 g_base_codes에 response값을 넣는구나~ 라고 이해하자. 이제 app.py로 넘어가서 /base/codes에 오면 실행할 함수를 살펴보자

db의 codes안에 있는 group의 값들을 가져올거야 근데 ! 그 중에서 값이 겹치는게 있다면 하나씩만 가져와줘~

가져온  값을 codes에 넣어준다.

group의 값은 총 3개이다 market, sector, tag 근데 갯수가 2개, 3개, 3개 씩 있으니 하나씩만 가져오라는 뜻이다.

그럼 codes에는 ['market', 'sector', 'tag'] 이렇게 세개의 값이 들어있을 것이다.

그리고 이 리스트를 jsonify해서 return하자 jsonify는 JSON화시켜주는 것이다. 그럼 또 JSON이 뭔데..?

 

JavaScript Object Notation의 약자인데 수많은 언어에서 (C , C++ PYTHON, JS ... )우리가 값을 주고 받을 때 Javsscript의 Object(파이썬의 dictionary와 거의흡사하다) 의 형태로 주고 받자라고 약속을 한것이라고 한다. 따라서 그냥 일단은 그런갑다하고 넘어가자... 아래에 자세한 설명이 있다. 

JSON이란 무엇인가? (velog.io)

JSON이란 무엇인가?