18/06/02 01_프로그램 설치

- http://cafe.naver.com/moyaid/ > 20180601주말반

- \\211.238.142.212\weekDev

- 라우터, 만개의 레시피, 몽고db, 부트스트랩을 이용해서 제작할 예정

react -> 생명주기 -> view (MVC 중 view front단)

 *m, c : back 단 node.js, spring, boot (react lib도 있음.)

JSX -> javascript xml

가상돔 (돔: 트리형식)

단반향 흐름

UI 컴포넌트

React -> 서버 - 데이터 읽기 (xml, json)

-> db 몽고db (node)

데이터 ------------------>

xml        render(xml)

==========================================================================

- 설치시 주의점. node.js를 먼저 설치하고 웹스톰을 설치한다. 웹스톰이 먼저 설치되어있을 경우 삭제후 재설치

 (react app이 안나옴..)

1. node.js 설치

- https://nodejs.org/ko/download/ 

- 본인 컴퓨터의 해당하는 것을 골라 다운로드 받는다. (내컴퓨터 > 속성에서 확인할 수 있음.)

- CMD(명령 프롬프트)를 열어 node.js를 설치한 경로에 아래와 같이 입력한다. (나는 'C:\Program Files' 안에 설치 했음.)

npm install -g create-react-app

- 아래 이미지와 같이 나오면 완료.

2. 웹스톰 설치

- https://www.jetbrains.com/webstorm/

- 다운로드시 js, css, html 체크하고 install

- Evaluate for free 체크하여 30일짜리 무료 시작.

- File > New Project > React App 선택 우측 location에 경로와 이름 지정후 Create. (조금 오래걸리니 기다려야함.)

- 완료후 좌측에 node_modules이 들어왔는지 확인.

- 검색기에 'terminal' 을 열고 하단에 열린 창에 npm start 입력

- http://localhost:3000/ 창이 열리면 완료.

- C:\Users\user\WebstormProjects : 파일 경로 (파일을 가져갈때 노드 빼고 가져가야함. package.json src, public 3가지 가져가면 됨)

- 좌측 프로젝트 파일 리스트 -> src > app.js

- html 코드는 xml로 되어 있어서 열고 닫는 것에 주의

- 파일을 수정하면 새로고침을 안해도 바로 적용됨. (가상돔)

3. sts 설치

- http://spring.io/

- 맨 하단의 TOOLS > DOWNLOAD STS 버튼 밑에 있는 See all versions 클릭

- previous Spring Tool Suite™ versions. 클릭 > 3.90 버전 다운로드

(아무버전 상관없는데 3.90이 호환이 젤 잘 된다고 한담.)

- 적당한 곳에 압축을 풀고 \sts-bundle\sts-3.9.0.RELEASE\STS.exe 실행하여 파일 경로를 지정하면 완료.

(이름이 너무 길어서 오류가 날 수있다. C드라이브 하위에 옮겨서 풀면 해결.)

- A Java Runtime Environment (JRE) or Java Development Kit (JDK)... 

  * 자바 가상머신의 위치를 찾지 못해서 나는 에러. STS.ini라는 파일의 -vm의 파일 경로를 javaw.exe가 있는 경로로 잡아주면 해결.

  * 다운 안받아도 뜨니.. 다운을 받으세용. (http://www.oracle.com/technetwork/java/javase/downloads/index.html)

4. 톰캣 설치 (웹 서버)

- http://tomcat.apache.org/

- 좌측 Dowunload > Tomcat 8 클릭

- 8.0.52 > Core : zip 다운로드 후 적당한 곳에 압축을 푼다.

- STS에서 

  - File > New > Dynamic Web Project > 프로젝트 명 입력 > Next .... Finish

  - WebContent > 폴더생성 > 파일생성 > 파일 우클릭 > Run As > Run on Server (단축키 c + F11) > 

    상단 Manually define a new server 클릭 > Apache 폴더안 Tomcat v8.0 Server 선택 > Next >

    Browser... 클릭하여 톰캣을 설치한 경로 선택(bin 폴더 바로 상위 폴더 선택) > Finish

  - Window > Preferences 의 좌측 메뉴 Server > Runtime Environments 에서 톰캣 빼고 Remove > Apply and Close

  - Window > Web Browser > Chrome 선택. (단축키 c + F11 + 엔터하면 열린다.)

6. json

- http://mvnrepository.com/

- 검색창에 jaxb > jaxb api > 2.3.0 > Files 에 jar 다운로드

- 검색창에 jsoup > 1.11.3 > Files 에 jar 다운로드

- 검색창에 simple json > 1.1.1 > Files 에 bundle 다운로드

- 검색창에 JSTL > 1.2 > Files 에 jar 다운로드

(버전은 상관없고.. 그냥 최신버전으로 다운로드 함.)

- STS에서

  - 방금 만든 WebContent > WEB-INF > lib > 안에 위의 4가지 파일을 넣는다.

  - \apache-tomcat-8.0.52\lib\servlet-api.jar 이 파일도 넣는다.

  - Java Resources > Libraries > JRE System Library 우클릭 > properties > Workspace default JRE (jre1.8.0_171) 선택 > Apply and Close

7. 몽고디비 설치

- http://mongodb.org

- 상단 GET MongoDB > Community Server > DOWNLOAD

- 설치가 완료되면 C:\Program Files\MongoDB\Server\3.6 안에 위치함.

- C:\Program Files\MongoDB\Server\3.6\bin 폴더안의 mongod.exe 파일은 서버 실행 파일, mongo.exe 는 MongoDB를 조작할 수 있는 Shell 프로그램.

- mongod.exe 를 통해서 MongoDB 서버를 실행하기 전 db폴더를 생성해야함. 적당한 위치에 폴더를 생성한다.

- CMD(명령 프롬프트)로 방금 생성한 db폴더를 MongoDB의 db 폴더로 연결.

- mongod.exe 가 있는 폴더에서 아래 명령어를 입력한다.

cd cd:\program files\mongodb\server\3.6\bin
mongod --dbpath c:\방금 생성한 파일 경로

- api-ms-win-crt-runtime-l1-1-0.dll 어쩌고 하는 오류가 뜨면 window 업데이트를 해주면 됨.