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

프로그래밍

NODE JS - WEBPACK 설치와 사용법 2019.04.10
아이패드 1세데 유튜브 어플 2019.04.09
JAVA - jar 내부/외부 properties 파일 읽기 2019.04.09
jQuery - html 페이지 테이블 엑셀변환 2019.04.02 2
HTML4 - <IMG> 태그 , <a> 태그 2019.04.02

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

아이패드 1세데 유튜브 어플

2019. 4. 9. 22:50

vinaleech.com_YouTube [Google Inc.] (v1.3.0 v1.3.0.5707 3GS Univ RLSA LP os50)-Widow-iCPDA.rc30c5.ipa;

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

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

DNS - (Domain Name System) (0)	2019.02.28

JAVA - jar 내부/외부 properties 파일 읽기

2019. 4. 9. 10:33

◎ DB.properties 파일

▼ 내용

properties 의 파일에 가져올 key = 내용 ; 식으로 적어준다.

어차피 java에선 properties 에서 getproperty 로 읽어오기 때문이다.

driver=org.postgresql.Driver
url=jdbc:postgresql://localhost:5432/postgres
username=postgres
password=goodday

◎ 외부 properties 읽기

▼ 내용

.jar 파일과 .properties의 같은 폴더 안에 잇을경우 파일 이름 DB.properties 만써주고

다른경로에 잇을경운 fileReader 안에 ../../ 같은 상대경로를 써주거나 절대경로를 써주면된다.

import java.io.*;
import java.util.*;
public class EntryMain {

