React 에 대해 전혀 모릅니다.

갑자기 눈에 띄여서 따라 해봤는데, 많이 편하겠더군요.

React 는 M(model)V(View)C(Controller) 중에서 View 부분만 담당하는것인데

Structor 을 설치하면 서버 쪽 개발을 위한 것이 같이 설치 되었습니다.

필요한 프로그램

1) npm

2) nodejs

영상

1) https://www.youtube.com/watch?v=AY65e6Ry_rY

2) https://www.youtube.com/watch?v=JLz8B0XJPyk

위의 영상에 대해 문서로 작성된것

https://github.com/ipselon/structor/wiki/Structor-tutorial:-%22Fetch-data-from-GitHub%22-(part-1) 

https://github.com/ipselon/structor/wiki/Structor-tutorial:-%22Fetch-data-from-GitHub%22-(part-2) 

설치 및 브라우져에 GUI 툴 띄우는 방법

          node 와 npm 이 설치 되었다라는 가정하에

          아래 내용 순서대로 하세요. 

apm 과 전혀 관련이 없으므로 아무 디렉토리나 하나 만듭니다.

저는 편하게 c:\temp\study 라고 만들어서 하겠습니다.

( 아래 $ 표시는 무시하세요 )

            먼저 DOS Prompt 창을 하나 열어서 아래의 순서대로 실행합니다

1) npm i structor -g   <---  Global 로 설치합니다.   (       i <--- install 의미입니다        )

2) cd c:\temp\study  <--- 해당 페이지로 이동

3) structor               <------ 실행

4) 브라우져을 띄우시고  

         http://localhost:2222/structor  으로 접속

          5) bootstrap-prepack 안의 Clone 을 누르시고 2~3분 대기

                   한참 걸리는 사유는 c:\temp\study 아래에 많은 소스들이 설치되기 때문이였고 

                   브라우져 화면이 한참 머무른다면 브라우져을 Refresh 하시면 

                   문제점을 진단해서 하겠느냐라는 비슷한 의미의 글자가 영어로 보입니다.
                   하겠다라고 라고 하시면 빨리 끝났었습니다.

           6) 아래의 주소로 접속하셔서 화면 위주로 참조 하셔서 따라해 보세요

https://github.com/ipselon/structor/wiki/Structor-tutorial:-%22Fetch-data-from-GitHub%22-(part-1) 

7) 실제 서비스에 적용 하셔야 일반 사용자 화면으로 확인하실수 있으며, 

    아래의 그림대로 선택하시고 기다리세요

8) 아래의  정식 사이트로 띄우는 방법 으로 실행하시면, 작업하신 UI 을 보실수 있습니다.

정식 사이트로 띄우는 방법

 아래 내용 순서대로 하세요 ( 아래 $ 표시는 무시하세요 )

 $ npm install

 $ npm run build-server

 $ npm run build-client

 $ node ./server.js

 브라우져을 띄우고  http://localhost:3000

사용후기

        - UI 부분만 사용한다해도 개발 시간을 많이 줄여 줄수 있겠다 라는 생각

        - 결과물로 나온 소스 코드에 들여쓰기가 엉망 진창이라 손을 봐줘야 한다 <--- 이건 제가 잘못한건지 모름

추천하는 DOS 용 프로그램

        http://sir.co.kr/so_server/832?sfl=wr_subject%7C%7Cwr_content&stx=Conemu