0031. JavaScript 공부하기6 - UI, API 소개 및 JavaScript 정규표현식

섹션 11. UI와 API 그리고 문서 보는 법

1강. UI와 API 수업 소개

API란?

• Application Programming Interface
• 프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치
• 프로그래밍 언어를 통해 조작할 수 있음

<참고, 자세한 내용>

https://opentutorials.org/course/743/6533

UI와 API 그리고 문서보는 법 - 생활코딩

 

2강. UI와 API 소개

• UI : User Interface
• API : Application Programming Interface

 

1) UI

컴퓨터와 유저의 접점이 되는 곳

 

2) API

화면에 출력된 경고창은 우리가 만든게 아니다.
alert로 경고창을 띄우는 것도 일종의 인터페이스이다.
개발자 : API를 통해 웹브라우저 등을 제어한다. (일반사람 : UI로 제어)

3) Interface

UI와 API의 접점

 

4) 계층구조, 아래로 갈수록 심연이 된다.

사용자
웹개발자, 앱개발자, 게임개발자
브라우저 개발자
운영체제
C, C++
어셈블리어
기계어

 

사용자
소프트웨어 공학
전자공학
전기공학

 

 

3강. 문서 보는 법

환경이 제공하는 API를 조작해서 소프트웨어를 조작한다.

 

1) 레퍼런스(reference)

안내서, 명령어의 사전과 같음

(1) 자바스크립트 자체의 API

(2) 자바스크립트가 동작하는 호스트 환경의 API (웹 브라우저, Node.js, 구글앱스크립트 등)

 

ECMAScript = JavaScript = LiveScript

JavaScript가 표준화하면서 ECMA에게 권한 위임. 표준협회인 ECMA International에서 표준화 진행.

 

<참고. 아래의 문서를 통해 API 문서를 확인할 것>

https://opentutorials.org/course/743/6533

UI와 API 그리고 문서보는 법 - 생활코딩

Docs나 Documentation을 주로 참고

 

2) 튜토리얼(tutorial)

언어의 문법을 설명한다. 

 

 

위의 정보들을 습득하거나 문제 발생시 참고하여 문제를 해결하고,

커뮤니티 활동이나 광범위한 검색을 통해 개발을 수행해 나가면 된다.

 

 

섹션 12. JavaScript와 정규표현식

1강. 오리엔테이션

정규표현식(regular expression)

• 문자열에서 특정한 문자를 찾아내는 도구.
• 이 도구를 활용하면 수십줄이 필요한 작업을 한 줄로 끝낼 수 있음
• 정규표현식은 여러 언어에서 사용되는 일종의 언어이다.
• 자바스크립트에서 사용하는 정규표현식에 대해서만 다룬다.

 

• 방대한 텍스트 안에 정보가 있는지를 찾아야 된다든지,
• 여러 정보 중에서 패턴을 찾아서 다른 것으로 치환해야 할 때 필요.

 

 

2강. 패턴 만들기

1) 컴파일 : 우리가 찾는 대상, 패턴 찾는 것

2) 실행 : 우리가 찾은 패턴에 대해 어떠한 작업을 하는 것

 

정규표현식 리터럴

var pattern = /a/; //a가 들어간 걸 찾아줘! 를 패턴에 넣는 것
var pattern = new RegExp('a'); //위와 같은 뜻. 정규표현식 객체를 패턴에 저장하는 것

※ RegExp : Regulation Expression

 

 

3강. RegExp 객체의 사용

RegExp : 정규표현식의 객체

- 패턴이 들어 있다.

 

1) 작업의 과정

1. 작업 대상 지정
2. 어떤 작업을 할 것인가?
3. 작업 실행

 

2) 정규표현식의 주요한 작업

(1) 추출

var pattern = /a/;

pattern.exec('abcdef');

결과값 : 'a'

 

var pattern = /a./;

- a와 다음의 1개 문자까지 추출

결괏값 : 'ab'

 

 

(2) TEST

 

pattern.test 는 boolean이라 true/false로 나온다.

 

 

(3) 치환

 

용도에 맞게 적당한 것을 사용하면 된다.

str.replace(pattern. 'A');

 

 

4강. String과 정규 표현식

문자열에서 매소드를 사용하는 방법

 

1) String.match()

 

2) String.replace()

 

 

5강. 옵션(i, g)

1) i : 대소문자 구분

정규표현식 패턴에서 i를 붙이면 대소문자를 구분하지 않는다.

 

 

2) g : 중복값 모두 리턴

 

var xg = /a/;
"abcda".match(xg);
//출력값 : 'a'
//중복이어도 한개만 출력한다.

var og = /a/g;
"abcda".match(xg);
//출력값 : 'a', 'a'
//중복이면 중복값을 나열해서 출력한다.

 

극단적인 모습

 

3) 중복 사용

옵션은 중복해서 사용할 수 있다.

 

6강. 캡처

word(\w)

• A~Z
• a~z
• 0~9

정규표현식 시각화

https://regexper.com/

Regexper

 

정규표현식 빌더

https://regexr.com/

RegExr: Learn, Build, & Test RegEx

 

7강. 치환

본문 URL을 링크 html 태그로 교체하는 코드

var urlPattern = /\b(?:https?):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*/gim;
var content = '생활코딩 : http://opentutorials.org/course/1 입니다. 네이버 : http://naver.com 입니다. ';
var result = content.replace(urlPattern, function(url){
    return '<a href="'+url+'">'+url+'</a>';
});
console.log(result);

 

이렇게 하이퍼링크로 나온다.

 

<느낀 점>

솔직히 정규표현식은 듣기만 하고 건너뛰었다.

나중에 필요하면 다시 와야겠다.