2015 PYCON KOREA 컨퍼런스 노트

http://www.pycon.kr/2015/

강의 들으면서 인상깊은 것들 적기

Sphinx autodoc (타카유키 시미즈카와)

  • docstring
    • API DOCS
  • sphinx
    • documentation generator
    • python version is ipt
    • import your code docstrings
    • translation into other languages

Character Encoding in Python (강대성)

  • Encoding
    • 전달하고자 하는 내용을 부호화
  • Character Encoding
    • 저장/통신 하기 위해선 2진수
  • Unicode
    • 전세계 문자/기호를 codepoint에 매칭
    • 한글, 타이문자 등등
    • 많이 쓰이는 이모티콘 등도 정의(똥같은거)
    • Unicode != UTF-8
  • UTF-8
    • 모든 Unicode codepoint를 다룰 수 있다.
    • Unicode를 Encoding했을 때 NULL 포함 X
    • ASCII Text는 UTF-8 될 수 있음.
    • 일부 바이트 유실되어도 다음시작 byte알 수 있다(복구가능)
    • Web Encoding중 84%가 사용!
  • Unicode Sandwich
  • python2
    • default: ASCII
  • python3
    • default: UTF8
  • Python은 파일의 인코딩을 알지 못함
  • 일본어 디코딩
    • 주고 받은 인코딩을 정확히 파악!!
  • 인코딩 해결법
    • encode, decode이렇게 저렇게 하다 잘 되면 써요 ==> 망하는 지름길
  • 인코딩 파악 위한 순서
    • 문서 또는 서로의 약속 확인
    • 전송받은 데이터 열어서 확인
    • 테스트(반드시!!)
  • 인코딩 파악에 도움되는 것
    • chardet 2.3.0
    • n퍼센트 확률로 이 인코딩이다 하고 알려줌
  • 테스트
    • 전체 프로그램 돌리면 오래 걸릴 수 있으니 부분을 떼어서 검사
  • 파일 IO를 위한 팁
    • 파일을 열 때 codecs쓰면 간단해짐
    • python3에선 내장함수에서 가능
  • 결론 TIP
      1. Unicode Sandwich
      • python에선 항상 Unicode
      1. 인코딩 파악하기
      • 문서보고, 확인하고 테스트.
      • 주어야하는 인코딩도 명확히

한국어 & NLTK & Gensim (박은정)

단어/문서를 컴퓨터가 이해할 수 있게 표현하는 방법

  • 어떻게 하면 구조가 없는 데이터인 텍스트의 의미를 컴퓨터가 잘 이해할 수 있을까?
  • 단어를 표현하는 가장 쉬운 방법: 이진 표현법
    • 어떤 단어를 벡터화 시킬 수 있다.
    • 근데 이진 표현법 사용 => 단어간 유사도 정의 불가
      • 호텔&모텔 / 호텔&고양이 얼마나 비슷한지 전혀 모름
  • BOW(bag of words)
    • 단어가 문서에 존재한다/안한다(term existance)
    • 단어가 문서에 n번 존재한다(term frequency)
    • 근데 공간의 차원이 너무 커서 문서간 유사도 지표의 효과 떨어짐
  • 워드넷 같은 텍소노미
    • 모든 용어를 포함하려 하지만, 전문 도메인 용어들은 많이 빠짐
  • 단어의 주변을 보면 그 단어를 안다
    • == 단어의 의미는 해당 단어의 문맥(context)이 담고 있다.
    • co-occurence: 두 단어가 정해진 구간 내에서 동시에 등장
        1. Term-document matrix : 한 문서에 같이 등장하면 비슷한 단어
        1. Term-term matrix : 단어가 문맥 내에 같이 등장하면 비슷한 단어
  • word2vec
    • 단어에 대한
  • doc2vec
    • 문서/문단 벡터를 마치 단어인 양 학습시키자!
    • 차원 축소
  • 한국어 영화 리뷰 토이데이터

