기획자 본인만큼 잡다한 블로그

greentec.egloos.com

포토로그


통계 위젯 (블랙)

639
279
57864

flag counter

Flag Counter


ECMAScript 2016, 2017, 2018 변경점 정리 글 링크 프로그래밍

https://medium.freecodecamp.org/here-are-examples-of-everything-new-in-ecmascript-2016-2017-and-2018-d52fa3b5a70e

18개의 변경점을 example 중심으로 깔끔하게 정리해 놓았다.
medium 에서 34k 의 clap 을 받을 정도로 좋은 글인 것 같다.

눈에 띄는 개선점으로는 아래와 같은 것들이 있다.

ECMA 2017
- Object.entries() : Object 의 key, value 를 array 형태로 루핑할 수 있다. key 만 Loop 가 되는 것이 아니라, key, value 를 같이 받는 것이다. python 의 Object.items() 같은 기능.

ECMA 2018
- RegExp Named Group Captures : Regex 에서 year, FirstName 같은 custom named group 을 캡쳐할 수 있다. 이를 이용해서 replace 까지 한 줄에 처리할 수 있다.
- Asynchronous Iteration : For-await-of Loop 의 추가. 이제 여러 개의 Promise 를 Loop 로 돌릴 수 있다.

Domina 추천게임







전투 시뮬레이터를 만드는 건 꽤 어렵다고 생각한다. 결국 밸런스의 문제인데, 일단 전투에 영향을 미치는 요소를 정의하고, 그것이 달라졌을 때 전투가 변하는 느낌이 들어야 한다. 이때 전투 결과가 너무 급하게 변해도 안되고, 너무 그대로라도 안된다.

FM(Football Manager) 시리즈 같은 스포츠 시뮬레이터도 마찬가지다. FM 2011 같은 버전이었던 걸로 기억하는데, 오세아니아 월드컵 예선인가에서 호주가 매우 작은 섬나라 팀과 붙었을 때 41-0 정도의 스코어가 나왔던 걸로 기억한다. 반대의 예로는 서로 비슷한 실력을 지녔거나 골키퍼의 능력이 엄청난 경우 모든 공격을 다 막아서 지루한 0-0 스코어가 나왔던 적도 있다. 최신 버전에서는 개선되었는지 모르겠지만 말이다.

Domina 에서는 후자의 경우가 발생한다. 검투사를 성장시켜서 서로 싸우게 하는 이 게임은 각자 풀 세팅을 갖춘 경우에 공격을 너무 잘 피해서 지루한 싸움이 계속된다. 로마시대 관중들에게는 가장 원하지 않는 상황이었을 것이다. 반대로 전자의 경우는 발생해도 큰 상관이 없어 보이는데, 한 검투사(또는 사자)가 다른 검투사를 압도적으로 이기면 게임이 즉시 끝나기 때문에 지루한 느낌은 없다.

단점을 먼저 말했으니 장점은 이런 류의 게임들이 그렇듯 플레이어를 적절하게 짜증나게 한다는 점이다. FTL 처럼 선택의 압박을 하면서 어떤 선택을 해도 딱히 기분 좋은 결과를 주지 않는다. 주인공 옆에 있는 두 명의 귀족은 우호도가 낮아지면 말도 안되는 경기를 요구하고, 그런 요구를 거절하면 우호도는 더욱 낮아진다. 검투사를 열심히 훈련시켜도 성장은 잘 되지 않고, 최고의 성장은 전투를 통한 것이기 때문에 전투를 많이 시켜야 한다. 첫 시작에 엔딩을 보기는 어렵지만 검투사들이 물부족으로 죽어보고, 반란으로 죽어보고, 암살 음모를 잘못 전달했다가 갑자기 죽어보면 그만큼 엔딩에 가까워져 있는 자신을 발견할 수 있을 것이다. 이 게임도 로그라이크의 기본 공식을 따르고 있다. 많이 죽어보면 그만큼 성장한다.





게임 링크 (Steam)

<러닝 리액트> - 알렉스 뱅크스 & 이브 포셀로 지음, 오현석 옮김 독서








나는 예전 회사에서 자바스크립트로 게임데이터 관련 툴을 만드는 일을 했었다. 추가 구현이 많아질수록 구조적 프로그래밍과 객체지향 프로그래밍 사이의 어중간한 영역에 있었던 코드는 점점 길어지고 관리 불가능해져갔다. 기능 단위로 툴을 쪼개도 기본 패러다임은 동일했기 때문에 하나의 수정사항을 반영하려면 여러 부분을 들여다보고 서로 영향을 끼치는 부분을 계속 조정해야 했다.

