TIL 23/06/02

NEW

• filter도 함수라서 forEach((a) => {})처럼 쓸 수 있다!
• innerHTML : 전체를 한꺼번에 출력
• insertAdjacentHTML : for문 돌면서 차곡차곡 집어넣는다.
• innerHTML : string이다.
• reduce : 누적값을 리턴해준다.
• 엔터키로 검색하기

<script>
function enterKey(){
	// 함수 내용
}
</script>

// html input에 onkeyup 넣어주기!
<input
        onkeyup="enterkey()">

• 검색창에 커서 자동으로 위치하기

<input autofocus> // input태그 속성. autofocus만 쓰면 된다.

---

코드리뷰

• 반응형은 딱 한줄로 가능하다.

  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

  grid, flex는 쓸 일이 많으니 꼭 공부하기!
  

• 프리티어를 설치하면 자동으로 포매팅이 되는데, .prettierrc 파일을 통해 어떤 기준으로 포매팅할 것인지를 써두면 협업할 때 편하다.

• 브라우저에는 html 파서가 있다. .js 파일 내에서 <link rel ~> 을 통해 파일을 받는다.

• reset.css 파일을 사용하는 이유는 브라우저마다 다르게 가지고 있는 html의 기본값을 없애고 동일한 스타일을 적용하기 위해서이다.

• 시맨틱(semantic)은 코드 조각으로 뭔가 의미있는 내용을 담고있다.
  header, form, main 같은 시맨틱 태그를 사용함으로써 어떤 코드인지 예측이 가능해진다.

• fetch를 실행하면 return값은 무조건 promise가 나온다.

• 이미지는 figure 태그를 사용하면 된다.

• 바닐라JS에서는 onsubmit 말고 addEventListner 사용한다.

• 자바스크립트에서는 스네이크케이스보다 카멜케이스를 더 많이 사용한다.

• 클래스명은 보통 movie-list 처럼 하이픈을 사용한다.

• type-module 을 사용하면 각각 독립적인 scope이 생겨서 .js 파일마다 같은 변수 사용이 가능해지고, 엄격모드를 자동으로 제공해준다.

• 이벤트핸들러

• 이벤트 위임

• 이벤트 버블링

• form 태그를 사용하면 엔터를 눌러도 submit이 되고, button을 클릭해도 submit이 된다.

• event.preventDefault() : 서브밋 시 새로고침을 막아준다.
  브라우저는 특정 동작에 대해서 기본 동작을 가지고 있는 경우가 있다. form 태그 같은 경우 기본 동작으로 새로고침을 한다. 버튼이 없어도 엔터를 치면 submit이 된다.

---

어찌저찌 개인프로젝트 완성해서 제출했다.
아침부터 튜터님한테 filter 어떻게 써야할지 모르겠다고 물어보러갔는데 너무 잘한 일이다. 튜터님 감사합니다👍👍👍👍👍

코드리뷰를 통해 다른분 코드를 봤는데 굉장히 깔끔하고 정돈된 느낌이었다. 최고..!
정말 많은 것을 배울 수 있어서 좋았다.
이젠 팀과제니까 다시 또 열심히 해봐야지!