SFC 는 뷰의 컴포넌트를 따로 분리하는 기법입니다. 확장자는 *.Vue 이고, script, template, style 태그로 구성되어 있습니다. script, style 태그는 흔히 알고 있겠지만, template 태그는 대체로 잘 사용되지 않는 태그 입니다.이 태그는 querySelector 로 속이 검색되지 않으며 브라우저에 바로 표시가 되지 않습니다. 주로 html 태그 조각을 담아두는 데 사용이 됩니다. template 태그 대신 div나 일반 태그에 담고 감춰두면 되지 않을까 라고 생각되시는 분들도 있으시겠지만, tr, td 같은 태그들은 template가 아니면, 넣어두고 꺼낼 수가 없습니다.
<script>
const one = [6,8,2,4,0];
for( let o of one ){
console.log('o', o);
}
const two = {'과일':'사과','나라':'미쿡','언어':'바디랭귀지'};
for( let key in two ){
console.log( key, two[key] );
}
</script>
javascript는 다른 언어와 다르게 선언하는 방법이 var 하나만 있었습니다. c++, c# 처럼 형식을 정의하지 않았고 변수로 바로 사용하기에 하나만 밖에 필요가 없었습니다. 하지만 javascript는 눈부시게 발전해 복잡하고, 기능이 다양해 지며 아주 많은 문제를 만들어 냈습니다. 특히 promise 전까지 함수 중첩 지옥에서는 전역변수인 var는 정말 오류를 만들기 쉬웠습니다. 이를 극복하기 위해 ES2015에서는 let과 const가 도입됩니다.
var, let
var는 선언된 바깥 스코프에서도 사용이 가능합니다. 같은 function 속이 scope 입니다. let 을 실행하면 외부에서 사용이 불가능합니다. try-catch 문 같이 try 부분에 사용된 변수중 catch로 전달될 값이 있다면, var 그 외에 일반적인 경우 let을 사용하면 좋을 듯 합니다. 아래의 코드를 실행해 보세요.
파이썬을 구현하기 위해서는 먼저, python과 pip로 websockets 를 설치하셔야합니다.
웹소켓 설치 $ pip install websockets
설치확인 $ pip list
웹소켓 서버 코딩
너무 간단해서 사실 놀랐습니다. websockets.serve 함수에 인자로 각각 '실행메소드', 'ip 혹은 주소', 'port'를 넣어주고, 응답을 대기하는 동안 종료되지 않도록. asyncio.get_event_loop().run_until_complete, asyncio.get_event_loop().run_forever를 이용해 실행해 주시면되겠습니다.
서버는 복잡하지 않도록 응답을 그대로 돌려 주는 에코 서버로 만들었습니다. 소스는 아래와 같습니다.
import asyncio;
import websockets;
port = 10000
async def accept(self, path):
while True:
data = await self.recv()
print("receive:" + data)
send_str = 'echo : ' + data
await self.send(send_str)
print('send => ' + send_str)
print("웹소켓 시작 포트넘버:" + str(port))
start_server = websockets.serve(accept, "localhost", port)
asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()
print("End Service!")
클라이언트 코딩
간단히 html과 javascript를 통해 예제를 만들어 봤습니다. 대체로, websocket.onopen, websocket.onclose 등의 함수를 사용하지만 저는 괄호가 중첩되는 것이 싫어 이벤트 형식으로 만들었습니다.
GET PARAM에 넣어야할 값은 아래와 같습니다. key = 서비스가입 후 받은 OPEN API KEY를 넣어주세요. apiCode = api명령인데, 현재는 상품 검색을 할 것이므로, 'ProductSearch'를 그대로 두세요. keyword = 검색할 명령어를 입력해 주세요.
keyword'양말'로 입력하고 브라우저 주소창에 넣으면 xml 응답값을 받을 수 있습니다. 11번가에 등록되는 상품들은 매일매일 다르므로 호출할때마다 다른 응답을 받이실거에요.
브라우저에서 사용하면 편하지만, 우리는 서버환경에서 받아 대체로 가공해서 사용해야하므로, 서버 언어로 실행이 필요합니다. node.js를 사용해 서버환경에서 구현해 보겠습니다.
var http = require('http');
function get_search(rest_api_key, keyword, callback){
var options = {
hostname: 'openapi.11st.co.kr',
path: `/openapi/OpenApiService.tmall?apiCode=ProductSearch&key=${rest_api_key}&keyword=${encodeURI(keyword)}`
};
function handleResponse(response) {
var serverData = '';
response.on('data', function (chunk) {
serverData += chunk;
});
response.on('end', function () {
// console.log("received server data:");
// console.log(serverData);
callback(serverData);
});
}
http.request(options, function(response){
handleResponse(response);
}).end();
}
get_search([rest api key 입력], "양말", res=>{
console.log("응답 =>", res);
});