이직한 회사에서 리액트, 그리고 ES6 의 문법을 처음 접했을 때 처음에는 너무 적응이 되지 않았다. 익숙했던 방법으로 웹툴을 만들어갔을 때 TD님이 하신 말씀은 '기존 툴 안에서도 충분히 만들 수 있을 것 같으니, 다시 해보라.' 는 것이었다. 예전에도 리액트 책을 본 적은 있었지만 제대로 정리되지 않는 부분이 많았다. prop 과 state 는 왜 다른지, 왜 가능하면 let 대신 const 를 써야 하는지, 애초에 함수형 언어는 왜 쓰는지... 등의 의문은 계속 남아 있었다.

반 년 정도 시간이 지나며 기존에 작성되어 있던 코드들을 트래킹하면서 어느 정도 문법에는 익숙해졌지만, 동작 원리에 대해서는 아직 의문이 많은 상태였다. 이때 한빛미디어의 '나는 리뷰어다'에 응모했고, 기대했던 <러닝 리액트> 책에 당첨되었다.

책을 보니 의문점이 많이 해소되었다. 물론 지금까지 현업에서 관련된 코드를 접했기 때문에 이해가 빠른 것일수도 있다. 하지만 일단 그런 점을 제쳐두고라도 2장 '최신 자바스크립트', 3장 '자바스크립트를 활용한 함수형 프로그래밍'은 지금까지 접했던 대여섯 권의 책들 중 가장 간결하면서도 정확하게 문법에 대해서 설명해주고 있었다. 실무에서 리액트를 안 쓰더라도 ES6 가 필요하다면 이 부분만 참고해도 도움이 될 듯 하다.

그 뒤의 내용은 리액트에 대해 본격적으로 설명하고 있다. 4-6장 초반은 요리 레시피, 6장 중반-10장은 색 관리 리스트라는 주제로 하나의 프로그램이 어떻게 개선될 수 있는지를 꾸준히 설명하고 있다. 가끔씩 설명이 없으면 엄청 헷갈릴 수 있는 문법이 있는데 (jsx 의 props를 스프레드 연산자를 사용해서 넘기는 부분 등) 그런 부분들에 대해서도 빠짐없이 설명이 되어 있어서 저자들의 꼼꼼함을 느끼게 한다.

예제 코드도 github 에 올라와 있고, 한글판에 대해서는 역자가 별도로 repo 를 만들고 추가로 자세하게 설명을 해놓고 있어서 하나하나 트래킹해볼 사람에게는 많은 도움이 될 것 같다. 오래된 책들의 예제 코드를 보면 최신판과 맞지 않는 점도 많은데 한글판 repo 는 리액트16 에 따라 원래 repo 의 코드를 수정한 부분도 있다. 그리고 번역에 이상한 단어가 없고 순수 한글을 고집하지 않으며 일반적으로 통용되는 용어를 사용해서 매끄럽게 읽히는 것도 장점이다.

리액트에 대해서 본격적으로 공부하려면 더 두껍고 내용이 많은 책과 예제가 필요할 것 같지만, 입문서로는 꽤 괜찮아보인다. 사실 책 한 권을 읽고 어떤 내용에 대해서 모든 것을 알기는 힘든 일이다. 그래도 가이드가 필요하다면 이 책은 꽤 안정적인 선택일 것 같다.

자바스크립트 최적화 글 링크 프로그래밍

자바스크립트는 어떻게 작동하는가: V8 엔진의 내부 + 최적화된 코드를 작성을 위한 다섯 가지 팁



자바스크립트 최적화 자료는 찾기 힘들었는데, 크롬 v8 엔진에 한정되어 있지만 좋은 글이었다.
내용 중에 내가 highlight 로 표시한 부분은 2번과 4번이다.


2. 동적 속성: 객체 생성 이후에 속성을 추가하는 것은 히든 클래스가 변하도록 강제하고 이전의 히든클래스를 대상으로 최적화되었던 모든 메소드를 느리게 만듭니다. 대신에 모든 객체의 속성을 생성자에서 할당합니다.

→ 클래스를 사용할 때 속성은 다 생성자에서 정의해주는 게 최적화에 도움이 된다는 얘기다. 보통 다들 이렇게 하고 있겠지만 혹시나 다른 곳에서 속성을 추가하면 퍼포먼스에 영향이 있다고 한다.


4. 배열의 요소를 삭제하지 마십시오. 그 배열의 키가 띄엄띄엄 배치됩니다.
→ 자바스크립트는 해시테이블 접근에 C# 이나 JAVA보다 비용이 많이 든다고 한다. 배열의 키가 띄엄띄엄 배치되면 해시테이블이 되고, 해시테이블이 되면 퍼포먼스가 나빠지게 된다.



