본문 바로가기

JavaScript

JavaScript - Promise 에 대해서 (수정 중..)
2020. 9. 25. #Promise Promise 는 자바스크립트에 내장된 오브젝트이며 ES6에서 도입되었습니다. 비동기 처리를 위한 callback 함수 대신에 유용하게 사용할 수 있으며, 모던 브라우져 (크롬, 파이어폭스 등)에서는 완벽하게 지원된다고 합니다. (IE 에 대응하려면 ES5 로 트랜스파일.. 해야 한다고 하지만, 일단 이 부분은 패스) #프로듀서와 컨슈머 Promise 에는 프로듀서와 컨슈머라는 개념이 있습니다. 프로듀서는 데이터를 제공한다는 의미이고, 컨슈머는 제공된 데이터를 사용한다는 의미입니다. let userInfo = { name: 'test', age: '12' }; // 프로듀서 const test1 = function () { return new Promise((resolve, reject)..
JavaScript - 콜백 지옥에 대해서
2020. 9. 23. 앞 포스팅에서 콜백 함수에 대해서 알아보았습니다. 그러면 이제 검색만 해도 많이 나오는 콜백 지옥에 대해서 알아보겠습니다. 예를 들기 위해서 아래와 같은 로직을 예제로 구현하였습니다. 1. 유저 입력 - 유저가 이름과 비번을 입력합니다. 2. 상품 정보 가져오기 - 데이터 베이스에서 상품 정보를 가져옵니다. 대량의 정보를 가져온다고 가정하고, setTimeout 메서드로 3초를 줍니다. 오래 걸리는 만큼 실행 순서를 2번에 두었습니다. 3. 입력 체크 - 유저가 입력한 값이 타당한지 판단합니다. 여기서는 아주 간단한 규칙만 부여하겠습니다. - 이름 : 스트링이어야 한다. - 비밀번호 : 3글자 이상이어야 한다. 4. 유저 입력 정보와 데이터베이스 정보 비교 - 유저가 입력한 입력 정보(이름과 패스워드) ..
JavaScript - 콜백 함수
2020. 9. 23. 자바스크립트 콜백 함수에 대해서 가볍게 공부하고, 프로미스를 공부하려 했는데 콜백 함수에 대해서 더 정확히 알지 못하면 의미가 없다고 느껴서 콜백 함수를 정리합니다. @먼저 비동기 처리와 동기 처리에 대해서 알아봅시다. -동기 처리 말 그대로 실행하는 순서대로 흘러가는 로직을 말합니다. function sync1() { console.log('test1'); } sync1(); console.log('test2'); // 출력 결과 // test1; // test2; 위의 처리 처럼 출력 결과가 순서대로 실행이 됩니다. 이것을 동기 처리라고 합니다. -비동기 처리 자바스크립트의 대표적인 특징 중 하나가 비동기 처리에 특화 되었다고 할 수 있습니다. 서버와의 통신 중에 어떤 함수의 처리가 길어지면, 브라우..
JavaScript : 반복문
2020. 9. 21. JavaScript 반복문 (for, while) for : 일반적인 사용 let testArray = []; // 가장 일반적인 사용법. 3가지의 식을 다 사용 for (let i = 0; i 3) break..
JavaScript : Promise 기초 (동기 처리에서 비동기 처리로 바꾸는 과정)
2020. 9. 19. JavaScript : Promise 의 활용 예제 1. 일반적인 동기 처리 'use strict'; // 1. 기본적인 함수 호출 (동기 처리) function test1() { return 'my name is...'; } const username = test1(); console.log(username); console.log('test'); // 출력결과 (순차적) // my name is... // test 2. 일반 동기 처리를 (순차적 처리) 비동기로 바꾸는 방법 중 하나는 Promise 를 사용하는 것이다. 'use strict'; // 동기 처리는 순차적으로 이루어지기 때문에, 해당 처리가 끝나야만 다음 처리로 갈 수 있다. // Promise 사용하기 // 함수 안에 Promise 를..
JavaScript - Array
2020. 9. 17. JavaScript - Array 1. 선언 // Array 오브젝트 생성 const array1 = new Array(); const arrayA = new Array(33); // 길이가 33인 Array 오브젝트 생성 const arrayB = new Array(1, 2, 3); // 배열 길이 3개, 값 1,2,3 을 가진 오브젝트 생성 const array2 = new Array('1', '2', '3'); const array3 = [1, 2]; let array4 = ""; array4 = ['1', '2', '3']; const array5 = []; console.log(array1); console.log(array2); console.log(array3); console.log(arr..
JavaScript 기초5 : function expression
2020. 9. 15. function expression 1. 함수를 정의하지 않고 바로 호출 할 수 있다. (hoisted) //anonymous function const test = function () { console.log('test'); }; test(); 2. 함수를 변수에 대입하여, 선언한 변수를 함수로 만드는 것도 가능하다. const printAgain = test; printAgain(); 3. callback function function randomQuiz(answer, printYes, printNo) { console.log('randomQuiz'); if (answer === 'aaa') { printYes(); } else { printNo(); } // console.log(answer =..
JavaScript 기초4 : function (default parameter, rest parameter)
2020. 9. 15. Default parameters (added in ES6) ES5에서 파라미터에 값을 전달하지 않았을 경우, js 가 대체하여 값을 출력한다. function showMsgES5(msg, from) { console.log(`show ${msg} by ${from}`); } showMsgES5('test'); // show test by unknown ES6에서 파라미터에 값을 전달하지 않았을 경우를 고려해서, 파라미터에 전달하지 않은 값의 default 값을 정의할 수 있다. function showMsgES6(msg, from = 'not sended') { console.log(`${msg} by ${from}`); } showMsgES6('test'); // test by not sended R..

티스토리툴바