요즘웹개발

요즘 웹 개발
유니온커뮤니티 개발 1그룹
이명규
아재 개발자가 살펴본

발표자 소개
 컴공 졸업
 C 6개월 코스 학원 수료
 PDA 개발 4년
 L/Uinx C 개발/유지보수 9년
WEB 개발자 아닌데?

웹 개발 경험은?
2001년
ASP
조선시대에 해봤음
2003년
PHP

WEB Service
BackendFrontend
Apache
IIS
Web Serer
Java
PHP
ASP
HTML
CSS
JavaScript
HTTP
HTM
L
XML

예전 코드 스타일
파일 하나에 Backend, Frontend
코드들이 섞여 있다.
JavaScript
PHP
HTML
HTML
PHP

WEB Service
BackendFrontend
Apache
IIS
NGNIX
Web Serer
Java
PHP
.NET
Ruby
Go
Node.js
HTML
CSS
JavaScript
HTTP
Jquery
Bootstrap
Angular JS
backbone JS
React JS
Elm
Ext JS
…………………
Real-time Socket +
JSON
REST API + JSON
Spring
Laravel
Rails
Express

index.html
요즘 코드 스타일
소스 코드가 분리되어 있을 뿐 아니라,
아예 개발 직군이 나눠진다.
HTML
bundle.js JavaScript
App
Frontend
Backend
JSON
Backend 개발자
Frontend 개발자
Web Publisher

예전 개발환경
1. 코드 수정
2. Web 서버 재기동
3. 결과 확인

요즘 개발환경
0. 개발 환경구성
- webpack.config.js
- package.json
- npm start
1. 코드 수정
2. 실시간 확인

개발환경 구축 (1)
 Node.js 설치
 개발 언어를 node로 사용하는 것이 아니고, 대부분 web 개발 환경이 node로 개발되어 있어서 필요함
 Visual Studio Code 설치
 Text Editor
 https://code.visualstudio.com/
 Plugin 설치
 Reactjs code snippets
 Babel 설치
 > npm install –g babel
 ECMAScript6을 지원하지 않는 환경에서 사용할 수 있게 해 줌
 Webpack 설치
 > npm install –g webpack webpack-dev-server
 여러가지 javascript 모듈을 하나로 합쳐 줌

 프로젝트 생성
 > mkdir 1st
 > cd 1st
 > npm init
 의존성 페키지 설치
 > npm install –save react react-dom
 > npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack
webpack-dev-server
 Webpack 컴파일 설정 (webpack.config.js)
 로더 설정 (package.json)

 관리자 CMS Template 다운로드 및 설치
 https://almsaeedstudio.com/
 public 디렉토리에 복사
 Visual Studio Code로 디렉토리를 통째로 연다.
 Visual Studio Code의 터미널을 연다.
 > npm start
 http://127.0.0.1:7777/

/webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
inline: true,
port: 7777,
contentBase: __dirname + '/public/'
},
module: {
loaders: [
{
test: /.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['es2015', 'react']
}
}
]
}
};

/package.json
{
"name": "acm_web",
"version": "0.0.1",
"description": "AccessManager WEB Sample project",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --hot --host 0.0.0.0"
},
"author": "lmk@unioncomm.co.kr",
"license": "",
"dependencies": {
"react": "^15.4.2",
"react-bootstrap-table": "^3.1.1",
"react-dom": "^15.4.2"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.4.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}

React 소개
• https://facebook.github.io/react/
• JUST THE UI
• VIRTUAL DOM
• Components
• JSX
• ECMAScript2015(ES6)

/public/index.html
~~~~~~~

<div class="content-wrapper">

<section class="content-header">
<h1>
System Info
<small>간략한 시스템 정보 입니다.</small>
</h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-dashboard"></i> Level</a></li>
<li class="active">Here</li>
</ol>
</section>

<section class="content">
<div id="root"></div>

</section>

</div>

~~~~~~~

/src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Sysinfo from './components/Sysinfo';
const rootElement = document.getElementById('root');
ReactDOM.render(<Sysinfo />, rootElement);

 가장 중요한 디자인은?
 컴퍼넌트를 한땀한땀 제작해야한다?
 Backend는 뭘로 개발?
 RESTful 설계는?

가장 중요한 디자인?
 쓸만한 CMS Template은 대부분 유료
 AdminLTE2로 결정

컴퍼넌트를 한땀한땀 제작해야한다?
 찾기가 어렵다.
 너무 많다.
 쓸만한건 유료
 대안은?
 Sencha (ExtJS): https://www.sencha.com/
 기업용 엔터프라이즈급에선 독보적
 다양한 템플릿 지원
 GUI Tool 지원
 하지만 유료
 Polymer.js: https://www.polymer-project.org/
 익숙한 구글 UI
 다양한 템플릿 지원: https://www.webcomponents.org/

Backend는 뭘로 개발?
 Go ?
 PHP ?
 Node.js ?

RESTful 설계는?
 URI
 Request JSON
 Response JSON
 보안

요즘웹개발

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to 요즘웹개발

Similar to 요즘웹개발 (20)

요즘웹개발