Soha · soyeon devlog

JavaScript: 정규표현식 Ep.3 (패턴(표현))

19 Oct 2022 • TIL

패턴(표현)

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

^ab

^가 앞에 붙어 있으면 줄(Line) 시작에 있는 ab와 일치한다.
- 줄의 시작에 t 찾기
  
  모든(m)줄의 시작에서 t를 찾는다. 단, 소문자 t만 찾아지고 대문자T는 찾아지지 않는다.
```
console.log(
  str.match(/^t/gm)
) // ['t']
```
- 대소문자 구분 없이 t찾기 대소문자 구분을 없애기 위해 i를 추가한다.
```
console.log(
  str.match(/^t/gmi)
) // ['t','T']
```
ab$

$가 뒤에 붙어 있으면 줄(Line) 끝에 있는 ab와 일치한다.
- 줄의 끝부분에 d 찾기
  
  하나의 줄의 끝 부분에 ‘d’라는 글자와 일치한다. 그런데 맨 끝부분은 현재 ‘만 존재할 뿐 어떠한 문자나 d가 존재하지 않기 때문에 결과값으로 null이 나오게 된다.
```
console.log(
  str.match(/d$/g)
) // null
```
- 다섯번째 줄의 끝부분 d 찾기
  
  모든 줄의 끝부분에 d를 찾는다.
  현재 다섯번째줄 끝에만 d가 존재하기 때문에 d가 하나만 출력된다.
```
console.log(
  str.match(/d$/gm)
) // ['d']
```

. (마침표)

임의의 하나의 문자와 일치한다.
만약에 마침표를 그냥 사용하고 싶다면, \.사용해야 한다. 그냥 마침표를 사용하면 패턴으로 사용되기 때문이다.

모든 문자와 일치하기

문자, 기호, 띄어쓰기 등 모든걸 포함한다.

console.log(
  str.match(/./g)
)
// (109) ['0', '1', '0', '-', '1', '2', '3', '4', '-', '5', '6', '7', '8', 't', 
// 'h', 'e', 's', 'o', 'h', 'a', '@', 'g', 'm', 'a', 'i', 'l', '.', 'c', 'o', 'm', 
// 'h', 't', 't', 'p', 's', ':', '/', '/', 's', 'o', 'i', '-', 'h', 'a', '.', 'g',
// 'i', 't', 'h', 'u', 'b', '.', 'i', 'o', '/', 'T', 'h', 'e', ' ', 'q', 'u', 'i',
// 'c', 'k', ' ', 'b', 'r', 'o', 'w', 'n', ' ', 'f', 'o', 'x', ' ', 'j', 'u', 'm',
// 'p', 's', ' ', 'o', 'v', 'e', 'r', ' ', 't', 'h', 'e', ' ', 'l', 'a', 'z', 'y',
// ' ', 'd', 'o', 'g', '.', 'a', …]

.을 이용해서 단어 찾기

첫번째 단어로는 h를 찾고 두,세번째 단어에는 어떤게 오든 상관이 없으며 마지막 네번째 단어로 p가 오는 단어를 찾게된다.
```
console.log(
  str.match(/http/g)
)
// ['http']
    
console.log(
  str.match(/h..p/g)
)
// ['http']
```

a|b

a 또는 b와 일치한다.
- fox와 dog 문자 찾기
  
  fox와 dog의 찾는 순서를 변경해도 출력 결과는 동일하다. 둘중에 먼저 찾아지는 것을 출력해서 보내주기 때문이다.
```
  console.log(
    str.match(/fox|dog/g)
  )
  // (2) ['fox', 'dog']
```
ab?

?가 있는 바로 앞의 문자 b가 있거나 없거도 b와 일치한다.
```
const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
http://localhost:1234
`
```
- http, https 모두 출력하기
  
  그냥 https를 넣어서 검색하면 https만 출력된다.
  하지만, 그 뒤에 ?를 추가해주면 https 뿐 아니라 http도 같이 출력되는 것을 볼 수 있다. 물음표 바로 앞의 문자 하나가 없어도 동일하다고 보기 때문에 http도 출력되는 것이다.
```
  console.log(
    str.match(/https/g)
  )
  // ['https']
      
  console.log(
    str.match(/https?/g)
  )
  // (2) ['https', 'http']
