@Value("\${어쩌구저쩌구}")

python -m pytest

@TestInstance(TestInstance.Lifecycle.PER_CLASS)

테스트 인스턴스 단위를 클래스로 설정하자.

테스트는 메소드 단위이기에...

Pandas의 shift method는 DataFrame이나 Series에 적용해서 행의 위치를 일정 칸수씩 이동시킵니다.

바로 예시를 통해 알아봅시다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        7, 8, 9, 10,
        11, 12, 13,
        14, 15, 16
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     7
7      2    a  2050     8
8      2    b  2000     9
9      2    b  2200    10
10     3    a  3000    11
11     3    a  3100    12
12     3    b  3200    13
13     4    a  4200    14
14     4    b  4100    15
15     4    b  4150    16

    col1 col2    col3  col4
0    1.0    a  1100.0   2.0
1    1.0    a  1200.0   3.0
2    1.0    b  1300.0   4.0
3    1.0    b  1050.0   5.0
4    1.0    b  1100.0   6.0
5    2.0    a  2100.0   7.0
6    2.0    a  2050.0   8.0
7    2.0    b  2000.0   9.0
8    2.0    b  2200.0  10.0
9    3.0    a  3000.0  11.0
10   3.0    a  3100.0  12.0
11   3.0    b  3200.0  13.0
12   4.0    a  4200.0  14.0
13   4.0    b  4100.0  15.0
14   4.0    b  4150.0  16.0
15   NaN  NaN     NaN   NaN
<class 'pandas.core.frame.DataFrame'>

위 예시는 df_test라는 DataFrame을 생성한 후 이 DataFrame에 shift를 적용한 것입니다.

df_shifted를 보면 DataFrame의 모든 행의 값이 하나씩 위로 올라간걸 볼 수 있습니다.

하나씩 위로 올라간것은 shift의 인자로서 -1이 적혔기 때문이고, -1은 위쪽으로 한칸씩 옮기라는 뜻입니다.

현재 index보다 1씩 작은(-1) index의 위치로 옮기라는 것입니다.

그리고 index=15인 행은 다음 행이 없으니 NaN값으로 표시된 것을 알 수 있죠.

