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

프로그래밍

HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 2019.04.02
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

HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그

2019. 4. 2. 09:10

◎ Block Element

div , p , ul , ol , li , dl , dt , dd , h1 ~ h6 , pre
noscript , table , hr , form , blockquote , address , fieldset

▼ 테트리스 블록처럼 촘촘이 쌓여가는게 특징이다.

▼ 블록요소 안에 블록요소를 포함할수 있다.

▼ 블록요소 안에 인라인요소를 포함할 수 있다.

▼ 일부 블록요소는 블록요소를 포함할 수 없다. - <address> , <h1>~<h6> , <p> 등

▼ 가로사이즈가 100% 이다.

▼ 가로,세로사이즈 적용 가능하다.

▼ 안쪽여백(padding), 바깥쪽여백(margin) 모든 방향이 다 적용 가능하다.

◎ Inline Element

a , span , img , input , strong , samp , var , cite , abbr
q , sub , sup , select , b , strong , em , ins , u , i , textarea

▼ 한 줄로 선처럼 나열된다.

▼ 안쪽여백(padding), 바깥쪽여백 (margin) 은 좌우측만 적용된다.

▼ 가로(width), 세로(height) 사이즈 적용이 안된다.

▼ 일부 요소는 적용 가능하다 .- input , textarea , select , img

▼ 인라인 요소안에는 인라인 요소만 포함한다. 즉, 인라인 요소 안에 블럭요소를 포함할 수 없다.

▼ 자신의 부모의 가로폭보다 현재의 가로폭이 길면 다음줄로 넘어간다.

◎ Heading Element (Head)

<h1> , <h2> , <h3> , <h4> , <h5> , <h6>

▼ 제목(콘텐츠 블록)

▼ inline 요소와 텍스트만 포함할 수 있음

▼ 계층구조를 준수해야함 , 제목을 건너뛰는 구조는 바람직하지 않음 - h1,h2,h3,h4,h5,h6 요소 순서로 나열

▼ <h1> 요소는 한페이지에 한번만 제공함

▼ 굵은 글씨

▼ 제목과 관련된 내용의 소제목들은 h1 h2 h3 으로 쓰지만 관련없는 제목들은 상위제목가 같은 태그를 쓴다.

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

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

HTML4 - Entity Code (0)	2019.04.15
HTML4 - <IMG> 태그 , <a> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28
HTML 태그 (0)	2019.02.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 ···3 4 5 6 7 8 9 ···13 NEXT

아빠개발자의 노트