```

{3}

3개(안에 들어있는 숫자만큼) 연속 일치한다.

d 찾기

console.log(
  str.match(/d/)
)
// ['d', index: 99, ...]

d가 두번 반복되는 문자 찾기

console.log(
  str.match(/d{2}/)
)
// ['dd', index: 110, ...]

d가 두번 반복되는 문자 모두 찾기

console.log(
  str.match(/d{2}/g)
)
// (2) ['dd', 'dd']

{3,}

3개(안에 들어있는 숫자) 이상 연속 일치한다.
- d가 두개 이상 연속된 문자 찾기
```
console.log(
  str.match(/d{2,}/g)
)
// ['dddd']
```
{3,5}

3개(첫번째 숫자) 이상 5개(두번째 숫자) 이하(3~5개) 연속 일치한다.
- d가 2개 이상 3개 이하 연속된 문자 찾기
```
console.log(
  str.match(/d{2,3}/g)
)
// ['ddd']
```
- 숫자를 포함한 w가 2번이상 3번이하 연속되는 문자 찾기
  
  \w는 숫자,알파벳(대,소문자) 모두를 포함하는 것을 의미한다. (기호는 미포함)
```
console.log(
  str.match(/\w{2,3}/g)
)
// (35) ['010', '123', '567', 'the', 'soh', 'gma', 
// 'il', 'com', 'htt', 'ps', 'soi', 'ha', 'git', 'hub', 
// 'io', 'The', 'qui', 'ck', 'bro', 'wn', 'fox', 'jum', 
// 'ps', 'ove', 'the', 'laz', 'dog', 'abb', 'ccc', 'ddd', 
// 'htt', 'loc', 'alh', 'ost', '123']
```
- 숫자를 포함한 영어 알파벳이 2개 이상 3개 이하인 단어 찾기
  
  처음과 끝에 /b는 경계를 표현한다.
  알파벳과 숫자가 2개 이상 3개 이하인 부분을 찾는데 앞뒤로 알파벳과 숫자가 아닌 것에는 경계를 만든다.
```
console.log(
  str.match(/\w{2,3}/g)
)
// (9) ['010', 'com', 'soi', 'ha', 'io', 'The', 'fox', 'the', 'dog']
```
[abc]

안에 들어있는 글자들이 각각 또는 개념으로 나눠져 있다.
a 또는 b 또는 c를 찾을 수 있다.
- 모든 f 또는 o 또는 x 찾기
```
console.log(
  str.match(/[fox]/g)
)
// (12) ['o', 'o', 'o', 'o', 'o', 'f', 'o', 'x', 'o', 'o', 'o', 'o']
```
[a-z]

a부터 z 사이의 모든 문자 구간에 있는 내용들이 일치한다. (영어 소문자)
a 또는 b 또는 c 또는 … 또는 z를 찾을 수 있다.
[A-Z]

A부터 Z 사이의 모든 문자 구간에 있는 내용들이 일치한다. (영어 대문자)
A 또는 b 또는 C 또는 … 또는 Z를 찾을 수 있다.
[0-9]

0부터 9 사이의 모든 문자 구간에 있는 내용이 일치한다. (숫자)
0 또는 1 또는 2 또는 … 또는 9를 찾을 수 있다.
- 0 또는 1 또는 … 0 찾기
```
console.log(
  str.match(/[0-9]/g)
)
// (15) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', '8', '1', '2', '3', '4']
```
- 숫자 하나 이상이면서 0 또는 ~ 9 찾기
  
  즉, 연속된 숫자 모두 찾기이다.
```
console.log(
  str.match(/[0-9]{1,}/g)
)
// (4) ['010', '1234', '5678', '1234']
```

[가-힣]

가부터 힣 사이의 모든 문자 구간에 있는 내용이 일치한다. (한글)
가 또는 나 또는 다 또는 … 또는 힣를 찾을 수 있다.

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
동해물과 백두산이 마르고 닳도록
`

가부터 힣까지 하나 이상 연속된 문자 찾기

console.log(
  str.match(/[가-힣]{1,}/g)
)
// ) ['동해물과', '백두산이', '마르고', '닳도록']

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
동해물과_백두산이 마르고 닳도록
`

63개 문자 (Word, 대소영문52개 + 숫자10개 + _)에 일치한다.

console.log(
  str.match(/\w/g)
)
// (107) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', ... ]

\b

63개 문자에 일치하지 않는 문자 경계 (Boundary)를 구분한다.

문자와 문자 사이의 경계는 구분하지 않고 띄어쓰기를 진행한 경계와 문장(줄)이 처음 시작할때의 앞 경계. 즉, 단어의 앞뒤 경계를 구분한다.
- \b 만 썼을 때
```
console.log(
  str.match(/\b/g)
)
// (50) ['', '', '', '', '', '', ... ]
```
- \b 활용하기
  
  경계에서 시작해서 f 알파벳으로 시작하고 그외에 63개의 문자가 하나 이상 오며 경계로 끝나는 모든 문자를 찾는다. 즉, f로 시작하는 모든 영단어를 찾는 것이다.
```
console.log(
  str.match(/\bf\w{1,}\b/g)
)
// ['fox']
```

모든 숫자(Digit)에 일치한다.

모든 숫자에 일치시키기

하나의 숫자만 모두 출력된다.

console.log(
  str.match(/\d/g)
)
// (15) ['0', '1', '0', '1', '2', '3', '4', '5', '6', '7', '8', '1', '2', '3', '4']

숫자 덩어리 출력하기

console.log(
  str.match(/\d{1,}/g)
)
// (4) ['010', '1234', '5678', '1234']

공백(Space, Tab 등)문자에 일치한다.

모든 공백 출력하기

줄바꿈 (\n)과 띄어쓰기를 모두 포함한다.

console.log(
  str.match(/\s/g)
)
// (18) ['\n', '\n', '\n', '\n', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '\n', '\n', '\n', ' ', ' ', '\n']

띄어쓰기 없애기

match 대신에 replace를 사용하고 공백(\s)부분을 ‘’(공백없음)으로 대체하여 출력한다.
```
const h = `   the hello  world   !     
`
    
