정리하는 날? replace feach etc....

우선 2주차 숙제를 2시까지 했다. 역시 아직은 어려운 부분들이 많은 것 같다.

 

replace

String타입은 replace()함수를 이용해 특정 문자열을 다른 문자열로 바꿀 수 있다.

- 기본적으로 replace()는 먼저 검색되는 1개의 문자열만 변환한다.

- 여러 문자열을 변환할 때는 정규 표현식을 이용하여 일치하는 모든 문자열을 변환할 수 있다.

 

예시)

let str = 'Hello world, Java';

str = str.replace('Java', 'JavaScript');
console.log(str);

이렇게만 설명하면 이해가 잘 안 가는데

let str = 'Hello world, Java, Java, Java';

str = str.replace('Java', 'JavaScript');
console.log(str); //Hello world, JavaScript, Java, Java

 

이 코드는 문자열에 바꾸려는 문자열이 여러 개 있어도, 가장 먼저 찾은(앞에 있는) 문자열 1개만 변환한다.

 

여러 문자열을 변환하려면 정규 표현식을 써야한다고 했는데, 정규표현식은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식언어이다.  

 

기능으로는 문자 검색, 추출, 치환이 있으며 /Pattern/flag처럼 패턴과 플래그로 구성된다.

let str = 'Hello world, Java, Java, Java';

str = str.replace(/Java/g, 'JavaScript');
console.log(str); //Hello world, JavaScript, JavaScript, JavaScript

여기서 패턴은 java, 플래그는 g가 되는데, g는 해당하는 모든 문자열을 변환하라는 의미이다.

 

여기서 패턴과 플래그란

1. 패턴 : 문자열의 일정한 규칙을 표현

• 패턴은 /로 열고 닫으며, 문자열의 따옴표는 생략한다. 
• 따옴표를 포함하면 따옴표까지도 패턴에 포함되어 검색된다.
• 패턴은 특별한 의미를 가지는 메타문자 또는 기호로 표현 가능하다.

[참고]

https://hamait.tistory.com/342

https://hanamon.kr/javascript-%EC%A0%95%EA%B7%9C%ED%91%9C%ED%98%84%EC%8B%9D-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%EA%B0%9C%EB%85%90%ED%8E%B8/

 

2) 플래그(Flag) : 정규 표현식의 검색 방식을 설정

• 원하는 문자 검색 결과를 반환하도록 할 수 있다.
• 정규 표현식의 옵션으로서, 꼭 설정하지 않아도 된다.
• 하나 이상의 플래그를 동시에 설정할수도 있다.
• 순서는 상관없다.

 

g(global) 플래그

: 모든 문자를 검색

g가 없으면 원래는 처음 발견된 결과만 출력된다.
g가 있으면 있는 모든 검색 결과를 배열로 반환한다.

str = 'Hi wecode! I am code kim.';
const regexp1 = /code/; // we'code'
const regexp2 = /code/g; // we'code', 'code' kim

i(ignoreCase) 플래그

: 영어 대소문자를 구분하지 않음(무시함)

i가 없으면 원래는 code와 Code는 다르다. ==> 대소문자를 구분함!
ig를 같이 사용하게 되면 대소문자 구분없이 표현식의 모든 검색결과를 배열로 반환한다.

m(multi line) 플래그

: 문자열의 행이 바뀌더라도 패턴 검색을 계속함

y(sticky) 플래그

: lastIndex 속성을 이용해 원하는 위치에서 검색을 시작

const str = "Cats love cats, and we love cats."
const regExp = /cats/igy;
exp.lastIndex = 4; // index 4 이후부터 검색

 

lastIndex를 지정한 뒤 플래그 y로 검색하면, 그 위치에서 검색이 시작된다.

 

u(unicode) 플래그

: 유니 코드 문자를 처리

s(single line) 플래그

: 개행(\n)을 무시하여 단일 라인으로 취급

최근에는 많은 브라우저에서 사용되지 않는다.

https://velog.io/@iamminzzy/%EC%A0%95%EA%B7%9C-%ED%91%9C%ED%98%84%EC%8B%9DRegular-Expression-%ED%8C%A8%ED%84%B4%EA%B3%BC-%ED%94%8C%EB%9E%98%EA%B7%B8

대소문자 구분 없이 문자열을 치환하기 위해서는 플래그에 i를 추가하면 된다.

let str = 'Hello world, Java, Java, Java';

str = str.replace(/java/gi, 'JavaScript');
console.log(str); //Hello world, JavaScript, JavaScript, JavaScript

+) 공백으로 치환하고 싶으면 " "를 넣으면 된다.

 

개인 과제

3주치 강의를 보다 보니 뭔가 개인 과제를 조금이나마 진행할 수 있을 것 같아, 영화의 api를 받아왔다.

const options = {
	method: 'GET',
	headers: {
		accept: 'application/json',
		Authorization: 'Bearer eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiJkMzcxNjA2ZDhjZjFhNzExMGM3NDA4NDgyMzRkYTI5OCIsIm5iZiI6MTcyMTg5NTIxOS42Mzc4OTQsInN1YiI6IjY2OWRhNDQxZjE3YTkxMjZkMjRjMzE2ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.ee981DIwG9c7sMsfzEQ20JrbYWmpJyD8_TcWcO0NXYM'
	}
};

fetch('https://api.themoviedb.org/3/movie/now_playing?language=en-US&page=1', options)
	.then(response => response.json())
	.then(response => console.log(response))
	.catch(err => console.error(err));

map에 result배열에 있는 데이터들을 담으면 될 줄 알고 진행했으나, 

const myMovieMap = new Map(options.results);
console.log("---------------d---------------------d-------------------------------------------");
console.log(myMovieMap); // 'value' 출력
myMovieMap.set(options.key,options.value)
for (const entry of myMovieMap.entries()) {
	console.log("------------------------------------d-------------------------------------------");
	console.log(`${entry[0]}: ${entry[1]}`);
	console.log("--------------------------------------------------v-----------------------------");
}

수많은 흔적들,,,,

자세히 알아보니 options에 데이터가 저장되있던 것이 아니었다. 

사실 map쪽에 문제가 있는 줄 알고 이것저것 검색했는데, 그것을 먼저 정리한 후feach에 대해 다뤄보겠다.

 

for in 반복문은 객체의 key를 하나씩 가져온다.

for of문은 interable한 속성을 지닌 String, Array, TypedArray, Map, Set에서 값을 하나씩 가져온다.

허나 객체는 interable 이 아니기 때문에 Object.kyes 혹은 Object.values를 통해 배열로 바꿔서 값을 가져와야한다.

entries를 이용하면 enumerable 속성의 key와 value 배열을 동시에 가져올 수도 있다.

map 개념정리 및 사용예제

https://codingeverybody.kr/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-map-%ED%95%A8%EC%88%98/

+) nodemon 실행하기

https://velog.io/@savin/Express-nodemon-%ED%8C%A8%ED%82%A4%EC%A7%80-npm-start

 

[참고 링크]

https://codechacha.com/ko/javascript-replace-in-string/

https://ko.javascript.info/regexp-introduction

https://juyami.tistory.com/89

https://velog.io/@adguy/1.js%EC%97%90%EC%84%9C-for-in-vs-for-of-%EC%B0%A8%EC%9D%B4%EC%A0%90-2.%EA%B0%9D%EC%B2%B4-%EB%B0%B0%EC%97%B4%EC%97%90%EC%84%9C-key-value-%EC%B6%94%EC%B6%9C-%EB%B0%A9%EB%B2%95

https://devinserengeti.tistory.com/25