'IT 정보 로그캣/Javascript' 카테고리의 글 목록

정규 표현식은 기본적인 체계는 대부분 비슷하지만 각 프로그래밍 언어에서 사용할 때 조금씩 문법이 다른 경우가 있다.

2020/02/03 - [IT 정보 로그캣/CS] - 정규 표현식

정규 표현식

코딩을 하다보면 정규표현식이 필요할 때가 많다. 표현하고 싶은 문자열의 패턴을 간단한 표현으로 나타낼 수 있기 때문이다. 정규 표현식을 사용하지 않으면 코드가 엄청 길어지거나 표현하기 까다로운 경우가 많..

noahlogs.tistory.com

그래서 각 프로그래밍 언어마다 정규 표현식을 확인 후 사용하는게 좋다.

이러한 정규 표현식을 자바스크립트에서는 어떻게 사용하는지 알아보자.

자바스크립트에서 정규 표현식 만드는 법

자바스크립트에서 정규 표현식을 만드는 방법은 2 가지가 있다.

정규 표현식 리터럴을 사용하는 방법: 정규 표현식을 슬래쉬(/) 로 감싸는 방법

const regex = /no+ah/;

정규 표현식 리터럴은 스크립트가 불러와질 때 컴파일 된다. 그래서 정규 표현식이 상수일 때 성능이 더 좋다.

RegExp 객체의 생성자 함수를 호출하는 방법

const regex = new RegExp("no+ah");

생성자 함수를 사용하면 정규 표현식이 실행 시점에 컴파일 된다.

정규 표현식의 패턴이 변경될 수 있는 경우나 사용자 입력과 같이 다른 출처로 부터 패턴을 가져와야 하는 경우 생성자 함수를 사용한다.

자바스크립트에서 정규식 표현 패턴

자바스크립트에서 정규 표현식 패턴은 단순히 문자로 구성할 수도 있고 메타문자를 사용할 수도 있다.

단순 문자 패턴

단순히 문자로 구성하는 경우 /noah/ 로 작성하여 사용하면 문자열에서 noah 라는 부분의 문자열을 찾을 수 있다.

예를들어 "Who is noah?" 에서는 noah와 대응될 것이고, "Do you know Annah?" 에서 no 와 ah 가 부분적으로 포함되지만 noah의 형태가 정확히 포함되지 않기 때문에 대응되지 않는다.

메타문자를 사용한 패턴

자바스크립트에서 사용할 수 있는 메타문자들은 다음과 같다.

