본문 바로가기

반응형

자바스크립트

(96)
[간단정리 js] promise "비동기 작업의 최종 완료 또는 실패를 나타내는 개체" JavaScript Promise는 비동기 작업의 최종 완료 또는 실패를 나타내는 개체입니다. 콜백을 사용하는 것보다 더 읽기 쉽고 관리하기 쉬운 방식으로 비동기 코드를 처리하는 데 사용됩니다. promise 는 약속이라는 의미를 가집니다. 약속에는 세 가지 상태가 있습니다: 즉, 아래의 상태는 약속을 보류하였는지, 약속을 지켰는지(이행), 아니면 약속을 거절(거부) 했는지로 구분할 수 있습니다. - Pending: 초기 상태, 이행되지 않았거나 거부되었습니다. - Fulfilled: 작업이 성공적으로 완료되었습니다. - Rejected: 작업이 실패했습니다. Promise 는 .then() 및 .catch() 메서드와 함께 사용하여 비동기 작업의 결과를 처리할 수 있습니다. 다음은 Promise를 사용..
[javascript] ?? : null 병합 연산자 [ES2020] ?? 연산자(null 병합연산자) 널 병합 연산자(??)는 || 연산자를 대신하여 주로 사용된다. 이 연산자를 사용하면, falsy 값(0, '', false, NaN, null, undefined) 중에서도 null과 undefined만 따로 구분하여 조건문을 처리한다. 즉, null 혹은 undefined 만 falsy 값으로 판단하므로, 0, false, NaN,'' 은 일반적은 숫자형이나 문자열로서 판단내린다. // || 연산자는 falsy 값이면 모두 거짓으 보고 넘어 본다. // ?? 연산자는 null과 undefined 만 falsy 값으로 본다. const a = 0; const b = a || 5; // a 는 falsy 값인 0 이므로, falsy가 아닌 3을 출력한다. console...
[javascript] JSON Server 이용한 API 다루기 연습(2) - fetch로 데이터를 가져오자(GET) 저번 시간에 열었던 JSON 서버의 데이터들.. 그리고 이 데이터를 fetch 로 GET 요청 해오기.. // dataStore.js : 모듈 방식으로 작성했다. export const userInfo = async() =>{ // async 는 promise 를 반환(return) 함을 의미함 let url = `http://localhost:3004/user` // 데이터가 저장된 서버의 url await fetch(url) // await 은 서버에 요청한 데이터가 올 때 따리 대기 후 fetch를 실행시킴 .then(response => console.log(response)) // -> 결과를 출력함 } // ㄴ .then(fetch 결과가 저장됨) ↓↓↓↓↓ 위 결과를 얻게 되면, 눈 여겨 봐..
[javascript] JSON Server 이용한 API 다루기 연습(1) - 시작은 JSON Server 설치 HTTP 요청(request) 이후에 응답(reponse)을 받기 위해서는 서버가 필요한데, 프론트엔드가 서버 구축과 관련한 지식이 전무한 상태에서 실제 서버를 개설하고, 데이터베이스를 구축하는 것은 까다롭다(물론 어디 까지나 초보자의 시각에서나 말이다.). 여기서 JSON Server 는 가짜 즉, 가상 서버를 구축할 수 있는 툴로서 사용법이 매우 간단해서 이번 기회에 다시 활용해보기로 했다(요즘에 3D 웹 사이트 구현에 관심이 생겨서 이런 기초적이고 기본적인 부분에 관심을 너무 안 준 것 같다.. 나태해 지지 말자). 언제나 시작은 npm 으로 아직도 npm 이라는 단어는 어색하다(그 만큼 실력 부족이라는 말이겠지) 따라서 이 용어에 대해서 잠깐 정리하고 넘어가려 한다. npm 은 node packa..
[js] JSON 에 대한 정리 JSON 이란? JSON 은 표준 데이터 포맷 중 하나이다. 여기서 데이터는 어떠한 이론의 토대이자 기초가 되는 자료 혹은 사실을 의미하며, 포맷은 쉽게 말해 형태를 잡는 다는 것이다. 즉, JSON은 중구난방으로 퍼져있는 데이터를 필요에 따라 활용하기 쉽도록 구조화된(규칙적이고, 모양이 갖춰진) 형태로 표현하기 위한 표준이 되는 포맷 이다. 흔히 JSON 을 가볍다, 혹은 플랫폼 독립적이라고 많이 표현하는데, 말 그대로 네트워크를 통해 전송할 때 빠르고, 편하며, 어떤 언어 환경에서도 사용할 수 있기 때문에 그리 불리는 것 같다. JSON은 JavaScript Object Notation 을 줄인말로 이름 그대로 자바스크립트 객체를 표기하는 방법을 의미한다. 이러한 JSON 의 형태는 자바스크립트에서 ..
[javascript html 캔버스] 그림판 HTML 삽입 미리보기할 수 없는 소스 이거 보임? 그럼 캔버스 못 씀
[DOM] insertBefore "지정한 위치(기준 노드) 앞에 노드를 추가한다." insertBefore(새로만든 노드, 기준 노드) insertBefore() 메서드는 기준노드의 앞에 새로만든 노드를 추가할 때 사용한다. 즉, 라는 부모 태그가 있고, 그 안의 자식노드로 가 있다고 가정 할 때, 새로 만든 노드가 이라는 노드라면, 다음과 같은 형태가 되는 것이다. // 부모 자식(새로 생성한 노드) 자식(기준 노드) 참고로, insertBefore(1인자, 2인자 ) 에서 1 인자 자리에 기존에 존재하고 있었던 노드를 입력하면, 그 노드는 삭제 되고, 똑같이 생겼지만 새로 생성된 노드가 기준 노드의 앞에 생성된다. insertBefore(새로만든 노드, 기준노드) 사용 예시 기준노드 //부모 노드 const $ul = document.querySelector('ul'); //새로생성..
[DOM] createDocumentFragment "빈 노드 객체를 생성한다." createDocumentFragment DeocumentFragment 노드는 , , text 등과 같이 DOM 노드에 속한다. 하지만 기존 DOM 노드와는 다르게 분류되어 정의되어 있으며 부모노드가 존재하지 않고, 브라우저 렌더링 시에도 DOM 트리에 포함되지 않는다. 즉, 다음과 같이 생성해서 부모 노드의 자식 노드로 추가한다고 해도 막상 브라우저에 렌더링된 요소들을 살펴보면 존재하지 않는다. createDocumentFragment 의 필요성? 보통 우리가 crateElement 로 만든 새로운 요소들을 부모 노드에 추가하려고 하면, 리플로우와 리페인트 라는 과정을 거친다. 이 과정을 단순하게 말하면, 브라우저를 다시 렌더링 하는 것인데, 추가되는 요소가 많을 수록 다시 렌더링 되는 횟수 또한 n..

반응형