더블리의 12층

• axios

  • https://github.com/axios/axios

• chart

  • https://apexcharts.com/docs/react-charts/
  • react-apexcharts
  • recharts
  • https://g2plot.antv.vision/en

• table

  • tablehttps://github.com/gregnb/mui-datatables

• map

  • https://github.com/google-map-react/google-map-react
  • react-simple-maps

• react-syntax-highlighter

  • https://github.com/conorhastings/react-syntax-highlighter

• color

  • http://51.140.100.73/feeds/wym-npm/tinycolor2/1.4.0

• css

  • https://github.com/JedWatson/classnames

• notification

  • https://github.com/fkhadra/react-toastify

• rechart

  • Recharts is a Redefined chart library built with React and D3.
  • https://github.com/recharts/recharts
  • https://g2plot.antv.vision/en

• search

  • https://github.com/searchkit/searchkit
  • autosuggest

그 외에 모음 사이트

• https://github.com/brillout/awesome-react-components
• http://react-component.github.io/badgeboard/

• API에서 username, page, tag 값을 쿼리 값으로 넣어서 사용
• qs 라이브러리를 사용하여 쿼리 값을 생성
• qs를 사용하면 쿼리값을 더 편하게 JSON으 형태로 변환이 가능

$ yarn add qs

Front

src/lib/api/posts.js

export const listPosts = ({ page, username, tag }) => {
  const queryString = qs.stringify({
    page,
    username,
    tag,
  });
  return client.get(`/api/posts?${queryString}`);
};

• 요청시에는 /api/posts?username=tester&page=2와 같이 주소를 호출
• redux 모듈은 modules/posts.js에 생성
• modules/index.js에 만든 리듀서와 saga를 등록
• containers/posts/PostListContainer.js를 생성
• 기존 pages/PostListPage.js에 Container로 변경
• components/posts/PostList.js에 props 결과를 보여주도록 수정

Server

sanitize-html 을 추가

yarn add sanitize-html

javascript에서 map을 이용해 list의 값을 순차적으로 사용할 수 있음

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);

JSX에서도 map을 이용해 아래와 같이 사용이 가능, element 모음을 만들고 중괄호를 이용해야 한다.

const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li>{number}</li>
);

리스트의 값을 화면에 렌더링하기 위한 컴포넌트를 생성할때는 아래와 같이 사용이 가능하다. 이때 주의해야할 element list를 만들때는 element의 key가 반드시 필요하다. (이때 key는 고유성을 부여하기 위해서 고유하게 식별할 수 있는 문자열을 사용해야 한다. 보통 데이터의 ID를 key로 사용)

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

python에서 Counter를 이용하면 list로 받은 값들의 개수를 계산한 해서 아래와 같이 결과를 받을 수 있다.

from collections import Counter
Counter(['apple','red','apple','red','red','pear'])
Counter({'red': 3, 'apple': 2, 'pear': 1})

DataFrame GroupBy를 하고 apply를 통해 내가 지정한 함수로 계산이 가능하도록 구현이 가능하다. 보통은 groupby('columnname').sum()을 통해 특정 컬럼에 대해서 그룹별로 합, 평균, 편차 등을 계산하게 된다. 조금더 복잡한 계산을 할 수 있을까?

여기서 복잡하다는 말은 특정 컬럼은 그룹별로 string의 리스트로 반환될 수 있다. 숫자의 경우 단순히 합을 계산하거나 평균을 계산하면 되지만, string은 concat을 하거나, dict, list의 형태로 반환을 해야하는 경우가 있다.

def f(x):
  x = x.C.unique()[0] # C컬럼에서 unique한 값을 빼내고 첫번째 값으로 (groupby로 포함해도 상관없음)
  return pd.Series(dict(A = x['A'].sum(), 
                    B = x['B'].sum(), 
                    C = "{%s}" % ', '.join(x['C'])))

df.groupby('A').apply(f)
"""
A         B               C
A                             
1  2  1.615586  {This, string}
2  4  0.421821         {is, !}
3  3  0.463468             {a}
4  4  0.643961        {random}
"""