Python and Test (배권한)

  • 테스트 이점
    • 불안감 해소
    • 테스트 통한 점진적 개선 가능
    • 손으로 하는 수고 덜어준다.
  • 어떻게 해야하나
    • TDD추천
    • 느리지만(직접 해보니 5배쯤 느림…ㅠㅠ) 많이 배우고 좋은 프로그램을 짤 수 있다
    • 하지만 만능은 아님.
      • 리팩토링을 수반
    • 하지만 TDD로 개발을 진행할 힘을 얻고, 리팩토링으로 구조 개선
      • 좋은 구조는 또 다른 분야라 생각 ㅎㅎ
  • 언제 리팩토링 해야하나
    • Three strikes and you refactor
    • 세 번 이상 같은 것을 하면 안댕!!!
    • egoless programming을 해야 한다.
      • 나의 코드는 의미가 없으며(!=실력없음) 목적을 위하여 언제든 지울 수 있음(==나는 계속 성장할 수 있다).
  • 다시, 어떻게 해야하나
    • pyramid
      • unit test해야한다
      • 가급적 테스트는 30초 이내에 끝나야 함(그래야 피드백을 빨리 받고 다른 일을 할 수 있음)
      • 그 여러개의 unit test를 합쳐 integration test
    • Functional test
      • 위에서 아래로
  • Obey the test goat 라는 사이트
    • 클린코드를 위한 테스트 주도 개발 <<책 봐라
    • 가급적이면 unit test를 많이 짜는 습관
  • 테스트 비용
    • 테스트도 결국 알고리즘 처럼 비용의 세계
    • 인간 확인 비용 < 테스트 짜는 비용
      • 이면 굿. 반대면 인간이 확인해도 됨.
    • 테스트 커버리지가 100%일 필요는 없음(70%만 넘으면 될듯.)
  • 테스트 하기 쉬운 코드 짜려면?
    • 테스트를 먼저 짠다.
    • 기능을 많이 나눔
    • 코드리뷰를 거친다
    • 의도를 잘 나타내야함
    • 가독성
  • CI를 통해서 협업
    • 깔끔한 환경에서 할 수 있다.
    • 테스트를 돌림
    • 형식을 검사
    • import order등을 검사
  • more…
    • py.test를 쓰세요. 이게 좋앙.
    • 다른 분들의 코드를 많이 보세요(e.g. 장고쪽에 좋은 테스트 많다)
    • 더 고민해서 TC를 짜자

탐색적으로 큰 데이터 분석하기 (장혜식)

  • EHR(Electronic Health Records)
    • 병원 데이터 – 엄청나게 많은 데이터 쌓임
  • 탐색적 데이터 분석
    • 재미있는 것을 찾아야 함
      • 코드 추가/수정이 매우 간편
    • 언제 어떤 데이터가 추가될 지 모른다.
    • 코드는 빨리 만들어서 (거의) 한 번만 쓴다.
    • 그렇다고 재사용이 아예 없는 것도 아니다.
      • 프레임워크가 유연하고 성숙해야 함
    • 데이터가 작지는 않다.
  • Jupiter Notebook
    • 인생이 주피터를 쓰기 전과 후로 나뉜다(ㅎㅎ)
      • 판다스도! 두개 꼭 써봐요
  • Snakemake
    • make의 좋은점 / 안좋은점
    • 파이썬 코드를 거의 그대로 쓸 수 있다.
    • 의존성이 없는 작업은 병렬로 실행됨
    • 이미 있는 새 파일은 무시하고 지나감
    • File-driven Programming
      • 보일러판이 필요 없는 프로그램 내장형 병렬화 이벤트 루프
  • 텍스트 파일
    • tsv(탭으로 구분 텍스트), csv(쉼표로 구분 텍스트)
    • 큰 텍스트 파일을 (엄청쉽게) 병렬처리 하려면?
      • 압축을 안 한다?
      • 파일을 쪼갠다?
      • tabix를 쓴다!
        • bgzf
          • 압축을 여러 개로 쪼개서 압축한다.
          • 앞뒤로 돌아다니면서 탐색 가능!!
          • 100% 하위호환
        • 한계점
          • 초기 인덱싱이 병렬화 X. (오래걸림)
          • 반드시 2레벨 인덱스로 정렬되어 있어야 함
          • 레벨 1 인덱스는 병렬 안됨(맞나?)
  • Julia
    • 파이썬과 친한 언어 ㅎㅎ

약속 (하재승)

  • ㅎㅎㅎ좋으당!
  • 프로그래밍은 다 거짓말

