[Javascript] 모듈 / 자바스크립트 내장 기능(형변환, 이스케핑, 비동기, String)

2022. 2. 12. 14:29

#1. 모듈

1. 모듈(Module)이란?

프로그램에서 자주 사용되는 기능들을 별도의 파일로 분리해 놓은 것이다.
재사용 가능한 단위(함수, 클래스, 객체)들을 다른 프로그램에서 활용할 목적으로 분리해 놓은 형태이다.
소스코드를 작성할 때 분리한 파일들을 조립하여 그 안에 정의된 기능을 활용할 수 있다.
코드를 재사용 할 수 있는 가장 고차원적인 방법이다.

2. 모듈 사용 방법

1) 모듈에 등록

module.exports 키워드를 사용하여 정의한다.
모듈에 등록할 수 있는 소스파일은 클래스나 함수 형태로 작성되어 있다.
- 변수, 연산자, 조건문, 반복문, 배열, JSON 등을 활용하여 연산 결과를 반환한다.

// 함수 정의 방법 1.
function hello() {
  console.log("Hello");
};

// 작성된 함수를 모듈에 대입
module.exports = hello;


// 함수 정의 방법 2.
// 따로 함수를 정의해서 대입하지 않고 익명함수로 처리 할 수 있다.
module.exports = function() {
  console.log("Hello");
};

2) 모듈 사용

require( ) 함수를 사용해서 module.exports에 등록된 기능을 리턴한다. (다른 경로에 있는 파일을 불러온다)
리턴 받는 객체는 module.exports에 확장된 기능들을 참조한다.
require( ) 괄호 안에는 파일 경로를 명시한다. (확장자는 생략가능)
- 파일 경로는 상대경로 ( ./ )를 사용해야 한다.
- 참조하려는 경로/이름이 정확해야 한다.
- 파일이 동일 경로에 있더라도 상대경로는 생략 불가능 하다.

const ex = require("./파일이름");

// 함수 호출
ex();

3) 변수, JSON, 함수 모듈화 하기

모듈에 등록

// 변수
module.exports.name = "Hello";

// JSON
module.exports.property = {
  id: "Node.js",
  type: "Javascript",
  getDevelop: function() {
    console.log(`${this.id}와 ${this.type}`);
  }
};

// 함수
module.exports.func = function() {
  console.log("나는 함수다");
}

모듈 사용

// 모듈 호출
const my = require("./MyModule2");

console.log(my); // 참조하는 모든 값 출력

// 변수 출력
console.log(my.name);

// JSON 출력
console.log(my.property.id);  // Node.js
console.log(my.property.type);  // Javascript
my.property.getDevelop();  // Node.js와 Javascript

// 함수 호출
my.func();  // 나는 함수다

4) 클래스의 모듈화

모듈에 등록

// 클래스 모듈화 방법 1.
class MyClass {
  constructor() {
    this.age = 20;
    this.name = "node"  
  }

  say() {
    console.log("이름: " + this.name);
    console.log("나이: " + this.age);
  }
}

module.exports = MyClass;


// 클래스 모듈화 방법 2. -> 객체를 모듈화(가장 일반적인 방법)
class HelloWorld {
  constructor(p) {
    this._p = p;
  }
  get p() {
    return this._p;
  }
  set p(p) {
    this._p = p;
  }
  
  say(say) {
    console.log(this.p);
  }
}

// 모듈에다가 객체 생성까지 한번에 처리
module.exports = new HelloWorld("ㅋㅋㅋㅋ");

모듈 사용

// 1) 클래스 형태의 모듈 참조
const myModule3 = require("./파일이름");

// 리턴된 모듈은 클래스 형태이므로 기능의 사용을 위해서는 인스턴스를 생성해야 한다.
const module_obj = new myModule3();
module_obj.say();  // 이름: node
 	           // 나이: 20


// 2) 객체 형태의 모듈 참조
const myModule4 = require("./파일이름");

