배운 것
디버깅 하는 법
console.log()를 사용하는 것 외에도 console.dir() 를 사용하면 해당 요소에 어떤 값이 들어있는지, 어떤 값이 T/F인지와 js에서는 다양한 속성을 변경할 수 있다는 점을 알 수 있었다.
반응형 웹사이트 만들기
grid 사용하기
.prettierrc : 어떤 기준으로 formatting하는지 정하는 파일
-> 협업할 때에는 통일하는 것이 좋다.
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))auto-fill
행과 열의 크기에 맞게 자동으로 조정
repeat() 함수와 같이 사용한다.
fr
fractional unit : 사용 가능한 공간에 대한 비율
minmax
(최솟값, 최댓값)
grid-template-rows, grid-template-columns, grid-auto-rows, grid-auto-columns에서 사용한다.
grid-gap
각 행과 행, 열과 열 사이의 간격, 여백을 의미한다.
CSS 초기화 작업
여러 브라우저에서 사용할 수 있기 때문에 각 태그들을 통일해주는 작업이 필요하다.
-> reset.css 등을 작업해준다.
api 리팩토링
미리 구조분해할당을 할 수 있다.[~~ 여러가지 키, results:~]
필요한 것은 results뿐이기에
const {results} = fetch ~
이러한 방식으로 구조분해할당을 할 수 있다.
js 여러 파일을 사용할 때 독립적인 scope를 가지게 하는 법
defer type="module" 을 스크립트에 추가해준다.
-> main.js에서 따로 만드는 것이 제일 좋다.
innerHTML
string으로 구성되어 있기 때문에 string으로 변환하여(join() 등을 사용) 할당해주어야 한다.
이벤트 위임
하위요소에서 발생한 이벤트를 상위요소에서 처리
=> 이벤트 버블링!
form 태그
default type은 submit 이다.
async await
항상 Promise를 return 한다.
토이프로젝트 개선할 점
반응형 디자인 적용하기-> 230602 완료!- 검색 기능에서 아무것도 들어오지 않았으면 alert창 나타나게 만들기
- 비동기 작업 필요한 부분 추가하기
- 변수명 사용할 때 카멜 케이스(camel case) 사용하기 -> 앞으로 js에서는 해당 습관 사용하기
