01. react 준비

React 란 현존하는 자바스크립트 라이브러리 중에서 가장 많이 사용하고 있는 기술로 현업에서 중요한 기술 스택 중 하나로 자리 잡았고 프런트엔드 개발자를 채용하는 대부분의 회사에서는 리액트로 개발을 할 수 있는 사람을 원하고 있다.

 

리액트는 메타(구 페이스북)에서 만든 오픈소스 자바스크립트 UI라이브러리이다.

 

리액트의 장점은 빠른 업데이트와 렌더링 속도로 볼 수 있는데 빠른 업데이트를 위해서 내부적으로 Virtual DOM 이라는 것을 사용하며 업데이트를 해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트 하기 때문에 리렌더링이 잦은 동적인 모던웹에서 엄청나게 빠른 퍼포먼스를 발휘한다.

 

또한 컴포넌트 구조로 재사용이 편리하게 되어 있다.

HTML 파일 대신에 JSX(JavaScript eXtension) 파일을 사용하게 되는데 HTML 과 비슷하지만 XML을 기반으로 한다는데 차이가 있다.

 

그럼 react의 세계로 여행을 떠나 봅시다.

 

먼저 react를 무료로 서비스 받을 수 있는 구름(https://edu.goorm.io/) 사이트에 회원 가입을 합니다.

메인 메뉴에 IDE 를 선택 합니다.

내 컨테이너를 선택 합니다.

새 컨테이너 를 클릭 합니다.

컨테이너 이름,설명 등을 선택 하고 소프트웨어 스택 에서 React 를 선택 합니다.

나중에 MySQL 또는 MongoDB를 사용하기 위해 추가모듈/패키지를 모두 선택 합니다.

맨 하단의 생성하기 버튼을 클릭하여 컨테이너를 생성합니다.

내 컨테이너에 가면 이렇게 생성 되어 있는 것을 확인 할 수 있습니다.

이 컨테이너를 항상 켜두기 하면 항상 구동이 되어 있어서 서비스가 가능합니다.

실행 버튼을 클릭하면 다음과 같이 코딩을 할 수 있는 창이 나타납니다.

이제 부터 코딩을 할 수 있는 환경이 되었습니다.

 

index.js 파일을 선택 후 오른쪽 상단의 new run react 를 클릭하여 리액트를 실행합니다.

(또는 npm install && npm start 으로 직접 실행)

우리가 만든 서비스에 접속을 할 수 있는 링크는 다음에서 확인 해 볼 수 있습니다.

 

컨테이너 설정에 보면 다음과 같이 URL과 포트를 확인 할 수 있습니다.

웹페이지에 위의 URL 로 접속을 하면 우리 서비스를 확인 할 수 있습니다.

 

이제 리액트 여행을 할 수 있는 준비가 다 되었습니다.