Python 3.x curses 라이브러리에서 한글 출력 - Windows 10 프로그래밍

배경 설명


이직 후 여러 가지 작업을 하고 있는데 그 중 서브 작업으로 간단하게 파이썬 툴을 만들던 중,
윈도우 환경 터미널에서 키 입력을 바로 받고 싶은 간단한 문제에 봉착했다.
curses 라는 라이브러리를 깔았지만 한글 출력이 잘 보이지 않았다.
인터넷에는 관련된 레퍼런스가 없어서 못 찾다가, 반나절 동안 삽질 후 해결책을 여기에 공유한다.


핵심 요약


addstr() 대신 addch() 를 사용해서 한 글자씩 출력하자.
[optional] 터미널 글씨체를 래스터 글꼴로 바꾸자(굴림체 등의 경우 글의 끝부분이 잘릴 수도 있음).


상세


어떤 숫자를 입력받을 때 보통 알고리즘 문제 같은 곳에서는 이렇게 입력을 받는다.
n=int(input())




그런데 이런 경우에는 숫자를 입력한 후 엔터를 쳐줘야 문장의 다음 부분으로 넘어가게 된다. 하지만 숫자 키 하나만 눌렀을 때 바로 다음으로 넘어갈 수는 없는 걸까? 찾다 보니 curses 라는 라이브러리가 있었다. pip install curses 라고 입력하면 windows 에서는 설치되지 않고, 링크의 curses‑2.2‑cp36‑cp36m‑win_amd64.whl 파일을 다운받아서 해당 경로에서 직접 설치했다. 자신의 시스템에 설치된 python 버전에 따라 알맞은 파일을 설치하면 된다.
pip install curses‑2.2‑cp36‑cp36m‑win_amd64.whl




이제 getch() 함수를 이용해서 키 입력을 바로 받을 수 있다. 간단한 예제 프로그램을 만들어서 테스트를 해보면,
import curses

def main(screen):
screen.clear()
screen.addstr(0, 0, 'Hello World')

while True:
c = screen.getch()
screen.addstr(1, 0, str(c))

if c == 3: # Ctrl+C
break


curses.wrapper(main)




터미널에서 다음 스크립트를 실행하면 이런 화면이 표시된다.
현재 키 입력을 y=1, x=0 위치에 출력한다. 키 값은 int 이고 출력할 때는 str 이어야 하기 때문에 형 변환을 해줬다.
Ctrl + C 의 키 값은 3인데, 누르면 프로그램을 빠져나가게 된다. 달리 프로그램을 빠져나가는 방법은 찾아본 바로는 없었다. 터미널 창을 끄거나 해야한다.



그럼 한글을 출력해보자.
인터넷에서 유니코드 출력을 위해서는 locale 을 바꿔줘야 한다고 해서 그 부분을 추가하고, 한글 텍스트를 넣어보았다.
import curses
import locale
locale.setlocale(locale.LC_ALL, '')

def main(screen):
screen.clear()
screen.addstr(0, 0, '터미널에서 다음 스크립트를 실행하면 이런 화면이 표시된다.')

while True:
c = screen.getch()
screen.addstr(1, 0, str(c))

if c == 3: # Ctrl+C
break


curses.wrapper(main)




결과는 아래와 같다. 한글이 깨져서 나온다.



문제를 해결하기 위해 여러 가지 시도를 해봤는데 해답은 의외로 간단한 곳에 있었다. addstr() 함수 대신에 addch() 함수, 즉 한 글자씩 떼어서 출력하면 잘 나왔다. 알고나니 허무한 해결책이었다.
참고로 글씨 중간에 커서가 있으면 글씨가 밀리는 문제가 있어서 한글 출력 후 커서 위치를 바꿔주기 위해 빈 칸을 출력했다.
import curses
import locale
locale.setlocale(locale.LC_ALL, '')

def main(screen):
screen.clear()
s = '터미널에서 다음 스크립트를 실행하면 이런 화면이 표시된다.'
for idx, char in enumerate(s):
screen.addch(0, idx, char)
screen.addstr(1, 0, ' ')

while True:
c = screen.getch()
screen.addstr(1, 0, str(c))

if c == 3: # Ctrl+C
break


curses.wrapper(main)




이제 한글이 정상적으로 출력된다.




알고나니 무척 간단한 방법이었다. 그리고 내 경우에는 파일에서 한글을 읽어들일 때 글씨의 중간이 잘리는 문제가 있어서 터미널의 기본 글꼴을 바꿔서 문제를 해결했다. 같은 현상을 겪는 경우 참고가 될 수 있을 것 같다.



1 2 3 4 5 6 7 8 9 10 다음

애드센스