data life

Pagination GET /posts?_page=7 GET /posts?_page=7&_limit=20 //20개씩 나뉜 데이터에서 페이지7을 가져오라는 의미 >> 만일 limit이 존재하지 않을 경우 기본값(default)는 10임 currentPage: 현재 페이지 totalCount: 총 데이터의 갯수 pageCount: 화면에 나타날 페이지 갯수 limit: 한 페이지 당 나타낼 데이터의 갯수 ✅ 총 페이지 갯수 계산하기 //총 페이지 갯수 계산하기 let totalPage = Math.ceil(totalCount / limit) 예시 > const totalCount = 53 const limit = 5 let totalPage = Math.ceil(totalCount / limit) // 1..

json-server 란? 사실 우리가 무엇인가 개발하기 위해서는 백엔드의 구현이 필요합니다. 프론트엔드 개발자들에게 있어서 직접 백엔드 기능을 구현하는 것은 상당한 시간이 걸리기 때문에 짧은 시간에 가짜 API 서버를 구축해줄 도구인 json-sever를 이용해보도록 하겠습니다. npm을 통해 설치 가능하며 이름과 같이 json 파일 하나로 연습용 서버를 쉽게 구성 할 수 있으나 실제 프로덕션에서 사용하지는 않기 때문에 이 서버를 이용해서 실제 프로젝트를 개발 하면 안된다는 점!!! 유의바랍니다. 실제 프로젝트 개발 시에는 백엔드 공부를 통해 서버를 직접 준비하거나 Firebase 를 사용해서 구현을 하도록 합시다! json-server 설치 npm install -g json-server db.jso..

let user = { name : "홍길동", age : 20, } let newUser = user; 위와 같이 user 이름을 가진 객체를 가져와 새로운 객체를 생성하기 위해 복사를 진행해보도록 하자. 만일, 위의 데이터 값을 변경해주면 기존의 객체는 그대로일까? newUser.age = 30; console.log(newUser.age) //30 console.log(user.age) //30 기존 객체도 새로운 객체와 동시에 변경된 것을 확인할 수 있다. 이러한 문제점이 일어난 이유에 대해 알아보도록 하겠다. 자바스크립트 변수의 개념과 마찬가지로 객체는 전체를 복사하는 것이 아니라 객체 내의 주소값만 복사하기 때문에 문제점이 발생할 수 밖에 없다. 이를 해결하기 위해 '얕은 복사' 와 '깊은 복..

배열 (Array) 1️⃣ 배열의 특성 2️⃣ length 3️⃣ 배열 순회 4️⃣ 배열 다루기 5️⃣ 배열 고차 함수로 조작 6️⃣ 배열 요소 정렬 4️⃣ 배열 다루기 const members = ['기훈', '상우', '일남', '준호', '새벽', '알리']; - 배열 끝에 요소 추가 .push() members.push('덕수'); //['기훈', '상우', '일남', '준호', '새벽', '알리', '덕수'] - 배열 앞에 요소 추가 .unshift() members.unshift('미녀'); //['미녀', '기훈', '상우', '일남', '준호', '새벽', '알리', '덕수'] - 배열 요소 인덱스 찾기 .indexOf() members.indexOf('상우') // 2 members.in..

객체 1️⃣ 객체 생성 2️⃣ 프로퍼티 열거 3️⃣ 프로퍼티 조작 4️⃣ 프로퍼티 접근자 5️⃣ 인스턴스 6️⃣ 생성자 1️⃣ 객체 생성 - 싱글 리터럴 객체 const obj = { property : "value", method : function() { //객체가 함수 속성을 갖게되면 method라 불림 } } - 생성자 함수 function obj(name){ this.name = name; } >> new와 함께 쓰임 const NewObj = new obj('홍길동'); // NewObj { name : '홍길동' } - Object.create 메소드 이용 const NewObj = Object.create(프로토타입, 객체서술자); 📌 객체서술자란 다음과 같다 const NewObj = O..

✅ 문서 구조 HTML(Mark Up), MD Xlsx => MS 엑셀, 구글 스프레드시트 Docx => MS워드, 구글 문서 PDF => 수 많은 도구 뷰어 PPT => 수 많은 도구 뷰어 HWP => 한컴 ✅ Node, Tree html = 문서 문서를 조작하는 언어 = javascript how❓ => Document Object Model(DOM) 이때, DOM은 node들로 구성됨 node들은 트리형태로 구성되어 있음 ✅ DOM 속성 >> 속성이 무지하게 많기 때문에 다 외울필요는 없고 필요할 때 확인이 가능하다. ✅ DOM 선택 getElementById() getElementsByClassName() getElementsByTagName() getElements => HTML Collecti..

✅ 함수 선언 - 함수 선언문 function func() { } - 메서드 const obj = { prop : function() { } } - 생성자 함수 function Myobj() { } - 화살표 함수 (ES2015+, ES6) const arrowFunc = () => {} ✅ 함수 표현식 - 기명 함수 표현식 >> 중복, 호이스팅의 문제 해결 가능 const func = function func() { return '기명함수표현식'; } - 익명 함수 표현식 const func = function() { return '익명함수표현식'; } ✅ 매개변수(parameter)와 인자 다루기 function func(params){ params = params + 10 return params ..

값(value) 조작 가능한 표현 ex> 문자열, 문자, 숫자 등 ✅ 값(value)의 종류 원시 값 - Number - String - Boolean - Null - Undefined 참조 값 원시 값이란❓ - 단순 원시적인 값 또는 데이터 - 재할당하지 않은 처음의 값 ** 변수는 어떠한 공간을 갖는 것으로 임의의 메모리 주소를 할당받음 let myAge = 10; let myAge2 = myAge; myAge = 20; console.log("myAge :"+myAge); //20 console.log("myAge2 :"+myAge2); //10 Number 1. 숫자의 종류 - 정수 ex>10, 100,-10,-100,,, ☑️ Number.isInteger(num) : num이 정수인지 판별하는..

Canvas javascript를 통해 그래픽을 그리는데 사용하는 HTML 요소 그래프 그리기 사진 결합 간단한 애니메이션 제작 기본 size 300픽셀 × 150픽셀(너비 × 높이) >> 사용자 지정 크기는 HTML height및 width속성을 사용하여 정의 가능 CanvasRenderingContext2D = 🖌️ const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); .fillRect() : 채워진 사각형 그리기 .fillRect(x, y, width, height) or ctx.rect(x, y, width, height); ctx.fill(); .strokeRect() : 윤곽선이 있는 사각형 ..

forEach() :배열을 순회하면서 인자로 전달한 함수를 호출하는 반복문 arr.forEach(func(value, index, array)) value : 현재 순회 중인 요소 index : 현재 순회 중인 요소의 index array : 배열 객체 1. 함수(function) 인자 function myFunc(item) { console.log(item); } const array = ['a', 'b', 'c', 'd']; array.forEach(myFunc); > a > b > c > d 2. 람다(lambda) 인자 array.forEach((item) => { console.log(item); }); > a > b > c > d 3. value, index를 인자 array.forEach((..