\ : 백슬래쉬는 문자 앞에 붙어 사용되는 경우 해당 문자는 글자 그대로 문자가 아닌 메타문자를 나타냄을 의미한다.
예를들어 정규 표현식에서 d 를 입력하면 소문자 그대로 d를 의미하지만 백슬래쉬를 앞에 붙여 \d 를 입력하면 숫자를 의미하는 메타문자가 된다.
반대로 백슬래쉬가 특수문자 앞에 붙어 사용되는 경우 특수 문자각 메타문자가 아닌 문자 그대로의 특수문자를 의미한다.
예를들어 /m*/ 은 m이 0번 이상 반복됨을 나타내는 정규 표현식이지만 /m\*/ 으로 작성하면 m* 문자를 의미한다.
^ : 입력의 시작 부분을 의미한다.
/^m/ 이라고 입력하면 A로 시작하는 문자열에만 대응한다.
$ : 입력의 끝 부분을 의미한다.
/m$/ 이라고 입력하면 m으로 끝나는 문자열에만 대응한다.
* : 앞에 입력된 문자가 0번 이상 반복됨을 의미한다.
{0,} 으로도 표현할 수 있다. /no*ah/ 라고 작성하면 "nah" 또는 "nooooooah" 등과 대응 된다.
+ : 앞에 입력된 문자가 1번 이상 반복됨을 의미한다. {1,} 으로도 표현할 수 있다.
/no+ah/ 라고 작성하면 "noah" 또는 "noooah" 등과 대응 된다.
? : 앞에 입력된 문자가 0번 또는 1번 나타남을 의미한다. {0,1} 으로도 표현할 수 있다.
/no?ah/ 라고 작성하면 "nah" 또는 "noah" 만 대응 된다.
. : 개행 문자를 제외한 임의의 문자 하나를 의미한다.
/.o/ 라고 작성하면 "This is a blog of noah" 에서 lo 와 no 와 대응 된다.
(text) : 여기서 괄호를 포획 괄호라고 부르며 문자열을 묶어서 대응시켜 준다.
예를들어 tistory noah 문자열에서 각각 tistory와 noah로 묶어서 나타내고 싶을 때 각 문자열을 /(\w+)\s(\w+)/ 와 같은 형식으로 대응 시켜 표현할 수 있다.
(?:text) : 비포획 괄호라고 하여 정규 표현식 연산자가 text 문자열 전체에 동작할 수 있게 하고 싶을 때 사용할 수 있다.
예를들어 /abc+/ 는 c가 반복되는 것을 나타냄으로 "abcabcabc" 에서 처음 abc에만 대응되지만 /(?:abc)+/ 라고 하면 abc 전체가 반복되는 것을 대응할 수 있다.
prefix(?=suffix) : suffix 가 뒤따라오는 prefix만 대응된다.
예를들어 noah(?=log|blog) 라고하면 noahlog 또는 noahblog 에 대응된다.
prefix(?!suffix) : suffix 가 뒤따라오지 않는 prefix 에만 대응된다.
예를들어 /\d+(?!\.)/ 은 소수점이 뒤따라오지 않는 숫자에만 대응되어 3.1417 이면 1417에만 대응된다.
x|y : x 또는 y 에 대응된다.
{n} : 앞 문자가 n번 나타날 경우 대응된다. (n은 양의 정수)
/p{2}/ 이면 "apple" 에서 'pp'에 대응된다.
{n,m} : 앞 문자가 n번 이상 m번 이하일 경우에 대응된다.
/o{2,3}/ 이면 "noooah" 에서 'ooo' 에 대응된다.
[text] : 문자셋(Character set)을 의미한다. [ ] 안에서는 점(.) 과 별표(*)도 단순 문자로 인식된다. 하이픈을 사용하면 범위를 지정할 수 있다. [ ] 안에서는 ^ 는 not 을 \b 는 백스페이스를 의미한다.
예를들어 /[a-z]/ 는 알파벳 전체 범위를 의미한다.
\b : 단어의 경계(시작이나 끝)을 의미한다.
\B : 단어의 경계가 아닌 곳(단어의 시작과 끝 사이)을 의미한다.
\cX : 문자열 내부의 제어 문자에 대응된다. X는 A ~ Z 까지의 문자 중 하나다.
\d : 숫자에 대응된다 [0-9]와 동일하다.
\D : 숫자가 아닌 문자에 대응된다. [^0-9]와 동일하다.
\f : 폼피드 문자에 대응된다.
\n : 줄 바꿈 문자에 대응된다.
\r : 캐리지 리턴 문자에 대응된다.
\s : 스페이스, 탭, 폼피드, 줄 바꿈 문자 등을 포함한 하나의 공백 문자에 대응 된다.
\S : 공백 문자가 아닌 하나의 문자에 대응된다.
\t : 탭 문자에 대응된다.
\v : 수직 탭 문자에 대응된다.
\w : 밑줄를 포함한 영숫자에 대응된다. [A-Za-z0-9_] 으로도 표현할 수 있다.
\W : 단어 문자가 아닌 문자에 대응된다. [^A-Za-z0-9_] 으로도 표현할 수 있다.
\숫자 : 정규 표현식 내부의 숫자 번째 괄호에서 대응된 부분에 대한 역참조
\0 : null 문자에 대응한다.

정규 표현식 플래그를 통한 검색

정규 표현식은 정규 표현식 패턴 구분자가 끝나는 곳에서 플래그를 추가해 줄 수 있다. 플래그는 각각 사용될 수도 있고 함께 사용될 수도 있다. 플래그 끼리의 순서에는 구분이 없다. 주로 많이 사용 되는 플래그는 다음과 같다.

g : 전역 검색
i : 대소문자 구분 없는 검색
m : 다중 행(multi-line) 검색

정규 표현식 메서드

자바스크립트에는 정규 표현식과 함께 사용되는 메서드들이 있어 참고하면 좋다.

* 해당 포스팅은 JavaScript | MDN 을 참고하여 작성하였습니다.

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

'IT 정보 로그캣 > Javascript' 카테고리의 다른 글

[Node.js] npm 이란 (0)	2020.01.04
[Node.js] ES6 주요 문법 정리 (0)	2019.01.24
[Node.js] Node.js 란? (0)	2019.01.24

