프로그래밍/JavaScript
[React] 리액트 페이지네이션 :: offset 방식
[React] 리액트 페이지네이션 :: offset 방식
2022.01.24🎯 페이지네이션 :: offset 방식 페이지네이션을 구현하는 방법 중 하나인 offset 방식을 알아보자. 📝 페이지네이션 핵심 코드 살펴보기 {getPageNumbers(currPage, pageCount).map((page) => { return ( onClickPage(page)} > {page+1} ) })} 현재 페이지와 page가 같다면 active가 true로 되면서 배경색 설정 onClick 하면 현재 페이지로 상태 변경 function getPaginationArray(currentPage, total) { const resultList = [currentPage]; let idx = 1; while (resultList.length < Math.min(9, total)) { if (c..
[JavaScript] 자바스크립트 async / await
[JavaScript] 자바스크립트 async / await
2021.11.19🎯 async / await 함수 앞에 async를 사용하면 Promise 객체를 반환 await을 사용하면 Promise를 결괏값이 바로 들어간다. 쉽게 생각하면 then() 기능이다. Promise를 활용한 비동기 코드를 간결하게 작성하는 문법 비동기 코드를 동기 코드처럼 간결하게 작성 가능 await은 async 안에서만 사용 가능 async로 선언된 함수는 promise 객체로 반환된다. [TIL] 엘리스 SW 엔지니어 트랙 Day 019 📖 오늘 배운 내용 - 2021.11.18 fetch async / awiat JSON.parse JSON.stringify() 📝 fetch 통신해서 받으면 promise로 반환해준다. 그래서 then/catch을 사용해줘야 된다. 데이터를 가져올 때는 get..
[JavaScript] 자바스크립트 fetch
[JavaScript] 자바스크립트 fetch
2021.11.19🎯 fetch 자바스크립트를 사용하면 필요할 때 서버에 네트워크 요청을 보내고 새로운 정보를 받아오는 일을 할 수 있다. 📝 기본 문법 let promise = fetch(url, [options]) url : 접근하고자 하는 URL ptions : 선택 매개변수, method나 header 등을 지정할 수 있음 options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행 데이터 추가할 때는 POST fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프라미스가 반환된다. 📝 코드로 알아보는 fetch let result = fetch(serverURL); result .fetch(response => { if(response.ok) { //요청 성공 } }) .catch(error => ..
[JavaScript] 자바스크립트 Promise
[JavaScript] 자바스크립트 Promise
2021.11.17🎯 Promise promise api는 비동기 api 중 하나이다. Task queue가 아닌 Job queue를 사용한다. Job queue는 Task queue보다 우선순위가 높다. Promise 처리가 setTimeout 처리보다 앞선다. 비동기 작업의 진행, 성공, 실패 상태를 표현한다. Pending : 진행상태 표시 fulfilled : 성공 rejected 실패 Promise.prototype.then 체인을 이용해 비동기 처리 순서를 강제할 수 있다. setTimeout(() => { console.log("타임아웃 1"); }, 0); Promise.resolve().then(() => console.log("프로미스1")); setTimeout(() => { console.log("타..
[JavaScript] 자바스크립트 History API
[JavaScript] 자바스크립트 History API
2021.11.16🎯 History API history는 사용자를 자신의 방문 기록 앞과 뒤로 보내고 기록 스택의 콘텐츠도 조작할 수 있는, 유용한 메서드와 속성을 가지고 있다. 📝 history.pushState() history.pushState({data: 'pushpush'}, 'title을 pushState로', '/pushpush' 첫 번째 인자 : 바뀐 주소와 함께 저장할 데이터 객체 두 번째 인자 : 바꿀 제목 세 번째 인자 : 바꿀 주소 보통 이렇게 많이 사용한다. history.pushState(null, null, '/주소') 📌 참고 History - Web API | MDN (HTML&DOM) History API - 주소를 내 마음대로!
[JavaScript] 자바스크립트 변수의 유효범위, 렉시컬 환경
[JavaScript] 자바스크립트 변수의 유효범위, 렉시컬 환경
2021.11.16🎯 변수의 유효 범위, 렉시컬 환경 📝 렉시컬 환경 function printName() { return 'Hyunsol' } function findName() { return printName() } function sayMyName() { return findName() } sayMyName() 렉시컬 환경이란 특정 코드가 작성, 선언된 환경(장소)을 의미한다. 총 4개의 실행 컨텍스트(1개의 글로벌 실행 컨텍스트와 3개의 개별적 실행 컨텍스트)가 생성된다. 각각의 실행 컨텍스트는 하나의 개별적인 소우주이다. 바꿔 말하면, sayMyName 함수, fineName 함수, printName 함수의 렉시컬 환경은 global이다. 만약 findName()이라는 함수 내에 let yourName = 'b..
[JavaScript] 자바스크립트 블록레벨 스코프, 함수레벨 스코프
[JavaScript] 자바스크립트 블록레벨 스코프, 함수레벨 스코프
2021.11.15🎯 블록 레벨 스코프, 함수 레벨 스코프 📝 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다. 📝 블록 레벨 스코프(Block-level scope) 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. 📝 예제 var foo = 123; // 전역 변수 console.log(foo); // 123 { var foo = 456; // 전역 ..
[JavaScript] 자바스크립트 var, let, const 차이점, 호이스팅(Hoisting), for문 안에 setTimeout을 사용할 때 var와 let의 차이점
[JavaScript] 자바스크립트 var, let, const 차이점, 호이스팅(Hoisting), for문 안에 setTimeout을 사용할 때 var와 let의 차이점
2021.11.15🎯 호이스팅, Hoisting 📝 코드 실행 시 변수 처리 JS 엔진이 코드를 읽으면 생성 단계에서 실행 컨텍스트 생성 함수 선언문은 실행 단계에서 함수 전체가 실행 컨텍스트에 저장 var 변수는 저장 시 undefined로 초기화 let, const는 초기화되지 않는다. 그냥 존재만 알고 있는 상태 초기화되지 않았기 때문에 접근하면 에러 발생 📝 코드로 알아보는 호이스팅 console.log(callMe()); // undefined var x = 10; console.log(callMe()); // 10 function callMe() { return x; } 호이스팅은 변수가 선언됨 시점보다 앞에서 사용되는 현상이다. 이는 var 변수가 생성 단계에서 undefined로 초기화되는 것이 원인이다. ..
[JavaScript] 자바스크립트 전개 연산자란?
[JavaScript] 자바스크립트 전개 연산자란?
2021.11.13🎯 전개 연산자, Spread Oprator 묶인 배열 혹은 객체를 각각의 필드로 변환한다. 객체는 또 다른 객체로의 spread를 지원한다. 배열은 또 다른 배열의 인자, 함수의 인자로의 spread를 지원한다. 배열의 필드들을 객체에 spread operator로 합치면 에러가 발생한다. 객체의 필드들을 배열에 spread operator로 합치면 에러가 발생한다. spread operator로 객체를 복사하면, 객체나 배열 필드의 경우 reference만 복사된다. 📝 객체 전개 연산자 const o = { name: "test", age: 23, address: "Street", job: "FE", }; let o2 = { ...o, name: "Tom,", age: 24, } let o3 = {..
[JavaScript] 자바스크립트 나머지 매개변수란?
[JavaScript] 자바스크립트 나머지 매개변수란?
2021.11.13🎯 나머지 매개변수, Rest Operator 함수의 인자, 배열, 객체 중 나머지 값을 묶어 사용하도록 한다. 함수의 인자 중 나머지를 가리킨다. 배열의 나머지 인자를 가리킨다. 객체의 나머지 필드를 가리킨다. 📝 함수 인자 Rest Operator function findMin(...rest) { // ...rest는 [7, 3, 5, 2, 4, 1] 이렇게 간다. return rest.reduce((a, b) => a < b ? a : b); } console.log(findMin(7, 3, 5, 2, 4, 1)); // 1 함수 인자 rest operator는 인자들을 배열로 묶는다. rest에는 숫자들이 배열로 담긴다. reduce함수로 min 값을 리턴한다. 📝 객체 인자 Rest Operat..
[JavaScript] 자바스크립트 클로저란?
[JavaScript] 자바스크립트 클로저란?
2021.11.13🎯 클로저 자바스크립트 클로저는, 함수의 일급 객체 성질을 이용한다. 함수가 생성될 때, 함수 내부에서 사용되는 변수들이 외부에 존재하는 경우 그 변수들은 함수의 스코프에 저장된다. 함수와 함수가 사용하는 변수들을 저장하는 공간을 클로저(closure)라고 한다. // 팩토리 함수 function createCard() { let title = ""; let content = ""; function changeTitle(text) { return { title = text } } function changeContent(text) { return { content = text } } function print() { console.log("TITLE - ", title); console.log("CONT..
[JavaScript] 자바스크립트에서 함수는 일급 객체(first-class-object)이다.
[JavaScript] 자바스크립트에서 함수는 일급 객체(first-class-object)이다.
2021.11.13🎯 함수는 일급 객체(first-class-object)이다. 일급 객체란, 다른 변수처럼 대상을 다룰 수 있는 것을 말한다. 자바스크립트에서 함수는 일급 객체이다. 즉, 자바스크립트에서 함수는 변수처럼 다룰 수 있다. function add(a, b) { return a + b; } // 함수를 다른 함수의 인자로 넘긴다. [1, 2, 3].reduce(add, 0); (() => { console.log('익명 함수를 생성한다.'); })(); function outer(a) { function inner(b) { return a + b; } // 중첩 함수를 생성한다. return inner(10) } const Persom = (name) => { // 함수를 변수로 생성한다. const prin..