개인프로젝트1 리뷰

조금 늦었지만 개인프로젝트 리뷰를 해보려한다. 하는 과정에서 남겨두고 싶은 부분을 적어본다.

배열을 map메소드를 사용하여 화면에 카드리스트를 나타낼 수 있다.

const movies = [ {title: "제목1"}, {title: "제목2"}, {title: "제목3"} ]
const movieTitles = movies.map(movie => `<h1>${movie.title}</h1>`);
console.log(movieTitles);
// [ "<h1>제목1</h1>", "<h1>제목2</h1>", "<h1>제목3</h1>" ]

배열에 map메소드를 사용하면 배열에 있는 요소들의 값을 변경해서 새로운 배열을 만들어준다.
이해하기 쉽게 표현하자면 다음과 같다.

form 내부에 input과 button을 넣어 html을 완성했었는데, form태그는 enter를 입력하면 submit이벤트가 실행되는 것으로 알고 있었다. 그런데 아무리 enter을 입력해도 이벤트가 실행되지 않아서 input태그에 onkeypress를 직접 넣어주었다.

onkeypress="if(event.keyCode==13){search_btn(); return false;

그런데 알고보니 form 안에 있는 button태그에 type을 명시하지 않은 경우 기본 type은 submit이지만 submit이 아닌 다른 타입을 명시하면 submit이벤트가 발생하지 않는 것이었다. (그것도 모르고,, 왜 안되는건지 고민한 나,,ㅠ)

또한, 프로젝트를 할 때 async/await에 대해 잘 숙지되지 않아 사용하지 않았는데 너무너무 중요한 부분이었다. await로 앞의 코드가 이행될 때 까지 기다려줘야 하는 것이었다.

async function printData() {
	const response = await fetchData();
	// console.log("response: ", response)
	const result = await response.json();
	// console.log("result: ",result);
}

async function fetchData() {
	const result = await fetch('https://jsonplaceholder.typicode.com/posts/1');
	return result;
}

printData();

asyne함수는 항상 Promise를 반환하고 await뒤에 있는 건 항상 Promise이다. await Promise는 Promise Result를 반환하고 약속이행이 될 때 까지 기다린다.