문방구앞오락기

Free명령어의 결과는 이 파일을 토대로 만드는거같다. 

MemTotal:         949452 kB 

MemFree:          184976 kB 

MemAvailable:     547256 kB 

Buffers:           93580 kB 

Cached:           302052 kB 

SwapCached:          268 kB 

Active:           411160 kB 

Inactive:         269268 kB 

Active(anon):     188308 kB 

Inactive(anon):   113152 kB 

Active(file):     222852 kB 

Inactive(file):   156116 kB 

Unevictable:           0 kB 

Mlocked:               0 kB 

SwapTotal:        102396 kB 

SwapFree:          98044 kB 

Dirty:                24 kB 

Writeback:             0 kB 

AnonPages:        284548 kB 

Mapped:           142528 kB 

Shmem:             16656 kB 

Slab:              63864 kB 

SReclaimable:      48848 kB 

SUnreclaim:        15016 kB 

KernelStack:        2552 kB 

PageTables:         5896 kB 

NFS_Unstable:          0 kB 

Bounce:                0 kB 

WritebackTmp:          0 kB 

CommitLimit:      577120 kB 

Committed_AS:    2043192 kB 

VmallocTotal:    1114112 kB 

VmallocUsed:           0 kB 

VmallocChunk:          0 kB 

CmaTotal:           8192 kB 

CmaFree:            6792 kB 

우선 1차적으로 

토탈과 프리 유즈를 구한다. 

Total   = used + free + buffers + cached 

실제 free = free + buffers + cached  

실제 사용량 = total - ( free + buffers + cached)  

토대로 파싱한다. 

pi@js-pi:/proc $ cat stat 

cpu  1176018 17108 442860 158601197 38527 0 10732 0 0 0 

cpu0 287232 4515 105326 38803935 10998 0 5224 0 0 0 

cpu1 272218 4421 139046 39901092 11655 0 4751 0 0 0 

cpu2 320488 4071 99002 39938013 8049 0 386 0 0 0 

cpu3 296080 4101 99486 39958156 7824 0 371 0 0 0 

intr 987976230 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 130545414 0 0 0 0 0 222551 2 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 286005 0 0 132823 0 0 0 0 0 0 0 815486740 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 108643 9115 0 0 0 0 17801712 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 

ctxt 353354970 

btime 1532877226 

processes 253949 

procs_running 1 

procs_blocked 0 

softirq 53205558 58766 13674817 228 2888656 7487 0 13659386 13448030 0 9468188 

계산을 위해서 데이터 저장해보자 

순서 

user : 사용자 영역 코드 실행 시간 

system: 커널 영역 코드 실행 시간 

nice : 기본보다 낮은 우선순위로 실행한 사용자 영역 코드 실행 시간 

idle : I/O 완료가 아닌 대기 시간 

wait : I/O 완료 대기 시간 

hi : Hard Interrupt(IRQ) 

si : Soft Interrupt(SoftIRQ) 

zero : 끝 

출처 http://blog.purewell.biz 

출처: <https://www.joinc.co.kr/w/Site/system_programing/proc/MakeSmsProg>  

으로 계산하면된다 

1 전체  cpu  1444904 26875 682248 251512529 42105 0 19141 0 0 0 

2 전체  cpu  1444907 26875 682257 251514726 42106 0 19141 0 0 0 

diff =  [t]] - [t-1] 

User모드 사용률   = user diff / usediff + systmediff + nice_diff + idel_diff *100 

3 / ( 3 + 0 + 9 + 2197)  = 0.0014  *100 = 0.14  

35461 - 35457 = 4  

1743978 - 1743552 = 426  

34782 - 34770 = 12  

4/ (4+ 426+ 12) = 0.009 * 100 = 0.9  

노드 서버 모니터링을 위한 tcp6 커넥션파싱 

/proc/15610/net 

/proc/[node서버PID] /net 에 여러가지 파일이 있다. 

Tcp든 udp든 현재 http에 request는 tcp6로 나오기에 이걸 파싱 

16진수이다 

엔디언(Endianness)은 컴퓨터의 메모리와 같은 1차원의 공간에 여러 개의 연속된 대상을 배열하는 방법을 뜻하며, 바이트를 배열하는 방법을 특히 바이트 순서(Byte order)라 한다. 

엔디언은 보통 큰 단위가 앞에 나오는 빅 엔디언(Big-endian)과 작은 단위가 앞에 나오는 리틀 엔디언(Little-endian)으로 나눌 수 있으며, 두 경우에 속하지 않거나 둘을 모두 지원하는 것을 미들 엔디언(Middle-endian)이라 부르기도 한다. 

