안녕하세요. 엔지엠소프트웨어입니다. 신규로 진행하는 프로젝트의 백엔드는 스프링부트(Spring boot)를 사용하고, 프론트엔드는 리액트(React & Typescript)를 사용하기로 했습니다. 둘다 IDE는 비주얼 스튜디오 코드(Visual Studio Code)를 사용하는데요. 다른 IDE보다 가볍고, 익숙해서 개발 퍼포먼스가 잘 나오지 않을까 하는 생각입니다. IDE는 개발자가 익숙한 도구를 사용하는게 좋을듯 합니다. Visual Studio Code를 실행 해볼까요? 제가 진행하는 프로젝트의 기본 구조는 아래와 같습니다.

 

 

리액트(React)는 Angular, Vue와 같은 JS 라이브러리입니다. 컴포넌트(Component)에 대해 선언적 사용이 가능하다는 공통점이 있습니다. 그리고, 모두 SPA(Single Page Application)를 위한 최적의 환경을 제공합니다. SPA는 서버로부터 완전한 웹페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 윈도우 응용프로그램처럼 사용자와 상호작용하는 웹애플리케이션이나 웹사이트를 말합니다. 이미 오래전부터 iframe이나 ajax로 SPA를 사용해왔지만 리액트나 앵귤러, 뷰와 같은 JS 프레임워크 라이브러리를 사용하면 여러가지 장점들이 있습니다. 이 부분은 기회가 되면 좀 더 자세하게 알아보도록 하겠습니다.

 

리액트 세팅 및 실행

아래와 같이 frontend 폴더로 이동합니다.

 

 

npx로 리액트를 설치 해줍니다. npm install -g로 전역 설치도 됩니다. (nodejs 14 이상이 컴퓨터에 설치되어 있어야 합니다.)

 

 

 

새로운 프로젝트 생성

아래 명령으로 새로운 프로젝트를 추가해줍니다. "create-react-app" 명령은 React에서 지원하는 Boilerplate입니다. 보일러플레이트는 자바 스프링의 어노테이션이나 닷넷의 어트리뷰트, LiveTemplate, LomBok등등... 다양하게 많은 곳에서 사용하고 있습니다.

 

프로젝트가 정상적으로 생성되면 아래와 같이 실행할 수 있습니다.

 

 

정상적으로 서버가 실행되었습니다.

 

 

컴포넌트 (Component)

리액트의 컴포넌트는 view를 구성하는 작은 단위를 말합니다. 앵귤러도 동일합니다. 이런 컴포넌트들은 독립적으로 재사용이 가능하고 유연하게 구성할 수 있게 해줍니다. 리액트에서는 일반적으로 컴포넌트의 이름을 대문자로 시작합니다.

 

Props

컴포넌트끼리 데이타를 주고받는 argument입니다. 리액트는 Flux Architecture를 사용하기 때문에 상위 컴포넌트에서 하위 컴포넌트로만 데이타를 전달할 수 있습니다.

 

마치며...

이미 앵귤러를 사용해본 분들은 리액트를 사용하는데 있어서 크게 어려움은 없을거라고 생각합니다. 이미 노드와 타입스크립트를 충분히 익혔기 때문입니다. 앵귤러는 그 자체로 완전한 솔루션이기 때문에 러닝 커브가 가파른편입니다. 리액트도 타입스크립트를 익혀야 하지만, 단순히 타입스크립트 라이브러리만 놓고 본다면 앵귤러보다는 좀 더 쉽습니다. 뷰(Vue)가 가장 쉽다고 하긴하던데... 아직 접해보질 않아서 잘 모르겠네요^^; 아무튼~ 요즘에는 개인적으로 플러터를 공부하면서 회사 일은 리액트로 진행하고 있는데요. 여유 시간이 좀 더 많았으면 좋겠다는 생각이 많이 드네요. 하루가 너무 빨리 지나가는군요. 공부에는 끝이 없고요~

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

추천0 비추천0