JavaScript51 [프로그래머스 Lv.1] 서울에서 김서방 찾기/콜라츠 추측/음양 더하기 풀이 서울에서 김서방 찾기function solution(seoul) { for(let i=0; i "Kim"이 위치해 있는 인덱스를 찾으면 true 결과값을 받아 return한다.콜라츠 추측function solution(num) { let count =0; while(num !== 1 && count !== 500) { if(num % 2 === 0){ num = num/2 }else{ num = num * 3 + 1 } count++ } return num === 1 ? count : -1;}음양 더하기function solution(absolutes, signs) { let sum .. 2024. 10. 14. [프로그래머스 Lv.1] 하샤드 수/두 정수 사이의 합 풀이 하샤드 수function solution(x) { // x의 모든 자릿수 합 구하기 let str = x.toString(); let sum = str.split('').reduce((acc, cur) => acc + parseInt(cur), 0); // 합한 값을 x로 나누기 // 나머지가 0이면 하샤드 수 if(x % sum === 0) { return true; }else return false;}두 정수 사이의 합function solution(a, b) { let sum = 0; // a와 b가 같으면 0 반환 if (a === b) { sum = 0; } // a가 더 클 경.. 2024. 10. 11. [프로그래머스 Lv.1] 정수 내림차순으로 배치하기/정수 제곱근 판별 풀이 정수 내림차순으로 배치하기function solution(n) { let str = n.toString().split("").sort(function(a, b){ return b - a}); let answer = Number(str.join("")); return answer;}; split()을 사용하기 위해 먼저 문자열로 변환하고 sort()를 사용하여 내림차순해준다.그후 다시 숫자열로 변환하여 join()으로 요소를 결합한다.정수 제곱근 판별function solution(n) { let x = Math.sqrt(n); if (Number.isInteger(x)) { return (x.. 2024. 10. 10. [프로그래머스 Lv.1] 약수의 합/문자열 내 p와 y의 개수/자연수 뒤집어 배열로 만들기 풀이 약수의 합function solution(n) { let sum = 0; for(let i=1; i n을 i로 나는 나머지가 0이 되면 변수 sum에 더하게 반복문을 넣어준다.문자열 내 p와 y의 개수function solution(s){ let arr = s.toLowerCase().split(""); let strP = arr.filter((a)=>a === "p"); let strY = arr.filter((a)=> a === "y"); if(strP.length === strY.length){ return true; }else{ return false; }} 대소문자 구분이 없으니 전체 소문자로 반환해준 상태에서 split.. 2024. 10. 8. [프로그래머스 Lv.1] x만큼 간격이 있는 n개의 숫자/짝수와 홀수/자릿수 더하기 풀이 x만큼 간격이 있는 n개의 숫자function solution(x, n) { let arr = []; for(let i=1; i 처음에 for문 마지막에 return newArr = arr.push(x * i)를 했었는데 for문처럼 반복문 안에서는 return을 넣으면 반복이 중단되어 쓰면 안된다! 또 push()는 새로운 배열이 아닌 기존 배열에 요소를 추가만 하기 때문에 newArr에 다시 배열을 저장하는 것은 맞지 않다. *map()에서 쓰는 return : 콜백 함수 안에서 return은 단순히 새로운 배열을 만들기 위해 각 요소를 변환하는 역할을 하며, 반복이 끝날 때까지 배열이 자동으로 생성됨. 짝수와 홀수function solution(num) { if(num % 2 ===.. 2024. 10. 7. [TIL] REST API와 데이터 가져오기 REST API는 클라이언트(웹 애플리케이션)와 서버 간의 통신을 가능하게 하는 규칙과 구조를 제공하는 방법이다.REST는 Representational State Transfer의 약자로,웹 애플리케이션이 서버에서 데이터를 가져오거나 서버에 데이터를 전송할 때 사용하는 일련의 원칙이다.쉽게 말해, REST API는 웹 애플리케이션이 서버와 데이터를 주고받기 위해 사용하는 일종의 "규칙서"라고 할 수 있다.이 규칙에 따라 웹 애플리케이션은 서버와 소통하면서 필요한 데이터를 가져오거나 업데이트할 수 있다.REST API의 핵심 개념HTTP 메서드: REST API는 주로 HTTP 메서드를 사용한다.GET : 서버에서 데이터를 가져올 때 POST : 서버에 새로운 데이터를 보낼 때PUT : 서버의 기존 데이.. 2024. 9. 9. [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. 이전 1 2 3 4 5 다음