또한 shift가 적용된 대상이 DataFrame인 df_test이므로 return되는 데이터도 DataFrame입니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        7, 8, 9, 10,
        11, 12, 13,
        14, 15, 16
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.shift(1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     7
7      2    a  2050     8
8      2    b  2000     9
9      2    b  2200    10
10     3    a  3000    11
11     3    a  3100    12
12     3    b  3200    13
13     4    a  4200    14
14     4    b  4100    15
15     4    b  4150    16

    col1 col2    col3  col4
0    NaN  NaN     NaN   NaN
1    1.0    a  1000.0   1.0
2    1.0    a  1100.0   2.0
3    1.0    a  1200.0   3.0
4    1.0    b  1300.0   4.0
5    1.0    b  1050.0   5.0
6    1.0    b  1100.0   6.0
7    2.0    a  2100.0   7.0
8    2.0    a  2050.0   8.0
9    2.0    b  2000.0   9.0
10   2.0    b  2200.0  10.0
11   3.0    a  3000.0  11.0
12   3.0    a  3100.0  12.0
13   3.0    b  3200.0  13.0
14   4.0    a  4200.0  14.0
15   4.0    b  4100.0  15.0
<class 'pandas.core.frame.DataFrame'>

반면에 shift의 인자로 1을 전달하면 모든 행의 값이 아래쪽으로 1칸씩 밀린 것을 알 수 있습니다.

index=0인 행은 이전 행이 없으므로 NaN으로 표시되었습니다.

이렇게 몇 칸을 옮기고싶은지에 대한 숫자를 shift의 인자로서 전달하면 원하는 만큼 이동이 가능합니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.loc[:, 'col4'].shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

0      2.0
1      3.0
2      4.0
3      5.0
4      6.0
5      6.0
6      7.0
7      8.0
8      9.0
9     10.0
10    11.0
11    12.0
12    13.0
13    14.0
14    15.0
15     NaN
Name: col4, dtype: float64
<class 'pandas.core.series.Series'>

shift는 DataFrame의 하나의 행에만 적용할 수도 있습니다.

위 예시는 df_test의 col4에만 shift를 적용시켰습니다.

loc[:, 'col4']를 보면 column이름인 col4에 대괄호가 쳐져있지 않으므로 이것은 col4를 Series로 반환합니다.

따라서 위 예시에서 shift는 Series에 적용된 것과 같으므로 shift의 return값도 Series입니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.loc[:, ['col4']].shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col4
0    2.0
1    3.0
2    4.0
3    5.0
4    6.0
5    6.0
6    7.0
7    8.0
8    9.0
9   10.0
10  11.0
11  12.0
12  13.0
13  14.0
14  15.0
15   NaN
<class 'pandas.core.frame.DataFrame'>

이번엔 loc.[:, ['col4']] 처럼 column이름에 대괄호를 쳐서 loc가 DataFrame을 return하게 했습니다.

따라서 여기에 적용된 shift도 DataFrame에 대해 적용되는 것이므로 shift의 return값도 DataFrame입니다.

shift는 자신이 적용된 대상의 data type과 동일한 data type의 결과를 return합니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_group_shifted = df_test.groupby(by=['col1', 'col2'])[['col4']].shift(-1)
print(df_group_shifted)
print(type(df_group_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col4
0    2.0
1    3.0
2    NaN
3    5.0
4    6.0
5    NaN
6    7.0
7    NaN
8    9.0
9    NaN
10  11.0
11   NaN
12   NaN
13   NaN
14  15.0
15   NaN
<class 'pandas.core.frame.DataFrame'>

shift는 groupby와 함께 사용될 수 있습니다.

위 예시를 보면 col1, col2를 기준으로 groupby를 하고 groupby된 col4에 shift를 적용합니다.

따라서 결과를 보면 shift가 동일한 col1, col2값을 가진 행들의 그룹 내에서 적용된 것을 볼 수 있습니다.

(index=0, 1, 2 행이 동일한 col1, col2 값을 가지고있으므로 index=0, 1, 2에 있는 col4값을 위쪽으로 한 칸씩 올린 모습을 볼 수 있습니다. index=2는 동일한 col1, col2값을 가진 다음 행이 없으므로 NaN으로 표시되는 것도 볼 수 있죠.)

import pandas as pd

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)


df_test.loc[:, 'col5'] = df_test.groupby(by=['col1'])['col3'].shift(-2)
print(df_test)




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col1 col2  col3  col4    col5
0      1    a  1000     1  1200.0
1      1    a  1100     2  1300.0
2      1    a  1200     3  1050.0
3      1    b  1300     4  1100.0
4      1    b  1050     5     NaN
5      1    b  1100     6     NaN
6      2    a  2100     6  2000.0
7      2    a  2050     7  2200.0
8      2    b  2000     8     NaN
9      2    b  2200     9     NaN
10     3    a  3000    10  3200.0
11     3    a  3100    11     NaN
12     3    b  3200    12     NaN
13     4    a  4200    13  4150.0
14     4    b  4100    14     NaN
15     4    b  4150    15     NaN

위같은 방식으로 groupby와 shift로 이동된 데이터를 원본 DataFrame의 어떤 column에 할당할 수도 있습니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_rolling_sum_1 = df_test.groupby(by=['col1', 'col2'])[['col4']].rolling(2).apply(sum)
print(df_rolling_sum_1)
print(type(df_rolling_sum_1))

df_rolling_sum_2 = df_test.groupby(by=['col1', 'col2'])[['col4']].rolling(2).apply(sum).shift(-1)
print(df_rolling_sum_2)
print(type(df_rolling_sum_2))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

              col4
col1 col2         
1    a    0    NaN
          1    3.0
          2    5.0
     b    3    NaN
          4    9.0
          5   11.0
2    a    6    NaN
          7   13.0
     b    8    NaN
          9   17.0
3    a    10   NaN
          11  21.0
     b    12   NaN
4    a    13   NaN
     b    14   NaN
          15  29.0
<class 'pandas.core.frame.DataFrame'>

              col4
col1 col2         
1    a    0    3.0
          1    5.0
          2    NaN
     b    3    9.0
          4   11.0
          5    NaN
2    a    6   13.0
          7    NaN
     b    8   17.0
          9    NaN
3    a    10  21.0
          11   NaN
     b    12   NaN
4    a    13   NaN
     b    14  29.0
          15   NaN
<class 'pandas.core.frame.DataFrame'>

shift는 rolling과도 같이 사용될 수 있습니다.

위 예시를 보면 col1, col2를 기준으로 그룹화된 DataFrame의 col4에 2개 행(현재행, 그 이전행)에 대해 rolling sum을 진행한 것이 df_rolling_sum_1이고,

여기에 shift를 추가로 적용한게 df_rolling_sum_2입니다.

이 두 결과를 비교해보면 데이터는 똑같으나 shift(-1)이 적용된 결과는 동일한 group(=동일한 col1, col2 값을 가진 행들) 내에서 col4의 rooling sum 값이 한줄씩 위로 옮겨긴걸 볼 수 있습니다.

import pandas as pd

dict_test = {
    'col1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'col2': ['a', 'a', 'a', 'a', 'b', 'b', 'b', 'b', 'b', 'b'],
    'col3': [1000, 1200, 1100, 1050, 1300, 900, 1500, 2000, 1800, 1600]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_rolling_sum = df_test.groupby(by=['col2'])[['col3']].rolling(2).apply(sum).shift(-1)
df_rolling_sum = df_rolling_sum.reset_index(drop=False, inplace=False)
print(df_rolling_sum)
print(type(df_rolling_sum))

df_test.loc[:, 'new_col3'] = df_rolling_sum.loc[:, 'col3']
print(df_test)
print(type(df_test))




-- Result
   col1 col2  col3
0     1    a  1000
1     2    a  1200
2     3    a  1100
3     4    a  1050
4     5    b  1300
5     6    b   900
6     7    b  1500
7     8    b  2000
8     9    b  1800
9    10    b  1600

  col2  level_1    col3
0    a        0  2200.0
1    a        1  2300.0
2    a        2  2150.0
3    a        3     NaN
4    b        4  2200.0
5    b        5  2400.0
6    b        6  3500.0
7    b        7  3800.0
8    b        8  3400.0
9    b        9     NaN
<class 'pandas.core.frame.DataFrame'>

   col1 col2  col3  new_col3
0     1    a  1000    2200.0
1     2    a  1200    2300.0
2     3    a  1100    2150.0
3     4    a  1050       NaN
4     5    b  1300    2200.0
5     6    b   900    2400.0
6     7    b  1500    3500.0
7     8    b  2000    3800.0
8     9    b  1800    3400.0
9    10    b  1600       NaN
<class 'pandas.core.frame.DataFrame'>

위 예시는 rolling sum과 shift를 적용한 결과를 df_test의 new_col3라는 새로운 컬럼에 할당하고 있는 예시입니다.

보시면 rolling sum + shift(-1)의 결과로 생성된 df_rolling_sum의 col3의 값이 df_test의 new_col3에 그대로 할당된것을 볼 수 있죠.

react-native: 웹 개발자가 한달만에 앱 출시하기

사례

• 페이스북
• 인스타그램
• 디스코드
• 케이크
  • 앱개발자 1명
  • 안드로이드 & iOS 개발기간 1달
  • 매달 정기 업데이트
  • 기존 앱 개발 방식이었다면 가능했을까?

선택의결과

• 투입한 개발 리소스 ↓ = 최종 결과물의 퀄리티 ↑
• 플랫폼간 공유 코드 ↑ = QA & 유지 보수 비용 ↓

빠른 개발 -> 코드 공유 -> 쉬운 개선

React Native는 단 기간에 프로덕션 레벨의 크로스 플랫폼 앱을 만들어야 할 때 고려할 수 있는 여러 선택지 중 가장 가성비가 좋은 프레임워크다.

react-native 완벽한 이해

React Component -> React Native -> Bridge -> Android, iOS

Threading Structure

Bridge 특징

1. Asynchronous

AS-IS Native 동기화 호출: 완료 시점까지 Javascript 처리 대기

TO-BE Native 비동기 호출: 완료 시점까지 Javascript 처리 진행

2. Serializable

AS-IS 독립적으로 운영되는 두 영역 간의 데이터 공유: 많은 관리 이슈 발생

TO-BE 직렬화 된 메시지 교환: 간결해진 구조 대신 성능 저하 발생

3. Batched

AS-IS Native 호출마다 직렬화와 역직렬화의 과정에서 부하 발생

TO-BE 큐에 넣어 5ms 단위로 일괄 처리하는 방식으로 성능 개선

Bridge 모니터링

• MessageQueue 모니터링 방법

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'; MessageQueue.spy(true); MessageQueue.spy((info) => console.log("I'm spying!", info));

react-native의 발전방향

Facebook의 개선 방향

1. New Threading model
2. New async rendering capabilities
3. Faster and more lightweight bridge

Cake 프로젝트에 얻은 노하우 &

EXPO(CRNA) 사용 자제

1. 시작만 쉽고 모든 게 어려워짐
2. 기본으로 제공하는 기능은 많지만 앱이 너무 커짐 (기본 25~30MB)
3. 추가적인 Native 모듈을 설치할 수 없음 (제일 큰 이유!)

속 편하게 처음부터 빌드 방식(react-native-cli)으로 시작해라

효율적인 작업 순서

기본적인 작업 (레이아웃, 데이터 연동) -> 복잡한 애니메이션 & 인터랙션 확인 -> iOS에 특화된 UX 작업

중간에 안드로이드에서 확인하지 않으면 나중에 놀랄 수 있음!

Import 경로 지옥 탈출

상대경로 말고 절대경로를 사용하고 싶다면 babel-plugin-root-import를 적용

Optional Chaining

// AS-IS if(data && data.items && data.items.length > 2) { drawList(data); } // TO-BE if(data?.items?.length > 2) { drawList(data); }

Optional chaining operator 사용으로 쉽게 Null Safety 코딩! (0.56 버전부터 가능)

Lock dependencies

잘못된 라이브러리 업데이트는 고통을 불러옴

버전 고정하는 방법

1. 설치마다 고정 버전으로 설치하기

$ npm install --save --save-exact react-native-fbsdk $ yarn add --exact react-native-fbsdk

1. 전역 기본 옵션으로 설정하기

$ npm config set save-exact=true

Flow는 처음부터 꼭 사용해라

Flow를 적용해서 타입을 정의하면 파라미터 타입 오류의 사전 감지가 가능

1. 코드 진단
2. 자동 완성
3. 타입 힌트
4. 빠른 함수 이동

요즘은 타입스크립트도 지원이 많이 되어서 괜찮음

컴파일된 번들 파일 확인

자신이 짠 코드를 babel로 어떻게 변환되는지 확인해보는 것도 의미 있음

$ npm -g install js-beautify

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output index.android.bundle $ js-beautify index.android.bundle > index.android.bundle.js

성능을 고려한 정적 이미지 사용

AS-IS Javascript packager가 동작하는 방식: Bundle 파일 생성 -> 모듈 ID로 치환

TO-BE App Resources 사용하기

1. 기존 Native 개발 방식(Xcode asset catalogs / Android drawable folder)으로 추가
2. 크기 속성을 꼭 정의

성능을 고려한 리모트 이미지 사용

내장 Image 컴포넌트의 문제

1. Flickering
2. Cache misses
3. Low performances

// SDWebImage (iOS) / Glide (Android) 라이브러리 사용으로 문제점 개선 $ npm install react-native-fast-image

JavaScriptCode의 동작 오류

• Remote Debug 모드는 크롬의 V8 엔진 사용 (JavaScriptCore 엔진은 Date 처리에 문제가 많으므로 moment.js 라이브러리 사용)
• 플랫폼 간에도 다르게 동작할 수 있음 (안드로이드는 오래된 버전의 JavaScriptCore 엔진 사용중임)

플랫폼별 컴포넌트 스타일링

• 재정의 방식으로 스타일 정의하기

import StyleSheet from './PlatformStyleSheet'; const styles = StyleSheet.create({ title: { fontSize: 16, ios: { fontSize: 18 }, android: { fontSize: 17, color: 'red' } } });

import { Platform, StyleSheet } from 'react-native'; const PlatformStyleSheet = { create(styles) { const platformStyles = {}; for (const key in styles) { const { ios, android, ...style } = styles[key]; (ios || android) && Object.assign(style, Platform.select({ios, android})); platformStyles[key] = style; } return StyleSheet.create(platformStyles); }, } export default PlatformStyleSheet;

편리한 Style 자동완성

• atom-react-native-style 패키지 설치

안드로이드 Text 위 아래 패딩 제거

• includeFontPadding 스타일 속성 끄기 (iOS와 동일하게 TextView의 ascent, descent 기준으로 출력)

공용 Text 컴포넌트 사용하기

class Text extends PureComponent { static defaultStyle = Platform.select({ ios: { fontFamily: 'AppleSDGothicNeo-Regular' }, android: { fontFamily: 'sans-serif', includeFontPadding: false } }); render() { const { children, style, ...props } = this.props; return <Text {...props} allowFontScaling={false} style={[Text.defaultStyle, style]}> {children} </Text>; } }

터치 영역 확장하기

• hitSlop으로 최소한 44dp의 터치 영역을 보장해주세요.

<TouchableWithourFeedback hitSlop={{top: 7, right: 7, bottom: 7, left: 7}}> <View .../> </TouchableWithourFeedback>

놓치기 쉬운 최초 화면 렌더링

• render() 함수가 최초에 한 번 실행된다는 걸 잊기 쉬움
• render() -> componentDidMount() -> render()
• 출력 여부 상태 값으로 불필요한 초기 렌더링 제거

화면에 보이지 않지만 동작하는 코드

• 타이머/이벤트 리스너 사용 시 꼭 제거

개발자 도구

• react-native: Perf Monitor(iOS)
• Xocde: View Hierarchy Debugger
• Android Studio: Profiler

60 FPS 보장하기

효율적인 애니메이션 사용

• Javascript Driver 동작 순서

requestAnimationFrame 함수 실행 -> 값 계산 후 View.setNativeProps 함수 실행 -> Bridge로 전달 -> UI 업데이트

• Native Driver 동작 순서

메인 쓰레드에서 프레임마다 실행 -> 계산된 값으로 직접 View 업데이트 호출 -> UI 업데이트

Animated.timing(this._animation, { toValue: 1, duration: 1000, useNativeDriver: true, // add this }).start();

무거운 코드의 올바른 실행 시점

• 애니메이션과 인터랙션이 끝난 후로 실행 지연

반복되는 애니메이션이 있다면 등록한 코드가 실행되지 않거나 실행 시점의 문제 발생

• 다음 프레임으로 실행 지연

현재 프레임의 다른 실행을 보장해서 앱 반응성 개선

import { InteractionManager } from 'react-native'; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.doExpensiveAction(); }); } handleOnPress() { requestAnimationFrame(() => { this.doExpensiveAction(); }); }

FlatList 성능 개선

• getItemLayout 속성 사용

높이가 고정된 구성이라면 레이아웃의 크기를 매번 계산하지 않아서 성능 개선

<FlatList getItemLayout={(data, index) => { { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } )} />

효율적인 레퍼런스 사용

1. String Refs

Deprecated된 방식으로 사용하지 마세요.

// 레퍼런스 할당 <TextInput ref={'inputField'} /> // 레퍼런스 사용 this._refs.inputField.focus();

1. Callback Refs

컴포넌트에 인라인 함수를 사용하는 건 좋지 않아요.

// 레퍼런스 할당 <TextInput ref={ component => this._inputField = component } /> // 레퍼런스 사용 this._inputField.focus();

1. React.createRef()

React 16.3 버전부터 제공하는 효율적인 방식을 사용하세요.

// 레퍼런스 생성 this._inputFieldRef = React.createRef(); // 레퍼런스 할당 <TextInput ref={this._inputFieldRef} /> // 레퍼런스 사용 this._inputFieldRef.current.focus();

Google Play API Level 26 정책 대응

• 유지보수되지 않는 라이브러리의 빌드 설정

android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 } }

