뉴히의 개발 로그

작업 환경 / 파일 디렉터리 셋업 및 html,css html문서 The Best Movie 검색창 검색 전체 목록 Copyright © NBCamp 2023 이런걸 방지하기 위해서 두가지의 방법이 있다. 태그 바로 위에 스크립트 소스를 넣거나 를 넣어준다! defer는 스크립트 소스코드가 상단에 있어도 다운로드는 받지만 실행은 html 파서가 문서 파싱을 한번쫙 다 한다음에 실행되도록 한다! defer를 그림으로 보면 이렇게 표현할 수 있다. 또한 스크립트는 독립적으로 나눠서 관리하는게 좋다. 자바스크립트는 import와 export를 사용해 모듈화 시켜서 작업 관리가 가능하다. 이렇게 모듈화 시키게 되면 협업시에 여럿이 각각의 모듈을 개발한다해도 작업, 유지 보수에도 좋고 스코프를 독립적으로 만들어서..

문자열 치환 replace() 함수, split(), join() 검색시에 공백을 제거해서 띄어쓰기가 틀리거나 해도 모두 검색이 될 수 있도록 split으로 공백을 기준으로 쪼개고 join으로 공백을 없애 주도록 했는데 튜터님께 코드 피드백 받는도중 저건 왜 split으로 쪼갠거죠? 하셔서 ㅎㅎㅎㅎㅎㅎ 코드봤을때 조금 의아했다! 하시며 replace 함수를 쓰는게 어떻겟나? 하셔서 변경해보앗다. 기존코드 const matchMovies = movies.filter((item) => { let titles = item.original_title.split(' ').join('').toLowerCase(); inputValue = inputValue.split(' ').join(''); return titl..

문제 : fontawesome 아이콘 네모박스 오류 서칭해보니 이렇게 간단하다니!? 해결 : fas, fab class 앞쪽에 fas, fab를 넣었더니 바로 나타났다!!!!!!!!!!!!!!!!!!!!!!! svg로 넣으면 잘보이긴하나 컬러변경이나 사이즈 조정등이 더 불편해서 아이콘으로 사용하는편이 좋은듯하다. Font Awesome이 버전 5로 업데이트되면서 사용법이 복잡해졌다고 한다. 유료화가 되면서 스타일을 5가지로 분리했고, 2가지는 무료, 3가지는 유료로 사용할 수 있게 바뀌었다고 한다. 매번 쓸때마다 자꾸 오류가 떠서 화나지만... 예쁜 아이콘 그리는거보단 나으니 ㅎㅎㅎㅎㅎㅎㅎㅎ 폰트어썸 오류 해결! 참조 https://velog.io/@snsnahtmxm/Font-Awesome-%EC%98..

alert창 한번만 띄우기 !!! 어제 if 문으로 해결 된지 알았으나 아니었던것! 그 이유는! movies.forEach 안의 if문이라서 movies를 다 돌때 까지 alert창이 뜨는것 이였다 ㅎㅎㅎㅎ console창을 보면 알 수 있다! console을 잘 찍어봐야 하는 이유! let searchBtn = document.getElementById("search-btn"); searchBtn.addEventListener("click", function(){ let temp_html = ''; // input 입력값 let inputValue = document.getElementById("search-input").value.toLowerCase(); console.log('입력값->',inpu..

클로저 closure 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합니다 // 카운트 상태 변경 함수 #3 const increase = (function () { // 카운트 상태 변수 let num = 0; // 클로저 return function () { return ++num; }; })(); // 이전 상태값을 유지 console.log(increase()); //1 console.log(increase()); //2 console.log(increase()); //3 1. 위 코드가 실행되면, '즉시 실행 함수'가 호출 -> 함수가 반환(inner) -> increase에 할당 (function () { // 카운트 상태 변수 let num = 0; // 클로저 return functi..

! [rejected] master -> master (fetch first) error: failed to push some refs to 'github.com:heejung-newheee/Movie-list.git' hint: Updates were rejected because the remote contains work that you do hint: not have locally. This is usually caused by another repository pushing hint: to the same ref. You may want to first integrate the remote changes hint: (e.g., 'git pull ...') before pushing again. ..

원래 제이쿼리에 조금 더 익숙했던 나 요즘은 바닐라자바스크립트를 쓴다고한다. 이유는 아무래도 jquery는 라이브러리기 때문에 용량이 크고 바닐라자바스크립트보다 느리다고한다. 초반에는 느렸던 javascript가 크롬을 만나면서 기술이 좋아지고 속도가 많이 향상되어 지금은 더 빠르기 때문에 jquery문법보다는 순수 javascript를 쓰는 추세라고 한다! 하지만, 직관적으로 보기 쉽고 이해하기 쉬운 코드는 jquery인것은 무시하지 못한다! $(document).ready(function(){ }); $(function(){ }); => window.addEventListener("DOMContentLoaded", function(){ }); window.addEventListener("load", ..

Promise Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환한다. Promise는 비동기 처리에 대해, 처리가 끝나면 알려달라는 ‘약속’ new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행 그 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(cat..