티스토리

IT_susu

검색하기

블로그 홈

IT_susu

susu91.tistory.com/m

프론트엔드 개발창고

구독자: 1

방명록 방문하기

주요 글 목록

async await function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }); }); } (async function main() { try { const ms = await p(1000); } catch (error) { console.log(error); } })(); async function 에서 return되는 값은 Promise.resolve함수로 감싸서 리턴된다. function p(ms) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(ms); }); }); } async function asyncP() { return '.. 공감수 0 댓글수 0 2019. 11. 16.
Promise 생성자를 통해서 promise를 만들 수 있다, 파라미터로 excutor라는 함수를 받는다. excutor 함수는 resolve와 reject함수를 인자로 받는다. new Promise((resolve, reject) => {}); 생성자 함수로 promise 객체를 만드는 순간 pending상태가 된다. resolve함수가 실행되면 fulfilled 상태 reject함수가 실행되면 reject상태 사용방법1 const p = new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, 1000); }); p.then(() => { console.log('1000ms 후에 fulfilled가 실행됩니다.'); }); 사용방법2 then을 설정하.. 공감수 0 댓글수 0 2019. 11. 16.
정규표현식 정규표현식이란 특정한 규칙을 가진 문자열의 집합을 표현하기 위해 쓰이는 형식언어 입니다. \B : 문자와 공백사이가 아닌 값 / /g : 문자열 내의 모든 패턴을 찾는다. ?= : (긍정형)전방탐색. ?=뒤에 올 것을 찾음 ?! : 부정형 전방탐색. 앞에서 지정한 것과 같지 않을 것을 찾음. d{number} : 숫자{몇 개} + : 하나 이상 찾기 공감수 0 댓글수 0 2019. 9. 17.
AJAX - 비동기로 작업하기(callBack, Promise, async-await) 이전했습니다. https://velog.io/@susu1991/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%B2%98%EB%A6%AC 공감수 0 댓글수 0 2019. 9. 13.
window 객체 - BOM 1) 정의 브라우저의 요소들과 자바스크립트 엔진, var로 우리가 선언한 모든 변수까지 담고 있는 객체 브라우저 담당 - BOM 웹사이트 담당 - document 객체 - DOM 2) 속성들 수많은 속성이 있지만 몇개만 알아봅시다. navigator 브라우저나 운영체제에 대한 정보. serviceworker도 들어가 있음. screen 브라우저 창에 대한 정보. location 주소에 대한 정보. 주소에 대한 다양한 정보와 새로고침, 주소교체도 가능함. history 앞으로 가기, 뒤로 가기 등등. 브라우저 페이지 이동기록을 갖고 있다. 아마 html5에서 추가된 history.pushState(객체, 제목, 주소)와 history.replaceState(객체, 제목, 주소)를 가지고 react-rout.. 공감수 0 댓글수 0 2019. 9. 12.
Ajax 1. Ajax Asynchronous JavaScript and XML은 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식입니다. 일반 서버통신과의 차이는 페이지의 일부만 갱신할 수 있어 빠른 퍼포먼스와 부드러운 화면 표시효과를 기대할 수 있습니다. 1-1. 비동기란? 컴퓨터 프로그래밍에서 메인 프로그램의 플로우에 독립적인 이벤트의 발생과 그 이벤트들을 다루는 방법을 의미합니다. 즉, 병렬적으로 코드를 진행하는 것을 말합니다. 하지만 자바스크립트는 단일 쓰레드 기반이기 때문에 병렬적으로 수행할 수가 없습니다. 그래서 I/O모델을 통해 비동기 프로그래밍을 수행합니다. I/O작업은 병렬적으로 Ajax, websocket 연결을 통해 데이터를 가져오는 작업을 할 수 있는데.. 공감수 0 댓글수 0 2019. 8. 9.
REST API) POSTMAN사용과 http 전송 GET : 읽기URL을 적고, params를 추가할 수도 있다.params는 ?key:value형태로 추가된다.인증이 필요한 것은 headers에 해당 key와 value를 추가해주면 된다.요청을 보내면 body탭에 응답결과가 보여진다. 형식을 선택해서 확인해본다. POST : 생성URL을 적고 body탭에 row데이터 json형식으로 작성후 sendheaders : Content-Type : application/json PUT : 수정URL을 적고, 해당 URL의 데이터를 body의 row데이터 json형식으로 변경 후 sendheaders : Content-Type : application/json DELETE : 삭제headers 필요없구, body값 필요없음 공감수 0 댓글수 0 2019. 1. 30.
REST API) REST API) 애플리케이션 통신 오늘날 PC, 모바일기기 등등 다양한 기기간의 상호 운용성이 기본 기능으로 제공되어야 합니다. 따라서 각기 다른 애플리케이션 간에 통신이 필요합니다.즉, 모든 애플리케이션이 기본 운영체제 및 프로그래밍 언어에 의존하지 않고 다른 애플리케이션과 통신할 수 있어야 합니다. 웹서비스웹서비스는 애플리케이션과 시스템이 인터넷을 통해 데이터를 교환하는 데 사용하는 표준 및 프로토콜 모음입니다. 웹서비스는 모든 프로그래밍 언어로 작성될 수 있으며 운영체제에 독립적입니다. REST란?REpresentational State Transfer의 약자.2000년도 로이필딩이 박사학위 논문에서 최초 소개클라이언트와 서버의 동작을 제어하는 기본 특성 및 프로토콜을 제공하는 상태 비저장 소프트.. 공감수 0 댓글수 0 2019. 1. 30.
AJAX - 크로스도메인 보안 이슈와 해결책 동일 출처 정책(SOP)한 출처(Origin)에서 로드 된 문서나 스크립트가 다른 출처의 자원과 상호작용하지 못하도록 제한하는 정책입니다.동일 출처를 판단하는 기준은 프로토콜(protocol), 호스트(host), 포트(port) 가 같으냐 입니다.이는 쉽게 말해 웹페이지 스크립트는 해당 페이지와 동일한 서버에 있는 데이터만 Ajax 비동기 요청하여 처리할 수 있습니다. 이 정책은 초기에는 크로스 사이트 스크립팅이 해킹 이슈가 있기 때문에 보안을 위해 좋은 방법으로 생각되었으나, 최근에는 여러 도메인에 걸쳐 구성되는 대규모 웹 프로젝트가 늘어나고 REST API 등을 이용한 외부 호출이 많아지는 상황이라 서비스 개발에 걸림돌이 되었습니다. 해결책1) CORS. 서버 개발단 해결책이에 추가로 만들어진 정책.. 공감수 0 댓글수 0 2019. 1. 23.
AJAX - 비동기 통신 비동기는 언제 서버에서 요청이 올 지 알 수 없기 때문에 이벤트가 필요합니다.xhr.onreadystatechangexhr.readyStatus : 0(uninitialized) / 1(loading) / 2(loaded) / 3(interactive) / 4(complete) 공감수 0 댓글수 0 2019. 1. 22.
AJAX - ajax와 xhr객체 Asynchronous Javascript And Xml Ajax란?javascript와 JSON을 사용해 비동기 통신 방법으로 웹 애플리케이션을 제작하는 것을 말합니다. 간단히, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다. Ajax가 기존 기술과 다른 점은 요청/응답 과정을 통해 불필요한 부분까지 처리하지 않는다는 점입니다.쉽게 말해 필요한 부분만 별도로 요청하고, 응답받아 처리할 수 있는 거죠.모든 데이터를 업데이트 할 필요가 없으니 불필요한 대역폭 감소가 가능하고, 이는 비용 절감을 가져옵니다. ajax의 또다른 장점은 사용자가 대기하는 시간을 줄일 수 있다는 점이죠.페이지를 새로고침하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 시킬 수 있으.. 공감수 0 댓글수 0 2019. 1. 22.
DOM API - CSSOM CSSOM이란?CSS Object Model의 약자로, 자바스크립트에서 CSS를 조작할 수 있게 해주는 API 세트입니다. 요소의 크기(Dimensions) width, height clientWidth, clientHeight ⇲ 너비/높이(width/height) + 패딩(padding) offsetWidth, offsetHeight ⇲ 너비/높이(width/height) + 패딩(padding) + 보더(border) + 스크롤바 scrollWidth, scrollHeight ⇲ 스크롤 가능한 너비/높이 영역 공감수 0 댓글수 0 2019. 1. 21.
DOM API - html style css에서 style 속성은 -으로 연결되지만, javascript에서는 camelCase를 사용합니다. element.styleelement.style 명령을 사용하게 되면 html 요소에 inline 속성으로 style을 적용한다. element.style.cssText = '';복수의 style 속성을 정의할 경우 element.style.cssText = '';로 작성한다. 개행을 하고 싶다면 줄 끝에 \를 넣자. 이 외에 style값을 조작하고 싶다면getAttribute('style'), setAttribute(), removeAttribute() 등이 있다.단, float는 이미 javaScript에 있으므로 cssFloat를 사용하면 된다. 근데 이렇게 가져온 style값은 inline 속.. 공감수 0 댓글수 0 2019. 1. 21.
DOM API - HTML element HTML Element 속성parentNode.children (IE9+) - 자식 '요소'만 가져옴. 읽기 전용 속성. 라이브로 업데이트 됨.firstElementChild - 첫번째 자식 '요소'만 가져옴lastElementChild - 마지막 자식 '요소'만 가져옴nextElementSibling - 다음 형제 '요소'만 가져옴previousElementSibling - 이전 형제 '요소'만 가져옴attributes(이 속성을 통해 반환되는 유사 배열 집합은 라이브 상태, 즉 실시간으로 변경된다) - 해당 요소가 갖고 있는 속성을 알려줌innerHTML - 해당요소 내부 html 코드를 가져옴. HTML 텍스트 코드를 실제 DOM 노드로 변환. 해당 속성은 무겁고 비싼 대가를 치루는 HTML 해석기.. 공감수 0 댓글수 0 2019. 1. 21.
DOM API - NODE, document method NODEELEMENT의 상위 개념. NODE 속성자식, 형제, 부모, 노드유형, 이름, 값을 알 수 있습니다.childNodes : 직계 자식 노드들을 가져온다.firstChild : 첫번째 자식lastChild : 마지막 자식nextSibling : 다음 형제previousSibling : 이전 형제parentNode : 부모 요소nodeType : 노드의 유형nodeName : 노드의 이름nodeValue : text node의 값. string type으로 반환. NODE 메서드hasChildNodes() - 자식 노드를 포함하고 있는지 여부를 boolean값으로 반환. appendChild() - 마지막 자식으로 추가insertBefore(추가할 노드, 기준노드) - 기준노드 앞에 노드 추가rem.. 공감수 0 댓글수 0 2019. 1. 21.
객체지향 프로그래밍 (OOP), 상속 자바스크립트는 원래 객체지향적인 언어는 아닙니다만, prototype속성을 활용하여 상속을 구현하는 등, 객체지향 비스무리하게 사용가능합니다.es6에서는 class도 등장해서 더더욱 객체지향적인 부분을 강화하였습니다. 객체지향 프로그래밍은 추상화를 사용하여 모델을 만드는 프로그래밍입니다.객체지향 프로그래밍은 전통적인 프로그래밍 방식과 비교하여 서로 협력하는 관계를 형성하는 객체 모음을 가진 소프트웨어 설게로 볼 수 있습니다. oop에서 각 객체는 메시지를 수신하고 데이터를 처리하며 메시지들을 다른 객체로 보낼 수 있습니다.프로그래밍의 유연성과 유지 보수성을 높이기 위한 것이며 대규모 소프트웨어 프로그래밍에서 널리 사용됩니다. 객체 지향 프로그래밍의 특징은 다음 용어로 정리할 수 있습니다. Class - .. 공감수 0 댓글수 0 2019. 1. 20.
html 속성 바꾸기 setAttribute() document.querySelectorAll('p').setAttribute('title', '단락태그'); 공감수 0 댓글수 0 2019. 1. 14.
DOM API에 접근하기 자바스크립트를 써보기도 전에 제이쿼리를 접하고, 제이쿼리 문법이 자바스크립트 문법인 줄 알았던 무지한 과거는 뒤로 한 채,다시 새롭게 자바스크립트를 공부해 봅시다. 제이쿼리 문법이 간결하고 편하긴 하지만...요즘은 옛날처럼 제이쿼리로만 모든 걸 해결하는 시대는 막을 내리고 있으니어떤 플러그인이나 라이브러리가 와도 잘 사용할 수 있도록 바닐라 자바스크립트를 익혀놉시다 :) DOM 선택 메서드DOM은 html, xml, svg 문서를 위한 프로그래밍 인터페이스입니다.문서의 구조화된 표현 양식을 트리 형태로 제공하며, dom은 트리에 대한 접근을 허용하는 메서드를 규정하고, 해당 메서드는 문서의 구조, 양식, 내용을 변경할 수 있습니다.자바스크립트 언어의 한 부분은 아니지만 웹페이지와 스크립트 혹은 프로그래밍.. 공감수 0 댓글수 0 2018. 12. 30.
클로져 (Closure)와 실행 컨텍스트 lecical environment : 선언 당시의 환경에 대한 정보를 담는 객체 클로저= 함수와 그 함수가 선언될 당시의 환경정보 사이의 조합= 함수 내부에서 생성한 데이터와 그 유효범위(스코프)로 인해 발생하는 특수한 현상 / 상태= javascript의 매우 강력한 특성으로 독립적인 변수를 참조하는 함수. ( 클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다. )- 함수 안에서 다시 함수를 return하면 최초 선언시의 정보를 유지 클로저 형성 시기모든 함수에는 실행 컨텍스트가 있습니다. 실행 컨텍스트는 해당 함수 내의 변수와 해당 함수의 부모 환경에 대한 참조를 의미하는 환경으로 구성됩니다.상위 환경에 대한 참조는 내부 함수가 작성된 범위 외부 또는 내부에서 호출되는지 여부에 관계없이, .. 공감수 0 댓글수 0 2018. 10. 30.
자바스크립트의 메모리 관리 * 메모리 관리를 해야 하는 이유브라우저는 가비지 컬렉션을 지원하는 프로그래밍 환경이고, 우리가 개발하는 웹자바스크립트는 브라우저 환경 기반 하에 동작하므로 일반적으로는 메모리 관리를 크게 신경쓰지 않아도 된다. 그러나 웹브라우저에서 사용할 수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적기 때문에 (브라우저로 인해 운영체제가 다운 되는 것을 방지) 아예 무시할 수는 없는 문제다. heap(힙) -브라우저가 갖고 있는 메모리 공간 stack(스택) -함수 저장?? 공감수 0 댓글수 0 2018. 10. 17.
이벤트객체 이벤트를 짤 때, 이벤트핸들러에 함수명을 적어도 동작합니다.$(document).on('keydown', keyboardInput);위의 예에서 keyboardInput은 다른 곳에 정의되어 있는 함수이죠.위와 같이 코드를 작성하면 jquery에서 이미 이벤트핸들러 함수인 keyboardInput을 호출하는 코드가 이미 적혀있는 것입니다. 또한 keyboardInput 함수에서 파라미터로 받을 수 있는 것이 이벤트 객체입니다.// 이벤트 객체를 사용할 경우 function keyboardInput(e) { console.log(e); }여기서는 e가 이벤트 객체를 받는 파라미터가 되는 것입니다.위 코드를 치고 실행하면 콘솔에서 이벤트객체를 확인할 수 있습니다. 공감수 0 댓글수 0 2018. 4. 22.
키보드 누르는 이벤트 키를 누르면 --> keydown 키 값이 무엇인지 알아내려면 이벤트 객체의 key값의 value를 보면 된다.확인방법)코드를 아래와 같이 작성한 후,$(document).on('keydown', function(event){console.log(event);}); 브라우저의 콘솔 창을 켜 놓고 아무 키나 누르면 event 객체가 뜬다.화살표를 눌러 상세 내용을 보면 'key'라고 쓰여진 키의 값을 확인하면 된다. * 키보드를 누르는 이벤트 작성$(document).on('keydown', function(event){if ( event['key'] === 1 ) {console.log('1번 키를 누르셨습니다.');}}); 공감수 0 댓글수 0 2018. 4. 21.
이벤트 핸들링 이벤트는 비일상적인 사건이며, 언제 발생할 지 사전에 예측할 수 없으므로 일반적인 제어흐름과 다르다. 예측 대신 발생하면 감지하여 그에 대응하는 처리를 호출하는 원리로 동작한다. 예) 키보드 esc를 누르면 팝업창이 닫힌다. 파란색 부분이 이벤트 분홍색 부분이 이벤트 핸들링이다. 어떠한 일이 발생하는 것이 이벤트이며, 이벤트가 발생할 때, 어떤 처리를 할 것인지를 명시한 부분이 이벤트 핸들링이다. 코드로 보면, $('.btn_popup').on('click', function(){}); document.getElementById('home').addEventListener('click', function(){}); 이벤트가 실행되는 원리 자바스크립트는 단일 쓰레드이기 때문에 동시에 여러 작업을 할 수 없.. 공감수 0 댓글수 0 2018. 4. 21.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.