출처: <https://ko.wikipedia.org/wiki/%EC%97%94%EB%94%94%EC%96%B8>  

엔디언이 리틀엔디언같다. 

sl  local_address                         remote_address                        st tx_queue rx_queue tr tm->when retrnsmt   uid  timeout inode 

   0: 00000000000000000000000000000000:0050 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000     0        0 13596 1 b2828000 100 0 0 10 0 

   1: 00000000000000000000000000000000:1F91 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000  1000        0 16602 1 b67f06c0 100 0 0 10 0 

   2: 00000000000000000000000000000000:0015 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000   111        0 79271 1 b2830000 100 0 0 10 0 

   3: 00000000000000000000000000000000:C8D5 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000   113        0 12155 1 b28086c0 100 0 0 10 0 

   4: 00000000000000000000000000000000:0016 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000     0        0 12971 1 b67f0000 100 0 0 10 0 

   5: 00000000000000000000000000000000:0BB8 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000  1000        0 1087391 1 b282a880 100 0 0 10 0 

   6: 00000000000000000000000000000000:0BB9 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000  1000        0 1087390 1 b282e540 100 0 0 10 0 

   7: 00000000000000000000000000000000:01BB 00000000000000000000000000000000:0000 0A 00000000:00000000 00:00000000 00000000     0        0 13600 1 b28286c0 100 0 0 10 0 

   8: 0000000000000000FFFF00000400A8C0:0050 0000000000000000FFFF000075246A2ㅁㅁ7:2203 05 00000000:00000000 03:0000144A 00000000     0        0 0 3 9ed2eb80 

   9: 0000000000000000FFFF00000400A8C0:0015 0000000000000000FFFF0000646A8873:2291 01 00000000:00000000 02:0002795F 00000000   111        0 1054971 2 b282ca40 43 4 18 4 4 

  10: 0000000000000000FFFF00000400A8C0:0050 0000000000000000FFFF000075246A27:21BA 06 00000000:00000000 03:00001377 00000000     0        0 0 3 94498678 

  11: 0000000000000000FFFF00000400A8C0:0015 0000000000000000FFFF0000646A8873:22CE 01 00000000:00000000 02:0002884F 00000000   111        0 1052403 2 b282f2c0 57 4 31 3 2 

현재 필요한건 remote addr과 st이다. 

 0000000000000000FFFF0000646A8873:22CE  

이부분을 보게 되면 

FF FF 00 00 64 6A 88 73:22CE  

256 256  0 0 100 6 136 115:8910  

이렇게 볼수있고  리틀앤디언이니 

115.136.6.100:8910에서 커넥션했다고 할수있다 

St의 경우엔 상태값을 나타내는데 이 값의 정의를 찾아보면 

cat /usr/include/netinet/tcp.h 

이렇게 되어있고  

enum 

{ 

  TCP_ESTABLISHED = 1, 

  TCP_SYN_SENT, 

  TCP_SYN_RECV, 

  TCP_FIN_WAIT1, 

  TCP_FIN_WAIT2, 

  TCP_TIME_WAIT, 

  TCP_CLOSE, 

  TCP_CLOSE_WAIT, 

  TCP_LAST_ACK, 

  TCP_LISTEN, 

  TCP_CLOSING   /* now a valid state */ 

}; 

뜻을보면 검색을해보니  

LISTEN: 요청을 받을 수 있도록 연결 요구를 기다리는 상태. 즉 포트가 열려있음을 의미. HTTP(80), MAIL(25), FTP(21), TELNET(23) 등. 

SYN_SENT: 로컬에서 원격으로 연결 요청(SYN 신호를 보냄)을 시도한 상태. 

SYN_RECV: 원격으로부터 연결 요청을 받은 상태. 요청을 받아 SYN+ACK 신호로 응답을 상태지만 ACK는 받지 못했다. 윈도우와 솔라리스에서는 SYN_RECEIVED로, FreeBSD는 SYN_RCVD로 표시한다. 

ESTABLISHED: 상호 연결이 된 상태. 

출처: <http://hyacinth.byus.net/moniwiki/wiki.php/TCP%20%EC%97%B0%EA%B2%B0%20%EC%83%81%ED%83%9C%20%EC%9D%98%EB%AF%B8>  

네트워크 관련되어선 핸드쉐이킹이니 아무것도 모르기때문에 뜻만보면 

