NodeJS + React 연동

Full Stack Developer가 되기 위한 첫 번째 단계로 백앤드와 프론트앤드 개발 언어를 설정하는 것이 필요합니다. 저는 NodeJS와 React를 연동해서 사용해 볼 예정입니다. 일단 둘 다 JavaScript 기반이라서 별도의 언어를 따로 배워야 할 필요가 없습니다.

NodeJS를 이용하면 JavaScript 코드를 서버사이드에서 사용이 가능해집니다. W3Tech에 따르면 세계적으로 1.3%의 웹사이트가 NodeJS로 이뤄져 있다고 합니다. LinkedIn, Uber, Netflix, NASA 등과 같은 대기업들이 서버사이드 언어로 NodeJS를 택하고 있다고 하죠.

JavaScript언어를 이용하기 때문에 오픈소스이고 객체지향 언어의 장점을 활용할 수 있습니다. 그리고 상대적으로 속도도 빠르다고 알려져 있지요.

단점이 있다면 NodeJS는 멀티스레드 프로그래밍을 지원하고 있지 않다는 점인데요. 저는 아주 단순한 웹페이지를 개발해서 서비스하는 것이 목표이기 때문에 상관없을 것 같습니다.

글로벌리 현재 사용 순위 Top 10안에 드는 유명한 백앤드 개발 언어라고 하겠습니다.

React는 JavaScript를 이용한 UI 개발 라이브러리입니다. 페이스북 및 오픈소스 개발 커뮤니티에서 관리하고 있습니다. React는 정확히 이야기하면 프로그래밍 언어는 아닙니다. JavaScript가 언어이고 React는 라이브러리의 종합 정도로 보는 게 맞아 보입니다.(Angular와 같은 프레임워크는 또 아니라고 하네요) React를 이용해서 개발하게 되면 React Native라는 확장 기능을 통해서 모바일 애플리케이션을 함께 개발할 수 있어 향후 모바일 앱으로 확장이 용이합니다.

React의 특징은 Virtual DOM과 JSX를 꼽을 수 있는데 향후 자세히 설명하는 기회가 있을 것 같습니다.

역시나 세계적으로 Top 10안에 손꼽히는 프론트앤드 개발 환경임에는 분명해 보입니다.

일단 사람들이 가장 많이 사용하는 언어 및 개발환경을 사용하면 구글링을 통해서 소스나 문제 해결에 대한 자료를 많이 얻을 수 있습니다. 내가 지금 고민하고 있는 것은 누군가가 동일하게 고민했고 이미 해결한 문제일 경우가 많습니다. 거의 99%가 그러하죠.

그래서 최종적으로 React와 NodeJS를 이용하여 웹서비스 개발 환경을 구축해 보고자 합니다.

연동 순서는 다음과 같습니다.
1. NodeJS + Express를 이용한 서버 만들기
2. React Project 생성
3. React Project 빌드 -> build 폴더 생성됨
4. NodeJS 서버에서 build 폴더 연결
  -> 외부에서 요청이 오면 build 폴더에 있는 html 파일을 보내줍니다.
  -> 라우팅 관련 설정
    : 라우팅이라는 것은 외부로부터 페이지 접근 요청이 올 때 서버에서 처리할 건지 React에서 처리할 것인지를 결정하는 내용입니다.
5. DB 연결
6. 기타 세부 설정

앞서 말씀드린 순서대로 연동을 진행해 보도록 하겠습니다. 더 알고 싶으신 내용을 댓글로 남겨주시면 이후 프로젝트 진행 시 보강하여 설명드리도록 하겠습니다.

그럼 오늘도 즐코딩!