Node.js 로 프로젝트를 진행하다 보면 필수적으로 npm 사용하게 된다.
당연히 쓰다보니 당연해진 NPM이 뭔지는 알고 사용하자.

npm 이란

npm 이란 노드 패키지 매니저 (Node Package Manager)를 의미한다.
npm은 자바스크립트 런타임 환경인 Node.js 의 기본 패키지 관리자 역할을 한다. 그래서 npm을 통해 패키지 (package) 또는 모듈 (module) 이라고 불리는 자바스크립트 소프트웨어를 자신의 프로젝트에 설치할 수 있다.
또한 npm을 통해 자신의 프로젝트에서 사용 중인 패키지들의 버전 업데이트도 관리할 수 있다.

npm의 구성

npm은 다음과 같이 3가지로 구성되어 있다.

npm 웹사이트
CLI (Command Line Interface)
저장소

npm 웹사이트

npm 웹사이트 는 패키지를 찾을 수 있다. 보통 구글에서 npm <패키지 이름> 을 검색하면 npm에서 해당 패키지의 저장소 페이지가 나온다.

CLI

npm은 터미널에서 CLI를 통해 작동시킬 수 있다.

예를들어 npm init -y 을 통해 package.json 파일을 만들어 프로젝트를 시작할 수 있고, npm install <패키지 명> 으로 해당 프로젝트에서 패키지를 설치할 수도 있다.

저장소

npm에는 패키지들을 모아놓은 공개 저장소가 존재한다. 계정을 업그레이드 시키면 비공개 저장소도 사용이 가능하다.

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

'IT 정보 로그캣 > Javascript' 카테고리의 다른 글

자바스크립트 정규 표현식 (0)	2020.02.04
[Node.js] ES6 주요 문법 정리 (0)	2019.01.24
[Node.js] Node.js 란? (0)	2019.01.24

Node.js 를 사용하기 위해서는 기본적으로 자바스크립트 문법을 알아야 한다.

자바스크립트 문법에는 ECMAScript (ES) 라는 자바스크립트 표준 문법이 있다.

ECMAScript 는 자바스크립트가 다양한 웹 브라우저를 공통적으로 잘 지원하기 위해 생겨났다.

현재 2019년 1월 기준으로 ECMAScript 2018 (ES9) 이 최신이고, 매번 새로운 버전이 릴리스 될 때

마다 최신 트렌드를 따라가야 한다.

하지만 ES6 문법을 정리하는 이유는 가장 많이 쓰이는 ES5 (2009 릴리스) 에서 ES6 (2015 릴리스) 로

넘어오면서 문법상으로 많은 변화들이 있었고, 브라우저 지원율도 증가하여

실질적으로 ES6가 최신 자바스크립트 표준에 가깝다고 볼 수 있기 때문이다.

변수 let 과 const

ES6 이전에는 변수를 var을 사용했는데 이제 let (변수) 과 const (상수) 로 나누어진다.

var 과의 차이점은 var은 전역 범위인 반면 let 과 const 는 선언한 { } 내부 블록에서만 유효하다.

function test () {

let letNumber = 1;

const constNumber = 1;

if(true){

let letNumber = 2;

const constNumber = 2;

console.log(letNumber); // 2 출력

console.log(constNumber); // 2 출력

}

console.log(letNumber); // 1 출력

console.log(constNumber); // 1 출력

}

템플릿 리터럴

ES6 에서는 백틱 ( ` ) 을 이용하여 문자열을 + 기호 없이 간단히 처리할 수 있다.

또한 백틱 ( ` ) 안에서는 멀티 라인도 자유롭게 사용할 수 있다.

const id = "myId" ;

const url = `http://noahlog.tistory.com/login/${id}` ;

const message = ` 줄바꿈도 마음대로

사용이 가능합니다. ` ;

함수의 기본 매개 변수값 지정

ES6 의 함수는 매개변수에 기본값 (default) 을 지정해 줄 수 있다.

function test ( height =10 , width = 20, color = 'green' ) {

...

}

객체 리터럴

ES6 에서는 객체 리터럴의 사용성이 좀 더 간편화 되었다.

var say = function() { console.log("hello"); }

const myObject = {

say,

work() { console.log("do work"); } ,

['name'] : 'noah'

};

화살표 함수

ES6 에서는 축약형 함수인 화살표 함수를 사용할 수 있다.

