나만의 작은 코딩

json-server 1) json-server란? json-server는 아주 짧은 시간에 REST API를 구축해주는 라이브러리이다. 하지만, REST API 서버의 기본적인 기능을 대부분 갖추고 있지만, 프로덕션 전용은 아니다. 프로토타입을 만들거나, 공부를 위하여 서버가 필요할 때에 사용하면 아주 적당한 도구이다. 2) 설치 터미널에서 json-server를 설치해준다. $ npm install -g json-server 3) 사용법 db.json 파일을 만들어서 안에 데이터를 넣어준다. db.json { "products":[ { "id":0, "img":"https://lp2.hm.com/hmgoepprod?set=source[/83/1d/831dcba3744532bbe1a0b6f975858f..

Math.ceil(), Math.round(), toFixed() - Math.ceil() 항상 올림하여 주어진 숫자보다 크거나 같은 더 작은 정수를 반환 console.log(Math.ceil(.95)); // Expected output: 1 console.log(Math.ceil(4)); // Expected output: 4 console.log(Math.ceil(7.004)); // Expected output: 8 console.log(Math.ceil(-7.004)); // Expected output: -7 참고 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cei Math.cei..

api 호출로 데이터를 가져오기를 처음 배울 때는 json형식으로만 배웠다. xml형식의 데이터를 파싱하는 것도 알아두자. json형식 데이터 뽑기 let url = new URL(`url주소`); let response = await fetch(url); let data = await response.json(); api의 종류에 따라 다르겠지만 기본 형식은 이렇고, key값을 url뒤에 파마미터로 붙이거나 따로 변수를 만들어주기도 한다. 이번 글은 xml에 대한 내용이기 때문에 넘어가자. xml형식 데이터 뽑기 let url = new URL(`url 주소`); let response = await fetch(url); let text = await response.text(); let xml = n..

let today = new Date(); let year = today.getFullYear(); let month = ('0'+ (today.getMonth() + 1)).slice(-2); let day = ('0' + today.getDate()).slice(-2); let yesterday = ('0' + (today.getDate()-1)).slice(-2); let todayDateString = year+month+day; let yesterdayDateString = year+month+yesterday; Date 객체 생성 let today = new Date(); - 현재 날짜 및 시간 ex) Wed Apr 19 2023 20:26:48 GMT+0900 (한국 표준시) get/set ..

배열에 값을 추가하는 함수 .push() : 배열의 맨 끝에 값을 삽입하고, 삽입된 배열의 길이를 반환 .unshift() : 배열의 맨 앞에 값을 삽입하고, 삽입된 배열의 길이를 반환 배열에 값을 제거하는 함수 .pop() : 배열의 맨 끝에 값을 제거하고 제거된 요소를 반환 .shift() : 배열의 맨 앞에 값을 제거하고 제거된 요소를 반환 let arr = [1,2,3]; let firstElement = arr.shift(); console.log(arr); // output: [2, 3] console.log(firstElement); // ouput: 1 let lastElement = arr.pop(); console.log(arr); // ouput: [2] console.log(last..

ToDoList를 만들 때 처음 배웠던 속성이다. UnderLine 만들기 글을 보면 나와있듯이 현재 보여지는 메뉴에 밑줄을 표시하기 위해 사용했다. 이번엔 축구통계사이트를 만들다가 반응형 웹페이지를 만들기 위해서 모바일 버전일 경우의 구조로 변형시키고 싶었는데 잘 되지 않았다. css에서 @media screen and()를 이용하는 방법도 있지만 js에서 offsetWidth를 이용하여 더 쉽게 해결했다. 이참에 offsetWidth에 대한 내용을 정리해보자. offsetWidth / offsetHeight document.querySelector(".className").offsetWidth; document.querySelector(".className").offsetHeight; margin을 ..

todo list를 만들 때 처음 배웠던 underline이다. 메뉴를 누르면 그 메뉴로 밑줄이 이동하는 애니메이션 All Ongoing Done 기본 구조 다른 class나 id는 쓰지 않으니 보지 말고 중요한건 이다. 메뉴들이 있는 div에 underline을 나타내는 div를 하나 만들어준다. 이 메뉴들과 underline을 javascript로 데려와서 작업을 해야하니 데꼬오자. let underLine = document.getElementById("underbar"); let taskTabs = document.querySelectorAll(".tabs div"); 이제 메뉴들에게 클릭 이벤트를 주자. for(let i=1; i { underLine.style.width = e.target.o..

window.scrollTo() window.scrollTo(x좌표, y좌표) x - 문서의 왼쪽상단부터 시작하는 막대 단위의 가로축 y - 문서의 왼쪽상단부터 시작하는 거대단위의 축 window.scrollTo({top, left, behavior}) top - 세로 위치 left - 가로 위치 behavior - 스크롤 효과 속성 (auto, smooth) 추가로 document.querySelector를 이용해서 위치를 알아올 수도 있다. top = document.querySelector("#클래스").offsetTop; left = document.querySelector("#클래스").offsetLeft; subsrting() str.substring(indexStart [, indexEnd]..

pagination 하나의 pageGroup에는 5개의 page가 있다. page: 1일 때는 prev버튼이 없다. page가 마지막 페이지 일땐 next버튼이 없다. «버튼을 누르면 전체페이지의 맨 처음, »버튼을 누르면 전체 페이지의 마지막 //&laquo == "" 버튼을 누르면 해당pageGroup의 마지막 //&lt =="" const renderPagination=()=>{ let pageHTML = ''; let pageGroup = Math.ceil(page/5); let last = pageGroup*5; let first = last - 4; for(let i=first; i 1 ){ pageHTML = ` « < ` } for(let i..

API 호출 하는 방법 정석적인 기본 코드 const callAPI = async() => { let url = new URL(`url주소`) let header = new Header({헤더내용}) let response = await fetch(url, {headers:header}) let data = await response.json() } API를 호출하는 방식은 ajax,axios,fetch가 있다. (ajax, axios는 나중에 쓰면서 배워보자...) promise 자바스크립트에서 비동기 동작을 다루는 하나의 패턴 여기서 비동기 동작이란? 정의) 자바스크립트에서 비동기 동작이란 특정 코드가 끝날때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 의미한다. 자바스크립트는 s..