반응형


◎ WEBPACK



▼ 내용

WEBPACK 이란 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다. ES6 문법이라든가 SCSS 같은 파일들을 웹브라우저에서 읽을수 있게 ES5,CSS 로 변환시켜준다.

▼ 설치법

webpack,webpack-cli 설치

webpack : node 에서 webpack를 사용하기 위함.

webpack-cli : 터미널에서 webpack를 사용하기 위함.

npm install webpack webpack-cli

▼ extract-text-webpack-plugin 설치법

loader 를 사용하기위한 모음 엄마같은놈(?)

npm install extract-text-webpack-plugin@next //@ 뒤에 next는 최신버전(beta)으로 설치하기 위함이다. 만약 뒤에 버전 2.4 를 설치하면 버전 2.4를 설치한다. //이건 플러그인일 뿐이고 webpack.config 에 plugins: [new ExtractCSS("styles.css")] 를 써줘야한다

▼ loader 설치

npm install css-loader postcss-loader sass-loader node-sass babel-loader

▼ post css 의 추가 플러그인 과 그외 패키지 설치

npm install autoprefixer -------------- 사용법---------------------- const autoprefixer = require("autoprefixer"); { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { // options 라는 프로퍼티를 추가해서 함수를 만들어 배열로 리턴해준다 plugin(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } } ----------------------------------------------------- npm install @babel/polyfill // 최신문법을 이해하게 도와주는 플러그인


▼ 실행방법

기존엔 Node 에서 npm run start로 하나만 실행하였다면 이제는 콘솔 2개로 하나는 start에 썻던걸 사용하고 하나는 webpack을 실행해야한다. 그러기 위해 아래 소스를 package.json 에 적용시켜주자.

"scripts": { "dev:server" : "nodemon --exec babel-node init.js --delay 2", "dev:assets" : "webpack" //"start": "nodemon --exec babel-node init.js --delay 2" },

그리고 그후 제일 상위에 webpack.config.js 란 이름을 만들어 환경설정을 해줘야한다. 만약 이 이름을 사용하지않고 다른 이름을 사용하려면.. 해당 config 의 파일 이름을 package.json 에 지정해줘야한다.

"dev:assets" : "webpack" --config [파일명]

webpack.config.js 는 서버코드를 작성하면안된다 오로지 클라이언트코드를 위한걸 작성해야한다

그렇기 때문에 wabpack.config.js 에는 ES6 문법또는 최신 문법을 쓰면 안된다. (EX: import 등)

조금더 자세한 설명은 webpack config 파일의 주석을 보시면되겠숨돠.

터미널에서 실행할때는

npm run dev:assets // CSS, JS 변환 실행 명령 npm run dev:server // 서버 실행 명령 // 결국엔 둘다 실행 1번 서버 2번 어셋

▼ webpack.config.js

const path = require("path"); const ExtractCSS = require("extract-text-webpack-plugin"); const autoprefixer = require("autoprefixer"); const MODE = process.env.WEBPACK_ENV; const ENTRY_FILE = path.resolve(__dirname,"assets","js","main.js"); //path.resolve 는 이전경로는 무시하고 맨 마지막 경로만 출력 ex) path.resolve('/a', '/b') // Outputs '/b' // 또한 path.resolve 는 항상 절대url 을 생성 그리고 이것을 만들기 위해 현재의 위치를 기본으로 사용 const OUTPUT_DIR = path.join(__dirname,"static"); //path.join 은 이전 인수까지 전부 출력 ex) path.join('/a', '/b') // Outputs '/a/b' //__dirname는 파일의 절대경로 const config = { entry : ["@babel/polyfill", ENTRY_FILE], //entry 는 파일이 들어오는곳 mode : MODE, module : { //module 이 의미하는건 module를 발견할떄마다 rules 라는 조건을 따르라고한다. rules: [//rules는 test의 정규식을 따른걸 만나면 use 를 사용한다. //rules는 특정 확장자의 파일을 브라우저가 이해할수있게 변환해준 역활을 한다 { test : /\.(scss)$/, use : [ { loader : 'babel-loader' //js es6 문법을 구식으로 바꿔줌 } ] }, { test: /\.(scss)$/, //확장자가scss 인파일을 찾는다. //정규식 시작은 /\ 로시작하며 마지막엔 $/ 로 끝난다 use: ExtractCSS.extract([ //use 의 plugin 은 내부에서 또다른 plugin을 사용하고있다. //그 이유는 scss 파일을 일반적인 css 파일로 통역해야한다 { //loader 란 건 기본적으로 webpack에게 파일을 처리하는 방법을 알려주는놈 loader: "css-loader" //이걸 사용해야 webpack 가 css를 이해한다 }, { loader: "postcss-loader", //CSS의 호환성과 관련된걸 해결해줌 EX) IE 지원문법변환 options: { plugins(){ return [autoprefixer({browsers : "cover 99.5%"})]; } } }, { loader: "sass-loader" //scss or sass 를 일반 css로 바꿔주는 plugin } ]) } // 원래대로라면 프로그래밍은 처음부터 차례대로 진행되지만 config 에선 거꾸로 작업을 한다. // 그래서 sass파일읽고 -> post.css 호환성변환 -> css변환 이렇게 순서적으로 처리하는 작업을 // 진행방향역순으로 loader를 써준다라 css로더 , 호환성변환 , sass 로더 를 사용한다 ] }, output : { //output 은 파일이 나가는곳 이다. output 은 객체여야 한다 path : OUTPUT_DIR, filename : "[name].js" //[name].[format]" 파일의 이름과 파일의 확장자,형식 이다. }, plugins: [new ExtractCSS("styles.css")] // use: ExtractCSS.extract 로 extract에 저장한 파일을 export 해준다 }; //entry 로 sass or scss 파일을 읽어서 css로변환해주고 그 변환된 파일을 output 으로 파일생성해준다. module.exports = config;

▼ pakage.json

{ "name": "wetube", "version": "1.0.0", "description": "", "main": "index.js", "dependencies": { "@babel/core": "^7.3.4", "@babel/node": "^7.2.2", "@babel/polyfill": "^7.4.3", "@babel/preset-env": "^7.3.4", "autoprefixer": "^9.5.0", "babel-loader": "^8.0.5", "body-parser": "^1.18.3", "cookie-parser": "^1.4.4", "css-loader": "^2.1.1", "dotenv": "^7.0.0", "express": "^4.16.4", "extract-text-webpack-plugin": "^4.0.0-beta.0", "helmet": "^3.16.0", "install": "^0.12.2", "mongoose": "^5.4.20", "morgan": "^1.9.1", "multer": "^1.4.1", "node-sass": "^4.11.0", "npm": "^6.9.0", "postcss-loader": "^3.0.0", "pug": "^2.0.3", "sass-loader": "^7.1.0", "webpack": "^4.29.6", "webpack-cli": "^3.3.0" }, "devDependencies": { "eslint": "^5.16.0", "eslint-config-airbnb-base": "^13.1.0", "eslint-plugin-import": "^2.16.0", "nodemon": "^1.18.10" }, "scripts": { "dev:server": "nodemon --exec babel-node init.js --delay 2", "dev:assets": "webpack --mode development -w",// "build:assets" 는 내코드를 server 에 올려준다 // -w 를 붙이는 이유는 watch 란 뜻이다 css 파일을 수정할때마다 webpack을 다시 실행시키기 싫어서 써놧다 //webpack.config 파일을 수정할경운 다시실행해야한다 "build:assets": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC" } //"start": "nodemon --exec babel-node init.js --delay 2" //WEBPACK_ENV=development = webpack --mode 를 붙인 이유는 mode를 설정해주기 위해서

◎ WEBPACK - LOADER 부연설명

▼ POST CSS

POST CSS 를 통해서 Autoprefixer 을 사용하면 각각의 브라우저 별로 호환되게 바꿔준다

:fullscreen{ } ------------------------- :-webkit-:full-screen{ // webkit 은 safari , chrome } :-moz-:full-screen{ // -moz- 는 firefox } :full-screen{ }

▼ SASS 변수만들기

//Variables.scss $bgColor : red; $sexyColor : peru; //styles.scss body{ background-color: $sexyColor; color : $bgColor; } //이렇게 scss 는 변수를 사용할수 있다.

◎ PARCEL

▼ 내용

PARCEL 이란 WEBPACK 과 같은 모듈 번듈러이다. 다양한 신기술? 등의 프로그래밍파일들을 웹페이지에서 호환되도록 변환해주는 번듈러이다.

▼지원 파일

 ●CSS

 ●SCSS

 ●Images

 ●Babel

 ●PostCSS

 ●PostHTML

 ●TypeScript

 ●ReasonML/BuckleScript

 ●ReasonReact

설치법은 CSS 메뉴에 POST-CSS , PARCEL 에 관한게 있다 그걸 참조.


반응형
반응형

express 의 대한 내용을 그전에 설치법과 같이 포스팅을 하였지만 조금더 추가 설명하기 위해 포스팅을 시작한다.

◎ express의 라우팅 기본형식

▼ 내용

express 를 사용하여 라우팅을 할경우 기본방식으로 아래와 같이 쓴다.

const app = express(); app.get('/',(request,response) => { response.writeHead(200); response.end("응답하라 1997"); }); app.listen(포트번호);

◎ express 동적URL

▼ 내용

URL 경로를 동적으로 path를 파라미터로 가져올경우

요청주소 http://localhost:3000/id/asd/pass/password

app.get('/id/:id2/pass/:pw',(request,response) => { console.log(request.params); //{ id2: 'asd', pw: 'password' } }); //위의 경로중 : 붙은건 변수라 생각하면된다 어떤값이들어와도 된다

◎ express get 파라미터

▼ 내용

URL 주소를 get 방식으로 파라미터를 가져올경우

http://localhost:3000/page?id=abcd

app.get('/page',(request,response) => { console.log(request.query); //{ id: 'abcd' } });

여기서 get방식으로 http://localhost:포트번호/id?id=undefined


◎ res.send 와 res.end 차이

▼ res.send

res.send ([body])

express의 코어에서 작동되며 HTTP 응답 헤더 필드를 자동으로 지정하고 자동 HEAD 및 HTTP 캐시 최신 상태 지원을 제공합니다. 즉 http 헤더를 설정하지않으면 body의 객체에 따라 자동으로 헤더가 설정된다.

▼ res.send

res.send ([데이터],[인코딩])

node의 http.ServerResponse 의 response.end() 메소드를 사용합니다.응답을 신속하게 종료할때 사용됩니다.

▼ HTTP 헤더 설정

아래 소스코드와 같이 res.end 는 http 의 헤더를 writeHead로 작성하고

response.writeHead(300) response.end(template2);

아래 소스코드와 같이 res.send 는 http 의 헤더를 set로 작성한다

response.set(300); response.send(template2);


반응형
반응형

◎ compression (압축)

▼ 내용

post 또는 get 의 request 데이터를 압축해주는 미들웨어이다.

▼ 설치법

npm install compression

▼ 사용법

var compression = require('compression'); app.use(compression());

상단에 이렇게만 써주면 데이터를 자동으로 압축해준다. 그리고 아래 사진을보면 위의 저 모듈을 써준것만으로도 내부적으로 리소스 자원 데이터를 이렇게 압축해서 빠르게 로딩될수있도록 한다.


◎ URL로 파일 접근하기

▼ 내용

express.static 내부에있는 파일을 URL로 접근할수 있게 해주는 미들웨어다.

express 모듈 안에 있는 미들웨어다.

▼ 사용법

express.static('경로',[options]);
app.use(express.static('./lib/img'));

이렇게 할경우 ./lib/img 폴더에 있는 모든파일을 url로 접근할수 있다.

만약 ./lib/img/1.jpg 에 있는 파일을 url로 접근하려면 http//localhost:3000/1.jpg 이렇게 파일로 접근할수 있다. 즉 특정폴더를 url로 접근할수잇게끔 열어주는 기능이다.


◎ 에러처리

▼ 내용

url 경로를 에러처리할경우 사용된다. 미들웨어의 순서적으로 작동하는 방식을 이용하여 사용한다.아래구문을 app.js의 맨아래에 넣어서 사용한다. 이유는 이 구문을 만나기전까지 res.send 객체를못만나면 페이지가 없는것이기 때문이다.

app.use(function (req,res,next){ res.status(404).send('페이지를 찾을수 없습니다'); });

또한 404에러 외에 다른 에러들은 미들웨어 함수의 중간에 next(err); 로 던져지게되면

밑아 소스의 있는 미들웨어가 실행되어 에러를 처리합니다 밑에 문구는 맨아래에 넣는다.

app.use(function (err,req,res,next){ res.status(500).send('500페이지를 찾을수 없습니다'); });

◎ express-generator

기본 express구조를 사용하게만들어준다.

npm install express-generator -g
express myapp


반응형
반응형

◎ PM2 란?

▼ node js를 실행하는 프로세스를 제어할수있다.

다중으로 실행 , 끄기 , 강제로종료해도 프로세스가 다시살아나기 등등을 할수 있는 패키지이다


◎ PM2 패키지 설치법

▼ 내용.

npm install pm2 -g //global 이란 뜻이다. 어디서든 사용할수 있다는 옵션이다

◎ PM2 패키지 사용법

▼ 내용

아래와 같이 실행하면 아래 사진처럼 현재 status를 알려준다

실행되고 다시 콘솔로 오는거 같다

pm2 start app.js pm2 start app.js --watch // 실행할 js파일을 --watch 옵션으로 실행하면 소스 수정후 저장하면 // 자동으로 node를 재시작해줘서 소스적용이 된다. pm2 start app.js --watch --no-daemon //백그라운드로 실행되는 프로그램을 데몬이라고 부릅니다. //nodaemon을 치면 백그라운드 실행이아니라서 실행후 바로 log를 볼수있게됩니다. pm2 start app.js --watch --ignore-watch="(파일경로)" --no-daemon //이렇게 실행할경우 해당 파일경로에 파일들이 수정될때는 서버가 재시작 하지 않는다


◎ PM2 모니터링

▼ 내용

pm2 모니터링 왼쪽 창이 현재 실행중인 프로세스의 목록이다

pm2 monit


◎ pm2 list 확인

▼ 내용

pm2 의 현재 실행중인 프로세스 status 확인

pm2 list



◎ pm2 프로세스 종료

▼ 내용

pm2로 실행한 프로세스를 종료할수 있다.

pm2 stop [App name] // pm2 list 로 확인한 appname 이름을 써주면된다. pm2 kill // pm2 로 시작한 모든 프로세스를 죽인다


◎ pm2 로그확인

▼ 내용

pm2로 실행할경우 console에 아무것도 안찎혀 로그를 안남기는데

실시간으로 log를 보여주는 명령어다

pm2 log




반응형
반응형

◎ XSS 란?

크로스 사이트 스크립팅 (또는 사이트 간 스크립팅) 이라고 불리며 영문명칭은 cross-site scripting 로 영문약어는 xss 이다 웹 애플리케이션에서 많이 나타나는 취약점의 하나로 웹사이트 관리자가 아닌 사용자가 웹페이지에 악성 스크립트를 삽입할수 있는 취약점이다.

그래서 웹개발자들은 주로 xss필터를 고려하여 개발을 한다. sanitize-html 은 이러한 공격 기법을 막기위해 나온 nodejs의 모듈이다.


◎ sanitize-html 란?

▼ 내용

sanitize : 소독하다

html의 input 또는 textarea 또는 기타등등의 사용자 입력정보에 <script>코드기술</script> 이란 정보를 적을시 웹브라우저에서 저게 txt가 아닌 script 기술로 받아들여서 사용자가 이를 악용하여 악성스크립트를 집어넣을 수 있다.

이것을 방어하기 위한 node의 패키지모듈로 <script>,<a> 등등 기타 태그들을

변환시켜주어 악성스크립트로 변질되는 것을 막아주는 보안 라이브러리다.


◎ sanitize-html 설치방법

▼ 내용

-S : 해당프로젝트에서만 적용

-g : 전체 글로벌 적용

npm install -S sanitize-html

◎ sanitize-html 사용법

▼ 공식문서

var sanitizeHtml = require('sanitize-html'); var dirty = 'some really tacky HTML'; var clean = sanitizeHtml(dirty);

▼ 예제

var sanitizeHtml = require('sanitize-html'); var dirty = `스크립트는 과연 <script>some really tacky HTML</script> 무시될까? h1태그는 <h1>링크</h1> 무시가 될까?`; var clean = sanitizeHtml(dirty); console.log(clean); /*스크립트는 과연 무시될까? h1태그는 링크 무시가 될까?*/

▼ 결과


▼ 내용

위 처럼 sanitize 를 사용하면 script 같은 태그는 출력이 안되게하고, h1 태그같은경우도 태그는 없애 버린다. 하지만 웹에서 실행해보면 글씨포인트는 커진상태로 태그만 사라진다. 이처럼 악성스크립트를 사전에 차단시킬수 있다. xss필터 같은경우로 사용할수 있다.


◎ sanitize-html 태그 허용하기

▼ 내용

모든걸 sanitize 로 자동 clean 시키는게아니라. 허용적으로 태그를 허용하게 할수도있다.

▼ 공식문서

// Allow only a super restricted set of tags and attributes clean = sanitizeHtml(dirty, { allowedTags: [ 'b', 'i', 'em', 'strong', 'a' ], allowedAttributes: { 'a': [ 'href' ] }, allowedIframeHostnames: ['www.youtube.com'] });

▼ 예제

var sanitizeHtml = require('sanitize-html'); var dirty = `h1태그는 <h1>링크</h1> 무시가 될까?`; var sanitizedDescription = sanitizeHtml(dirty,{ allowedTags:['h1'] }); console.log(sanitizedDescription); //h1태그는 <h1>링크</h1> 무시가 될까?


반응형

+ Recent posts