리액트JS로 웹 서비스 만들기 1일차

올해 초부터 3개월 정도 리액트JS를 이용한 웹사이트 제작에 참여했습니다.

처음부터 구축한 게 아니라 기능 추가 안건이었기 때문에 직접 코딩을 하면서도

스스로 부족한 점을 많이 느꼈습니다.

 

그래서 스스로 리액트JS에 대해 공부도 더 할 겸, 리액트JS를 처음 접하시는 분에게 도움이 됐으면 하는 뜻에서 이 포스트를 쓰게 됐습니다.

포스트를 하는 데 참고로 한 것은 인프런에 올라와 있는 'ReactJS로 웹 서비스 만들기'라는 강좌입니다.

 

출처: https://www.inflearn.com/course/reactjs-web/

리액트JS를 하기에 앞서 알아 두면 좋은 게 하나 있는데요. 바로 SPA입니다.

이미 많은 분들이 아시듯이 리액트JS는 SPA입니다.

 

SPA라는 것은 Single Page Application의 약자로 기존의 웹사이트와 달리,

하나의 HTML페이지 안에서 화면 전환이 이루어지는 어플리케이션을 말합니다.

 

최근 SPA가 각광을 받는 이유가 여럿 있는데 그 중 하나가 퍼포먼스가 좋다는 것입니다.

스마트폰 어플처럼 화면 전환이 휙휙 되고 전환되는 애니메이션도 붙일 수 있습니다.

굉장히 멋들어진 웹사이트를 만들어낼 수 있는 거죠.

이러한 SPA를 개발하기 위한 라이브러리에는 앵귤러, vueJS, 리액트JS가 있는데,

그 중에서 가장 인기를 끌고 있는 것이 페이스북에서 개발한 리액트JS입니다.

리액트JS에 무슨 장점이 있길래 그만한 인기를 누리고 있는 것일까요?

일단 인프런 강의 안에서 리액트JS의 장점으로 4가지를 들었습니다.

그 내용에 간단한 설명을 덧붙이겠습니다.

1) 자바스크립트 지식만 있으면 앱을 만들 수 있다.

 

그렇습니다. 자바나 파이썬 같은 백엔드 언어를 모르더라도 자바스크립트만을 써서, 웹사이트를 하나 만들어낼 수 있습니다. 최근 자바스크립트 개발자의 몸값이 올라가고 있는 이유 중 하나입니다.

 

2) 컴포넌트 중심이기 때문에 재사용성이 좋다.

 

먼저 컴포넌트(component)란 게 대체 무엇인지 알아보도록 합시다.

컴포넌트는 말하자면 재사용 가능한 화면 구성요소라고 보면 됩니다.

 

웹사이트를 보면 로그인 창이 있고 윗부분(header)가 있고 밑에,

회사명이나 주소 같은 게 나와 있는 밑부분(footer)가 있는데요.

header와 footer 같은 경우에 여러 화면에 공통적으로 사용됩니다.

따라서 컴포넌트화하여 여러 화면에 돌려 쓰는 것이 훨씬 효율적이지요.

 

외형적으로나 기능적으로나 똑같은 부분인데 화면마다 새로 쓰는 건 낭비이기도 하고, 한 곳만 수정해도 다른 화면에 모두 반영되기 때문에 유지보수적 측면에서 봤을 때도 좋습니다.

 

3) JSX(JavaScript XML: 자바스크립트와 HTML 결합)을 사용하면 함수로 HTML 태그를 생성하여 사용할 수도 있다.

 

  render() {
    return (
      <div className="App">
        Hello World!
      </div>
    );
  }

 

JSX는 위와 같이 javascript 코드와 HTML이 함께 사용되는 모습을 보입니다.

이것을 보고 기분 나쁘다고 하는 사람도 있지만 쓰는 입장에선 편리합니다.

특정한 이벤트에 따라서 특정 요소가 나타나게 하는 등,

페이지 내 요소를 제어하는 것이 몹시 편리해지니까요.

 

4) Unidirectional Dataflow(단일방향성 데이터 흐름)

 

앵귤러JS 같은 경우에는 양방향성 데이터 흐름을 가지고 있습니다.

A에서 수정을 하면 B에 영향을 주고, B에서 수정하더라도 A에도 영향을 줍니다.

단방향 데이터 흐름은 A에서 수정해서 B로밖에 영향이 안 간다는 것입니다.

양방향성과 달리 B에서 수정한 것이 A에 영향을 주지 않는 것이죠.

 

리액트의 장점에 대해서 소개하였습니다. 이제부터 본격적으로 설명과 함께 어플리케이션을 만들어 나갈 것인데요.  이번에 만들 것은 YTS(토렌트 릴리스 그룹)의 API를 이용한 영화 정보 어플리케이션입니다.

 

API 예제는 아래 링크를 참조해주세요.

https://github.com/MovieCast/yts-api

 

리액트 같은 경우 쉽게 환경 구축을 할 수 있게 해주는 모듈이 있습니다.

바로 페이스북에서 제공하는 create-react-app입니다. 이것을 설치하면

별다른 설정 없이 곧바로 개발에 뛰어들 수 있게 됩니다.

#create-react-app 저장소

https://github.com/facebook/create-react-app

 

[주의 사항]

create-react-app을 설치하기에 앞서서

노드js와 npm(노드js 패키지 매니저)가 필요합니다.

둘다 설치하셨으면 npx 혹은 npm 커맨드를 이용해서 설치를 진행할 수 있습니다.

 

npm 버전이 5.2 이상인 경우 밑의 커맨드를 사용합니다.

npm 버전은 커맨드창에서 npm -version을 쳐서 확인 가능합니다.

또한 my-app은 단순히 프로젝트 이름이기 때문에 my-app이 싫다면 자기가 

원하는 이름을 지정하시면 됩니다.

npx create-react-app my-app
cd my-app
npm start

npm 버전이 5.2 미만인 경우에는 다음 커맨드를 사용합니다.

npm install -g create-react-app

create-react-app my-app

모듈이 자동으로 설치되기 시작하며 설치가 모두 끝나면 다음과 같은 메시지를 확인할 수 있습니다.

cd my-app으로 프로젝트 폴더로 이동하여

npm start로 개발 서버를 기동할 수 있습니다.

서버를 기동하면 다음과 같이 IP주소와 포트 번호가 뜹니다.

그 아래에는 배포 서버에 올리기 위해서 빌드할 때는 npm run build 커맨드를 치라는 안내문도 나옵니다.

위에 적힌 주소에 브라우저로 접속하면 다음과 같은 초기 화면이 나타나게 됩니다.

이제 이 첫 페이지를 자기가 원하는 대로 바꿔 가면 됩니다.

 

 

일단 1일차는 여기까지 하도록 하겠습니다.

본격적인 리액트JS 웹 서비스 만들기는 2일차부터 정리해 나가도록 하겠습니다.