// 리턴된 모듈은 객체 형태이므로 직접 모듈 내의 기능을 호출할 수 있다.
myModule4.say();  // ㅋㅋㅋㅋ

#2. 자바스크립트 내장 기능(1)

1. isNaN( )

isNaN(value) 형태로 사용하며, 파라미터로 전달 된 값이 NaN(숫자가 아님)일 경우 true, 숫자일 경우 false를 반환한다.
숫자로 변환 가능한 형식일 경우 false를 반환한다.
NaN은 비교연산자 (==, === 등) 를 사용해서 판별 할 수 없다. (isNaN( )을 사용하는 이유)

// 숫자로 변환할 수 없다고 판단하는 경우 (숫자가 아니여야 true)
console.log(isNaN(NaN));  // true
console.log(isNaN(undefined));  // true
console.log(isNaN("asdasd"));  // true
console.log(isNaN("123ABC"));  // true  

// 숫자로 변환할 수 있다고 판단하는 경우
console.log(isNaN(true));  // false: 1로 변환해서 판단
console.log(isNaN(null));  // false: 0으로 변환해서 판단
console.log(isNaN(37));  // false
console.log(isNaN("37"));  // flase: "37"은 숫자 37로 변환해서 판단
console.log(isNaN("37.37"));  // flase: "37.37"은 숫자 37로 변환해서 판단
console.log(isNaN(""));  // false: 빈무자열은 0으로 변환해서 판단
console.log(isNaN(" "));  // false: 공백은 0으로 변환해서 판단

※ isOOO 으로 시작하는 것은 대부분 boolean 값을 찾기 위함이다.

2. 형변환 (type casting)

1) parseFloat( )

parseFloat(value) 형태로 사용하며, 값을 부동소수점(실수)으로 변환하여 반환한다.
변환할 수 없으면 NaN을 반환.

// 정상적인 경우
console.log(parseFloat(3.14));  // 3.14
console.log(parseFloat("3.14"));  // 문자열은 벗기고 출력
console.log(parseFloat("314e-2"));  // 지수표현
console.log(parseFloat("0.0314E+2"));

/*
※ 지수표현
+는 소수점을 오른쪽으로 보낸다. ex) e+2 : 소수점을 오른쪽으로 두번 
-는 소수점을 왼쪽으로 보낸다. ex) e-2 : 소수점을 왼쪽으로 두번 
대소문자는 구분하지 않는다.
*/

// NaN을 반환하는 경우
console.log(parseFloat("문자열인데요"));  // NaN

2) parseInt( )

parseInt(value, int) 형태로 사용하며, 값을 정수로 변환하여 반환한다.
첫번째 파라미터 값(value)에는 반환할 값을 넣고, 두번째 파라미터 값(int)에는 어떤 진법으로 변환할지 명시한다.
parseInt(value)만 정의할 시 10진법으로 반환한다. (10진법이 기본값)
변환할 수 없으면 NaN을 반환한다.
문자열 변환시 숫자+글자의 형태는 숫자만 반환, 글자+숫자는 NaN을 반환한다. (공백으로 시작한다면 공백은 무시)
마이너스 ( - )는 숫자로 인식한다.

console.log(parseInt(15.14));  // 15
console.log(parseInt("F", 16));
console.log(parseInt("17", 8));
console.log(parseInt("1111", 2));
console.log(parseInt("15*3", 10));  // 문자열에서 *는 곱하기가 아니라 단순 글자 취급

console.log(parseInt(-15.14));  // -15
console.log(parseInt("-0XF", 16));
console.log(parseInt(" -15", 10));
console.log(parseInt("-1111", 2));

3. 이스케이핑 (escaping)

1) encodeURI( )

encodeURI(value) 형태로 사용하며, 주어진 문자열을 URL에 포함시킬 수 있는 형태로 변환한다. (value 값에는 string)
주소창에는 한글이 들어갈 수 없기 때문에 사용된다. (한글이 보인다는건 변환해서 보여주기만 한 것이다.)
URI(통합 자원 식별자, Uniform Resource Identifier)은 웹에서 사용하는 리소스를 식별하는 고유한 문자열 시퀀스로 URL의 상위 개념이다
A-Z, a-z, 0-9, ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 문자는 인코딩 하지 않는다.

