본문 바로가기

전체 글

프론트엔드 개발자는 왜 구하기 어려운가
2020. 9. 23. https://taegon.kim/archives/4810 프론트엔드 개발자는 왜 구하기 어렵나요? Why can't we find Front End developers?를 번역한 글입니다. 저 스스로가 프론트엔드 개발자이기도 해서 재밌는 주제라 옮겨봤습니다. ^^ 어느날 우연히 Quora에서 프론트엔드 엔지니어링과 스타트업에 관� taegon.kim
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..

티스토리툴바