Github Repos I Starred (1)

1. ShellJS – Unix shell commands for Node.js

require('shelljs/global');

if (!which('git')) {
  echo('Sorry, this script requires git');
  exit(1);
}

// Copy files to release dir
rm('-rf', 'out/Release');
cp('-R', 'stuff/', 'out/Release');

// Replace macros in each .js file
cd('lib');
ls('*.js').forEach(function(file) {
  sed('-i', 'BUILD_VERSION', 'v0.1.2', file);
  sed('-i', /^.*REMOVE_THIS_LINE.*$/, '', file);
  sed('-i', /.*REPLACE_LINE_WITH_MACRO.*\n/, cat('macro.js'), file);
});
cd('..');

// Run external tool synchronously
if (exec('git commit -am "Auto-commit"').code !== 0) {
  echo('Error: Git commit failed');
  exit(1);
}

여러가지 Unix 터미널 명령어들을 익숙하지 않은 쉘 스크립트 보다 더 쉽게 쓸 수 있게 도와준다. 물론 자바스크립트에 익숙한 사람 한정 ^^7. 얼마전에 정말 유용하게 써먹었는데, 피아노 악보를 구뉴에서 미니4로 옮기려는데, 구뉴에서 export하니까 완전 파일 이름이 난장판이더라고. 작곡가-곡이름_2016012211111.pdf 와 같이 뒤에 엄청나게 더러운 타임스탬프가 붙는..

그래서 shelljs를 사용해서 조져버렸다. 쉘스크립트는 너무 안 익숙하잖아. 어으~ 소름~


2. react-select

Screen Shot 2016-12-17 at 9.34.10 PM.png

select, option엘리먼트의 스타일링이 너무 힘들다. 그래서 div와 span으로 열심히 뚝딱뚝딱한 프로젝트들이 여럿 있고, 괜찮은 Typeahead와 Tag selection 기능을 가진 라이브러리이다. 이제 1.0.0 rc2까지 올라왔더라고.

Screen Shot 2016-12-17 at 9.34.46 PM.png

정말 깔끔한 스타일의 input을 만들 수 있게 도와주는 듯.


3. react-bootstrap

Screen Shot 2016-12-17 at 9.38.29 PM.png

Boostrap은 항상 jQuery가 dependency로 걸려있다는 엄청나게 큰 단점이 있는데, 이 라이브러리는 jquery-free한 코드를 짤 수 있게 해주는 은총과도 같은 존재다. 정말 좋다. 꼭 쓰자. 특히 React는 VirtualDOM으로 노는 라이브러리인데, actual DOM만을 조작하는 jQuery랑 궁합이 정말 안 좋거든. 제대로 쓰기 위해선 Component Lifecycle에서 섬세하게 Sync를 맞춰줘야하는데, 그런 오버헤드가 싹 사라졌다.

지금 1.0.0버전은 아니지만 그냥 문서화만 부족하고 모든 기능이 제대로 돌아가는 것 같다. 정말 좋음.


4. semantic-ui-react

Screen Shot 2016-12-17 at 9.44.14 PM.png

위 라이브러리와 비슷한 react integration for semantic-ui이다. 근데 정말 많은 기능이 있는 semantic ui인데 media-query가 전혀 지원이 안되더라고. 그래서 결국 안 쓰게 됨! (찾아보면 내가 버그 리포팅한 이슈도 있음 ㅎㅎ)


5. react-boilerplate

Screen Shot 2016-12-17 at 9.46.48 PM.png

Please note that this boilerplate is production-ready and not meant for beginners!

Production-ready boilerplate. 정말 좋다. 이번에 프론트-백 디커플링을 진행하면서 이 보일러플레이트로 진행했는데, 이전에 yeoman 신봉자였을 때, fountain-webapp-generator를 썼었는데 generator도 빈약하고 완전 구리더라고. 찾다찾다보니 이게 de-facto에 가까운 boilerplate for pure-front 인듯 했다. 서버까지 노드로 짜고 싶은 사람들은 react-hot-boilerplate를 찾아보고, 이걸 포크해서 타입스크립트용으로 포팅해놓은 것도 있더라고.

reselect, redux-saga, react-intl, babel-plugin-react-intl 등.. 어떤 라이브러리를 넣어놨으면 그 라이브러리를 잘 활용하기 위핸 부수적인 라이브러리들과 명령어들이 모두 들어가있다. 이걸로 이번 주 휴가 동안 설명하는 포스팅이나 작성해볼까 싶기도 하고. dynamic routing도 정말 쉽게 만들 수 있게 해주는데, SPA의 단점인 캐싱되어있지 않으면 초기 앱로딩속도가 엄청 느리다는 것을 아무렇지도 않게 해결해버릴 수 있게 도와준다.

Leave a Reply