const set1 = ";,/?:@&=+$#";  // 예약문자
const set2 = "-_.!~*'()";  // 비예약문자
const set3 = "ABC abc 123";  // 알파벳 및 숫자, 공백 (공백은 %20 으로 인코딩)
const set4 = "자바스크립트";  // 주소창에 쓰일 수 없는 한글

// 특수문자 (예약문자 및 비예약문자)를 변환하지 못하기 때문에 UTF-8 환경에서는 사용이 불가
const enc1 = encodeURI(set1);
const enc2 = encodeURI(set2);
const enc3 = encodeURI(set3);
const enc4 = encodeURI(set4);

console.log(enc1);  // ;,/?:@&=+$#
console.log(enc2);  // -_.!~*'()
console.log(enc3);  // ABC%20abc%20123
console.log(enc4);  // %EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

1-1) decodeURI( )

사용 방법은 encodeURI( ) 와 같으며, 인코딩 된 문자열을 원래의 문자열로 역변환 한다. (디코딩)

console.log(decodeURI(enc1));  // ;,/?:@&=+$#
console.log(decodeURI(enc2));  // -_.!~*'()
console.log(decodeURI(enc3));  // ABC abc 123
console.log(decodeURI(enc4));  // 자바스크립트

2) encodeURIComponent( )

사용 방법은 encodeURI( ) 와 같으며, 알파벳과 숫자 및 비예약 표식을 제외한 모든 글자를 URL에 포함시킬 수 있는 문자열로 인코딩한다. (encodeURI( ) 의 상위 버전)
URL에 사용해도 문제가 없는 특수문자를 제외하고 모든 글자를 변환한다.

const set1 = ";,/?:@&=+$#";  // 예약문자
const set2 = "-_.!~*'()";  // 비예약문자
const set3 = "ABC abc 123";  // 알파벳 및 숫자, 공백 (공백은 %20 으로 인코딩)
const set4 = "자바스크립트";  // 주소창에 쓰일 수 없는 한글

const enc1 = encodeURIComponent(set1);
const enc2 = encodeURIComponent(set2);
const enc3 = encodeURIComponent(set3);
const enc4 = encodeURIComponent(set4);

console.log(enc1);  // %3B%2C%2F%3F%3A%40%26%3D%2B%24%23
console.log(enc2);  // -_.!~*'()
console.log(enc3);  // ABC%20abc%20123
console.log(enc4);  // %EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

2-1) decodeURIComponent( )

decodeURI( ) 와 동일하다.

// 인코딩 된 문자열을 원래의 문자열로 역변환 (디코딩)
console.log(decodeURIComponent(enc1));  // ;,/?:@&=+$#
console.log(decodeURIComponent(enc2));  // -_.!~*'()
console.log(decodeURIComponent(enc3));  // ABC abc 123
console.log(decodeURIComponent(enc4));  // 자바스크립트

4. 비동기처리 기능

1) setTimeout( )

setTimeout(func, int) 형태로 사용하며, 지정된 함수를 두 번째 인자로 전달된 시간 후에 실행하도록 한다.
첫번째 파라미터는 콜백함수를 받고, 두번째 파라미터는 1/1000초 단위의 시간 값을 받는다. (1000 == 1초)
프로그램의 흐름과 상관없이 별도로 실행된다.

function example() {
  console.log("3초 뒤 출력")
}
setTimeout(example, 3000);


// 일반적으로 콜백함수를 별도로 정의하지 않고 즉시 전달한다.
// 화살표함수로 정의해도 됨
setTimeout(() => {
  console.log("2초 뒤 출력")
}, 2000);

////
console.log("밑에 있는데 먼저 출력");

2) setInterval( )

setInterval(func, int) 형태로 사용되며, 지정된 함수를 두번째 인자로 전달된 시간마다 반복 호출한다
사용방법은 setTimeout( ) 과 동일하다.
반복을 종료하려면 clearInterval( ) 함수를 사용해서 종료한다.

