2022-09-14 국비지원 웹개발 23일차

<강사님>

기업이 컴퓨터를 쓰는 이유는 생산성 때문에 쓰는 거예요.

주판으로도 컴퓨터랑 비슷하다면 컴퓨터를 쓸 이유가 없죠.

여러분은 열심히 하셔서 실력을 키우세요.

그래야 기업이 여러분을 쓰고 여러분도 할 말을 할 수 있게 되는 거예요.

---

string 타입을 json 타입으로 변환, 정규식, async 등에 대해 배웠다.

---

1. string 타입을 json 타입으로 변환

 

JSON 데이터 구조: 

(1) { k : v }: 맵 또는 리터럴.

(2) [ ]: 배열.

(3) { k : [ ] },

[ { }, { } ]: 혼합형

 

JSON.parse(string);을 사용해 문자열을 json object로 변환 가능하다.

다른 언어와의 통신(호환)을 위해 필요한 작업이다.

 

이때 키 값과 밸류는 " " 안에 적어야 한다.

자바스크립트는 ' '과 " "을 구분하지 않지만 다른 언어는 보통 ' '은 하나의 문자, " "는 문자열을 뜻하기 때문이다.

만약 키 값과 밸류를 ' ' 안에 적으면 JSON.parse 함수에서 에러가 난다.

 

 

2. 정규식

 

검색 관련 회사에 취업하려면 정규식을 본격적으로 배워야 하는데 그러려면 분량이 어마어마하다.

그래서 데이터 베이스를 다루는데 활용할 수 있을 정도의 지식을 먼저 쌓고 나중에 관심이 생겼을 때 더 배우는 게 좋다.

우선은 자주 사용하는 정규식 기호들과 예제를 배웠다.

 

자주 사용하는 기호

\: 특수 문자 앞에 사용

^: [ ] 안에서는 부정, [ ] 밖에서는 시작

$: 맨 끝

*: {0, }과 같은 의미로 0번 이상을 뜻함

+: {1, }과 같은 의미로 1번 이상을 뜻함

?: {0, 1}과 같은 의미로 0~1번을 뜻함

.: 개행 문자를 제외한 한문자 대입

|: or

( ): 그룹을 지정하거나 반복 처리에 사용

[ ]: 문자셋

{m, n}: 반복 횟수를 m~n까지

\d, \D: 숫자를 의미. \D는 [^0-9]와 같은 의미

\w, \W: 영숫자를 의미. \W는 [^a-zA-Z0-9]를 의미

\n: 개행 문자. 개행 문자는 줄 바꿈을 의미

\t: 탭 문자

 

자주 사용하는 flags

g: global match. 보통 패턴이 1번만 발견되면 종료되는데 문자열 전체를 검색해 동일한 패턴을 찾는다.

i: ignore case. 대소문자를 구분하지 않는다.

m: match over multiple line. 여러 줄에 걸쳐 찾는다. 다중 행 모드.

 

정규식 기본형

var exp = /pattern/[flags]; 와 var exp = new RegExp("pattern" [, "flags"]); 가 있지만.

var exp = /pattern/[flags];를 사용하는 게 좋다.

대부분의 언어에서 / /; 형식을 취하기 때문에 호환이 좋다.

 

정규식 테스트 방법

var result = exp.test(string);이고 결과는 불린 형으로 나온다.

정규식을 만족하면 true, 만족하지 않으면 false.

 

ex) /^[a-zA-Z]\w {3,19}$/ 은 첫 시작은 영문으로 그 뒤 3자~19자. 즉 최소 4자 최대 20자.

주의) (\. [\w]+){1,3}$은 (\. [\w]+) 이 구조가 1~3개라는 뜻이다.

3. async

 

동기: 엔진이 돌면 타이어가 돌고, 카드를 넣으면 출금이 가능한 것처럼 순서대로 처리하는 방식.

비동기: 내가 밥을 먹던 뭘 하던 세상은 돌아간다. 여러 개를 동시에 처리하는 방식.

 

실시간 다중처리

(1) 멀티 프로세서 방식 (다중 CPU)

(2) 멀티프로그래밍

  (a) 프로세서

  (b) 스레드(함수 단위 처리)

 

병행처리: 동시간대 2개를 실행한다.

동시처리: 동시간대 2개를 실행하는 것처럼 보이게 한다.

 

자바스크립트는 기본적으로 다 동기식 처리다.

 

만약 a()  ->  b()  -> c() 순으로 처리되어야 하는 함수들이 있다면

동시처리일 경우 어떤 게 먼저 끝날지 알 수 없다.

그래서 다중처리를 하면서도 끝나는 순서를 정하는 방법

이것이 동기식 만들기다.

다시 말하면 멀티 스레드로 돌렸을 때 누가 먼저 끝날지 모르니 끝나는 순서를 정해서 동기식처럼 처리한다는 뜻.

이때 전체 함수를 묶어서 모듈화하고 await을 사용하는 방법을 쓴다.

b()에 a()를 await c()에 b()를 await.

 

만약 다중처리 없이 순서대로만 처리한다면 앞에 함수를 처리하는 동안 마우스, UI 등 다른 기능이 끊기거나 멈추면서 렉이 발생한다.

 

위의 코드 예시는 긴 조건문을 처리하는 동안 text 박스 클릭이 안 되는 경우를 보여준 것이다.

물론 컴퓨터 성능 때문에 저 정도 조건문도 금방 처리되어 렉을 체감하기 어렵지만 분명 렉이 걸린다.