본문 바로가기

reactjs

[ReactJS] ReactJS + Nginx + Docker 구성하기 개요 React JS를 활용해서 웹사이트를 구축하려고 합니다. Node를 활용해서 서버를 운영해도 되고, Apache를 이용해도 됩니다. 그런데 여기에서는 웹서버를 Nginx를 이용하고 별도 설치하지 않고 Docker를 활요해서 시스템을 구축해보도록 하겠습니다. 사전준비 React JS 프로젝트 구성 (http://oofbird.net/19 참고) Docker 설치 (Ubuntu일 경우 http://oofbird.net/22, Windows일 경우 http://oofbird.net/33 참고) Dockerfile 작성 Docker 이미지를 생성하기 위하여, React JS 프로젝트 폴더에 Dockerfile을 생성하겠습니다. 그리고, 첫줄에 사용할 Base Image를 지정합니다. Nginx에 대한 Do.. 더보기
[ReactJS] React Router 사용하기 개요React JS로 웹페이지를 개발하다 보면, 보통 One Page 방식으로 많이 개발하게 됩니다.처음에는 크게 문제가 되지 않는데, 점점 페이지의 규모가 커지다 보면 상위 페이지에서 하위 컴포넌트로 계속적으로 데이터를 넘겨주거나 Context를 이용하여 전역 데이터를 전달해야 합니다. 하지만 React에서도 Context는 사용하지 말라고 가이드가 되어있습니다.그래서 몇가지 찾아보던 중 웹 주소창을 활용한 라우팅 방법이 있어서 소개하고자 합니다.React Router 사용하기React JS 환경이 구성되어있는 상태에서 다음 명령을 통하여 관련 라이브러리를 설치/사용할 수 있습니다. $ npm install --save react-router-dom 예제설치가 완료되면 다음 예제를 통해서 어떻게 사용하.. 더보기
[React JS] React JS 시작하기 준비하기React를 사용하기 위해서는 일단 Node.js가 설치되어있어야 합니다. 그냥 쓸려고 했는데...그냥 로 쓰기에는 잘 안됩니다. Node.js를 설치하고 npm을 이용하는 것이 속편합니다.기본 프로젝트 생성하기create-react-app이라는 것을 제공합니다. 다음과 같이 설치 및 실행하시면 됩니다.// create-react-app 설치$ npm install -g create-react-app// 샘플 프로젝트 생성$ create-react-app helloworld// 샘플 프로젝트 이동 후 실행$ cd helloworld$ npm start 다음과 같이 실행되어 접속할 수 있습니다.배포하기소스만 가진채로 배포할순 없겠죠? 다음 명령을 실행하면 배포가 가능한 형태로 변경을 해줍니다.$ n.. 더보기