도도와 파이썬 (김재석)

  • 스포카가 도도포인트를 만들며 있었던 기술적 의사결정 공유
  • Do things that don't scale
    • 다만 첫번째 고객의 취향에 완전히 맞춤!!
  • 백오피스를 가볍게 두고 고객의 니즈에 더 노력을 쏟음
    • 더 팔릴만한 것 만들기!
    • 이유: 스포카에서의 경험
    • 장점: 장기적으로 효율 좋음. 단, 성공했을 때!!
    • 분석은 엑셀로 <AWS 도쿄로 옮김
  • 빠르고, 점진적으로
  • 나쁜 선택
    • 매장이 1000개 가까이 늘어나니 서비스에 대한 요구사항 늘어남
    • 기존 서비스가 커져서 추가가 고통스러웠음(넣으면 서버 터짐;;)
    • 종종 ‘그 때 제대로 해놨면 지금 이고생 안하는데 ㅠㅠ’후회
    • 하지만 그건 이미 그 코드를 계속 만질 수 있는 미래 시점에서의 평가일 뿐
  • 파이썬은 스타트업에게 좋은가?
    • Duct tape
    • 스타텁은 단지 ‘작은’회사가 아님.
    • 스타텁의 가장 중요한 키워드는 ‘고속성장’
    • 시어머니봇
      • 코드리뷰를 사람끼리 하면 사실 맘이 상할 때가 있다
      • 봇은 잔인하게 엄격함
      • 봇한테 화가 날 순 있어도 미워하진 않더라
      • 오픈소스로 풀었어요~

R이 판치는 세상에 Python데이터 분석가로 사는 법 (하용호)

  • 10분만에 듣는 머신러닝
    • 작대기의 자유도에 따라 성능이 결정
    • 회귀
    • XOR Problem
    • Decision Tree
    • Support Vector Machine
    • Random Forest
      • 놀랍게도 성능이 좋음
  • 빅데이터
    • 말 오글거려
  • GGPLOT2
    • 애증. 안예뻐
  • seaborn
    • 그림 그릴 때 좀더 예쁨
  • 파이썬 인터렉티브 노트북
    • 내가 했던 과정이 노트북처럼 주르륵 나온다.
    • 이런 방식이 아니고, 결과만 pdf로 주거나 하면 협업시 데이터를 조금만 고치거나 할 때 힘듦.
    • 그게 아니고, 이렇게 만든 과정을 팀 협업할 때 보면 매우 도움.
  • mrjob
    • 느리지만 사실 우리가 개발하는 속도가 더 느림
    • 사실 코드를 한번 짜고 한번만 쓸 때가 많다.
  • luigi
    • snakemake랑 비슷(근데 이게 더 좋아 by 용호)
  • Spark
    • 하둡보다 선호!(by 용호)

django (매생이)

  • 스타트업의 마감시간 == 남은 돈
Advertisements

[LESS] Less error – ‘less Failed to execute ‘send’ on ‘XMLHttpRequest’을 anvil로 해결하기

개인 프로젝트에 less를 사용하려고 아래 cdn 소스를 한 줄 추가하였다.

<br /><a href="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js">https://cdnjs.cloudflare.com/ajax/libs/less.js/2.5.1/less.min.js</a>

(이렇게 처음 설치 과정이 SASS보다 편하다 한다)

그런데 less가 이런 에러를 내며 동작하지 않는 것이었다.

<br />less Failed to execute 'send' on 'XMLHttpRequest

찾아보니 크롬에서 file:///...처럼 그저 html 파일을 열어선 less 컴파일이 동작하지 않는다 한다.

The less.js script currently doesn’t work if you’re using Chrome and the path to your page starts with “file:///”.

몇 가지 우회 방법이 있는데, 난 anvil로 돌려서 해결했다.

예전에 TIL(Today I learn)이라는 개인 위키 리포지토리를 쉽게 접근할 때 쓰던 anvil이었는데, 막상 다른 프로젝트에선 활발히 쓰고 있지 않았었네.

anvil은 pow를 GUI로 돌리게 해주는 툴인데,

프로젝트 경로를 추가해두면 다음부터 anvil을 on하고 http://food-todo.dev/와 같은 경로만 입력하면 local 프로젝트들을 쉽게 켤 수 있다.

설치 방법은 아웃사이더님 블로그 참고.

[HTML/CSS] 웹 폰트 사용하기 – Web Font Tutorial

font-face

  • CSS2에 새로 추가된 웹 글꼴 명세
  • 표시하려 하는 글꼴이 시스템에 없는 경우 웹 서버에서 글꼴 내려받아 표시
  • 지원
  • W3C 권장형식은 *.woff 이다.
  • IE 6~8: *.eot(O) *.woff(X)
  • IE9: *.eot(O) *.woff(O)
  • 크롬, 사파리, 파폭, 오페라: *.eot(X) *.woff (O)

결국 모든 브라우저를 지원하기 위해 *.eot*.woff를 모두 준비해야 한다.

  • @media구문 안쪽에서 @font-face규칙을 사용하는 경우 IE9 브라우저는 글꼴 요청 X

한 글꼴에 @font-face는 한번만 선언