특이한 점이 있다면 화살표 함수에서 this 는 함수 자신을 호출하는 객체가 아닌

화살표 함수의 상위 스코프 (scope) 를 호출한다.

const numbers = [ 1, 2, 3, 4, 5 ];

let choice = numbers.map( v => v + 1); //축약 형태로 return 도 생략 가능

const noah = {

name : "noah",

friend : [ "mimi" ],

printFriends() {

this.friend.forEach( f =>

console.log(` ${this.name} loves ${f}`));

}

};

noah.printFriends(); // 결과값 : noah loves mimi

비구조화 할당 (destructuring Assignment)

비구조화 할당은 배열이나 객체에서 데이터를 편리하게 가져올 수 있게 해준다.

//객체

const blog = {

owner : "noah",

url : "noahlogs.tistory.com",

getPost() { console.log("ES6 문법 정리"); }

};

let { owner, getPost } = blog; //각각 blog 객체의 owner , getPost() 의 데이터가 할당

//배열

const pocket = ["coin" , 10 , true];

const [ first , second, third ] = pocket; //배열의 순서대로 값이 할당

프로미스 (Promise)

프로미스는 자바스크립트의 비동기 처리에 사용되는 객체이다.

콜백 지옥에서 벗어나게 해주는 유용한 기능이다 :)

ES8 (ECMAScript 2017) 에서 async/await 이 생겨나면서 프로미스에서 처리할 수 없던 순서 처리를

할 수 있게 되었다. 필요할 때 사용하면 될 것 같다.

const connect = new Promise((resolve, reject) => {

//success = resolve , fail = reject 반환

});

connect.then( (success) => {

console.log(success);

//성공 한 다음 처리할 작업

}).catch( (error) => {

console.log(error);

//에러 예외 처리

});

저작자표시 변경금지

'IT 정보 로그캣 > Javascript' 카테고리의 다른 글

자바스크립트 정규 표현식 (0)	2020.02.04
[Node.js] npm 이란 (0)	2020.01.04
[Node.js] Node.js 란? (0)	2019.01.24

웹 애플리케이션 서버 (WAS, Web Application Server) 를 만들기 위해 Node js 를 선택했다.

선택한 이유로는 개발 생산성 측면과 구조적 측면 (싱글스레드 기반의 비동기 처리 방식) 때문이다.

보통 비슷한 이유로 스타트업 등에서 Node js를 많이 선택한다.

Node js 를 사용하기 전에 어떤 기술인지 부터 알고 사용하자!

Node.js 란?

Node js 는 2009년 Ryan Dahl에 의해 시작된 오픈 소스 노드 프로젝트이다.

Node.js 공식 홈페이지에 따르면 Node.js 는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임으로 정의되고 있다.

여기서 Chrome V8 자바스크립트 엔진은 웹 브라우저를 만들기 위한 구글의 오픈 소스 자바스크립트 엔진으로 C++로 만들어졌다. 자바스크립트 런타임이라는 것은 일종의 자바스크립트을 실행하기 위한 프로그램이다 라고 이해하면 될 것 같다.

Node.js 의 특징

Node.js 의 주요한 특징으로는 4가지를 뽑을 수 있다.

1. 런타임

2. 싱글 스레드

3. 비동기 처리 방식 (논블로킹 I/O)

4. 이벤트 기반 ( Event-driven )

하나하나 가벼운 주제가 아니므로 여기서는 간단히만 정리하였다.

런타임

앞서 언급했듯이 Node js 는 자바스크립트 런타임이다.

기존 웹 브라우저에서만 실행 가능한 자바스크립트를 Ryan Dahl이 구글이 만든 V8 엔진을 사용하여 다른 환경에서도 사용이 가능하도록 노드 프로젝트를 시작하였다.

Node js 는 다음과 같은 구조로 구성되어 있다.

V8 : V8 라이브러리는 Node js 가 V8 C++ API로 제어하는 자바스크립트 엔진을 제공한다.
libuv : libuv 라이브러리는 C 라이브러리로 논블로킹 I/O 작업을 지원하는 역할을 한다. 파일 시스템, DNS, 네트워크, 파이프, 신호 처리, 폴링, 스트리밍, 자식 프로세스를 다룰 수 있도록 지원한다.
http-parser : HTTP 파싱에 사용되는 경량화된 C 라이브러리이다.
c-ares : 일부 비동기 DNS 요청을 위해 사용되는 c 라이브러리이다.
OpenSSL : tls 와 cypto 모듈에서 사용되는 보안을 위한 라이브러리이다.
zlib : 빠른 압축과 압축 해제를 위한 산업 표준인 라이브러리이다. Node js 에서는 동기, 비동기, 스트리밍 압축과 압축 해제 인터페이스에 사용된다.

