티스토리 뷰
React를 사용해보고 싶은 프로그래머는 많이 있다고 생각 합니다만,
정작 제대로 된 작품을 만들고자하면 프레임 워크의 존재에 고민하게됩니다.
Redux를 사용하더라도 어떤 조합 디렉토리 구성으로하는 것이
최고인가 알기가 힘듭니다.
그래서 사용해보고 싶은 것이 Roc입니다.
React / Redux를 사용한 node의 Web 어플리케이션 프레임 워크입니다.
Roc 사용법
Roc 설치는 npm에서 할 수 있습니다.
npm install -g roc
응용 프로그램의 초기 설정은 init을 사용합니다.
대화 형으로 만듭니다.
$ roc init web-app-react
Found a folder named /path/to/react-app, will try to use it.
Using v1.0.3 as template version
:
? What's the name of your application? my-roc-app
? What's the description for the application? My Roc Application
? Who's the author of the application? John Doe
? What's the license for the application? MIT
? What's the port for the application? 3000
? What do you what to use for <title>? My Roc Application
Installing template dependencies… (If this fails you can try to run npm install directly)
파일 구성은 다음과 같이되어 있습니다. 단순하고 알기 쉬운 것입니다.
dev 명령에서 개발 서버가 시작됩니다.
$ roc dev
Found a local version of Roc, will use that over the global one.
roc:dev:client Dev server started on port 3001 +0ms
roc:dev:node:builder Server rebuilt 4223 ms +4s
roc:dev:node:watcher You can restart the server by entering "rs" and pressing enter" +8ms
webpack built bd9fb8550a39de1140f3 in 4950ms
Roc runtime has been initialized.
roc:server Server started on port 3000 (HTTP) and served from / +0ms
< -- GET /
[BS] Proxying: http://0.0.0.0:3000
[BS] Access URLs:
-------------------------------------
Local: http://localhost:3030
External: http://192.168.0.15:3030
-------------------------------------
UI: http://localhost:3031
UI External: http://192.168.0.15:3031
-------------------------------------
--> GET / 200 74ms 7.5kb
< -- GET /
--> GET / 200 25ms 7.5kb
< -- GET /favicon.png
--> GET /favicon.png 200 4ms 3.57kb
Web 브라우저에서 액세스
실시간 동기화 기능이 있기 때문에 코드를 변경하면
새로 고침 하지않아도 화면에 반영됩니다 (스크롤 위치가 변경되지 않습니다).
Roc을 사용하면 React / Redux를 이용한 개발 환경이 즉시 완료됩니다.
디렉토리마다 파일이 분할되어있는 것이 사람마다 취향이 갈라지는 것입니다.
라우팅 등의 기능도 포함되어 있기 때문에,
바삭 바삭하게 개발이 진행되고 있다고합니다.
Roc는 node / JavaScript로 만든 오픈 소스 소프트웨어 (MIT License)입니다.
Roc - Get started developing today!
rocjs/roc: Modern Application Development Ecosystem
'오픈소스' 카테고리의 다른 글
Chain - Web 기반의 비주얼 프로그래밍 환경 (0) | 2016.06.28 |
---|---|
Xi Editor - Google 만든 Rust을 사용한 텍스트 편집기 (0) | 2016.06.28 |
Eruda - 스마트 폰의 콘솔 (0) | 2016.06.27 |
aalib.js - 사진과 동영상을 아스키아트 (0) | 2016.06.27 |
Sonic Pi - 음악의 라이브 코딩 환경 (0) | 2016.06.27 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- GPL v3
- Web 오픈 소스
- linux
- 디자인
- Open Source JavaScript
- MIT 라이센스
- Web API
- Web
- node.js
- Web 오픈 소스 JavaScript
- 소프트웨어
- CMS
- 텍스트
- 오픈 소스
- License MIT
- 웹 API
- cui
- SVG
- HTML5
- Mac OSX
- github에
- javascript
- software
- mit license
- go
- LGPL
- GUI
- 자바 스크립트
- GitHub
- GPL
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
글 보관함