• 프로젝트 설정을 사용하는 빌드 설정

def safeExtGet(prop, fallback) { rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback } android { compileSdkVersion safeExtGet('compileSdkVersion', 27) buildToolsVersion safeExtGet('buildToolsVersion', '27.0.3') defaultConfig { minSdkVersion safeExtGet('minSdkVersion', 16) targetSdkVersion safeExtGet('targetSdkVersion', 26) } }

안드로이드 APK 최적화

1. Split APK

• CPU 별로 불필요한 코드 제거
• 중복된 JavaScriptCore 라이브러리의 제거로 APK 크기 3~4 MB 감소

// android/app/build.gradle def enableSeparateBuildPerCPUArchitecture = true

1. Proguard 적용

// android/app/build.gradle def enableProguardInReleaseBuilds = true

1. shrinkResources 옵션 사용 금지
2. console.* 코드 제거

$ npm install --save-dev babel-plugin-transform-remove-console

// .babelrc { "env": { "production": { "plugins": ["transform-remove-console"] } } }

1. 불필요한 localized resource 제거

// android/app/build.gradle android { defaultConfig { resConfigs "en", "ko" } }

1. 이미지 최적화

TinyPNG, OptiPNG

앱 크기에 대한 걱정은 오해

네비게이션 모듈 선택

• react-navigation (JS 구현체)
• react-native-navigation (Native 구현체)
• Native 구현체가 JS 구현체보다 성능이 좋으니 무조건 앞선다는 글에 현혹되지 마세요.
• 원하는 수준의 커스터마이징과 트러블 대응이 가능한 모듈을 선택하세요.

복잡한 애니메이션은 Lottie

• 이제 디자이너한테 복잡한 애니메이션도 다 된다고 자신 있게 말하세요.

Adobe After Effects로 작업한 애니메이션을 JSON 형식으로 export하면 끝

<LottieView source={require('./animation.json')} autoPlay loop />

출처

• 발표자료: 링크
• 발표자: 스노우 이성민 개발자님

도움되는 링크

• 코드종님의 네비게이션 모듈 관련 글
• 폰트 스케일 관련 글

npm install -g react-native-cli

or

npm install -g expo-cli

프로젝트 생성

react-native init [프로젝트명]

or

expo init [프로젝트명]

cd [프로젝트명]

=== react-native

npm start ==> 프로젝트 시작

또 다른 창에 (실행했는데 에러난다면)

android/app/src/main 폴더에서 assets 폴더 생성

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

--platform android : 안드로이드 빌드

--dev false: 릴리즈 모드로 빌드

--entry-file index.js : index.js를 시작으로 번들링 할 것

--bundle-output *** : 번들결과 파일 위치 및 파일명 설정

--assets-dest *** : 리소스 경로 설정

끝나면

react-native run-android ==> simulator 가 뜬다

==== expo

yarn start 

빌드는?

번들링 생성 시

cd android

./gradlew bundleRelease

or

cd android && ./gradlew bundleRelease

여러번 빌드하다보면 번들링 결과가 여러번 생성되므로 정리해주자.

cd android && ./gradlew clean && ./gredlew bundleRelease

apk 생성해야한다면 assembleRelease 

cd android && ./gradlew assembleRelease

빌드 후 android/app/build/outputs에 결과 파일 생성

release 버전으로 구동 테스트할 때는 --variant=release 옵션을 넣고 실행하면 된다.

react-native run-android --variant=release

