웹팩

in javascript, webpack

webpack.config.js

webpack.config.js 파일은 웹팩에 대한 기본적인 설정을 하는 파일입니다.

심플한 실제 파일 구성

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var path = require('path')	// output 속성에서 사용할 노드 path 라이브러리 저장
var webpack = require('webpack')	// 웹팩 플러그인에서 사용할 웹팩 라이브러리를 저장

// 아래부터가 실질적인 웹팩의 설정 내용
module.exports = {
    entry: './src/main.js',	// 웹팩으로 빌드할 파일 지정(해당 파일의 앱의 첫 시작 파일이 되는 것)
    output: {   // output은 build 후에 생성 될 파일들에 대한 설정
        path: path.resolve(__dirname, './dist'),	// 빌드후에 결과 파일 저장 될 디렉토리
        publicPath: '/dist/',		// 이미지 파일 같이 주소의 앞에 prefix로 붙여주어 주소에 접근 하도록 해주는 것
        filename : 'build.js'		// 빌드하고 난 후 결과 파일
    }
    module: {   // 지금까지는 loader를 사용하는 것 정도만 확인 했음
        rules: [
            {
                test: /\.vue$/,	// 로더가 적용 될 대상 파일 지정(정규식)
                loader: 'vue-loader' 	// loader는 사용할 로더 지정
            },
            {
                test: /\.js$/
                loader: 'babel-loader',
                exclude: /node_moules/  // 해당 디렉토리에서의 탐색은 제외하겠다
            }
        ]
    },
    resolve: {
        alias: {	// 해당 하는 경로를 @로 대신 사용 가능하다, 여러개 편의성있게 등록 가능하다
            '@': path.resolve(__dirname, 'src/')
        },
        extensions: ['*', '.js', '.vue', '.json']	// 해당하는 확장자들을 import하게 도와주는 역할
    },
    devtool: '#eval-source-map'	// 웹팩으로 빌드된 파일로 웹앱 구동시에 개발자 도구에서 사용할 디버깅 방식 지정
}
```       

## 웹팩 설정 구성에 사용 되는 용어 정리

### 1. entry

entry : 웹팩을 통해서 build를 할 대상 파일을 지정하는 속성
- 해당 파일에는 전체 애플리케이션 로직과 필요한 라이브러리를 로딩하는 로직이 들어가게 됩니다.

1
2

### 2. output

output : 웹팩으로 빌드한 결과물의 위치와 파일이름 등 세부옵션을 설정하는 속성

1
2

### 3. loader

loader : 웹팩으로 빌드할때 html, css 파일등을 자바스크립트로 변환하기 위해 필요한 설정을 정의

1
2

### 4. plugin

plugin : 웹팩으로 빌드 하고 나온 결과물에 대해 추가기능을 제공하는 속성
- 한마디로 필수옵션은 아니지만 빌드할때 혹은 결과물에 추가적인 기능을 적용하고 싶을 때 사용

1
2

### 5. resolve

resolve : 웹팩으로 빌드할때 해당 파일이 어떻게 해석되는지 정의하는 속성
- 예) 라이브러리 로딩시 버전은 어떤걸로 하고, 경로는 어디로 하고 등에 관한 것

Comment and share

axios

in javascript, 라이브러리

axios 정의

axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행한다. 내부적으로 직접 XMLHttpRequest를 사용하지 않고 AJAX 호출을 할수있다.
그리고 axios는 Promise 기반 api이다.

api는 따로 관리한다.

axios를 사용할 vue 페이지에서 직접 import axios를 통해서 사용하지 않고 api 파일을 따로 작성하여 해당 메소드를 호출 하는 방식으로 설계를 한다.

api에서는 직접 then 및 catch 작업을 하지 않는다.

아래와 같이 호출만 하고 Promise를 return 하는 방식으로 작성한다.

1
2
3
function test() {
    return axios.get(...);    
}

API 작성 방법

1. 기본 HTTP Request & Response와 관련된 기본설정을 한다.
1
2
3
const config = {
    baseUrl: 'http://127.0.0.1/test/'
}
2. API 함수들을 정리한다.
1
2
3
4
5
6
7
export const getRoleList = function() {
    return axios.get(...);
}

export const getUserList = function() {
    return axios.get(...);
}

Comment and share

숫자와 관련된 팁

in javascript, 유용한팁, number

1. 숫자를 천자리마다 콤마찍기

사용조건

1
2
1. 숫자만 가능
2. 숫자를 변수에 저장 후 가능

소스코드

1
2
var number = 123
var result = number.toLocaleString()

정리

  1. 크롬에서는 작동을 하나 모든 곳에서 통하는 소스코드인지는 아직 확인 불가
  2. 심플하게 만들수 있다는 장점
  3. 숫자값인 문자열로는 사용불가능하고 필히 숫자 타입으로 바꿔줘야 함
  4. 문자열을 대상으로 toLocaleString 메서드를 호출하면 그냥 그대로 나옴
  5. 결과값은 당연하게도 문자열

Comment and share

Map 타입

in javascript, es6

1. Map 생성하기

1
2
3
4
5
6
7
let map = new Map();
let map = new Map([
    ["key1", "value1"],
    ["key2", "value2"],
    ["key3", "value3"],
    ["key4", "value4"],
])

new Map([{id: 1},{id: 2},{id: 3},{id: 4}])이런식으로 작성하려고 하니까 안됨. Map생성시 파라미터는 이차원배열로 넣어야 할듯

2. Map에 값 추가하기

1
2
let map = new Map();
map.set('key', 'value')

값을 추가하는 부분에서 Map와 Object의 차이점이 나타남. Map의 경우에는 Key로 문자열이외에도 모든걸 Key로 가능

3. Map의 값 호출하기

1
2
3
4
let key = {name: 'name'}
let map = new Map();
map.set(key, 'value')
map.get(key)

4. Map의 사이즈 확인

1
2
3
4
5
let key = {name: 'name'}
let map = new Map();
map.set(key, 'value')

console.log(map.size)

5. 배열로 만들기

1
2
3
4
5
6
let map = new Map();
map.set('key1', 'value1')
map.set('key2', 'value2')

let array = [...map]
console.log(map)    // map: [['key1', 'value1'], ['key2', 'value2']]

Object와는 다르게 Map은 [...map]을 통해서 Array로 만들수 있습니다. 결과값은 [[key, value], [key, value]]의 형태로 만들어 진다.

6. 순회하기

1
2
3
4
5
6
7
8
9
let map = Map()

for (let [key, value] of map) {

}

map.forEach((key, value) => {
    
})

Object와는 다르게 forof와 forEach를 사용할수 있다.
Array에서 제공하는 map, filter등에 대한 메서드는 제공하지 않는 것으로 판단된다.

7. Iterator 사용하기

1
2
3
4
5
let map = new Map()

map.keys()      // key모음
map.values()    // value모음
map.entries()   // key와 value 한쌍의 모음

Iterator이다 보니 for문과 함께 사용하면 좋을 듯

기타 메서드

has : 해당 Key 존재 여부

1
2
3
4
let map = new Map()
map.set('key', 'value')

console.log(map.has('key')) // true

delete : 해당 Key의 값 삭제

1
2
3
4
5
let map = new Map()
map.set('key', 'value')
console.log(map.delete('key'))  // true => 존재했으면 true 없었으면 false

console.log(map.has('key')) // false

clear : 모든 데이터 삭제

1
2
let map = new Map()
map.clear()

Comment and share

Moon Star

author.bio


author.job