React.js

1. Express 서버를 좀 더 서버 답게node 명령어를 통해 서버를 가동하면, 서버의 코드가 변경될때마다 재시작을 해야 하는 번거로움이 있습니다. 이를 해결하기 위해 우리는 nodemon이라는 tool을 쓰도록 하겠습니다. 추가로, http 로그를 확인하기 위한 morgan과 여러 명령어를 이어서 실행할 수 있는 concurrently 를 설치합니다. yarn add morgan nodemon concurrently --dev 그런 다음 package.json을 다음과 같이 수정합니다."scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "server": "nodemon server/server.js", "d..

1. Express 서버에 라우팅 설정이전 글에서 Express 서버를 구축하였습니다. const express = require('express'); const path = require('path'); const os = require("os"); const app = express(); const PORT = process.env.PORT || 4000; app.use(express.static(path.join(__dirname, '..', 'public/'))); // if you need api routes add them here app.get("/api/getUsername", function(req, res, next){ res.send({ username: os.userInfo().us..

1. React에 Express 연동하기이전 게시글에서 구성한 프로젝트를 기반으로 진행합니다. create-react-app 으로 프로젝트를 생성하게 되면 babel, Webpack 등 여러 모듈들이 같이 설치됩니다. 여기서 Webpack 관련 설정이 나중에 필요하기에 숨겨있는 폴더를 끄집어내야 합니다. yarn eject위와 같은 명령어를 실행하면 프로젝트에 새로운 폴더가 생성됩니다. 결과는 아래와 같습니다. config라는 폴더와 scripts 폴더가 생성된 것을 확인할 수 있습니다. 또한 심플했던 package.json 내용도 변경된 것을 확인할 수 있습니다. 우선은 여기까지 해놓고 Express 설치를 해보도록 하겠습니다. 2. Express 설치 및 서버 생성yarn add express위 명령..

React로 Isomorphic Web App 개발하기javascript도 모르는 제가 react를 이용해 Isomorphic Web App 을 개발하는 과정을 기록하려고 합니다. 1. React, Webpack, Babel, Isomorphic, Yarn, NPM 등등 용어 설명React를 이용해 Web App을 개발하기에 앞서 앞으로 자주 등장 하는 용어들에 대해 알아보겠습니다. React : Facebook 에서 만든 Front-end Javascript Library 입니다. React와 비교될만한 대표적인 Front-end 라이브러리로는 Angular, Vue 가 있습니다. Isomorphic : 예전에 Angular 와 React가 한창 유행할때 자주 언급되던 SPA 라는 용어가 있었습니다. ..