빌드 옵션 상세 ./gradlew bundleRelease 의 상세

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

--platform android : 안드로이드 빌드

--dev false: 릴리즈 모드로 빌드

--entry-file index.js : index.js를 시작으로 번들링 할 것

--bundle-output *** : 번들결과 파일 위치 및 파일명 설정

--assets-dest *** : 리소스 경로 설정

설치 환경은

Anaconda3 python 3.5

증상

conda install graphviz 로 설치하고

프로그램을 수행하면 아래와 같이 뜬다

No module named graphviz

원인

conda install 하면 graphviz 폴더를 

~/Anaconda3/Library/bin/ 로 설치를 한다

문제는 python interpreter 가 이 위치를 읽지 못한다는 것

해결

graphviz 폴더를 복사해서

~/Anaconda3/Lib/site-packages 하위로 복사해준다

결과

No module 문제는 해결 된다

----------------------------------------------------------------

증상

 [dot, ~]가 excutable  하지 않다고 나옴

원인

 graphviz download 사이트에 들어가 찾아보면

 더이상 자동으로 PATH를 잡아주지 않는다고

 dot 명령이 바로 실행 되도록 알아서 PATH를 잡으라고 한다

해결

~\Anaconda3\Lib\site-packages\graphviz 를

PATH에 추가한다

결과

코드가 실행된다 

만약 실행이 안되면 창을 다 닿았다가 다시 실행해보자

그래도 안되면 pip install graphviz 를 해보자 

(사실 설치중에 conda install 과 pip install 이 된 상태여서 이게 결함인지는 모르겠다)

출처: http://livetoday.tistory.com/entry/graphviz-설치-후-오류-Anaconda [Hero]

Jupyter를 사용하면 뭐가 좋아지나?

• 웹브라우저에서 모든 작업이 이루어져 편리해진다.
• 코딩과 문서화 작업을 한꺼번에 할 수 있다.
• 매일 일기 쓰듯이 코딩 연습을 할 수 있게 자연스럽게 습관이 든다.
• 재미있어진다.

어떻게 사용하나?

• 온라인에서 서비스를 제공해 주는 곳에 가서 이용해도 된다.
• 하지만 나의 데스크탑에 로컬로 설치해서 마음대로 환경을 설정해 가면서 쓰는것이 더 좋다.
• 작업한 노트북들은 Github에 push하면서 백업 효과를 노리자.

Jupyter Notebook 설치 및 환경셋팅

• 시스템 자체의 부하가 크지 않기 때문에 한 번 같이 올려본다.
• 자신의 서버/컴퓨터에서 Jupyter 서비스를 온라인으로 제공하게 되면, 자신이 사용하는 PC 마다 일일이 따로따로 설치해 줘야 하는 불편함에서 벗어날 수 있다.
• Python, Julia, Octave, Bash 커널 등을 넣어서 함께 제공하기로 한다.
• 본 환경구축 레시피는 다음 환경에서 테스트했다.
  • 우분투 16.04 계열 리눅스 머신

Anaconda3 설치

• Anaconda 패키지를 설치하는게 가장 손쉽다.
• Anaconda 패키지에는, python과 과학기술용 각종 라이브러리들, 그리고 Jupyter 핵심 부분이 기본적으로 포함되어 있으며, 일반적인 python의 패키지 관리자인 pip 말고 전용 패키지 관리자인 conda도 들어있다.
• 다운로드 사이트 : https://www.continuum.io/downloads#linux
• 위 사이트에서 다운로드 할 버전의 주소를 복사한 다음, 아래와 같이 wget으로 NAS에 다운로드 받아도 된다.

cd ~
wget https://repo.continuum.io/archive/Anaconda3-4.2.0-Linux-x86_64.sh

• 다운로드 받은 설치파일을 실행한다.

bash Anaconda3-4.2.0-Linux-x86_64.sh

• 설치할 때 마지막에 bash 설정에 경로를 추가할지를 묻는데, 당연히 추가하도록 yes 해 준다.
• 이제 Anaconda 패키지는 모두 ~/anaconda3 경로에 설치되어 있을 것이다. sudo 권한으로 설치한 것이 아니므로, 자신이 마음대로 삭제할 수도 있다는 점을 유의한다. 또한 앞으로 새로 추가할 패키지들 역시 sudo 권한이 불필요할 것이다.

Anaconda3 업데이트 및 셋팅

• Anaconda의 Python 패키지들을 전부 최신버전으로 업데이트하려면 다음 명령을 쓰면 된다.

conda update conda
conda update anaconda

Jupyter를 위한 Python 환경 생성

• 고립된 Python 환경을 생성하여면 다음과 같은 식으로 하면 된다. 본 예에서는 JUPYTER라는 이름의 Python 환경을 만들고, 그 환경을 Activate 시키는 것이다.

conda create --name JUPYTER ipython
source activate JUPYTER

Jupyter 설치

• 기본적인 패키지는 이미 Anaconda에 들어가 있지만, 확실히 하기 위해 Jupyter 설치 명령을 준다.

conda install jupyter

Jupyter Notebook에 설치 가능한 커널

• Jupyter를 설치하면 기본적으로 Anaconda의 Python 언어가 기본적으로 들어가 있을 것이다.
• 하지만 여기에 추가하여 다른 언어들도 사용 가능하도록 할 수 있다.
• 가능한 언어들의 목록은 다음과 같다.
• https://github.com/ipython/ipython/wiki/IPython-kernels-for-other-languages

Julia 커널 설치

• Julia 언어를 시스템에 설치하고, 이것을 Jupyter에서도 사용할 수 있도록 커널을 설치해 보자.
• 저장소를 등록하고, 설치.

sudo add-apt-repository ppa:staticfloat/juliareleases
sudo add-apt-repository ppa:staticfloat/julia-deps
sudo apt-get update
sudo apt-get install julia

• 기본적인 Julia 패키지 설치

julia

실행한 후, Julia 안에서 다음 명령을 넣어서 Julia 언어에서 사용할 확률이 가장 높은 모듈들을 추가 설치한다.

Pkg.init()
Pkg.add("Jewel")
Pkg.add("Images")
Pkg.add("PyPlot")
Pkg.add("IJulia")
Pkg.update()
quit()

• 패키지 설치 도중에 빌드 에러가 발생할 경우, 다음과 같이 의존성 있는 것들을 추가 설치해 주면 해결될 확률이 높다. (어떤 모듈의 경우에는 설치하면서 동시에 Build 작업이 진행되는 경우가 있다.)

sudo apt-get install build-essential cmake

GNU Octave 커널 설치

• 이번에는 GNU Octave를 시스템에 설치하고, 이것을 Jupyter에서도 사용할 수 있도록 커널을 설치해 보자.
• 저장소를 등록하고, 설치.

sudo add-apt-repository ppa:octave/stable
sudo apt-get update
sudo apt-get install octave

• Octave 잘 실행되는지 확인

octave-cli

• Octave GUI 실행 확인

octave

• Octave GUI 실행 실패시 조치 (QT 설정파일 소유권을 root에서 현재 사용자로 변경) : 현행 배포한의 버그.

sudo chown -hR 계정:계정 ~/.config/octave

• 커널 설치 (sudo 불필요)

pip install octave_kernel
python -m octave_kernel.install

Bash 커널 설치

• 이번에는 Bash를 시스템에 설치하고, 이것을 Jupyter에서도 사용할 수 있도록 커널을 설치해 보자.
• 커널 설치

pip install bash_kernel
python -m bash_kernel.install

C 커널 설치

• 이번에는 C 언어를 Jupyter에서도 사용할 수 있도록 커널을 설치해 보자. C 컴파일러는 이미 시스템에 gcc로 설치되어 있으므로 컴파일러는 별도로 설치할 필요가 없다.
• 참고 : https://github.com/brendan-rius/jupyter-c-kernel
• C 커널 설치

pip install jupyter-c-kernel

• 커널스펙 설정