// 1초마다 실행, 5초 후 실행 종료
let count1 = 0;

const timeId = setInterval(() => {
  count1++;

  console.log(`${count1}번째 실행`);
  
  // count 변수가 5가 되면
  if(count1 == 5) {
    console.log("실행 종료");
    // 실행 종료
    clearInterval(timeId);
  }
}, 1000);

5. String

문자열은 그 자체가 객체이다.
일반적으로 생성하는 문자열 변수 안에는 프로퍼티(멤버변수) 와 메서드(함수)가 자동으로 생성된다.
문자열 객체에 내장된 메서드들은 변수가 담고 잇는 내용을 가공하거나 특정 내용을 추출하는 기능을 갖는다.
- 원본은 변하지 않고, 결과만 반환한다.

// 변수 형식으로 문자열 만들기
const str1 = "Hello World";
console.log(str1)  // Hello World

// 객체 생성 방식으로 문자열 만들기
const str2 = new String("Hello Javascript");
console.log(str2)  // Hello Javascript

// 문자열의 길이 찾기(공백과 특수문자 포함)
const str3 = str1.length;
console.log(str3);  // 11

예제들의 기능을 확인하기 위한 문자열 생성

const example = "Javascript, Typescript, React.js, Node.js";
console.log(example);  // Javascript, Typescript, React.js, Node.js

▼

1) length

문자열의 길이를 찾을 때 쓰인다. (배열에도 쓰인다)
파라미터 값은 따로 없고 .length 를 뒤에 붙여 사용한다. (공백과 특수문자를 포함하여 길이를 반환)
길이는 1부터 센다.

const msg1 = example.length;
console.log(msg1);  // 41

2) charAt( )

charAt(int) 형태로 사용되며, 파라미터로 설정된 위치의 글자를 리턴한다.
위치는 배열처럼 0부터 카운트한다.

const msg2 = example.charAt(5);
console.log(msg2);  // c

모든 문자열은 그 자체로 배열처럼 취급할 수 있다.

console.log(example[12]);  // T

3) indexOf( )

indexOf(string) 형태로 사용되며, 파라미터로 전달된 내용이 처음 나타나는 위치의 숫자(index)를 리턴한다.
위치는 배열처럼 0부터 카운트한다.

const msg3 = example.indexOf("i");
console.log(msg3);  // 7

값을 찾지 못할 경우 -1을 반환한다.

const msg3_1 = example.indexOf("z");
console.log(msg3_1);  // -1

파라미터에 문자열을 입력한 경우 일치하는 내용이 시작되는 첫 글자의 위치를 반환한다.

const msg3_2 = example.indexOf("React");
console.log(msg3_2);  // 24

if문을 활용한 응용

if(example.indexOf("Hello") > -1) {  // 없으므로 -1을 반환 -> false
  console.log("Hello가 포함됨");
} else {
  console.log("Hello가 포함되지 않음.");
}  // 포함되지 않음 출력

4) lastIndexOf( )

indexOf( ) 와 사용 방법은 동일하며, 파라미터로 전달된 글자가 마지막으로 나타나는 위치를 리턴한다.
문자열의 끝에서 부터 세는 것이 아니라 처음부터 숫자를 센다.
찾기 못할 경우 -1을 반환.

const msg4 = example.lastIndexOf("s");
console.log(msg4);  // 40 (제일 마지막에 있는 "s" 의 위치)

5) substring( )

substring(int, int) 형태로 사용되며, 첫번째 파라미터 값 부터 두번째 파라미터 값 이전 까지의 문자열을 리턴한다.

const msg5 = example.substring(0,10);
console.log(msg5);  // Javascript

const msg5_1 = example.substring(12,22);
console.log(msg5_1);  // Typesctipt

const msg5_2 = example.substring(24, 32);
console.log(msg5_2);  // React.js

두번째 파라미터 값이 없을 경우 지정된 위치부터 끝까지 문자열을 리턴한다.