console.log(
  h.replace(/\s/g, '')
)
// thehelloworld!
```

변수 str

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

(?=)

앞쪽 일치 (Lookahead)이다.
- 원하는 문자의 앞쪽의 내용 출력하기
  
  앞쪽일치 뒤쪽에 찾고자 하는 문자(@)를 입력해준다.
  그리고 앞쪽 일치 앞쪽의 문자들을 연속적으로 일치시켜줘야 하기 때문에 마침표를 추가하고 그 뒤에 한개 이상 연속으로 출력하기 위해 {1,}를 추가해준다.
```
console.log(
  str.match(/.{1,}(?=@)/g)
)
// ['thesoha']
```
(?<=)

뒤쪽 일치 (Lookbehind)이다.
- 뒤쪽일치가 제대로 되지 않은 예시
```
console.log(
  str.match(/.{1,}(?<=@)/g)
)
// ['thesoha@']
```
- 올바르게 출력된 뒤쪽일치
  
  뒤쪽일치 패턴을 원하는 방식으로 나오게 하려면 뒤쪽에 대한 내용들을 뒤쪽일치 패턴 뒤에 작성해줘야 한다.
```
console.log(
  str.match(/(?<=@).{1,}/g)
)
// ['gmail.com']
```

JavaScript: 정규표현식 Ep.2 (메소드, 플래그(옵션))

05 Oct 2022 • TIL

메소드

정규표현식을 다룬다.

test

일치 여부(Boolean)를 반환한다.

정규식.test(문자열)

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
  
const regexp = /fox/gi
console.log(regexp.test(str)) // true

match

일치 문자열의 배열(Array)을 반환한다.
```
문자열.match(정규식)
```

replace

일치 문자열을 새로운 문자열로 대체하고 그 대체된 결과를 문자열(String)로 반환한다.
단, 원본 데이터는 손상시키지 않는다.

문자열.replace(정규식,대체문자)

그냥 replace 사용으로 원본파일 변경 X

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
    
const regexp = /fox/gi
console.log(str.replace(regexp, 'AAA'))
// 010-1234-5678
// thesoha@gmail.com
// https://soi-ha.github.io/
// The quick brown AAA jumps over the lazy dog.
// abbcccdddd
    
console.log(str)
// 010-1234-5678
// thesoha@gmail.com
// https://soi-ha.github.io/
// The quick brown fox jumps over the lazy dog.
// abbcccdddd

원본파일 변경하는 방법

let str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`
    
const regexp = /fox/gi
str = str.replace(regexp, 'AAA')
console.log(str)
    
// 010-1234-5678
// thesoha@gmail.com
// https://soi-ha.github.io/
// The quick brown AAA jumps over the lazy dog.
// abbcccdddd

플래그(옵션)

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

global의 약어로, 찾고자 하는 모든 문자를 찾는다.
따라서, g 플래그를 붙이고 시작하는 경우가 많다.

g 플래그 X

 const regexp = /the/
 console.log(str.match(regexp))

 // ['the', index: 15, input: '\n010-1234-5678\nthesoha@gmail.com\nhttps://soi-ha.gi…ck brown fox jumps over the lazy dog.\nabbcccdddd\n', groups: undefined]

g 플래그 O

 const regexp = /the/g
 console.log(str.match(regexp))

 // (2) ['the', 'the']

i

ignore case의 약어로, 영어의 대소문자를 구분하지 않고 검색하게 한다.
플래그 i를 붙이지 않는다면 영어의 대소문자를 구분하여 검색한다.
- i 플래그 X
```
const regexp = /the/g
console.log(str.match(regexp))
    
// (2) ['the', 'the']
```
- i 플래그 O
```
const regexp = /the/gi
console.log(str.match(regexp))
    
//(3) ['the', 'The', 'the']
```
m

multi line의 약어로, 특정한 문자 데이터 안에서 줄바꿈 처리가 되어져 있는 여러줄의 글자(문자)들을 고려하지 않고 검색한다.
즉, 쉽게 말하자면 원래는 문자 데이터의 맨 첫줄 시작과 맨 마지막줄 끝만을 보고 검색했다.
그러나, m 플래그를 사용함으로 문자 데이터 안에서 줄바꿈처리가 되어져있다면, 그 줄 하나하나의 처음과 끝, 처음과 끝을 찾아서 검색한다.

기존 - 문자 데이터의 맨 처음과 끝만을 보고 검색한다.
m 플래그 - 문자 데이터의 한줄 한줄의 처음과 끝으로 검색한다.
- m 플래그 X
  
  m이라는 플래그를 사용하지 않으면 str 데이터의 가장 끝부분에서 마침표를 찾으려고 한다.
  하지만, 가장 마지막 줄 (7번째 라인 = 백틱이 있는 라인)에는 마침표가 없기 때문에 null이라는 값이 반환된다.
```
console.log(str.match(/\.$/gi)) // null
```
- m 플래그 O
  
  m 플래그를 사용하면, 해당 데이터에서 마침표로 끝나는 줄을 찾아서 반환한다.
  str 데이터에서 마침표로 끝나는 줄은 5번째 줄 (The quick …)
```
console.log(str.match(/\.$/gim)) // ['.']
```
- 이스케이프 문자(Escape Character)
  \(백슬래시) 기호를 통해 본래의 기능에서 벗어나 상태가 바뀌는 문자를 말한다.
  아래 예제에서 .(마침표)를 검색하고 싶을 때 /./으로 작성하면 안된다.
  정규표현식에서 마침표 하나는 특정한 문자를 검색하는 패턴이다. 그렇기에, 마침표를 검색하고 싶다면 \/.\로 작성해야 한다.
  이스케이프 문자는 모든 특수기호들이 사용가능한 것은 아니고 정규표현식에서 기능으로 해석이 되는 특수문자만 해당이 된다.
