시작하기 전에
현재 실무에서 많이 쓰는 JS에는 React, Vue, Angular 등이 있다.
Vue는 디자인에 많이 가깝고, React가 백엔드에서 배우기 좋다. 오늘은 React를 어떻게 사용하는지 볼 것이다. 우리가 Spring에서 개발한 건 클라이언트하고 서버가 통합된 느낌이다. 왜냐하면 하나의 프로젝트에 JSP와 Spring 개발 모두가 들어있기 때문이다.
하지만, SPA(Single-Page Application)는 서버로부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 소통하는 웹 애플리케이션과 웹사이트를 말한다. Ajax에서 쓰던 비동기가 태생적으로 포함되어 있다고 생각하면 된다.
우리는 지금까지 Eclipse를 사용했었는데, Visual Studio Code가 React를 사용하기 간단하다. IntelliJ 도 좋은 툴이지만 유료라서 우선 피하겠다. (돈 벌고 쓰자...)
Visual Code를 설치하고 실행시키게 되면, 다음 화면이 보인다.
역시 한국인은 한글이 편하니 한글을 보고 싶다면, 왼쪽하단 네모 네개를 눌러 Extension을 켜주고 검색창에 korean을 쳐서 한국어버전을 설치해주자. 설치 후 Visual Code를 재시작하면 한국어가 보인다.
다음으로 필요한건 node js이다. Node js에 대한 이해를 위해선 아래 벨로그를 참고하길 바란다.
참고로 여기서 쓰는 node.js 는 npm으로 패키지 설치하기만 한다.(단지 그뿐...)
yarn은 페이스북에서 npm보다 보안성을 챙기기위해 쓰기 시작한 툴 중 하나다. yarn을 사용해 나머지 패키지들을 설치하도록 하자.
이 명령어들을 cmd창에 실행시킴으로서 정상적으로 실행되었는지 확인 가능하다. 이상하게 Powershell은 npm install --global yarn은 실행이 되는데 yarn --version은 먹지 않는다.
yarn --version 이라고 cmd 창에 쳐서 쥐똥만하게 1.22.17같은 버전 숫자가 나오면 성공한 것이다!
자, 이제 react 프로젝트를 만들 모든 준비가 끝났다. 프로젝트를 만들 위치로 cd 명령어를 이용해 이동한다. 후, yearn create react-app project-name을 치게 되면 project-name 대로 패키지가 하나 만들어지게 된다.
이제 cd 후 yarn start 하게 되면...!
이렇게 React 창을 띄울 수 있다.
java -jar (jar이름).jar
이제 우리가 Spring에서 생성해준 jar 파일을 사용하면, BackEnd와 FrontEnd 연결이 완료되는 것이다.
마무리하며
사실 국비과정 시작하기 전부터 React가 어떤 방식으로 동작하는지 궁금했었는데 이번 기회에 알게 된 것 같아 많이 기뻤다. 이렇게 연결하는 것 외에도 React 예제도 살짝 들쳐봤지만 Dom-Router 5와 Dom-Router 6 차이 이슈로 예제가 실행되지 않았다. 이거 외에도 호기심으로 React를 익히고 싶긴하지만 BackEnd로 가는 이상 제대로 볼 것 아니면 당분간은 React 동작방식을 이해한 걸로 만족하고 덮어두려고 한다.
