두가지 방식으로


//cors허용

// cors모듈 사용

import cors from 'cors'

app.use(cors())

//express에 헤더 추가

app.all('/*', (req, res, next) => {

res.header("Access-Control-Allow-Origin", "*")

res.header("Access-Control-Allow-Headers", "X-Requested-With")

next();


}


현재 아래있는 헤더에 추가하는 방식으로 사용중






저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

es6의 모듈  (0) 2018.08.17
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
webpack  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

 

로그를 기준으로 작성 

 

//log4js 

const log4js = require('log4js') 

log4js.addLayout('json', (config) => { 

return (logEvent)=>{ return JSON.stringify(logEvent) + config.separator; } 

}) 

log4js.configure("./log4js.config.json" , {reloadSec : 30} ) 

// const etcLogger = log4js.getLogger('etcLogger') 

//3가지 방식으로 할수있음. 

// {}로 감싸면 변수그대로 모듈화 

// 선언방식으로 할때는 지정하고 = 값 넣고 모듈화 

// default 옵션은 import할때 가장 기본되는 변수를 모듈화 

// 실제로 받을때 

// import log4js , {appLogger as logger} from './logger/loggerInit'; 

// default로 한것은 그대로 log4js로 받았고 

// const AppLogger은 appLogger로 받아서 logger라는 이름으로 변경하여 사용 

 

// export {etcLogger} 

export const appLogger = log4js.getLogger('app') 

export default log4js 


저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

express에서 CORS 허용  (0) 2018.09.28
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
webpack  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

npm i react react-dom 

 

Npm install --save-dev webapck webpack-dev-server babel-core babel-loader babel-preset-env 

 

Webpack 설치  

Bable env까지 설치 

 

현재까지 Package.json내용 

 

{ 

"name": "webpack-devserver", 

"version": "1.0.0", 

"description": "", 

"main": "index.js", 

"scripts": { 

"build": "webpack --mode development", 

"start": "webpack-dev-server --inline --hot --content-base --mode development", 

"test": "echo \"Error: no test specified\" && exit 1" 

}, 

"author": "", 

"license": "ISC", 

"dependencies": { 

"react": "^16.4.1", 

"react-dom": "^16.4.1" 

}, 

"devDependencies": { 

"babel-core": "^6.26.3", 

"babel-loader": "^7.1.5", 

"babel-preset-env": "^1.7.0", 

"css-loader": "^1.0.0", 

"style-loader": "^0.21.0", 

"webpack": "^4.16.1", 

"webpack-cli": "^3.0.8", 

"webpack-dev-server": "^3.1.4" 

} 

} 

 

 

Webpack.config.js 

const path = require('path') 

const webpack = require('webpack'); 

module.exports = { 

entry:{ 

app : './src/app.js' 

}, 

output:{ 

path:path.resolve(__dirname , 'build') ,  

publicPath : '/build/', 

filename:'app.bundle.js' 

}, 

module :{ 

rules : [ 

{ 

test: /\.js$/, //js로 끝나는 확장자만 로더를 적용할 것 

exclude: /node_modules/, //node_modules 폴더는 제외 

loader: "babel-loader" 

}, 

{ 

test: /\.css$/, 

         use: [ 

            'style-loader', 

           'css-loader' 

         ]  

}, 

// { 

// test: /\.(png|svg|jpe?g|gif)$/, 

     //  loader:'file-loader', 

     //  option: { 

     //      name: '[hash].[ext]' 

     //  } 

// }  

] 

}, 

devServer: { 

host : '127.0.0.1', 

contentBase: path.join(__dirname, "/"), 

compress: true, 

watchContentBase: true, 

hot : true, 

inline: true, 

port: 8080, 

open : true 

}, 

plugins: [ 

new webpack.HotModuleReplacementPlugin() 

] 

} 

 

처음에 핫로드가 적용안되길래 왜 안되나싶었는데 

publicPath를 지정하지않아서 그렇다 

 

배포시 webpack에 플러그인들 (로더들) 안에있는 url업데이트를 해야한다. 

핫로드 될때는 이전 파일과 비교를 하기때문에 webpack에서 내부적으로 더미 파일명을 만들기때문인거같다. (예상임) 

 

 

 

리액트와 바벨 리엑트 프리셋 그리고 익스프레스를 설치한다. 

 

npm i express react react-dom babel-preset-react react-hot-loader 

 

.babelrc 프리셋 변경 

 

{  

"presets": ["env", "react"] 

} 

 

 

 

 

 

 


저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

express에서 CORS 허용  (0) 2018.09.28
es6의 모듈  (0) 2018.08.17
webpack  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

번들러의 일종  굉장히 편리하다고하여 설치하고 셋팅 

 

Webpack4 설치하고 

셋팅파일 작성 

 

 

const webapck = require('webpack') 

module.exports = { 

mode : 'development', 

entry : { 

app : '', 

}, 

output :{ 

path : '', 

filename : '', 

publicpath : '', 

}, 

module : { 

}, 

plugins : [] , 

optimization : {}, 

resolve : { 

modules : ['node_modules'] , 

extenstions : ['.js','.json','.jsx','.css', ] 

} 

} 

 

Resolve ->경로 및 확장자 처리 

Extensions -> 확장자처리 저 4개는 따로 입력할 필요 없어진다. 

 

 

Mode -> 4에서 추가된옵션 배포용이면 production 

 

Entry -> 웹팩이 파일을 읽는 부분 

 


저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

express에서 CORS 허용  (0) 2018.09.28
es6의 모듈  (0) 2018.08.17
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

http://ejs.co/ 

 

익스프레스 자바스크립트 템플릿 

 

D:\02_source\react\node-server>npm install ejs --save 

 

Ejs파일만들고  

 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title>ejs template</title> 

</head> 

<body> 

<h1> welcome <%= email %></h1> 

</body> 

</html> 

 

 

 

App.js 

 

app.set('view engine' , 'ejs') 

 

app.post('/email_post' , (req,res) => {  

res.render('email.ejs' , {'email' : req.body.email} ) -> email 이req.body.email로 변환 

}) 

 

 

 


저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

express에서 CORS 허용  (0) 2018.09.28
es6의 모듈  (0) 2018.08.17
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
webpack  (0) 2018.08.17
express routing static dir  (0) 2018.08.17

app.get('/', (req,res) =>{ 

// res.send("hi") 

res.sendFile(__dirname + "/public/main.html") 

}) 

 

App에 get "/" 으로 넘어왓을때  응답을 파일로 보내준다. 

Public/main.html  

__dirname의 경우엔 node에 기본 예약어로 프로젝트의 최상위디렉토리 표시된다. 

 

app.use(express.static('public')) 

 

하지만 이런식으로 다 등록하는건 힘드니 

Static dir 등록을 해주면된다. 

 

 

 

 

잘된다. 

 


저작자표시 (새창열림)

'오락기 > node' 카테고리의 다른 글

express에서 CORS 허용  (0) 2018.09.28
es6의 모듈  (0) 2018.08.17
새로 개발할 모니터링 리액트용 환경구성  (0) 2018.08.17
webpack  (0) 2018.08.17
ejs 익스프레스 자바스크립트 템플릿  (0) 2018.08.17

+ Recent posts

티스토리툴바