cd ~
git clone https://github.com/brendan-rius/jupyter-c-kernel.git
mkdir ~/.local/share/jupyter/kernels/c_spec
cp ./jupyter-c-kernel/c_spec/kernel.json ~/.local/share/jupyter/kernels/c_spec/kernel.json

설치된 커널들 이상없는지 확인하기

• 아래 명령은 치면, 위에서 설치했던 커널들의 목록을 볼 수 있다.

jupyter kernelspec list

Jupyter Notebook 작업 디렉토리 생성

• 아무데서나 실행할 수는 없으므로, 작업할 디렉토리를 따로 만들어주는게 보안상 좋겠다. 이왕이면 Github와 연동시키기 좋도록 한다.

mkdir ~/github/My-Jupyter-Notebooks

• Github 리모트 저장소와 연결하는 절차의 설명은 생략한다.

Jupyter Notebook을 외부망에서 접속 가능하도록 설정하기

• 참고 : http://jupyter-notebook.readthedocs.io/en/latest/public_server.html
• 현재까지의 셋팅에서는, http://localhost:8888로만 연결 가능하다.
• 외부망에서 접속 가능하도록 하기 위해 설정 프로파일을 생성하고, 확인 및 수정한다.
• 참고 1, 참고 2
• 새로운 Jupyter Notebook 설정 프로파일을 생성.

jupyter notebook --generate-config

• 그러면 /home/dong/.jupyter/jupyter_notebook_config.py 파일이 새로 생겨난 것을 확인.
• 한편, 로그인을 위한 패스워드 해쉬코드를 만든다. 이와 관련된 기본적인 파이썬 함수가 있으므로, 파이썬 상태에서 이 함수를 이용해서 해쉬코드를 만든다. 우선 터미널에 python 쳐서 파이썬 REPL로 들어간 다음,

from notebook.auth import passwd
passwd()

위와 같이 명령을 때려주면 비밀번호를 치라고 나오는데 확인차 2번 쳐 주면 해쉬코드로 된 비밀번호 코드가 나온다. 해쉬코드를 긁어다 복사해 두거나 메모해 둔다. 그리고 python 콘솔을 빠져나오려면

exit()

• 설정 프로파일을 편집기로 열어서 내용 확인. (대략 500줄을 좀 넘어가는 코드이고, 대부분 주석)

nano /home/계정/.jupyter/jupyter_notebook_config.py

• 편집기에서 다음 내용으로 해당 부분을 수정해 준다. 이중에서 포트 번호는 원하는걸로 바꾸면 되지만, 여기서는 8888로 하자. 각 행의 맨 앞에 주석기호 #의 유무를 잘 비교해서 확인하자.

c.NotebookApp.ip = '*'
c.NotebookApp.port = 8888
c.NotebookApp.notebook_dir = u'/home/계정/github/My-Jupyter-Notebooks'
c.NotebookApp.open_browser = False
`
* 그리고, 비밀번호 해쉬코드도 다음과 같은 형식으로 넣어준다.
`
c.NotebookApp.password = u'sha1:67c9e6어쩌구저쩌구71089e11aed'

• 완료되었으면 해당 편집기를 저장하고 종료.
• 서버 환경에 따라 방화벽으로 막혀 있을 수 있으므로 해당 포트를 뚫어준다.

sudo ufw allow 8888

Jupyter Notebook 실행 테스트

• 다음 명령을 주면 실행된다.

jupyter notebook

• 자동으로 웹브라우저가 실행되지 않도록 하려면 이렇게 한다.

jupyter notebook --no-browser

• 특정한 디렉토리를 루트로 삼아 실행되도록 하려면 이렇게 한다.

jupyter notebook --notebook-dir='디렉토리경로'

• 이제 외부 컴퓨터의 웹브라우저로 다음 주소를 쳐서 들어가지는지 확인.

http://아이피주소:8888

비밀번호 로그인, 설치된 커널의 활성화 여부 등을 확인한다.

• 이상없이 잘 되면, 서버 터미널에서 Ctrl+c, y를 쳐서 종료한다.

부팅할 때 자동으로 Jupyter Notebook 실행되도록 설정

• 개인 서버에서 돌리려면 이런식으로 자동 스타트 설정을 해 주면 편리할 것이다.
• 쉘 스크립트를 편집해서 만든다.

nano ~/Start_Jupyter.sh

한 다음 다음 내용을 써 넣고 저장 후 종료.

#!/bin/bash
/home/계정/anaconda3/bin/jupyter notebook &

• 만든 쉘 스크립트를 실행 가능하도록 속성을 준다.

chmod +x ~/Start_Jupyter.sh

• 다음과 같이 rc.local 파일을 열어서 편집한다.

sudo nano /etc/rc.local

• 다음 내용을 추가한 후 저장하고 편집기 종료.

sudo -u 계정 /home/계정/Start_Jupyter.sh

• 서버 재부팅

sudo reboot now

• 만일 제대로 작동을 안한다면 다음 명령을 줘 본다. (참고)

sudo systemctl enable rc-local.service

Jupyter Notebook Extensions 설치

• Anaconda를 이용해 설치된 Jupyter Notebook에는 Anaconda 자체적인 Extension이 이미 설치되어 있다. 별다른 조치 없이 슬라이드샷으로 프리젠테이션 해 주는 기능 등이 있어 편리하다. (참고)
• 다만 여기서는 표준적인 Jupyter Notebook Extensions를 추가로 설치 시도한다.
• 참고 : https://github.com/ipython-contrib/jupyter_contrib_nbextensions

conda install -c conda-forge jupyter_contrib_nbextensions

• 단, 이 익스텐션은 64비트 버전만 제공되고 32비트 버전은 제공되지 않는다. 자신의 서버/컴퓨터가 32비트라면 사용할 수 없다.

Jupyter Notebook Themes 설치

• 여러가지 방식으로 개발된 테마들이 있지만, 다음의 것이 가장 심플하고 설치 자체도 쉬운 것 같다.
• jupyterthemes : https://github.com/dunovank/jupyter-themes
• 설치는 다음 한 줄이면 끝난다.

pip install jupyterthemes

• 설치 후 적용 가능한 테마를 보기 위해 jt -l을 쳐 주면 다음과 같이 4가지 테마가 나온다.

onedork
grade3
oceans16
chesterish

• 이 중에서 grade3가 바탕이 흰 색의 테마이고, 나머지는 어두운 색이다. 시험삼아 다음 명령을 하나씩 줘 보자.

jt -t grade3 -T -N

• 원상복귀 하려면 jt -r을 주면 된다고 하는데, 해 봐도 원상복귀가 안된다! ㅠㅠ
• 강제로 원상복귀 시키려면, 원래의 오리지널 css 파일을 만들어서 집어넣어주면 될 것이다.
• ~/.jupyter/custom/custom.css 파일을 만들고 편집기로 다음 내용을 집어넣으면 원래 오리지널 테마로 복원된다.

.rendered_html pre, .rendered_html code, pre, .CodeMirror, .prompt {
  font-family: 나눔고딕코딩, Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;;
}
.rendered_html pre,
.rendered_html code {
    font-family: Consolas,"Andale Mono WT","Andale Mono","Lucida Console","Lucida Sans Typewriter","DejaVu Sans Mono","Bitstream Vera Sans Mono","Liberation Mono","Nimbus Mono L",Monaco,"Courier New",Courier,monospace;
	background-color: #f5f5f5;
}
.rendered_html pre {
	padding: 8.5px;
	border: 1px solid #ccc;
	border-radius: 2px;
}
.rendered_html p > code,
.rendered_html ul li code {
    border: solid 1px #e1e4e5;
    color: #E74C3C;
    padding: 0 5px;
    overflow-x: auto;
}
blockquote {
	background-color: #fcf2f2;
	border-color: #dFb5b4;
	border-left: 5px solid #dfb5b4;
	padding: 0.5em;
}

