더블리의 12층

REST API가 없고, React에서 데이터를 가지고와 화면에 뿌리는 예제를 하고 싶다면 JSONPlaceholder를 이용해 JSON 데이터 샘플을 사용을 할 수 있다. 주소는 여기로...

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(json => console.log(json))

또는

  const onClick = async () => {
    try {
      const response = await axios.get(
        'https://jsonplaceholder.typicode.com/todos/1'
      );
      setData(response.data);
    } catch (e) {
      console.log(e);
    }
  };

출력결과

{
  "userId": 1,
  "id": 1,
  "title": "delectus aut autem",
  "completed": false
}

Parameter, Query Example

• /user/lee
• /search?keyword="hi

위에서 user에 lee를 넘기는 방식이 parameter로 특정 사용자를 조회할때 사용하고, query는 키워드를 검색할때 페이지에 필요한 옵션을 전달할 때 사용을 하게 된다.

URL Parameter

• match라는 객체안의 params 값을 참조

import React from 'react';

const data = {
  seoul: {
    name: '서울',
    location: 'seoul'
  },
  gyonggi: {
    name: '경기도',
    location: 'gyonngi-do'
  }
};

const Location = ({ match }) => {
  const { cityname } = match.params;
  const city = data[cityname];
  if (!city) {
    return (
      <div>
        <h1> {cityname} 은 존재하지 않는다.</h1>
      </div>
    );
  }

  return (
    <div>
      <h1>
        {' '}
        {cityname} ({city.name})
      </h1>
      <p>{city.location}</p>
    </div>
  );
};

export default Location;

• App.js에서 routing을 정의

import React from 'react';
import { Route, Link } from 'react-router-dom';
import './App.css';

import Home from './components/Home';
import Search from './components/Search';
import Location from './components/Location';

const App = () => {
  return (
    <div>
      <Link to="/">홈</Link>
      <Link to="/search">검색</Link>
      <Link to="/location/seoul">서울</Link>
      <Link to="/location/gyonngi">경기</Link>
      <Link to="/location/star">별나라</Link>

      <Route path="/" component={Home} exact={true}></Route>
      <Route path="/search" component={Search}></Route>
      <Route path="/location/:cityname" component={Location}></Route>
    </div>
  );
};

export default App;

URL 쿼리

• url 쿼리의 경우에는 match와 다르게 location의 객체에 있는 값을 조회가 가능하다.
• /search?keyword=hi의 url을 호출했을때 location의 객체의 형태는 아래와 같다.

{
  "pathname": "/search",
  "search": "?keyword=hi"
}

• query 문자열을 객체로 변환할때는 qs의 라이브러리를 사용한다

yarn add qs

import React from 'react';
import qs from 'qs';

const Search = ({ location }) => {
  // ?keyword=
  const query = qs.parse(location.search, {
    ignoreQueryPrefix: true // prefix: ?
  });

  const keyword = query.keyword;

  return (
    <div>
      <h1>Search</h1>
      <p> 검색 쿼리는 {keyword}</p>
    </div>
  );
};

export default Search;

• 다음과 같이 추가한 이후에 url을 http://localhost:3000/search?keyword=hi을 통해 접속하면 원하는 결과를 얻을 수 있다.

Hive에 테이블이 있는 경우, 파일로 저장하고 싶을때 ,, , NULL처리를 쉘에서 처리하는게 좋다.
아래 sql에 내가 원하고자 하는 쿼리를 입력하면 테이블을 로컬로 가져올 수 있음

import sys
import time
import datetime
import os
import logging

try:
    from subprocess import getstatusoutput
except ImportError:
    from commands import getstatusoutput

import argparse

logger = None 
def get_data(args):

    if not os.path.exists(args.output_path): 
        os.makedirs(args.output_path)

    output_path = os.path.join(args.output_path, 'data.txt') 
        cmd1 = """<sql> sed 's/,/ /g; s/NULL//g' > %s""" % (args.input_table, output_path)

    print (cmd1)
    print ("start getting train_data at %s" % datetime.datetime.now())
    status, output = getstatusoutput(cmd1)
    print ("status %s output %s" % (status, output))
    if status == 0:
        print("finished!")
    print("finish getting train_data at %s" % datetime.datetime.now())

def parse_args():
    parser = argparse.ArgumentParser()

    parser.add_argument('--input_table', required=True)
    parser.add_argument('--output_path', required=True)
    # parser.add_argument('--mode', required=True, choices=["train", "pred"])

    args, _ = parser.parse_known_args()
    return args, parser

if __name__ == '__main__':
    args, parser = parse_args()
    print (args.output_path)

    try:
        get_data(args)
    except Exception as e:
        print (e)