이번에는 3시간 동안 요구사항을 구현하는 과제였다.
저번 과제는 기존 프로젝트를 개선시키는 내용이었는데 이번 과제는 html 틀과 기본적인 스타일링만 있고 컴포넌트를 직접 구현하는 과제였다.
그러다보니 컴포넌트 간의 관계도 고려해야하고 짜면서 계속 수정하게 되니까 요구사항으로 나와있는 기능을 많이 구현하진 못했다. 디테일도 신경쓰지 못하고 필수 기능만 구현하다보니 3시간 순삭...
과제 할 때 구글링을 많이 해보는데 이러다 시간이 다 가는 것 같다.
평소에 연습을 많이 해서 기본적인 함수들 사용법도 외워놓고 이런 상황에는 어떻게 구현해야겠다 라는게 정해져서 바로 구현 시작해야 시간에 맞출 수 있을 것 같다.
script 태그는 body 맨 마지막에 놓자
평소에 알고 있었던 아주 기본적인 건데 테스트를 보면 이런 기본적인 것도 망각시키는 것 같다.
Fetch API의 result.json()도 promise를 리턴한다
- 기존 코드
async function callAPI (url) {
try {
const result = await fetch(url);
return result.json();
}
...- 개선 후 코드
async function callAPI (url) {
try {
const result = await fetch(url);
const json = result.json();
return json;
}
...컴포넌트를 작성할 때는 동일한 원칙안에서 코드를 작성하자
컴포넌트마다 비슷한 역할을 하는 메서드가 있는데 이런 경우 동일한 메서드 이름을 사용하거나 동일한 원칙 안에서 코드가 작성되는게 훨씬 이해하기 쉽다.
API의 성공 여부를 status code === 200으로 가리지 말자
200번대의 status code는 모두 성공을 의미하므로 fetch API를 사용하는 경우 response.ok라는 별도의 boolean 값으로 성공 여부를 확인할 수 있다.
0개의 댓글
