1. Enter key 로 검색기능 구현.

• 엔터키 눌렀을때도 검색버튼 마우스로 클릭했을때와 같은 기능이 적용되도록 하고싶어서 keypress 일때 eventListener 사용했는데 계속 오류나서 이것도 4시간은 잡고있었다. 버튼 마우스 클릭은 이벤트리스너에 'click' 을 적용한거라, 엔터키는 input칸에 'keypress' 를 적용했는데.. 도저히 안되겠어서 도움요청을 했다!
  -> button type = "submit" 으로 바꾸고
  -> input 칸 말고 form 에 eventListener 적용
  이말은 즉, form 에서 submit 일어날때 엔터키 이벤트를 적용하는것이다!!

• 기능 적용할때 자꾸 시야가 좁아지는것 같다. (저번 영화제목들만 모아놨던 배열처럼... ㅜ)검색할때 필요한 버튼, 인풋칸만 보고 거기에 자꾸 이벤트 걸었는데 그보다 넓은 범위인 form 태그 써놓고 전혀~ 생각도 못하고 있었다..! 코드도 넓게보자 넓게.
  

  -> 요렇게 잘 바꿨는데도 오류는 없는데 새로고침만 되고 적용이 안되길래 또 뭐지.. 싶었는데,

  <script src="./main.js" defer ></script>

  -> html 파일에서 js 파일 주소뒤에 defer 를 무조건 무조건 작성해주기.
  -> 특히나 바닐라 자바스크립트의 경우 html 불러오기 전에 스크립트가 먼저 실행되는 경우가 많으므로, defer 속성을 통해 간단히 말하자면 스크립트 파일을 나중에 실행시킬 수 있게 해준다고 보면 된다.

2. defer 속성

• 스크립트 파일의 다운로드와 실행을 HTML 문서의 파싱 과정과 병렬로 진행하도록 한다.
• 즉, HTML 문서의 파싱이 완료된 후에 스크립트가 실행되므로, 페이지 로딩 속도에 영향을 주지 않는다.
• 페이지 로딩속도를 높이는데 도움이 된다.
• 메인 콘텐츠에 영향을 주지 않는 부가적인 스크립트에 사용하면 좋다.
  
  

---

CSS

---

3. Swal : alert css

• Sweetalert 라이브러리 사용

  //head
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.min.css">
  //script (in html 파일)
  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>
  //.js
  Swal.fire({});

• 개발자도구로 클래스명 참고 / 객체 value 변경으로 css 변경

  

• 속성

  title: msg,    //  메세지 큰 제목   
  //  HTML & CSS 로 직접수정
  title: “<div style=’color:#f00;font-size:15px’>” + msg + “</div>”
  text : msg_detail,     // 메세지 상세설명  , title 처럼 HTML 로 직접가능
  icon : icon,  // 아이콘
  timer:ms, // 자동 닫히는 시간 주기 ms ,  0 지정이면 자동 안닫힘
  showDenyButton: true, // No 버튼 노출 여부
  showCancelButton: true, // 닫기(취소) 버튼 노출 여부
  confirmButtonText : “예”, // 버튼 문구 수정  
  confirmButtonColor: 'rgb(203, 34, 34)'
  cancelButtonColor: '#d33',
  denyButtonText : “아니오”, // 버튼 문구 수정     
  showConfirmButtonText : “닫기” // 버튼 문구 수정     
  //
  .then((result) => {
              if (result.isConfirmed) {
                  Swal.fire(
                      '승인이 완료되었습니다.',
                      '축합니다~!',
                      'success'	//체크모양
                  )
              }
          })

• 아이콘
  

4. Font

• google 폰트 사용.
• 찜으로 담긴 폰트 리스트 한번에 @import 문에 쓸 수 있다.
  그것도 모르고.. 폰트 개수만큼 import 줄줄이 썼네! 😂
  (저 웃으면서 우는 이모지가 넘 쓰고싶어서 찾아보니 window + ; 누르면 다양한게 나온다!!! 신세계!!!!💕)
• h1 이나 p 태그 등 각각 다른부분에 폰트 적용하고싶으면 css 파일 해당부분에 font-family 만 적용하면 된다.

5. alt

• 이미지 첨부시 alt 는 가급적이면 적자!