표준과 비표준 글꼴을 모두 지원하기 위해 @font-face규칙을 두 번 사용하는 경우 IE 6~9는 두개 형식 모두 내려받아 성능에 좋지 않겠지.

/* Not recommended */
@font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
@font-face{font-family:ngeot; src:url(NanumGothic.eot)}
body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}

위 코드는 더 나은 성능을 위하여 다음과 같이 개선할 수 있습니다. Paul Irish가 제안한 방탄 코드 입니다.

/* Recommended */
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’);
}
body{font-family:나눔고딕, NanumGothic, ng}
  • ng라는 글꼴 이름을 한번만 선언하고 eot형식과 woff를 순차저긍로 참조.
  • eot가 먼저 나와있으므로 IE 6~8은 eot만 받아온다
  • 나머지 브라우저들은 woff를 받아온다.
  • local(※)
  • 외부자원 참조하기 이전에 시스템 글꼴을 우선 참조할 수 있도록 만들어준다.
  • IE 6~8이 local()값을 처리하지 못하는 특성 이용해 woff글꼴 추가로 요청 못하게 함.
  • 는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정
  • format(‘woff’)를 명시적으로 지정하면 이 형식을 지원하는 브라우저만 글꼴 내려받음.
  • 값은 반드시 따옴표 안에 있어야 함.
  • 나눔고딕 NanumGothic 두번 적은 이유는 영문으로만 작성했을때 제대로 표시하지 못하는 브라우저 있기 때문. 한글 이름이 있으면 이런 식으로 해줘라.

IE9는 @media규칙 내부에 @font-face 허용 안함

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
@font-face{
font-family:ng;
src:url(NanumGothic.eot);
src:local(※), url(NanumGothic.woff) format(‘woff’)
}
body{font-family:나눔고딕, NanumGothic, ng}
}
  • IE9는 미디어 구문 안쪽에 선언하면 외부 글꼴을 요청하지 않음.
  • @font-face를 @media 밖에 빼면 된다.

웹폰트 빠르게 로딩하기

보고 공부한 링크
1. 구글 임포트 코드를 HEAD태그의 가장 첫번째(CSS보다 앞)에 위치
2. link로 로드해라
– 구글 웹폰트 로딩 방법은 @import, 참조링크, js세가지.
– 참조링크 이용해서 HTML최상에 코드넣어라.
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'&gt;
3. 적은 폰트 갯수
– 표제를 위한 볼드타입 / 가시를 위한 가독성 좋은 폰트 최대2개 폰트 선정
4. 코드 한줄에 여러 폰트 로드
&lt;link href='http://fonts.googleapis.com/css?family=Open+Sans|Oswald' rel='stylesheet' type='text/css'&gt;
5. 쓸것만 로드: 폰트 weight옵션 쓸것만 로드한다
6. Load faster fonts: 폰트마다 로딩 시간 다르니 빠른걸로 골라라
7. 정말 확실히 로드해야한다면 Web Font Loader를 써라.
– 사이트 나머지 로드되기 전에 로드하고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실히 피해준다.

한글 웹 폰트 경량화해 사용하기

보고 공부한 링크

Refer

웹 폰트 문제 해결. @font-face troubleshooting
구글 웹폰트를 빠르게 로드하는 팁 7가지
한글 웹 폰트 경량화해 사용하기
https://www.igvita.com/2014/01/31/optimizing-web-font-rendering-performance/
https://www.igvita.com/2012/09/12/web-fonts-performance-making-pretty-fast/

[HTML/CSS] 유튜브 반응형으로 삽입하기 – Responsive Youtube(iframe) embed

개요

iframe을 CSS로 다루는 것은 까다롭고 기분이 좋지 못하다. 마음대로 안되므로. ^^…
youtube들을 모아놓은 반응형 홈페이지를 만들고 있는데, 그 youtube를 반응형으로 삽입하려면 약간의 CSS 꼼수가 필요하다

HOW TO

HTML

<div class="video-container">
    
</div>

CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

iframe을 video-container로 감싸주고, 그 안의 iframe을 relative/absolute로 조정해준다.
이 클래스는 그대로 두고, 다른 특성들을 쓰고 싶다면 독립된 곳에서 쓰도록 하자. 괜히 꼬이지 않게.

내 경우는 특이하게 .video-container의 padding-top을 0px로 해야 비디오가 화면에 검정 여백 없이 꽉 차게 나왔다.

유튜브가 얼마 전부터 반응형을 조금씩 지원하기에, 앞으론 이런 꼼수를 안써도 되는 날이 머지 않은 것 같당!

