자바스크립트 7

자바스크립트 promise

1. 생성자를 통해서 프로미스 객체를 만드는 순간 pending (대기) 상태가 된다. 2. 생성된 promise 객체의 인자로 executor 함수를 받는데, executor 함수는 resolve와 reject함수를 인자로 받을 수 있다. resolve 함수를 실행하면 fulfilled(이행)상태가 되고 reject함수를 실행하면 rejected(거부)상태가 된다. 3. 프로미스 객체에 체이닝 형태로 then과 catch함수를 사용할 수 있는데, then 함수의 경우 promise객체가 resolve에 의해 이행상태가 되고 난 뒤 결과값(문자열, 외부에서 호출한 데이터 등)을 콜백함수의 매개변수로 받아 처리할 수 있고, catch 함수의 경우 promise객체가 reject(보통 에러발생 시)에 의해 ..

카테고리 없음 2021.10.20

자바스크립트 find, filter, map

출처: https://ko.javascript.info/array-methods 배열을 변형하는 메서드들 #find 특정 조건에 부합하는 객체를 배열 내에서 찾을 때 사용 문법 - arr.find(fn) let users = [ {id: 1, name: "John"}, {id: 2, name: "Pete"}, {id: 3, name: "Mary"} ]; let user = users.find(item => item.id == 1); alert(user.name); // John #filter find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾는데, 조건을 충족하는 요소가 여러개라면 filter 메서드를 사용할 수 있다. 문법 - arr.filter(fn) let users = [ ..

카테고리 없음 2021.10.13

Javascript 자바스크립트 특정 문자열 포함 String.includes()

Javascript 자바스크립트 특정 문자열 포함 String.includes() .includes() -> 문자열이 특정 문자열을 포함하는지 확인하는 메소드. [문법] str.includes(searchString[, position]) searchString: 이 문자열에서 찾을 다른 문자열을 의미. position: 선택사항, searchString을 찾기 시작할 위치를 의미. 기본값은 0이다. [예시] 'Blue Whale'.includes('blue'); // returns false

카테고리 없음 2021.09.30

관계형데이터베이스 조인, 자바스크립트 불변성 개념

[관계형데이터베이스 - RDBMS] JOIN - 여러 개의 표로 분산된 정보를 결합해서 하나의 단일한 표로 만드는 기술. 관계형데이터베이스의 핵심 (각각의 테이블들을 ★붙인다★ = 조인) 특정 테이블에서 정보의 중복이 발생할 때, 그리고 특정 테이블의 정보들이 다른 테이블에서 사용될 때 - 테이블을 따로 나눌 타이밍 trade-off) 정보를 하나의 테이블로 표현할 때 - 읽기가 편하지만 쓰기(변경)가 나쁘다 정보를 다수의 테이블로 표현할 때 - 읽기가 불편하지만 쓰기(변경)가 좋다 sql joins visualize - 조인 시각화 사이트 LEFT (OUTER) JOIN 쿼리 ---------------------------- SELECT * FROM TableA A LEFT JOIN TableB B ..

카테고리 없음 2021.09.25

모던자바스크립트 튜토리얼 정리 (객체, this)

출처: https://ko.javascript.info/object-methods #객체 객체와 원시타입의 근본적인 차이: 객체는 '참조에 의해' 저장되고 복사된다. 원시값(문자열, 숫자, 불린 값)은 '값 그대로' 저장, 할당되고 복사됨. 즉, 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어있는 '메모리 주소’인 객체에 대한 '참조 값’이 저장된다. 얕은 복사 - Object.assign. 그러나 객체 안에 또 다른 객체가 있으면 완전하게 복사할 수 없음 깊은 복사 - lodash 라이브러리의 cloneDeep 함수. 객체 안에 또 다른 객체가 들어있어도 완전하게 복사할 수 있다. #this 매서드 내부에서 this 키워드를 사용하면 객체에 접근할 수 있다. this는 다른 프로그래밍 언어..

카테고리 없음 2021.09.23

React 리렌더링 특징

0916(목) react. 바닐라자바스크립트 - 해당 태그가 속해있는 전체 영역을 다시 그림 React - 해당 태그가 속해있는 부분만 다시 그림 리액트의 리랜더링이 마냥 좋은 것만은 아니다. React의 경우 어떤 컴포넌트에서 상태가 바뀌었다는 것을 인지하려면 상태값을 초기에 모두 저장해두어야 하기 때문에 처음 웹페이지를 불러오는데 있어서 많은 양의 데이터를 처리할 필요가 있음 데이터 변경에 따른 리렌더링 장점 - html 요소 전체를 다시 그리는 게 아닌 데이터가 바인딩 되어 있는 특정 태그만 리랜더링 해주기 때문에 웹사이트를 새로고침할 때 나타나는 깜박임이 없고, 전체가 아닌 일부만 리렌더링 해주니 프론트화면 레이아웃을 깨뜨릴 일이 없다.

카테고리 없음 2021.09.17

자바스크립트 콜백, 동기, 비동기, Promise

콜백: 다시 호출한다. 어떤 작업이 끝나고 다시 함수를 호출하는 개념 동기적 처리: 한 동작이 끝나고 나서야 비로소 다음 동작을 수행 비동기적 처리: 한 동작이 끝나지 않더라도 다른 작업을 함께 수행 promise: 비동기 처리에 사용되는 객체를 의미. 성공의 경우 resolve, 실패의 경우 reject를 사용하여 결과값을 전달할 수 있는데, 반환된 promise 객체에 .then을 붙여 결과값을 처리할 수 있다.

카테고리 없음 2021.09.10