- $ 의미
  $은 꼭 마침표 뒤쪽에 붙여야 한다.
  $ 앞에 있는 하나의 단어로 해당하는 줄이 끝나는 부분을 찾아서 끝나는 부분을 일치시킨다.
  해당 예제에서 끝나는 부분은 abbcccdddd줄이 아닌 그 다음줄의 백틱(`)기호가 있는 줄이다.

JavaScript: 정규표현식 Ep.1 (정규식 생성)

28 Sep 2022 • TIL

정규식 생성

정규표현식 (Regular Expression) 문자열을 검색하고 대체하는데 사용 가능한 일종의 형식언어(패턴)이다.
간단한 문자 검색부터 이메일, 패스워드 검사 등의 복잡한 문자 일치 기능등을 정규식 패턴으로 빠르게 수행할 수 있다.
정규표현식은 자바스크립트에서만 사용할 수 있는 것이 아니기에 다른 프로그래밍 언어나 특정한 환경에서도 사용할 수 있다.
주의해야 할 점은, 자바스크립트에서는 동작하지만 다른 언어나 환경에서는 동작하지 않을 수도 있다. 반대로 다른 프로그래밍 언어에서는 동작을 하는데 자바스크립트 환경에서는 동작하지 않는 내용이 있을 수도 있다.

정규표현식 역할

문자 검색 (search)
문자 대체 (replace)
문자 추출 (extract)

정규표현식 테스트 사이트
해당 사이트를 이용하여 정규표현식을 빠르게 테스트할 수 있다.
regex101
regexr
regexper

자바스크립트 정규식(=정규표현식) 생성

생성자 함수 방식

new라는 키워드와 함께 전역에서 사용할 수 있는 전역개체로 RegExp라는 객체를 제공한다.
해당 객체를 생성자함수로 만들면 정규표현식을 생성할 수 있다.
이렇게 생성된 결과를 특정한 변수에 받아서 활용할 수 있다.

첫번째 인수, 특정한 표현의 패턴
두번째 인수, 해당 패턴을 어떤 방식으로 검색할 것인지에 대한 옵션
```
new RegExp('표현', '옵션')
new RegExp('[a-z]', 'gi')
```
리터럴 방식

생성자 함수 방식은 패턴부분을 따옴표로 묶어서 문자데이터로 인수를 넣어서 사용했지만 리터럴 방식은 패턴부분 양옆에 /(슬래쉬)기호를 붙여서 작성한다.
```
/표현/옵션
/[a-z]/gi
```

두 정규식 생성 비교 실습

const str = `
010-1234-5678
thesoha@gmail.com
https://soi-ha.github.io/
The quick brown fox jumps over the lazy dog.
abbcccdddd
`

실습 - 생성자 함수 방식
- the라는 문자 검색하기
```
const regexp = new RegExp('the','')
console.log(str.match(regexp))
```
  첫번째 인수에 검색하고자 하는 문자, the를 입력한다.
  검색하고자 하는 변수 str에 match라는 메소드를 사용해서 첫번째 인수로 생성자함수를 통해서 생성된 인스턴스가 담겨져 있는 변수(regexp)를 넣는다.
```
0: "the"
groups: undefined
index: 87
input: "\n010-1234-5678\nsoha@gmail.com\nhttps://soi-ha.github.io/\nThe quick brown fox jumps over the lazy dog.\nabbcccdddd\n"
length: 1
```
  인덱스가 0번인 데이터를 확인하면 정규표현식의 패턴으로 입력한 단어(the)가 보인다.
  input 부분에는 검색하려 했던 변수 str의 내용이 들어가 있다.
  
  str이라는 input부분에 입력된 문장에서 the라는 단어를 찾아서 배열데이터로 만들어 주는데 기본적으로는 제일 처음에 찾아진 the라는 단어만 배열로 만들어준다.
- 모든 the 문자 검색하기
```
const regexp = new RegExp('the','g')
console.log(str.match(regexp))
```
  두번째 인수에 g라는 옵션(플래그)을 추가해준다.
  g는 검색하고자 하는 모든 문자열을 불러온다.
  옵션을 플래그라고도 부른다.
```
(2) ['the', 'the']
0: "the"
1: "the"
length: 2
```
- 대소문자 상관없이 모든 the 문자 검색하기
```
const regexp = new RegExp('the','gi')
console.log(str.match(regexp))
```
  두번째 인수에 g와i라는 옵션(플래그)을 추가해준다.
  i는 대소문자 모두를 검색한다.
```
(3) ['the', 'The', 'the']
0: "the"
1: "The"
2: "the"
length: 3
```
실습 - 리터럴 방식
```
const regexp = /the/gi
console.log(str.match(regexp))
```
슬래쉬 사이에 검색하고자 하는 문자를 입력하고 슬래쉬 뒤에는 원하는 옵션을 작성한다.
```
(3) ['the', 'The', 'the']
0: "the"
1: "The"
2: "the"
length: 3
```
검색 결과는 생성자함수 방식과 동일하게 나온다.
리터럴 방식이 생성자함수보다 더 간결하게 검색할 수 있어서 앞으로는 주로 리터럴방식을 통해서 정규표현식을 사용한다.

JavaScript: JS 데이터 실습 Ep.2 (storage, OMDb API)

17 Sep 2022 • TIL

Storage

개발자 도구 → Application (console 옆) → Storage → Local, Session Storage → 도메인 주소

Local Storage
Key Value 형태로 데이터 저장한다.
저장한 데이터는 브라우저 세션 간에 공유한다.
로컬 스토리지에 저장되는 데이터는 해당하는 도메인 주소에 종속되어 저장이 된다. (즉, 하나의 사이트에 종속이 됨)
데이터를 따로 지우지 않는 한, 데이터는 만료되지 않는다. (반영구적)
Session Storage
Key Value 형태로 데이터 저장한다.
페이지의 세션이 끝날때, 즉 페이지를 닫을 때 데이터도 모두 사라진다.

메소드

localStorage.setItem
setItem 메소드를 사용하여 데이터를 저장한다.
localStorage라는 전역 객체를 사용해서 setItem이라는 메소드 실행한다.
첫번째 인수는 Key, 두번째 인수는 Value이다. (하나의 데이터!)
데이터는 되도록 문자 데이터로 저장하는 것이 좋으며, 문자 데이터가 아닐 경우엔 저장이 되지 않을 수도 있다.
```
localStorage.setItem('myCat', 'Tom');
```
- 추가! 객체, 배열 데이터를 문자 데이터로 변환하기! (지난 JSON 글 참고)
  객체, 배열 데이터 같은 경우는 JSON 객체의 stringify를 통해서 문자 데이터화 시켜서 데이터를 저장한다. 이렇게 저장된 문자 데이터를 가져와서 JSON 객체의 parse 메소드를 통해서 분석하여 자바스크립트 파일 내에서 하나의 데이터로 활용할 수 있다.
localStorage.getItem
특정한 데이터를 읽어오는 용도로만 사용할때 getItem 메소드를 사용한다.
getItem은 해당하는 데이터의 속성값 (key값)만 알면 된다.
인수는 key값 하나만 적으면 해당 메소드를 통해 데이터를 읽어올 수 있다.
```
const cat = localStorage.getItem('myCat');
```
localStorage.removeItem
원하는 데이터 값을 지울때 사용한다.
```
localStorage.removeItem('myCat');
```

실습하기

const user = {
	name: 'Soha',
	age: 45,
	emails: [
		'soha@gmail.com',
		'neo@naver.com'
	]
}

localStorage.setItem('user', user)

// local Storage
// Key: User Value: [object Object]

setItem

원하던 value값이 저장되지 않았다.
문자 데이터로 변환을 해줘야 한다.

localStorage.setItem('user', user)
    
// local Storage
// Key: User Value: [object Object]

문자 데이터화 시키기

localStorage.setItem('user', JSON.stringify(user))
    
// local Storage
// Key: User 
// Value: {name: 'Soha',age: 45,emails: ['soha@gmail.com','neo@naver.com']}

getItem

로컬스토리지에서 가져오기

  console.log(localStorage.getItem('user'))
    
// console 창
// {"name": "Soha","age": 45,"emails": ["soha@gmail.com","neo@naver.com"]}

객체 데이터로 변환하기

  console.log(JSON.parse(localStorage.getItem('user')))
    
// console 창
// {name: 'Soha',age: 45,emails: ['soha@gmail.com','neo@naver.com']}

removeItem

로컬 스토리지의 데이터 지우기

  localStorage.removeItem('user')
// local Storage
// Key: <공란> Value: <공란>

로컬 스토리지의 데이터 수정하기
로컬 스토리지에 있는 데이터를 수정하기 위해서는 데이터를 가져와서 수정을 한 후, 다시 해당하는 Key의 이름으로 덮어쓰기를 하면 된다.

일단, 로컬 스토리지에서 해당 데이터를 가져와서 변수에 할당해준다.
parse를 통해 객체 데이터로 변환을 한 것을 obj 변수에 할당한다.
해당 객체 데이터의 age 값을 22로 변경한다.
변경한 변수(obj)를 user에 다시 넣어주면! → 저장이 안된다.
obj는 자바스크립트에서 사용하고 있는 하나의 객체 데이터이기 때문에 문자 데이터로 변환을 한 후, 저장을 해야 한다.

  const str = localStorage.getItem('user')
  const obj = JSON.parse(str)
  obj.age = 22
  
  localStorage.setItem('user',JSON.stringify(obj))
  
  // local Storage
  // Key: User 
  // Value: {name: 'Soha',age: 22,emails: ['soha@gmail.com','neo@naver.com']}

OMDb API

Open Movie Database API
OMDb API 링크

Parameters

parameter는 하나의 명령이라고 보면 된다.

Parameter 중 By Search

parameter: s required: yes
parameter가 s일때, s라는 명령이 Required yes이면 필수라는 것이다.
s라는 명령은 기본적으로 사용을 해야 하는 것이기에 꼭 사용해야 한다.
s 명령의 기능은 영화의 제목을 검색해주는 것이다.

Usage

Send all data requests to:

http://www.omdbapi.com/?apikey=[yourkey]&

http로 시작하는 omdb 닷컴에 api를 요청할 수 있다.
정보를 요청할 때, 옵션으로 apikey라는 것을 입력해 줘야 한다. (부분에 yourkey)

주소를 온전하게 사용하기 위해서는 query string(?, & 등)을 정확히 알아야 한다.

Query String

Query → 검색
String → 문자 데이터
문자를 가지고서 무언갈 검색한다는 것으로 알면 된다.

주소?속성=값&속성=값&속성=값

첫번째 주소
요청이 가능한 특정한 주소이다.
브라우저에서 볼 수 있는 기본적인 웹사이트 혹은 어떤 데이터를 취급하는 웹의 서버 주소 일 수도 있다.
?
첫번째 주소 뒤의 ? 뒤에 속성과 값의 형태로 특정한 옵션을 작성할 수 있다.
대표적인 것이 속성으로는 apikey 값은 발급받은 특정한 key값 해당 속성을 통해서 주소에 요청을 날리게 되면 값을 활용해서 사용자를 인증하게 된다.
위의 사용자 인증뿐만이 아닌, 원하는 영화정보도 가져오고 싶다! 그럴때 &를 사용한다.
&
앞선 ? 뒤의 옵션과 영화정보를 가져오기 위한 옵션 작성을 구분하기 위해서 &를 사용한다.
원하는 영화 정보를 가져오기 위해서 속성에는 파라미터 s를 입력, 값에는 검색하고 싶은 영화의 제목을 입력한다.

정리
Query String은 특정한 주소로 접근을 할때 해당 페이지의 기본적인 옵션을 명시하는 용도로 사용되는 문자이다. 기본적인 형태(주소?속성=값&속성=값&속성=값)를 잘 알고 있자!

axios

promise라는 자바스크립트에서 사용할 수 있는 특정한 객체이다.
axios는 promise 기반으로 만들어졌으며, 브라우저, node.js 사용할 수 있는 HTTP 요청을 처리해주는 자바스크립트 패키지이다.
axios Github 링크

설치

npm을 통해 axios를 설치하면 된다.
http 요청을 처리할 수 있어야 하기 때문에 개발 의존성(-D)이 아닌 일반 의존성으로 설치해야 한다.

$npm i axios

axios 실습하기

import axios from 'axios'

fuction fetchMovies() {
	axios
		.get('https://www.omdbapi.com/?apikey=[yourkey]&s=frozen')
		.then((response) => {
			console.log(response)
		})  
}
fetchMovies()

fetchMovies라는 함수 만들어 준다. 영화들을 가져오는 함수이다.
함수 내에서 axios를 실행한다.
메소드로 get을 사용하는데 get 부분에 omdb 페이지에서 사용했었던 주소를 넣어준다. get 메소드를 설명하자면, axios 패키지를 통해서 해당하는 주소를 get(얻는) 하는 것이다.
뒤에 then 메소드 추가하기 (메소드 체이닝, 체인처럼 연결해서 사용하는 것)
get 메소드에서 얻은 것을 then 메소드에서 처리할 것이다.
then 안에 익명의 함수를 만들고 인수로는 response를 넣는다. response는 응답이라는 뜻을 가지며 서버(주소)에 요청이 들어가고 나온 결과가 응답이라는 개념으로 반환이 돼서 then이라는 메소드의 콜백 함수 내에서 활용할 수 있다.
하단에 함수를 작성하여 실행한다.
npm run dev를 입력하여 개발 서버를 열어 console창에 잘 뜨는지 확인한다.

영화 포스터와 제목 출력하기

<body>
	<h1>Hello World!</h1>
	<img src="" alt="" width="200">
</body>

import axios from 'axios'

fuction fetchMovies() {
	axios
		.get('https://www.omdbapi.com/?apikey=[yourkey]&s=frozen')
		.then(res => {
			console.log(res)
			const h1El = document.querySelector('h1')
			const imgEl = document.querySelector('img')
			h1El.textContent = res.data.Search[0].Title
			imgEl.src = res.data.Search[0].Poster
		})  
}
fetchMovies()

변수를 생성하여 html 파일의 h1과 img태그를 찾아서 변수에 할당한다.
영화의 포스터와 제목이 들어있는 곳을 확인해 보면 data 속성 → Search 속성 안의 배열에 0번째 배열의 Title을 textContent에 할당한다. 그러면 Hello World!가 없어지고 그 자리에 Frozen이 나오게 된다.
영화 포스터 출력또한 제목 출력과 마찬가지이다.

axios 정리

axios 패키지의 도움을 받아서 특정한 주소로 사용자를 인증하고 검색하고 싶은 내용을 정리해서 데이터를 요청한다.
요청된 데이터를 서버에서 처리해서 기본적인 인증과정을 거치고 응답을 하게 된다.
해당 응답을 axios라는 패키지가 내부적으로 처리해서 then이라는 메소드의 콜백 함수에서 처리할 수 있도록 우리가 지정한 res라는 변수에 내용을 담아준다. 이 로직이 axios 패키지 내부에 담아져 있는 것이다.

JavaScript: JS 데이터 실습 Ep.1 (가져오기, 내보내기, Lodash, JSON)

12 Sep 2022 • TIL

가져오기, 내보내기

가져오기

import 키워드를 통해서 파일을 가져올 수 있다.

// main.js 

import _ from 'lodash' // From `node_modules`
import getType from './getType' // getType.js
import getRandom from './getRandom' // getRandom.js

console.log(_.camelCase('the hello world')) //theHelloWorld
console.log(getType([1, 2, 3])) // Array
console.log(getRandom(), getRandom())) // 5, 9

from 뒤에 별도의 경로 없이 설치한 패키지의 이름만 명시하면 node_modules 폴더에서 찾아서 가져오는 것이다.
상대경로를 통해서 외부에서 특정한 자바스크립트 파일들을 불러와서 사용할 수 있다.

내보내기

export 키워드를 통해서 파일을 내보낼 수 있다.

// getType.js

export default function getType(data) {
	return Object.prototype.toString.call(data).slice(8, 16)
}

Default export
이름을 따로 지정하지 않아도 되는 기본 통로이다.
export 키워드와 함께 default 키워드를 사용한다.
- getType이라는 함수의 이름을 지워도 정상적으로 출력된다.
```
// getType.js
      
export default function (data) {
  return Object.prototype.toString.call(data).slice(8, 16)
}
```
- 불러올때 또한, 원하는 이름으로 불러와도 된다. 경로만 잘 입력하면 이름은 무엇을 하던 사용이 가능하다.
```
// main.js
      
import checkType from './getType' // getType.js
```
- 기본 통로는 하나의 파일에서 하나의 데이터만 내보낼 수 있다.
  2개 이상의 데이터를 입력해서 사용했을 시에는 error가 발생한다.
```
// getType.js
      
export default function (data) {
  return Object.prototype.toString.call(data).slice(8, 16)
}
export default 123
```
```
// main.js
      
import checkType from './getType' // getType.js
      
// Error!! 
// Only one default export allowed per module
```

Named export
이름을 꼭! 지정해줘야 하는 통로이다.

이름을 반드시 지정해줘야 하기 때문에 함수에 이름이 필요하다.

// getRandom.js
      
export function random() {
  return Math.floor(Math.random() * 10)
}

이름을 지정해줘야 하는 통로(named export)는 이름을 중괄호로 묶어서 불러와야 한다.
```
// main.js
      
import { random } from './getRandom' // getRandom.js
```

이름 지정 통로는 이름만 지정되어 있으면 몇개든지 내보낼 수 있다.
각 데이터에 이름이 지정되어져 있기 때문에 하나의 파일에서 여러 데이터를 보낼 수 있다.

// getRandom.js
      
export function random() {
  return Math.floor(Math.random() * 10)
}
export const user = {
  name: 'Soha',
  age: 45
}

// main.js
      
import { random, user } from './getRandom' // getRandom.js
      
console.log(random(), random()) // 4, 8
console.log(user)
// {name: 'Soha', age: 45}

원하는 이름으로 바꿔서 사용하기
as 키워드를 통해 원하는 이름으로 바꿔서 사용할 수 있다.
꺼내올때는 user 이름으로 꺼내오지만 사용할 때는 soha로 사용한다.
```
// main.js
      
import { random, user as soha } from './getRandom' // getRandom.js
      
console.log(random(), random()) // 4, 8
console.log(soha)
// {name: 'Soha', age: 45}
```

random과 user 함수(데이터)를 한번에 불러오기
와일드카드 (Wildcard Character, *)는 여러 내용을 한꺼번에 지정할 목적으로 사용하는 기호를 가리킨다.

// main.js
      
// import { random, user as soha } from './getRandom' // getRandom.js
import * as R './getRandom'
      
console.log(R)
// random: f random()
// user: {name: 'Soha', age: 45} ... 

default export와 named export 둘다 사용
하나의 자바스크립트 파일에서 default export와 named export 둘 다 사용이 가능하다.
와일드카드를 사용하여 모든 데이터들을 내보내는 방식을 통해서 두 통로가 한 파일에서 존재하여 사용할 수 있다.

 // getRandom.js
    
 export function random() {
   return Math.floor(Math.random() * 10)
 }
 export const user = {
   name: 'Soha',
   age: 45
 }
 export default 123

 // main.js
    
 // import { random, user as soha } from './getRandom' // getRandom.js
 import * as R './getRandom'
    
 console.log(R)
 // default: 123
 // random: f random()
 // user: {name: 'Soha', age: 45} ... 

모듈 (module)
가져오는 통로(import)가 따로 없이 export만 있는 파일을 모듈이라고 부른다.
단, 내보내는 통로가 없이 모두 막혀있어도 모듈이라고 부를 수 있다.

Lodash 사용법

메소드

import _ from 'lodash'
// default 키워드로 내보내진 것으로 이름을 _ 으로 지정해줬음

const usersA = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '2', name: 'Neo' }
]
const usersB = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '3', name: 'Amy' }
]

concat (lodash 아님)
concat 앞의 usersA와 뒤의 usersB를 합쳐서 새로운 배열 데이터(usersC)를 만들어 낸다.
usersId는 고유값인데 해당 값이 중복되어서 합쳐지게 된다.

const usersC = usersA.concat(usersB)
console.log('concat', usersC)
// concat
// 0: { userId: '1', name: 'Soha' }
// 1: { UserId: '2', name: 'Neo' }
// 2: { userId: '1', name: 'Soha' }
// 3: { UserId: '3', name: 'Amy' }

uniqBy
하나의 배열데이터에서 특정한 속성의 이름으로 고유화를 시켜주는 메소드이다. 따라서 사용하는 인수는 배열 데이터 하나.
중복된 해당 배열 데이터를 첫번째 인수로 넣는다.
두번째 인수로는 중복을 구분할 속성의 이름(userId)을 넣어준다.
```
console.log('uniqBy', _.uniqBy(usersC, 'userId'))
// uniqBy
// 0: { userId: '1', name: 'Soha' }
// 1: { UserId: '2', name: 'Neo' }
// 2: { UserId: '3', name: 'Amy' }
  
const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)
```
unionBy
합치기 전에, 여러개의 배열 데이터를 적어주고 마지막에 해당 배열 데이터를 합칠 때 고유화 작업을 시킬 속성의 이름을 명시한다. 그러면 고유화가 된 새로운 배열데이터를 반환한다.

중복이 발생할 수 있는 배열 데이터가 두가지가 있고 해당 데이터를 아직 합치기 전일때, unionBy를 통해 중복없이 두 데이터를 합쳐준다.

첫번째 인수, 합쳤을 때 중복이 발생할 수 있는 데이터 1 (usersA)
두번째 인수, 합쳤을 때 중복이 발생할 수 있는 데이터 2 (usersB)
세번째 인수, 중복을 구분할 속성의 이름 (userId)
```
const usersD = _.unionBy(usersA, usersB, 'userId')
console.log('unionBy', usersD)
// unionBy
// 0: { userId: '1', name: 'Soha' }
// 1: { UserId: '2', name: 'Neo' }
// 2: { UserId: '3', name: 'Amy' }
```

import _ from 'lodash'
// default 키워드로 내보내진 것으로 이름을 _ 으로 지정해줬음

const users = [
	{ userId: '1', name: 'Soha' },
	{ UserId: '2', name: 'Neo' },
	{ userId: '3', name: 'Amy' },
	{ UserId: '4', name: 'Evan' },
	{ UserId: '5', name: 'Lewis' }
]

const foundUser = _.find(users, { name: 'Amy' })
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
console.log(foundUser)
console.log(foundUserIndex)

_.remove(users, { name: 'Soha' })
console.log(users)

find
첫번째 인수, 찾고자 하는 배열 데이터
두번째 인수, 찾고자 하는 조건

해당 내용(두번째 인수)이 포함되어져 있는 특정 객체를 해당 배열(첫번째 인수)에서 find 메소드를 통해 찾아서 해당 결과를 foundUser라는 변수에 할당한다.
```
const foundUser = _.find(users, { name: 'Amy' })
console.log(foundUser)
// { userId: '3', name: 'Amy' }
```
findIndex
첫번째 인수, 찾고자 하는 배열 데이터
두번째 인수, 찾고자 하는 조건

찾고자 하는 객체의 인덱스 번호를 반환한다.
```
const foundUserIndex = _.findIndex(users, { name: 'Amy' })
console.log(foundUserIndex) // 2
```

remove
첫번째 인수, 찾고자 하는 배열 데이터
두번째 인수, 찾고자 하는 조건

원하는 객체를 찾아 삭제한다.

_.remove(users, { name: 'Soha' })
console.log(users) 
  
// 0:	{ UserId: '2', name: 'Neo' }
// 1:	{ userId: '3', name: 'Amy' }
// 2:	{ UserId: '4', name: 'Evan' }
// 3:	{ UserId: '5', name: 'Lewis' }

JSON

JSON (JavaScript Object Notation)은 자바스크립트의 데이터를 표현하는 하나의 포맷이다. 속성과 값의 한 쌍으로 이루어져 있다. (키-값 쌍의 형태와 유사)
인간이 읽을 수 있는 개방향 표준 포맷으로 비동기 브라우저/서버 간의 통신에서 사용된다.
특히, 컴퓨터 프로그램의 변수값을 표현하는 데 적합하다.

기본 자료형

undefined를 제외하고 모두 사용이 가능하다.
단! 문자열에서 큰 따옴표만 사용이 가능하다. (작은 따옴표는 사용이 불가능)

+추가 알게 된점
json 파일에는 주석을 사용하지 않는 것이 바르다고 규정하고 있다.

// myData.json

{
  "string": "soha",
  "number": 123,
  "boolean": true,
  "null": null,
  "object": {},
  "array": []
}

// main.js 

import myData from './myData.json'

console.log(myData)
//	string: "soha",
//	number: 123,
//	boolean: true,
//	null: null,
//	object: {},
//	array: []

이름 부분에 특수기호를 사용해야 할 때
따옴표를 사용하면 특수기호를 사용할 수 있다.
자바스크립트 문법에서 이름에 따옴표를 붙혀서 사용할 수 있으나, 매번 붙히기에 번거로우니 때고 사용하는 것이다.
그러나, 특수기호가 들어간 이름의 경우 그냥 사용이 불가능하기에 따옴표를 붙혀서 사용한다.

추가로, 이름을 company-name보다는 카멜케이스 companyName을 사용하는 것이 바람직하다.
```
const user = {
  name: 'Soha',
  age: 45,
  emails: [
    'soha@gmail.com',
    'neo@naver.com'
  ],
  'company-name': 'happy Comany',
  'companyEmail': 'happy@gmail.com'
}
```

package.json 파일 보기
node js 환경에 npm은, 패키지 환경에 json 파일로 해당 환경에 구성옵션을 만들어서 관리하는 것이다.
json이라는 것은 하나의 데이터 취급을 받을 수 있기 때문에 구성옵션을 관리하기가 좋은 json 포맷으로, 패키지를 데이터처럼 관리한다.

{
  "name": "src",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "^1.20.0",
    "convert-excel-to-json": "^1.7.0",
    "cookie-parser": "~1.4.4",
    "crypto": "^1.0.1",
    "debug": "~2.6.9",
    "dotenv": "^16.0.1",
    "ejs": "~2.6.1",
    "express": "~4.16.1",
    "express-session": "^1.17.3",
    "http-errors": "~1.6.3",
    "morgan": "~1.9.1",
    "mysql2": "^2.3.3",
    "node-fetch": "^2.6.7",
    "nodemailer": "^6.7.8",
    "qs": "^6.11.0",
    "xlsx": "^0.18.5"
  }
}

undefined는 사용 불가
"undefined": undefined 입력시 error표시가 뜬다.
가져올때, 확장자 생략 불가능
import파일을 통해 불러올때 확장자를 생략할 수 있었는데, 생략은 js파일만 가능한 것이다. 다른 확장자들은 꼭 해당 확장자를 입력해야 한다.
json 파일은 문자 데이터
json파일은 하나의 문자데이터이다.
import로 가져와지면 마치 객체 데이터처럼 사용되는 것으로 볼 수 있다.
json파일은 최대한 경량화를 해야하기 때문에 하나의 메모리만 참조하면 되는 큰 덩어리의 문자데이터로 관리가 된다.
```
// main.js 
  