• 테마 때문에 일부 기능이 제한되거나 작동이 안되는 부분이 있는지 확인이 필요하다.
• 수동으로 직접 css 파일 수정을 해서 테마를 변경하려면 다음 페이지들을 참고.
  • http://seokjoonyun.blogspot.kr/2016/08/jupyter-notebook-markdown-css.html
  • http://bryan7.tistory.com/850
  • http://stackoverflow.com/questions/32156248/how-do-i-set-custom-css-for-my-ipython-ihaskell-jupyter-notebook

Jupyter Lab

• 이제까지 설치해서 사용하는 환경은 바로 ‘Jupyter Notebook’이다.
• 그런데 이 UI가 마음에 안 드는지, 한 그룹에서 새롭게 Jupyter Lab을 개발하고 있다.

• 현재 알파 릴리즈되어 설치해서 작동 시켜볼 수도 있다.
• 다만 아직 완전하게 기능구현,최적화,버그 등을 모두 잡은 상태는 아닌 것 같다.
• 다만 아마 1~2년 정도 지나서는 Notebook에서 Lab 환경으로 이행할 것으로 보인다.
• JupyterLab 레포지토리
• 개인적으로 사용해 보니 확실히 Notebook 보다 더 편리하고 기능이 더 많다.
• conda-forge 패키지 저장소에서도 제공하고 있기 때문에 설치 방법은 간단하다.

conda install -c conda-forge jupyterlab

• 설치 후, 다음 명령으로 실행한다.

julia lab

• 그러면 주소는 다음과 같이 나온다.

http://localhost:8888/lab

• 기존의 Notebook 환경이 그립다면 주소를 이렇게 바꾸면 된다.

http://localhost:8888/tree

• 아마 당분간은 이렇게 Lab과 Notebook을 공존시키다가, Lab이 충분히 성숙되면 Notebook은 별도로 떨어뜨리기로 계획되어 있다고 한다.

결론

• 이제 Jupyter에서 Python, C, Octave, Julia, Bash 등을 마음대로 사용할 수 있게 되었으니 가지고 놀면 된다.

[[1 2 3]

[4 5 6]]

np.sum(a, axis=0) : [5 7 9]

np.sum(a, axis=1) : [6 15]

vi /usr/bin/pip

from pip import main

if __name__ == '__main__':

    sys.exit(main())

요렇게 변경

from pip import __main__ 

if __name__ == '__main__':

    sys.exit(__main__._main())

import numpy as np

import cv2

face_cascade = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')

eye_cascade = cv2.CascadeClassifier('haarcascade_eye.xml')

img = cv2.imread('redvelvet.png')

gray = cv2.cvtColor(img,cv2.COLOR_BGR2GRAY)

faces = face_cascade.detectMultiScale(gray, 1.3, 5)

for (x,y,w,h) in faces:

    cv2.rectangle(img,(x,y),(x+w,y+h),(255,0,0),2)

    roi_gray = gray[y:y+h, x:x+w]

    roi_color = img[y:y+h, x:x+w]

    eyes = eye_cascade.detectMultiScale(roi_gray)

    for(ex,ey,ew,eh) in eyes:

        cv2.rectangle(roi_color,(ex,ey),(ex+ew,ey+eh),(0,255,0),2)

cv2.imshow('img',img)

cv2.waitKey(0)

cv2.destroyAllWindows()

https://blog.naver.com/limitsinx/221137914300

import cv2

cap = cv2.VideoCapture('testvideo.divx')

face_pattern = cv2.CascadeClassifier('haarcascade_frontalface_default.xml')

while True:

          ret, frame = cap.read()

          gray = cv2.cvtColor(frame, cv2.COLOR_BGR2GRAY)

          faceList = face_pattern.detectMultiScale(gray, 1.5)

          for (x, y, w, h) in faceList:

                  cv2.rectangle(frame, (x, y), (x+w, y+h), (0, 255, 0), 3)

          cv2.imshow('image', frame)

          if cv2.waitKey(1) & 0xFF == ord('q'):

                 break

cap.release()

cv2.destroyAllWindows()

hsplit(array, number) 수평으로 쪼개기

vsplit(array, number) 수직으로 쪼개기

dsplit(array, number) 깊게 쪼개기

split(array, number, axis) 쪼개기 axis=0 수직으로 axis=1 수평으로

dsplit 쪼개기

pyInstaller라는 게 있다.

http://www.pyinstall.org/

64비트에서도 잘 작동한다.

> python setup.py install 로 설치한다.

사용 시)

EXE로 만들기를 원하는 파이썬 스크립트를 찾아 CONSOLE에서 명령 실행

> pyinstaller.exe xxx.py

단일 파일로 만들 때는 -F 옵션 추가

> pyinstaller.exe -F xxx.py

GUI 프로그램의 경우, 실행 시 CONSOLE창을 숨기고 싶다면 --noconsole 옵션 추가

> pyinstaller.exe -F --noconsole xxx.py

py2exe는 python2 만 지원하는 것으로 알고 있고

python3에는 cx_freeze 라는 모듈을 사용해야한다.

cx_freeze - http://cx-freeze.sourceforge.net

py2exe - http://www.py2exe.org

> pip install cx_freeze

Setup.py 파일로 만들어서 실행 파일로 실행

import sys

import os

from cx_Freeze import setup, Executable

os.environ['TCL_LIBRARY'] = "c:/python/tcl/tcl8.6"

os.environ['TK_LIBRARY'] = "c:/python/tcl/tk8.6"

setup(name = "parser",

options={"build_exe": {"packages": ["tkinter", "matplotlib"],

"include_files": ['clienticon.ico']}},

version = "1.0",

description = "Parser",

author = "head1ton",

executables = [Executable("parser.py")])

만약 윈도우 GUI 프로그램인 경우 executables의 옵션을 입력해주어야 한다.

executables = [Executable("imgtk.py", base="Win32GUI")])

Setup.py 실행

> python setup.py build

설치파일로 만들 수도 있다.

> python setup.py bdist_msi

dist 폴더에 설치파일 생성.

참고 - http://sh1n2.tistory.com/123

import numpy as np
x = np.array([
[[2, 3, 1, 0],[12, 13, 11, 10],[22, 23, 21, 20]],
[[32, 33, 31, 30],[42, 43, 41, 40],[52, 53, 51, 50]]
])
print('x:', x)
print('x.shape:', x.shape)

X1 = x[:, np.newaxis, 1] # 모든 행에서 1열 값을 가져오고(행이됨), 축을 추가한다(열이됨)
print('X1:', X1)
print('X1.shape:', X1.shape)

X2 = x[:, 1, np.newaxis] # x[:, np.newaxis, 1]과 동일
print('X2:', X2)
print('X2.shape:', X2.shape)

X3 = x[1, np.newaxis, :] # 1행에서 모든 열값을 가져온다 (축추가로 열값이됨)
print('X3:', X3)
print('X3.shape:', X3.shape)

X4 = x[1, :, np.newaxis] # 1행에서 모든 열값을 가져온다 ( 축 추가로 행값이됨 )
print('X4:', X4)
print('X4.shape:', X4.shape)

X5 = x[:, np.newaxis]   # 차원추가? 열추가?
print('X5:', X5)
print('X5.shape:', X5.shape)

from matplotlib import font_manager, rc
font_name = font_manager.FontProperties(fname="c:/Windows/Fonts/malgun.ttf").get_name()
rc('font', family=font_name)

df = pd.read_csv('./data/movie_review.csv', encoding='cp949')

>>>t = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12]]

>>>x = np.array(t)

>>>type(x)

>>>x.shape

(3, 4)

>>>x.ravel()

array([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12])

>>>x.ravel().shape

(12,)

>>>x.shape = (6, 2)

>>>x

array([[1, 2],

[3, 4],

[5, 6],

[7, 8],

[9, 10],

[11, 12]])

>>>x.transpose()

array([[1, 3, 5, 7, 9, 11],

[2, 4, 6, 8, 10, 12]])

>>>x.resize((2, 6))

>>>x