+추가

이것도 잘 된당

.container {
float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 60%;
    height: 60%;
    margin-left: auto;
    margin-right: auto;
}

CSS Property 순서에 맞추어 깔끔히 적기

Intro

CSS 속성은 보통 편한대로 적을 수 있다. 왜냐하면 -속성이 겹치면 뒤에 있는 것이 적용-된다는 것 말고는 딱히 규칙이 없으니.
그래서 다른 사람이 작성해 둔 CSS Stylesheet를 보면 속성을 찾느라 시간이 소모되곤 한다.

지금 개발하고 있는 프로젝트엔 CSS가 꽤 많이 들어가서 LESS를 써도 더럽고 보기 불편하여 CSS 순서 코딩 컨벤션이 있나 찾아보았다.

Mozilla

모질라에서 제안한 CSS속성 기술 순서

  1. display --객체의 노출여부/표현방식--
  2. list-style
  3. position --위치/좌표--
  4. float
  5. clear
  6. width / height --크기/여백--
  7. padding / margin
  8. border / background --윤곽/배경--
  9. color / font --글자/정렬--
  10. text-decoration
  11. text-align / vertical-align
  12. white-space
  13. other text
  14. content --내용--

위치 선정 > 윤곽 > 외곽 디테일링 > 채색 > 타이포그래피
와 같이 밖에서부터 안쪽으로의 흐름이다.

Naver

  1. display(표시)
  2. overflow(넘침)
  3. float(흐름)
  4. position(위치)
  5. width/height(크기)
  6. padding/margin(간격)
  7. border(테두리)
  8. background(배경)
  9. color/font(글꼴)
  10. animation
  11. 기타
    출처: NHN 마크업 코딩 컨벤션

Refer

http://beautifulcss.com/archives/203
http://jsunnylab.tistory.com/32

HTML5 Web Storage – localStorage , sessionStorage

Web Storage?

HTML5에는 웹사이트 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 Web Storage스펙이 포함됨.
키-값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 심플한 패턴.
종류는 2가지가 있는데,
– localStorage: 영구저장소
– sessionStorage: 임시저장소
처럼 데이터의 지속성을 구별하여 사용할 수 있다.
브라우저 지원 현황을 보면 현재 오페라 미니 빼고 모두 지원한다.

쿠키와의 차이점

  • 쿠키는 맛있다.
  • 쿠키는 매번 서버로 전송된다.
  • Web storage는 저장된 데이터가 클라에 존재할 뿐 서버전송은 이루어지지 않는다(=>네트워크 트래픽 비용을 줄여주는 중요한 장점)
  • 단순 문자열을 넘어 (스크립트)객체정보를 저장 가능.
  • 체계적으로 구조화된 객체 저장 가능.(브라우저 지원여부 확인 필요)
  • 쿠키와 다르게 용량 제한이 없다.
  • 영구 데이터 저장이 가능하다.
  • 로컬스토리지는 브라우저 종료해도 데이터 보관, 세션스토리지는 데이터 지움.

사용법

localStorage.setItem('foo', 'bar');
localStorage.getItem('foo'); //'bar'
localStorage['foo']; //'bar'

localStorage.removeItem(키);
localStorage.clear(); //모두 지움
localStorage.length; //저장된 키의 개수
localStorage.key(값); //값으로 키를 찾음

window.addEventListener('storage', function(e){ //이벤트 처리
// do sth
}, false);
  • key와 value 모두 String으로 저장된다.
  • getItem으로 값 못찾으면, 에러 발생이 아니고 null리턴.
  • 대부분의 브라우저에서는 다른 윈도우에서 로컬 스토리지의 데이터를 변경했을 때 이벤트가 발생한다.
    즉, 같은 창에 이벤트를 추가하고, localStroage의 값을 변경해도 이벤트가 발생하지 않는다.
    아마도, 자신의 window에서는 변경된 상황을 알고 있을 것이라는 가정 때문인가 보다. 링크

세션스토리지 예제

// Get the text field that we're going to track
var field = document.getElementById("field");

// See if we have an autosave value
// (this will only happen if the page is accidentally refreshed)
if (sessionStorage.getItem("autosave")) {
// Restore the contents of the text field
field.value = sessionStorage.getItem("autosave");
}

// Listen for changes in the text field
field.addEventListener("change", function() {
// And save the results into the session storage object
sessionStorage.setItem("autosave", field.value);
});

Refer

MDN Web Storage API
HTML5 Web Storage
HTML5 LocalStorage 살펴보기
MDN Storage