FIN_WAIT1: 소켓이 닫히고 연결이 종료되고 있는 상태. 원격의 응답은 계속 받을 수 있다. 

FIN_WAIT2: 로컬이 원격으로부터 연결 종료 요구를 기다리는 상태. 

CLOSE_WAIT: 원격이 종료 요청을 받고 연결이 종료되기를 기다리는 상태. 원격으로 부터 FIN+ACK 신호를 받고 ACK 신호를 원격으로 보냈다. 

TIME_WAIT: 종료 준비가 끝났으나 원격의 수신 보장을 위해 기다리는 상태(Apache에서 KeepAlive를 OFF로 해둔 경우, Tomcat 서버를 쓰는 경우 등에서 이 상태를 자주 볼 수 있다.). 마지막으로 ACK를 보냈으나 바로 CLOSED 하지 않고 2 MSL(Maximum segment lifetime) 동안 이 상태를 유지한다. 그 이유는 아래에 자세히 설명. 

LAST_WAIT: 연결은 종료되었고 ACK를 기다리는 상태. 

CLOSED: 완전히 연결이 종료된 상태. 

출처: <http://hyacinth.byus.net/moniwiki/wiki.php/TCP%20%EC%97%B0%EA%B2%B0%20%EC%83%81%ED%83%9C%20%EC%9D%98%EB%AF%B8>  

으로 볼수있다. 

첨부터 상태값 모니터링 상태를 보여주기위한 지식도 필요해서 긁어왓따. 

TIME_WAIT 상태를 유지하는 이유  

TIME_WAIT가 필요한 이유는 2가지가 있다. 《Unix Network Programming》에서는 TIME_WAIT 상태가 있는 이유에 대해 다음과 같이 설명한다. 

첫 번째 이유는 원격의 종료까지 확인하여 신뢰성 있는 연결 종료를 위한 것이고, 두 번째 이유는 만료된 연결의 패킷 제거를 위해서인데, 종료한 소켓이 TIME_WAIT 상태에서 금방 사라지지 않는 이유가 두 번째 이유 때문이다. 이런 상황을 가정할 수 있다. 둘이 패킷을 주고 받다가 정상적으로 연결을 끊었다. 그리고 둘이 곧바로 연결을 해서 방금 전과 같은 포트로 연결되었다. 여기서 문제가 발생하는데 이전에 연결이 되었을 때 보낸 패킷이 라우터의 일시적인 오류로 네트워크를 뱅뱅 돌다가 다시 새로운 연결이 되었을 때 도착할 수 있다. 즉, 모든 패킷 순서를 엄격히 보장하는 TCP에서 원하지 않는 데이터가 수신되었으니 네트워크 오류가 발생할 수 있다. 이 때 TIME_WAIT 상태를 유지하면 같은 포트를 다른 프로세스가 다시 이용하는 것을 막는다. 같은 연결이 발생하지 못하도록 방지한다. 그리고 TIME_WAIT 상태는 2 MLS 시간 동안 유지한다. 즉, 네트워크에 패킷이 존재하는 시간보다 두 배 길게 설정된다. 따라서 TIME_WAIT 상태가 끝나면 네트워크 상에는 이전 연결에 보내졌던 패킷이 모두 소멸되었다고 확신할 수 있으므로 새로운 연결을 만들어도 문제가 발생하지 않을 것이다. 

* TIME_WAIT로 인해 부하가 걸리지는 않는다. 실제로 웹 서버를 운영하면 TIME_WAIT 상태가 수십, 수백 개 생기기도 한다. 수십 개 정도는 일반적인 수준이다. 

* SYN_RECV 상태가 너무 많다면 문제가 생길 수는 있다(DOS 공격을 받고 있을 수 있다.).  

출처: <http://hyacinth.byus.net/moniwiki/wiki.php/TCP%20%EC%97%B0%EA%B2%B0%20%EC%83%81%ED%83%9C%20%EC%9D%98%EB%AF%B8>  

로그를 기준으로 작성 

//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 

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"] 

} 

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

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 -> 웹팩이 파일을 읽는 부분 

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) => {  

}) 

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 등록을 해주면된다. 

잘된다. 

현재 클라이언트 소스들의 구성이다. 

우선 src에 있는 index의 경우는 

import React from 'react' 

import ReactDOM from 'react-dom' 

import 'babel-polyfill' 

import Root from './client/Root' 

let rootElement = document.getElementById('root') 

ReactDOM.render(<Root/>, rootElement) 

