티스토리 뷰

React를 사용해보고 싶은 프로그래머는 많이 있다고 생각 합니다만, 


정작 제대로 된 작품을 만들고자하면 프레임 워크의 존재에 고민하게됩니다. 


Redux를 사용하더라도 어떤 조합 디렉토리 구성으로하는 것이 


최고인가 알기가 힘듭니다. 


그래서 사용해보고 싶은 것이 Roc입니다. 


React / Redux를 사용한 node의 Web 어플리케이션 프레임 워크입니다.



Roc 사용법


 Roc 설치는 npm에서 할 수 있습니다.


  1. npm install -g roc

응용 프로그램의 초기 설정은 init을 사용합니다. 


대화 형으로 만듭니다.


  1. $ roc init web-app-react
  2. Found a folder named /path/to/react-app, will try to use it.
  3. Using v1.0.3 as template version
  4. :
  5. ? What's the name of your application? my-roc-app
  6. ? What's the description for the application? My Roc Application
  7. ? Who's the author of the application? John Doe
  8. ? What's the license for the application? MIT
  9. ? What's the port for the application? 3000
  10. ? What do you what to use for <title>? My Roc Application
  11. Installing template dependencies… (If this fails you can try to run npm install directly)


파일 구성은 다음과 같이되어 있습니다. 단순하고 알기 쉬운 것입니다.



dev 명령에서 개발 서버가 시작됩니다.


  1. $ roc dev
  2. Found a local version of Roc, will use that over the global one.
  3. roc:dev:client Dev server started on port 3001 +0ms
  4. roc:dev:node:builder Server rebuilt 4223 ms +4s
  5. roc:dev:node:watcher You can restart the server by entering "rs" and pressing enter" +8ms
  6. webpack built bd9fb8550a39de1140f3 in 4950ms
  7. Roc runtime has been initialized.
  8. roc:server Server started on port 3000 (HTTP) and served from / +0ms
  9. < -- GET /
  10. [BS] Proxying: http://0.0.0.0:3000
  11. [BS] Access URLs:
  12. -------------------------------------
  13. Local: http://localhost:3030
  14. External: http://192.168.0.15:3030
  15. -------------------------------------
  16. UI: http://localhost:3031
  17. UI External: http://192.168.0.15:3031
  18. -------------------------------------
  19. --> GET / 200 74ms 7.5kb
  20. < -- GET /
  21. --> GET / 200 25ms 7.5kb
  22. < -- GET /favicon.png
  23. --> 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





댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/05   »
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 29 30 31
글 보관함