const user = {
  name: 'Soha',
  age: 45,
  emails: [
    'soha@gmail.com',
    'neo@naver.com'
  ]
}
```
- 대문자로 적힌 JSON
  자바스크립트 전체 영역에서 사용할 수 있는 전역객체이다.
- stringify 메소드
  파일을 json화 시키기 위해서 JSON.stringify를 사용하여 문자 데이터화시킨다.
  자바스크립트 파일 내부에서 어떤 특정한 데이터를 json의 포맷(형태)으로 문자 데이터화 시켜주는 메소드이다.
  stringify인수로 객체 데이터가 아니더라도 자바스크립트에서 사용할 수 있는 모든 데이터를 인수로 사용하여 json 포맷(문자 데이터)으로 만들어서 활용할 수 있다.
```
const str = JSON.stringify(user)
console.log('str', str)
// str
// { "name": 'Soha', "age": 45, "emails": ['soha@gmail.com',
// 'neo@naver.com']}
console.log(typeof str) // string
```
- parse 메소드
  실제 자바스크립트 파일처럼 사용하기 위해서 JSON.parse를 사용한다.
  stringify에서 만들어진 문자 데이터를 parse 메소드의 인수로 넣게 되면 분석하여 자바스크립트에서 활용할 수 있는 하나의 데이터로 재조립할 수 있다.
```
const obj = JSON.parse(str)
console.log('obj', obj)
// obj
//	name: 'Soha',
//	age: 45,
//	emails: ['soha@gmail.com','neo@naver.com']
```

Older