깍돌이의 _WebQA(SQA)

오늘의 끄적끄적

1. CSS 

display : inline, dispaly : block 속성

block - 한줄에 나열하지 않고 그 자체를 한줄로 표현  (자연 스러운 줄 넘김이 가능 )<p> 태그

-> margin,width,height 속성이 정의 가능 

 ( 기본적으로 width 가 100%)

inline 줄을 바꾸지 않고 다른요소와 하께 한 행에 위치하려는 성향 <a> 태그

-> margin-top,margin-bottom 속성을 정의해도 적용 X  

상하 여백은 line-height 속성에 의해 발생 

width 와 height 속성이 적용되지 않음 

-> inline 너비와 높이는 태그가품고 있는 내부 요소의 부피에 맞춰집니다.

최소한의 간격을 유지하기 위해서 연속으로 사용된 경우는 5px의 내부 margin 이 자동 발생

(웹 브라우저의 기본 설정 때문)

inline-block 

margin-top,margin-bottm 정의 가능 상하 여백을 margin , line-height 를 모두 제어가능

width 와 height 정의 가능

기본적으로는 태그가 품고있는 내부 요소에 의해 부피가 맞춰짐

inline-block 끼리 사용시에는 최소한의 간격을 유지하기 위해서 좌, 우 약 5px 가량의 외부 여백이 발생

margin-left margin-right 를 사용시에 여기에 추가로 여백을 줄수 있음

NPM (Node Package Manager) 노드에서 사용하는 패키지 

uglify-js : 경량화 도구로써 자바스크립트 코드에 대해 공백을 제거하거나 코드를 가볍게 만들어줌

우선 www.npmjs.com 에 접속 

find packages 에 uglify-js 검색 

검색 후 리스트 중 최상단에 uglify-js (alexlamsl) // JavaScript parser, mangler/compressor and beautifier toolkit 클릭

안에 설명에 따른 설치를 보면

npm install uglify-js -g

또는

npm install uglify-js 로 설치를 할수 있으며

**ps -g옵션은 글로벌이란 뜻으로 어느 위치에서나 해당 명령어를 사용할수 있게 해주는 옵션 

( centos 기준으로  bash_profile에 넣어서 처리를 해주는게 아닌가 싶음 *추측 -> 확인되는 대로 글 수정 예정 )

-g 가 없을 시에는 lcoal 로 되며 현재 프로젝트 안에서만 사용이 가능 하다 

설치 후에 사용은 uglifyjs [input files] [option] 으로 사용한다고 적혀있다.

npm install uglify-js -g 로 설치 한 후에

uglifyjs 로 명령으로 실행하기전에 text.js를 생성

ugly.js

function ugly(ugly)

{

console.log("ugly");

console.log(ugly);

}

ugly("text Ugly");

와같이 작성후  (ESC 누른후 :  wq 엔터 -> vi 저장 단축키)

node ugly.js 실행시 다음과 같은 화면이 나타남 

이제 uglifyjs ugly.js 실행

 해당  입력이 위와같이 변함을 확인 할 수 있다. 

-m 옵션을 써서 uglifyjs ugly.js -m 을 써 주게 되면

위의 Local 변수인 ugly -> l 로 변환됨을 할수 있다. 이러한 변수명 까지 수정해준다.

새로운 파일로 추출해내기 위해서는

uglifyjs ugly.js -o ugly.min.js  와 같이 입력시 

ugliy.min.js 로 나타남을 확인 

해당 옵션을 같이 써서

uglifyjs ugly.js -m -o ugly.min.js 로 하게 되면 Local 변수로 수정하면서 다른 파일로 추출이 됨을 확인할수 있다.

text.js 작성

 const http = require('http');

 const hostname = '1.1.1.1';     // 임시적으로 수정함 

 const port = 3000;

 const server = http.createServer((req, res) => {

   res.statusCode = 200;

   res.setHeader('Content-Type', 'text/plain;charset=utf-8');

   res.end('한글 인코딩 테스트  \n');

 });

 server.listen(port, hostname, () => {

   console.log(`Server running at http://${hostname}:${port}/`);

 });

외부 서버에서 http://1.1.1.1:3000 으로 접속시에

확인 가능  text/plain; 뒷부분에 charset=utf-8 을 입력시에 한글 인코딩도 지정 해줄수 있습니다.