array([[1, 2, 3, 4, 5, 6],

[7, 8, 9, 10, 11, 12]

https://docs.scipy.org/doc/numpy/reference/routines.math.html

import numpy as np

samples = np.arange(-10, 10, 0.2)
print('sample: ', samples)

xs, ys = np.meshgrid(samples, samples)
print('xs: ', xs)
print('ys: ', ys)

sample:  [ -1.00000000e+01  -9.80000000e+00  -9.60000000e+00  -9.40000000e+00

  -9.20000000e+00  -9.00000000e+00  -8.80000000e+00  -8.60000000e+00

  -8.40000000e+00  -8.20000000e+00  -8.00000000e+00  -7.80000000e+00

  -7.60000000e+00  -7.40000000e+00  -7.20000000e+00  -7.00000000e+00

  -6.80000000e+00  -6.60000000e+00  -6.40000000e+00  -6.20000000e+00

  -6.00000000e+00  -5.80000000e+00  -5.60000000e+00  -5.40000000e+00

  -5.20000000e+00  -5.00000000e+00  -4.80000000e+00  -4.60000000e+00

  -4.40000000e+00  -4.20000000e+00  -4.00000000e+00  -3.80000000e+00

  -3.60000000e+00  -3.40000000e+00  -3.20000000e+00  -3.00000000e+00

  -2.80000000e+00  -2.60000000e+00  -2.40000000e+00  -2.20000000e+00

  -2.00000000e+00  -1.80000000e+00  -1.60000000e+00  -1.40000000e+00

  -1.20000000e+00  -1.00000000e+00  -8.00000000e-01  -6.00000000e-01

  -4.00000000e-01  -2.00000000e-01  -3.55271368e-14   2.00000000e-01

   4.00000000e-01   6.00000000e-01   8.00000000e-01   1.00000000e+00

   1.20000000e+00   1.40000000e+00   1.60000000e+00   1.80000000e+00

   2.00000000e+00   2.20000000e+00   2.40000000e+00   2.60000000e+00

   2.80000000e+00   3.00000000e+00   3.20000000e+00   3.40000000e+00

   3.60000000e+00   3.80000000e+00   4.00000000e+00   4.20000000e+00

   4.40000000e+00   4.60000000e+00   4.80000000e+00   5.00000000e+00

   5.20000000e+00   5.40000000e+00   5.60000000e+00   5.80000000e+00

   6.00000000e+00   6.20000000e+00   6.40000000e+00   6.60000000e+00

   6.80000000e+00   7.00000000e+00   7.20000000e+00   7.40000000e+00

   7.60000000e+00   7.80000000e+00   8.00000000e+00   8.20000000e+00

   8.40000000e+00   8.60000000e+00   8.80000000e+00   9.00000000e+00

   9.20000000e+00   9.40000000e+00   9.60000000e+00   9.80000000e+00]

xs:  [[-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]

 [-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]

 [-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]

 ..., 

 [-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]

 [-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]

 [-10.   -9.8  -9.6 ...,   9.4   9.6   9.8]]

ys:  [[-10.  -10.  -10.  ..., -10.  -10.  -10. ]

 [ -9.8  -9.8  -9.8 ...,  -9.8  -9.8  -9.8]

 [ -9.6  -9.6  -9.6 ...,  -9.6  -9.6  -9.6]

 ..., 

 [  9.4   9.4   9.4 ...,   9.4   9.4   9.4]

 [  9.6   9.6   9.6 ...,   9.6   9.6   9.6]

 [  9.8   9.8   9.8 ...,   9.8   9.8   9.8]]

파이썬을 사용하다 보면 pip로 패키지를 설치하게 되는데 이 패키지들은 파이썬 설치 폴더(디렉터리)의Lib/site-packages 안에 저장됩니다. 그래서 pip로 설치한 패키지는 모든 파이썬 스크립트에서 사용할 수 있게 됩니다. 평소에는 이런 방식이 큰 문제가 없지만 프로젝트 여러 개를 개발할 때는 패키지의 버전 문제가 발생합니다.

예를 들어 프로젝트 A에서는 패키지X 1.5를 사용해야 하고, 프로젝트 B에서는 패키지X 2.0을 사용해야 하는 경우가 생깁니다. 이 패키지X 1.5와 2.0은 호환이 되지 않는다면 개발하기가 상당히 불편해집니다.

이런 문제를 해결하기 위해 파이썬에서는 가상 환경(virtual environment)을 제공하는데, 가상 환경은 독립된 공간을 만들어주는 기능입니다. 가상 환경에서 pip로 패키지를 설치하면 가상 환경 폴더(디렉터리)의 Lib/site-packages 안에 패키지를 저장해줍니다. 즉, 프로젝트 A와 B 각각 가상 환경을 만들어서 프로젝트 A에는 패키지X 1.5를 설치하고, 프로젝트 B에는 패키지X 2.0을 설치합니다. 이렇게 하면 파이썬 스크립트를 실행할 때도 현재 가상 환경에 설치된 패키지를 사용하므로 버전 문제가 발생하지 않습니다.

특히 가상 환경에는 파이썬 실행 파일(인터프리터) 자체도 포함되므로 각 가상 환경 별로 다른 버전의 파이썬 인터프리터가 들어갈 수 있습니다. 즉, 스크립트를 실행할 때는 원래 설치된 파이썬 인터프리터가 아닌 가상 환경 안의 파이썬 인터프리터를 사용합니다.

그럼 가상 환경을 만드는 방법을 알아보겠습니다. 가상 환경은 venv 모듈에 가상 환경 이름을 지정해서 만듭니다.

venv는 파이썬 3.3이상부터 사용 가능

• python -m venv 가상환경이름

여기서는 C:₩project 폴더 아래에 가상 환경을 만들겠습니다. 다음과 같이 명령 프롬프트에서 example 가상 환경을 만들고 example 폴더 안으로 이동합니다. 그다음에 Scripts 폴더 안의 activate.bat 파일을 실행하면 가상 환경이 활성화됩니다.

Windows 명령 프롬프트

C:₩project>python -m venv example
C:₩project>cd example
C:₩project₩example>Scripts₩activate.bat
(example) C:₩project₩example>

Windows PowerShell에서는 Activate.ps1 파일을 실행합니다.

Windows PowerShell

PS C:₩project> python -m venv example
PS C:₩project> cd example
PS C:₩project₩example> .₩Scripts₩Activate.ps1
(example) PS C:₩project₩example>

프롬프트 앞을 보면 (example)과 같이 가상 환경 이름이 표시됩니다. 이 상태에서 pip로 패키지를 설치하면 C:₩project₩example₩Lib₩site-packages 안에 패키지가 저장됩니다. 또한, 이 상태에서 스크립트 파일을 실행하면 현재 가상 환경 안에 있는 파이썬 인터프리터와 패키지를 사용합니다.

(example) C:₩project₩example>pip install numpy
(example) C:₩project₩example>dir ₩B Lib₩site-packages
easy_install.py
numpy
numpy-1.12.1.dist-info
pip
pip-9.0.1.dist-info
pkg_resources
setuptools
setuptools-28.8.0.dist-info
__pycache__

가상 환경에 설치된 패키지는 목록을 저장해 두었다가 나중에 다시 설치할 수 있습니다. 다음과 같이 pip freeze로 패키지 목록과 버전 정보를 requirements.txt 파일에 저장합니다(git 등으로 버전 관리를 할 때 저장소에 설치된 패키지를 모두 추가하지 않고, requirements.txt 파일만 관리하면 됩니다).

(example) C:↷project₩example>pip freeze > requirements.txt

requirements.txt 파일의 내용대로 패키지를 설치하려면 pip install에서 -r 또는 --requirement 옵션을 사용합니다.

(example) C:₩project₩example>pip install -r requirements.txt

만약 가상 환경 별로 파이썬 인터프리터 버전을 다르게 만들고 싶다면 해당 버전의 파이썬 인터프리터로 venv 모듈을 실행하면 됩니다. 다음은 파이썬 3.4를 사용하는 가상 환경을 만듭니다(파이썬 3.4를 설치했다고 가정).

C:↷project>C:₩Python34₩python.exe -m venv example3

이렇게 하면 venv 모듈을 실행한 파이썬 실행 파일(인터프리터)이 가상 환경 안에 들어갑니다.

이번에는 macOS와 리눅스에서 가상 환경을 만드는 방법입니다. 다음과 같이 python3으로 venv 모듈을 실행여 가상 환경을 만들고, source로 bin 디렉터리 안의 activate 파일을 적용하여 가상 환경을 활성화합니다.

macOS, 리눅스

~$ python3 -m venv example
~$ cd example
~/example$ source bin/activate
(example) ~/example$

가상 환경을 사용할 때 주의할 점이 있는데, 가상 환경을 만들고 나서 폴더(디렉터리)를 다른 곳으로 이동시키면 활성화가 안 됩니다. 왜냐하면 가상 환경을 활성화하는 activate.bat, Activate.ps1, activate 파일 안에 현재 가상 환경 폴더의 경로가 내장되어 있기 때문입니다. 만약 가상 환경 폴더를 다른 곳으로 이동시켰다면 activate.bat, Activate.ps1, activate 파일 안의 VIRTUAL_ENV 부분을 적절하게 수정해줍니다.

참고로 가상 환경을 사용하는 IDLE을 실행하려면 가상 환경을 활성화 시킨 뒤 idlelib 모듈을 실행하면 됩니다. 이렇게 하면 IDLE에서도 현재 가상 환경의 패키지를 사용할 수 있습니다.

Windows

(example) C:₩project₩example>pythonw.exe -m idlelib

macOS, 리눅스

(example) ~/example$ python3 -m idlelib

C:₩project>C:₩Users₩dojang₩Anaconda3₩Scripts₩conda.exe create --name example

C:₩project>C:₩Users₩dojang₩Anaconda3₩Scripts₩activate example
(example) C:₩project>

(example) C:₩project>conda install numpy

https://dojang.io/mod/page/view.php?id=1168

컴퓨터는 2진수(0과 1)를 사용하므로 대부분의 프로그래밍 언어는 2진수를 다루는 연산자를 제공합니다. 그런데 2진수로 변환하는 방법을 잘 모른다면 어떻게 해야 할까요? 걱정하지 않아도 됩니다. 파이썬에서는 간단하게 2진수와 10진수를 서로 변환할 수 있습니다.

다음과 같이 10진수를 2진수로 된 문자열로 변환할 때는 bin을 사용합니다. 반대로 2진수에서 10진수로는 입력 즉시 변환됩니다. 만약 2진수가 문자열 형태라면 int에 문자열과 2를 지정하여 10진수로 변환할 수 있습니다. 그리고 코드에서 2진수를 직접 입력할 때는 맨 앞에 0b를 붙입니다(binary의 b).

• bin(정수)
• int('2진수문자열', 2)

>>> bin(13)    # 10진수 13을 2진수로 변환
'0b1101'
>>> 0b1101     # 2진수 1101을 10진수로 변환
13
>>> int('1101', 2)    # 2진수로 된 문자열 1101을 10진수로 변환
13

10진수 13을 2진수로 표현하면 1101이 됩니다. 여기서 2진수의 자릿수는 일정한 값을 가지는데 낮은 자릿수부터 2의 거듭제곱 순서로 커집니다(2⁰부터 시작). 따라서 1101은 8, 4, 1이 위치한 자릿수가 1이므로 8 + 4 + 1 = 13입니다.

이제 2진수의 각 자릿수를 AND, OR, XOR, NOT 연산을 하는 비트 논리 연산자를 사용해보겠습니다.

• a & b
• a | b
• a ^ b
• ~x

>>> bin(0b1101 & 0b1001)    # 비트 AND
'0b1001'
>>> 13 & 9                  # 비트 AND
9
>>> bin(0b1101 | 0b1001)    # 비트 OR
'0b1101'
>>> 13 | 9                  # 비트 OR
13
>>> bin(0b1101 ^ 0b1001)    # 비트 XOR
'0b100'
>>> 13 ^ 9                  # 비트 XOR
4
>>> bin(~0b1101)            # 비트 NOT
'-0b1110'
>>> ~13                     # 비트 NOT
-14

먼저 &, |, ^, ~ 연산자로 각 비트를 연산했을 때의 결과(진리표)는 다음과 같습니다. 진리표의 내용이 많아 보여도 각 연산자의 특성만 이해하면 진리표 전체를 외우지 않아도 됩니다.

연산자	비트1	비트2	결과
&	0	0	0
	0	1	0
	1	0	0
	1	1	1
|	0	0	0
	0	1	1
	1	0	1
	1	1	1
^	0	0	0
	0	1	1
	1	0	1
	1	1	0
~	0		1
	1		0

예를 들어 & 연산자는 비트 AND이므로 두 값이 모두 1일 때 1입니다. 따라서 하나라도 0이면 0이 나옵니다. 즉, 0b1101과 0b1001을 비트 AND 연산했을 때 0 & 1은 0 그리고 1 & 1은 1이 나오므로 0b1001이 됩니다. 10진수로 표현하면 13 & 9는 9가 되겠죠?

>>> bin(0b1101 & 0b1001)
0b1001
>>> 13 & 9
9

다음과 같이 비트 논리 연산자는 각 자릿수를 연산하여 결과를 만듭니다. 이때 각 자릿수의 연산 결과는 다른 자릿수에 영향을 미치지 않습니다.

이번에는 비트의 위치를 이동시키는 시프트 연산자입니다. 시프트 연산자는 << 또는 >> 다음에 비트를 이동시킬 횟수를 지정합니다. <<는 비트를 왼쪽으로 이동시키고, >>는 비트를 오른쪽으로 이동시킵니다.

• a << b
• a >> b

>>> 0b0011 << 2    # 비트를 왼쪽으로 2번 이동
12
>>> bin(12)
'0b1100'
>>> 0b1100 >> 2    # 비트를 오른쪽으로 2번 이동
3
>>> bin(3)
'0b11'

참고로 비트를 오른쪽으로 이동시켰을 때 1이 들어갈 공간이 없다면 1은 사라집니다. 즉, 계속 비트를 오른쪽으로 이동시키면 1은 모두 사라지고 최종 결과는 0b0이 됩니다.

다음은 파이썬의 비트 연산자입니다.

연산자	기능	문법	설명
&	비트 AND	a & b	a와 b의 비트를 AND 연산
|	비트 OR	a | b	a와 b의 비트를 OR 연산
^	비트 XOR	a ^ b	a와 b의 비트를 XOR 연산(배타적 OR, Exclusive OR)
~	비트 NOT	~x	x의 비트를 뒤집음
<<	비트 왼쪽 시프트	a << b	a의 비트를 b번 왼쪽으로 이동시킴
>>	비트 오른쪽 시프트	a >> b	a의 비트를 b번 오른쪽으로 이동시킴
&=	비트 AND 연산 후 할당	a &= b	a와 b의 비트를 AND 연산한 후 결과를 a에 할당
|=	비트 OR 연산 후 할당	a |= b	a와 b의 비트를 OR 연산한 후 결과를 a에 할당
^=	비트 XOR 연산 후 할당	a ^= b	a와 b의 비트를 XOR 연산한 후 결과를 a에 할당
<<=	비트 왼쪽 시프트 후 할당	a <<= b	a의 비트를 b번 왼쪽으로 이동시킨 후 결과를 a에 할당
>>=	비트 오른쪽 시프트 후 할당	a >>= b	a의 비트를 b번 오른쪽으로 이동시킨 후 결과를 a에 할당

https://dojang.io/mod/page/view.php?id=1160

font_name = mpl.font_manager.FontProperties(fname='C:\Windows/Fonts/malgun.ttf').get_name()

mpl.rc('font', family=font_name)

파이썬이 1990년 말에 만들어 졌다고 알고 있습니다.