싱글 스레드

Node js 는 자바스크립트를 기반으로하기 때문에 싱글 스레드만을 지원한다.

실제 Node js 의 프로세스는 여러 스레드를 가지고 있으나 우리가 사용할 수 있는 스레드가 하나라서 싱글 스레드이다.

Node js 가 이해와 사용이 쉬운 이유 중 하나도 싱글 스레드 덕분인 것 같다. 멀티 스레드에 비해 싱글 스레드가 프로그래밍 난이도가 상대적으로 쉽기 때문이다.

( ..아무래도 일을 시키더라도 직원을 여러 명 관리하는 것 보다 한 명 관리하는게 쉬우니 )

Node js 가 싱글 스레드를 지원하긴 하지만 멀티 프로세스를 지원하기 때문에 코어를 낭비하는 일은 없다.

노드 클러스터나 pm2 등을 이용하여 멀티 프로세스 구현이 가능하다.

논블로킹 I/O

Node js 는 싱글 스레드 기반이기 때문에 작업 처리의 효율성을 위해 논블로킹 I/O 방식을 사용한다.

( ..일손이 한명이니 블로킹 방식으로는 도저히 작업 진행이 안된다. )

오래 걸리는 작업 A를 백그라운드로 보내서 다음 작업 B를 먼저 실행되게 하고, 작업 A는 다시 태스크 큐를 거쳐 호출 스택으로 올라오기를 기다리는 방식이다.

이벤트 기반(Event-driven)

Node js 는 이벤트가 발생할 때 미리 지정해둔 작업을 수행하는 방식의 이벤트 기반 모델이다.

이러한 이벤트 기반 모델에서는 논블로킹 I/O 작업을 수행할 수 있도록 해주는 이벤트 루프라는 개념이 존재한다.

구글링했을 때 이벤트 루프에 대한 잘못된 설명이나 오해가 많다고 한다. ( ..역시 공식문서를 봐야한다. )

이벤트 루프 작업 순서는 timer -> pending callbacks -> idle, prepare -> poll -> check -> close callbacks 의 반복이다.

각 단계는 실행할 콜백의 큐(FIFO)를 가진다.

timer : setTimeout() 과 setInterval() 로 스케줄링한 콜백을 실행한다.
pending callbacks : TCP 오류 같은 시스템 작업의 콜백을 실행한다.
idle, prepare : 내부용으로만 사용한다.
poll : I/O 를 얼마나 오래 블록하고 폴링해야 하는지 계산한 다음 큐에 있는 이벤트를 처리한다.
check : setImmediate() 콜백을 호출한다.
close callbacks : 소켓이나 핸들이 갑자기 닫힌 경우에 'close' 이벤트를 발생 시킨다. 그렇지 않으면 process.nextTick() 이 실행 된다.

Node js 정리

대부분의 플랫폼 혹은 기술들은 자신만의 철학을 가지고 있다.

Node js의 철학은 "경량화" 라고 할 수 있다.

경량화된 코어와 모듈을 통해 사용자가 Node js를 쉽게 이해하고 사용하도록 도와주며, 테스트 및 유지 보수를 간단하게 할 수 있도록 도와준다. ( ..Node js는 모듈을 통해 레고를 조립해 나가는 것과 같은 느낌이다. )

하지만 경량화된 만큼 CPU의 연산이 많이 필요한 무거운 작업 보다는 가벼운 작업들을 처리하는데 더 강점이 있다.

* 참고

https://nodejs.org/ko/docs/

https://tk-one.github.io/2019/02/07/nodejs-event-loop/

저작자표시 변경금지

'IT 정보 로그캣 > Javascript' 카테고리의 다른 글

자바스크립트 정규 표현식 (0)	2020.02.04
[Node.js] npm 이란 (0)	2020.01.04
[Node.js] ES6 주요 문법 정리 (0)	2019.01.24

인생의 로그캣

IT 정보 로그캣/Javascript

자바스크립트 정규 표현식

자바스크립트에서 정규 표현식 만드는 법