실제로 Dom rander를 담당한다. 여기안에는 Client에 Root라는 컴포넌트를 호출한다. 

Root.js를 보면 

import React from 'react' 

import { BrowserRouter} from 'react-router-dom' 

import Welcome from '../shared/Welcome' 

const Root = () => { 

return( 

<BrowserRouter> 

<Welcome/> 

</BrowserRouter> 

) 

} 

export default Root; 

여기에 직접적으로 react-router-dom을 사용하였다.  

여기선 Welcom이라는 컴포넌트를 호출한다. 이 화면은 Moive의 메인화면이 될것이다. 

여기안에서 각각 페이지를 호출하는 과정이 들어가있다. 

import React, {Component} from 'react' 

import { BrowserRouter as Router, Route, Link } from "react-router-dom" 

import {Home , Daily, Weekly} from '../pages/index' 

class Welcome extends Component { 

render() { 

return( 

<div> 

<h1>Welcome movie</h1> 

<Route exact path="/movie" component = {Home} /> 

<Route path="/movie/daily" component ={Daily}/> 

<Route path="/movie/weekly" component ={Weekly}/> 

</div> 

) 

} 

} 

export default Welcome; 

현재는 링크는 하지않고 라우트만 해놨다. 

import { BrowserRouter as Router, Route, Link } from "react-router-dom"; 

여기에도 직접적으로 라우트를호출해서 사용하였다. 

보면 내용은 

Welcome~ 나오게 되고 

Path /moive /movie/daily   그리고 weekly까지 path에 따라서 호출하는 영역이 달라진다. 

이 3가지의 컴포넌트를 각각 호출해도 되지만  이것을 또 묶어놨다. 

Pages/index.js를 보면 

export { default as Home } from './Home'; 

export { default as Daily } from '../DailyBoxOffice/App'; 

export { default as Weekly } from '../WeeklyChart/App'; 

이렇게 실제로 사용된 화면들을 여기에 묶어놓고 사용한다. 

강좌를 보고한거긴한데 왜이렇게하는지는 아직 의문이다.? 

홈이고 

데일리고 

위클리다 

이제 저 welcom movie있는곳에 메뉴를 만들고 링크를 걸어주면될꺼같다. 

라우트의 파라미터 

라우트로 설정한 컴포넌트는 3가지 props를 전달받는다 

History  

Location 

Match  

하나씩 알아보자 

위크에 week라는라우트를 추가해본다. 

전달받은 props를 확인해보면 다음과같은 데이터가 들어가있다. 사용해보자 

생겼다 

그런데 이대로는 weekly 호출할때마다 2개의 컴포넌트가 랜더링될것이다 

Switch 를 이용해보자 

다음과같이 한 개만 선택이 된다.  

Url 쿼리는 

http://localhost:3001/movie/weekly/week?ok=true 

다음과같이 location.search 에 탑재되어 개발자가 알아서 파싱하던가 해야한다. 

V3에서는 공식적으로지원했다고하던데 v4가면서 없어짐 문자열임 

query-string 같은거쓰면 object로 만들어주는데 

우선 하지않겠음 그게 중요한게 아니니깐 

History는  

여태까지 히스토리르 담고있다 

여기 기능중에 중요한건 push나 go goback replace로 다른페이지를 호출할수있다는것이다. 

이렇게 구성하면 

저 버튼 누르면 뒤로가기가 된다 편의성 기능같다. 나중에 모두 테스트해보자 

이제 라우터의 가장 핵심적이고 많이 쓸만한  link를 해보자 

A테그와 같은 효과를 내지만 새로고침 되지않는다 귣 

타입이나 필수값 지정을 위해서 

// 출력 타입을 정할 수있는 공간 

// 또는 값에 숫자나 true false같은값 N/A같은값이 출력되지않게 할려면다음과같이 

static propTypes ={ 

title : PropTypes.string, 

poster : PropTypes.string, 

} 

이런식으로 지정할 수있다. 

과거에는 리액트 패키지에잇었지만 

현재는 설치해야하는듯하다.. 

static propTypes ={ 

title : PropTypes.string.isRequired, 

poster : PropTypes.string, 

} 

이런식으로 구성하고  

Title을 지워버리면 다음과같은 메시지가 나ㅗㄴ다. 

index.js:2178 Warning: Failed prop type: The prop `title` is marked as required in `Movie`, but its value is `undefined`. 

    in Movie (at App.js:31) 

    in App (at index.js:7)