JavaScript57 [TIL] JavaScript fetch와 async await 사용법 1. fetch 사용법fetch : 데이터 요청을 위한 함수then : fetch가 완료되면 그때 ~라는 뜻json() : 자바스크립트 데이터로 변경하는 함수 fetch 함수를 쓰기 위해 필요한 정보 (예시 데이터 : https://developer.themoviedb.org/reference/movie-top-rated-list )API주소를 알아야함 ex) https://api.themoviedb.org/3/movie/top_rated?language=en-US&page=1메소드를 알아야 함 ex) get, post 등등 아래 예시 코드를 보며 좀 더 이해해보자! const options = { method: 'GET', headers: { accept: 'application/json' }};f.. 2024. 6. 28. [TIL] 호이스팅(hoisting)이란? 변수와 함수 선언이 해당 범위의 최상위로 끌어올려지는 동작을 말한다. 자바스크립트는 실행 전 한번 훑어보기 때문에 변수와 함수 선언이 먼저 처리되는 것이다.이처럼 끌어올려진 것처럼 동작하여 호이스팅이라고 한다. 변수 호이스팅변수 호이스팅은 변수를 선언하는 var 키워드를 사용할 때 발생한다. var로 선언된 변수는 코드의 최상위로 호이스팅되지만, 초기화는 호이스팅되지 않는다. 따라서 변수 선언은 최상위로 올라가지만, 변수 값은 실제 할당 지점에서 초기화된다. console.log(x); // undefinedvar x = 5;console.log(x); // 5 위 코드에서는 var x 선언이 호이스팅되어 최상위로 이동하지만, 초기값 할당(x = 5)은 원래 위치에 남아 있다. 따라서 첫 번째 conso.. 2024. 5. 17. [TIL] 자바스크립트 버튼 클릭 시 이벤트 주기 버튼 클릭 시 텍스트를 바꾸는 코드다.//생략 안녕하세요! 클릭 html문서에는 위에처럼 작성하고 document.querySelector('.btn').addEventListener("click", () => { document.querySelector('.title').textContent = "Hello!";}) js 파일에는 위에처럼 작성한다. 여기서 document.querySelector()는 html문서에 있는 class="btn"를 스크립트로 가져올 수 있다.그래서 addEventListener("click", () => {})로 클릭 이벤트를 넣어주고 document.querySelector()로 다시 html 문서에 class="title"를 불러와서textContent를 붙여.. 2024. 5. 13. [TIL] 내배캠_영화소개페이지(3)_리뷰 수정 기능 구현하기 localStorage.getItem()으로 리뷰 작성했던 key를 가져온다.각 영화마다 리뷰를 달 수 있도록 구별하기 위해 key에 영화 api의 id를 넣어둔 상태이므로해당하는 영화의 id값과 같다면 filter()로 반환한다.그리고 수정하고자 하는 리뷰의 작성시간이 같다면 findIndex()로 반환하고(한 영화에 댓글이 많을 때 비밀번호가 같을 수도 있으므로 수정하고자 하는 댓글의 time값을 비교했다.)조건문으로 비밀번호 일치 여부에 따라 수정 처리 해준다.그후 setItem()으로 저장한 후 다시 loadComments()하여 출력한다. function editComment(index) { const comments = JSON.parse(localStorage.getItem("comment.. 2024. 5. 10. [TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기 localStorage란?데이터를 브라우저에 저장할 수 있는 저장소이다. 저장된 key와 값은 항상 문자당 2바이트를 사용하는 UTF-16 문자열 형식이다. 객체와 마찬가지로 정수 key도 자동으로 문자열로 변환한다.그래서 localStorage에 저장하려면 객체를 문자열화 시키기 위해 JSON.stringify()를 써야하고저장한 값을 사용하기 위해서는 JSON.parse()를 사용하여 객체화시켜서 가져와야 한다.localStorage를 사용하는 이유는 db와 같이 다른 서버 저장소에 이미 저장할 데이터가 많기 때문에비교적 중요도가 낮은 데이터들을 localStorage에 저장하면 기존 데이터 저장소의 공간을 더 확보 할 수 있기 때문이다.[참고 https://developer.mozilla.org/e.. 2024. 5. 8. [TIL] 대소문자 구분없이 검색 기능 구현하기 영화 리스트 중에서 제목을 검색하면해당 영화만 페이지에 나올 수 있도록 구현해봤다. 그런데 영화 제목에 대문자도 들어있다보니똑같이 대소문자를 구별하여 검색해야만 했고이는 사용자들에게 매우 불편함을 줄 것 같았다. 그래서 대소문자를 구별하지 않아도 검색이 가능한 코드를 짜봤다. //html에 들어갈 영화 카드 + 검색 값 세팅 function movieList(val = "") { movieCard.innerHTML = movieData.map((data) => { if(data.title.toLowerCase().includes(val.toLowerCase())) { return` //생략// `; .. 2024. 4. 29. [TIL] 데이터의 유형_숫자 데이터의 타입에는 숫자와 문자가 있다. 먼저 숫자에 대해 알아보자. //1-1, 정수 let num1 = 10; console.log(num1); console.log(typeof num1); 값 : 10 타입 : number 변수를 정수 10을 주면 데이터의 타입이 숫자형으로 그대로 반환된다. // 1-2. 실수(float) let num2 = 3.14; console.log(num2); console.log(typeof num2); 값 : 3.14 타입 : number 실수 또한 데이터 타입이 숫자형임을 알 수 있다. //1-3. 지수형(Exp) let num3 = 2.5e5; //2.5 X 10^5 console.log(num3); console.log(typeof num3); 값 : 250000 .. 2024. 4. 23. [TIL] 마우스 클릭 시 효과음 넣기 팀프로젝트로 웹페이지를 만들며 컨셉에 맞게간단한 게임 요소를 넣기로 했다.그래서 구현하게 된 퍼즐게임. 퍼즐게임은 '데브리'님의 강의 영상을 참고했다.https://youtu.be/iTBZdg7tg-w?si=m6GbOKlwihkJPyDV 아래 영상처럼 퍼즐게임이 잘 구현되었지만퍼즐이 옮기는데에 있어 조작감이 아쉬운 느낌이다.그래서 퍼즐 클릭 시 효과음을 넣기로 했다. 효과음 반영하는 코드 작성은 아래 블로그를 참고했다.https://record-ay.tistory.com/32 [HTML] 클릭시 효과음 넣기1. 스킨 편집 들어간 후 html 편집 들어가기 html편집하기에서 아래 소스 복사해서 넣기 2. 마우스 클릭 효과음 다운로드 http://itthe.net/15 3. 클릭 효과음 다운받고 적.. 2024. 4. 18. [TIL] var, let, const의 차이 var, let, const는 스크립트에서 변수를 할당할 때 쓰이는 예약어이다. 그런데 var 예약어는 잘 사용하지 않는다. 그 이유는 다음과 같다. var 예약어 사용 시 실수로 빼먹게 되면 지역변수(로컬변수)가 전역 변수(글로벌변수)가 될 수 있고 프로그램이 길어지면 중간에 변수가 재선언 되거나 재할당 되어 오류가 발생한다. 이를 방지하기 위해 let과 const를 사용한다. let 예약어로 선언한 변수는 변수를 선언한 블록({}로 묶은 부분)에서만 사용 가능하고 블록을 벗어나면 사용할 수 없다. 또 재선언은 할 수 없지만 재할당은 가능하다. const는 변하지 않는 상수변수다. 그래서 값을 여러번 바꿀 때에는 let을, 고정된 값이면 const를 사용하면 된다. [참고문헌] Do it! 한권으로 끝.. 2024. 4. 18. 이전 1 2 3 4 5 다음