    public static void main(String[] args) {
		FileReader resources= new FileReader("DB.properties");
		Properties properties = new Properties();
        
        try {
            properties.load(resources);
            System.out.println(properties.getProperty("driver"));
            System.out.println(properties.getProperty("username"));
            System.out.println(properties.getProperty("password"));
            System.out.println(properties.getProperty("url"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

◎ 내부 properties 읽기

▼ 내용

내부 properties 에 잇을경운 아래 resource 변수에 패키지 구조와 파일명을 써주면된다

import java.io.IOException;
import java.io.Reader;
import java.util.Properties;
 
public class EntryMain {
 
    public static void main(String[] args) {
        String resource = "config/DB.properties";
        Properties properties = new Properties();
        
        try {
            Reader reader = Resources.getResourceAsReader(resource);
            properties.load(reader);
 
            System.out.println(properties.getProperty("driver"));
            System.out.println(properties.getProperty("username"));
            System.out.println(properties.getProperty("password"));
            System.out.println(properties.getProperty("url"));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

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

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

전자정부 - 트랜잭션 설정하기 (0)	2019.07.02
Spring - 프로젝트 한글깨짐 설정 (2)	2019.07.02
전자정부프레임워크 - MYBATIS , IBATIS 다중DB 연동 (2)	2019.03.12
스프링 Junit 테스트 예제 (0)	2019.02.27
SPRING [SOAP , RESTFUL] 에 대한 이해 (1) (0)	2019.02.27

jQuery - html 페이지 테이블 엑셀변환

2019. 4. 2. 16:37

◎ tabl2excel 라이브러리 사용

▼ 내용

table to excel converter

java 단이나 jsp 단으로 poi나 jxl 라이브러리를 사용할수있지만....

js 로 바꾸고싶어 찾아보다 사용하기 편한 라이브러리를 발견하여 관련된 사용법을 작성합니다.

아래 소스를 다운받아 엑셀로 실행하엿을경우 위 그림처럼 export가 된다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script type="text/javascript" src="../scripts/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../scripts/jquery.table2excel.js"></script>
</head>
<body>
<table id="TableToExcel" border=2 width=710 cellpadding=0 cellspacing=0 class='table table-bordered' align=center style='border-collapse:collapse;' >
    <thead>
        <tr>
            <td>번호</td>
            <td>번호</td>
            <td>번호</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>1</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>2</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>3</td>
            <td>3</td>
        </tr>
    </tbody>
</table>
<iframe id="txtArea1" style="display:none"></iframe>
<!-- IE 호환을 위해서 iframe을 추가해야한다 -->
<!-- IE에서는 txtArea1 의 객체를 찾기 때문이다. 크롬은 없어도 된다. 있어도 상관은 없다. -->

<input type='button' class='btn btn-inverse' value='excel 다운' style='width:100px;height:36px;font-weight:bold;' onclick="ReportToExcelConverter()" />
</body>
<script>
	function ReportToExcelConverter() {
		$("#TableToExcel").table2excel({
			exclude: ".noExl",
			name: "Excel Document Name",
			filename: "report" +'.xls', //확장자를 여기서 붙여줘야한다.
			fileext: ".xls",
			exclude_img: true,
			exclude_links: true,
			exclude_inputs: true
		});
	};
</script>
</html>

위 소스처럼 table의 id를 지정하고 제이쿼리함수 $("#아이디") 를 지정한다음 위 소스처럼 작성하면 table 을 자동으로 excel 형식으로 export 해준다. script 를 불러올때 꼭 jquery 를 부른다음 table2excel.js 를 로드해야한다. 또한 iframe을 써줘야 ie에서 작동이된다.

excel exprort.zip

예제 파일이다.

◎ tabl2excel 공식파일과 사이트

▼ 내용

https://www.jqueryscript.net/table/Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.html

Export-Html-Table-To-Excel-Spreadsheet-using-jQuery-table2excel.zip

https://github.com/rainabba/jquery-table2excel

jquery-table2excel-master.zip

위에 링크가 공식문서고 나는 아래에서 다운받아서 작업하엿기 때문에 둘다 링크를 남긴다

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

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

jQuery 란? (0)	2019.02.27
제이쿼리의 기본문법 (0)	2019.02.27
jQuery - 속성 제어 api (JS의 ELEMENT와 이어짐) (0)	2019.02.27
JQuery - NODE 객체 (0)	2019.02.27

HTML4 - <IMG> 태그 , <a> 태그

2019. 4. 2. 09:37

◎ <IMG> 태그

<img src="twitterlogo.jpg" alt="트위터">

▼ 내용이 없는 경우는 빈 대체 텍스트 제공 (alt 속성 이용)

alt의 대체 텍스트를 넣을경우 이미지를 있는그대로 표현할수 있는 텍스트를 넣는게 좋다. 예를들어 트위터 로고 img 파일을 너놓고 alt 속성에 새라고 넣으면 이건 잘못된 예시다. 이유는 시각장애인들의 접근성을 위해서이다.

<img src="연혁도.jpg" alt='수자원공사이력' longdesc='text.html' >

▼ 아래처럼 이미지내용이 길거나 복잡한 경우는 longdesc, 대체 콘텐츠 등으로 추가정보 제공

연혁도 같은 img파일의 텍스트가잇는 것 같은경우엔 longdesc='long.html' 같은걸 써서 텍스트를 따로남깁니다.

또한 다른방법으로는 보통 연혁도같은경우 ol li 태그등을 이용하여 텍스트로 표현해주는데 따로 html을 만드는게아니라 이미지 바로밑에 텍스트를 넣어준다 그리고 텍스트의 스타일을 position:absolute: left:-5000% 를 사용하여 넣어준다 이유는 일반사용자는 그림을보고 이해하지만 시각장애인들은 웹페이지를 대신 읽어주는 기계를 사용해서 듣기때문이다. 이미지파일은 못읽고 대체텍스트alt나 그밑에 숨긴텍스트를 읽어서 들려주기때문이다. 간혹 display none으로 하는경우도 있는데 이경우 시각장애인의 장비가 읽어주지 못하는 경우가생긴다. 그래서 position으로 위와같이 작성하는게 좋다

▼ longdescription 확인방법. (마우스 우측버튼 > 설명보기)

◎ <a> 태그

▼ <a> = Anchor (닻)

▼ href = Hypertext Reference

▼ 페이지와 페이지를 연결하는 link

▼ target 속성으로 페이지 열리는 방식 제공 (_blank 라는 속성을 넣어주면 새창열림)

<a href="url" target="_blank"> 텍스트 ></a>

▼ 다른 도메인 연결시 http:// 까지 제공해야함

▼ 파란색 텍스트에 밑줄로 기본제공됨

▼ href의 여러가지 이벤트 #을 주게되면 그뒤에 나오는 id값을 찾아서 스크롤이 이동된다.

1. <a href=""> 링크값에 내용이 없을경우</a>
2. <a href="#">#만 제공하는 경우 </a>
3. <a href="#content">내부링크를 제공하는 경우 </a>
4. <a href="#a">없는 아이디를 넣는경우 </a>

1번 : 내용이 없을경우 IE의 경우는 내컴퓨터가 열림 , Chrome 는 아무 변화없음
2번 : #만 제공하는경우엔 scroll이 맨위로 가게됩니다
3번 : #content는 #뒤에 이름을 써줄경우 내부링크로 작동되어 
      태그의 id='content' 인 태그를 찾아서 scroll 이 이동됩니다.
4번 : #a #뒤에 없는 id를 넣을경우 현재 scroll 고정, 현재scroll에서 새창이나 
      다른 이벤트를 줄경우 사용 #none를 쓰는사람도있는대 #a 로 쓰는게 바람직하다

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

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

HTML4 - form 태그의 enctype 속성 (파일 업로드) (3)	2019.04.16
HTML4 - Entity Code (0)	2019.04.15
HTML4 - Inline,Block 의 차이 , <h1>~<h6> 태그 (0)	2019.04.02
HTML 태그 (Input태그 속성{pattern,required,autofocus,placeholder}) (0)	2019.02.28
HTML5 태그 (2) - article,section,nav (0)	2019.02.28

PREV 1 2 3 4 5 6 7 8 ···13 NEXT

아빠개발자의 노트