'프로그래밍/NodeJS' 카테고리의 글 목록 (2 Page)

프로그래밍/NodeJS

NODE JS - WEBPACK 설치와 사용법 2019.04.10
NODE JS - express URL 파라미터 2019.03.28 2
NODE JS - 데이터 압축하기,URL로 파일접근하기 2019.03.27
NODE JS - PM2 패키지 설치 2019.03.27 3
NODE JS - 보안 모듈[sanitize-html] , XSS란? 2019.03.21

NODE JS - WEBPACK 설치와 사용법

2019. 4. 10. 10:03

◎ 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 에 관한게 있다 그걸 참조.

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - pug(mixin) 사용법 (0)	2022.01.05
NODE JS - multer (파일 업로드) (0)	2019.04.10
NODE JS - express URL 파라미터 (2)	2019.03.28
NODE JS - 데이터 압축하기,URL로 파일접근하기 (0)	2019.03.27
NODE JS - PM2 패키지 설치 (3)	2019.03.27

NODE JS - express URL 파라미터

2019. 3. 28. 11:03

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);

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - multer (파일 업로드) (0)	2019.04.10
NODE JS - WEBPACK 설치와 사용법 (0)	2019.04.10
NODE JS - 데이터 압축하기,URL로 파일접근하기 (0)	2019.03.27
NODE JS - PM2 패키지 설치 (3)	2019.03.27
NODE JS - 보안 모듈[sanitize-html] , XSS란? (0)	2019.03.21

NODE JS - 데이터 압축하기,URL로 파일접근하기

2019. 3. 27. 10:04

◎ 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

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - WEBPACK 설치와 사용법 (0)	2019.04.10
NODE JS - express URL 파라미터 (2)	2019.03.28
NODE JS - PM2 패키지 설치 (3)	2019.03.27
NODE JS - 보안 모듈[sanitize-html] , XSS란? (0)	2019.03.21
NODE js - FORM 데이터 가져오기 (0)	2019.03.21

NODE JS - PM2 패키지 설치

2019. 3. 27. 09:51

◎ 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

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - express URL 파라미터 (2)	2019.03.28
NODE JS - 데이터 압축하기,URL로 파일접근하기 (0)	2019.03.27
NODE JS - 보안 모듈[sanitize-html] , XSS란? (0)	2019.03.21
NODE js - FORM 데이터 가져오기 (0)	2019.03.21
NODE JS - 모듈이란? , module.export 와 exports의 차이 (1)	2019.03.20

NODE JS - 보안 모듈[sanitize-html] , XSS란?

2019. 3. 21. 14:05

◎ 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> 무시가 될까?

저작자표시 비영리 변경금지

'프로그래밍 > NodeJS' 카테고리의 다른 글

NODE JS - 데이터 압축하기,URL로 파일접근하기 (0)	2019.03.27
NODE JS - PM2 패키지 설치 (3)	2019.03.27
NODE js - FORM 데이터 가져오기 (0)	2019.03.21
NODE JS - 모듈이란? , module.export 와 exports의 차이 (1)	2019.03.20
NODE JS - File System 파일 생성,삭제,수정,동기와 비동기 (0)	2019.03.20

PREV 1 2 3 4 NEXT

아빠개발자의 노트