const msg5_3 = example.substring(34);
console.log(msg5_3);  // Node.js

6) toUpperCase( )

따로 파라미터 값을 받지 않고, 모든 글자를 대문자로 반환한다.

const msg6 = example.toUpperCase();
console.log(msg6);  // JAVASCRIPT, TYPESCRIPT, REACT.JS, NODE.JS

7) toLowerCase( )

따로 파라미터 값을 받지 않고, 모든 글자를 소문자로 반환한다.

const msg7 = example.toLowerCase();
console.log(msg7);  // javascript, typescript, react.js, node.js

8) split( )

split(",")의 형태로 주로 쓰이며, 문자열에 포함된 구분자를 기준으로 배열로 반환한다.

const msg8 = example.split(",");
console.log(msg8);  // [ 'Javascript', ' Typescript', ' React.js', ' Node.js' ]

파라미터 값에 구분자( , )를 명시하지 않고 빈문자열( "" ) 을 명시하면 문자열 하나하나를 배열로 반환한다.

const msg8_1 = example.split("");
console.log(msg8_1);
/*
[
  'J', 'a', 'v', 'a', 's', 'c', 'r',
  'i', 'p', 't', ',', ' ', 'T', 'y',
  'p', 'e', 's', 'c', 'r', 'i', 'p',
  't', ',', ' ', 'R', 'e', 'a', 'c',
  't', '.', 'j', 's', ',', ' ', 'N',
  'o', 'd', 'e', '.', 'j', 's'
]
*/

9) replace( )

replace(string, string) 형태로 사용되며, 첫번째 파라미터의 내용을 두번째 파라미터로 변경해서 반환한다.
첫번째 파라미터와 일치하는 내용이 둘 이상인 경우 첫번째 항목만 변경한다.

const msg9 = example.replace(",", "@");
console.log(msg9);  // Javascript@ Typescript, React.js, Node.js

10) replaceAll( )

replaceAll(string, string) 형태로 사용되며, 첫번째 파라미터의 내용을 두번째 파라미터로 변견해서 반환한다.
replace( )는 일치하는 내용이 둘 이상인 경우 첫번째 항목만 변경하지만, replaceAll( )의 경우에는 모두 변경한다.

const msg10 = example.replaceAll(",", "@");
console.log(msg10);  // Javascript@ Typescript@ React.js@ Node.js

// replace는 첫번째 콤마(,)만 변경됐지만 replaceAll은 모두 변경된다.

※ 정규식을 활용한 특정 문자 제거

g : 모든 패턴 체크 (global)
i : 대소문자를 구별없이 체크
m : 여러줄 체크
^ : 처음
$ : 끝
. : 한문자

.replace(" ", "")	첫번째 공백 제거
.replace(/\-/g, "")	특정문자( - ) 제거
.replace(/,/g, "")	특정문자 ( , ) 제거
.replace(/^\s+/, "")	앞의 공백 제거
.replace(/\s+$/, "")	뒤의 공백 제거
.replace(/^\s+\|\s+$/g, "")	앞뒤 공백 제거
.replace(/\s/g, "")	문자열 내의 모든 공백 제거
.replace(/\n/g, "")	n개행 제거
.replace(/\r/g, "")	엔터 제거

쌍따옴표("") 뿐만 아니라 홑따옴표('') 도 사용 가능

11) trim( )

문자열의 앞/뒤 공백을 제거해 준다.

const a = "   trim   ";
const msg10 = a.trim();
console.log(msg10);  // trim

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

'국비수업 > JavaScript' 카테고리의 다른 글

[Javascript] [연습문제] 내장 기능을 활용한 실습 (0)	2022.02.16
[Javascript] 자바스크립트 내장 기능(Math, Date, Number, Array) (0)	2022.02.15
[Javascript] [연습문제] 클래스 실습 (0)	2022.02.11
[Javascript] 클래스 (0)	2022.02.11
[Javascript] 프로토타입 (0)	2022.02.10

{ chanCo }