본문 바로가기
300x250

자바스크립트52

자바스크립트_동기/비동기 개념정리(callback_promise_async/await) 오늘은 비동기에 대해서 알아보겠습니다. 동기(Synchronous): 요청에 대한 결과가 동시에 일어난다. 비동기(Asynchronous): 요청에 대한 결과가 동시에 일어나지 않는다. 동기는 바로 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어집니다. 비동기는 요청과 결과가 동시에 일어나지 않을거란 약속입니다. 동기방식은 매우 간단하고 직관적이지만, 결과가 주어질 때까지 아무것도 못하고 기다려야 하기에 효율적이지 않다는 단점이 있습니다. 비동기 방식은 동기보다 복잡할 순 있지만, 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 효율적으로 사용할 수 있습니다. 비동기와 동기의 일상생활의 예시를 들면, 커피를 마시고 카페에 갔는데 줄이 있습니다. 우리는 1. .. 2021. 5. 21.
자바스크립트_기본 함수 구현하기(_.filter, _.uniq, _.each,_.map, _.reduce) 이번 주에는 자바스크립트 유틸리티 라이브러리 underscore의 함수들을 직접 구현하는 과제를 받았습니다. 그중에서 제가 중요하다고 생각하는 몇가지만 정리해보겠습니다. _.each 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 * 배열 arr을 입력받을 경우, iteratee(ele, idx, arr) * 객체 obj를 입력받을 경우, iteratee(val, key, obj) * 이처럼 collection의 모든 정보가 iteratee의 인자로 잘 전달되어야 모든 경우를 다룰 수 있습니다. * 실제로 전달되는 callback 함수는 collection의 모든 정보가 필요하지 않을 수도 있습니다. */ // _.each는 명시적으로 어떤 값을 리턴.. 2021. 5. 19.
자바스크립트_setTimeout()과 setInterval() 개념 정리 오늘은 setTimeout()과 setInterval()에 대해 정리해보겠습니다. setTimeout 은 모두 일정시간이 지난 후에 함수를 실행하고 setInterval 일정 시간 간역으로 함수를 반복합니다. setTimeout 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function fn(){ console.log(3) } setTimeout(fn, 3000); //3초뒤에 함수가 실행된다. //위에 있는 코드는 밑에 처럼 사용하여두 된다. setTimeout(function fn(){ console.log(3); }, 3000); //인수가 필요하다면 function showName(name){ console.log(name); } setTime.. 2021. 5. 19.
자바스크립트_자료구조 stack과 queue 개념 정리 오늘은 자료구조에서 stack과 queue에 대해서 알아보겠습니다. 먼저 자료구조가 무엇인지 설명해보겠습니다. 자료구조란 문자, 숫자, 소리, 그림, 영상 등 실생활을 구성하고 있는 것들을 우리는 자료라고 합니다. 자료들이 잘 분석되고, 정리되고 활용되어야만 의미가 있다고 볼 수 있는데, 무분별하게 마구잡이로 자료를 체계없이 저장하면 의미가 없어집니다. 자료를 구조화 시키는 것. 그렇기에 우리는 잘 정리된 자료를 활용하기 위해 자료 구조를 갖추려고 하는 것입니다. Stack stack이란 후입선출(LIFO, Last-in-first-out)의 구조이다. 스택은 데이터를 차곡차곡 쌓아 올린 형태의 자료구조를 말한다. 만약 0-1-2-3-4-5 순으로 쌓았다면, 5-4-3-2-1-0 순으로 빼낼 수 있다. .. 2021. 5. 19.
자바스크립트_재귀함수 기본 개념정리_다르게 생각하기 오늘은 재귀함수에 대해 알아보도록 하겠습니다. 재귀함수는 어떤 함수가 자기 스스로를 호출하는 것을 말합니다. 자기 자신을 호출하는 함수로 조건이 충족될때까지 반복적으로 함수를 불러내면서 주어진 작업을 수행하는 것을 의미합니다. 5! = factorial(5)이라는 함수가 있습니다. 우리는 이것을 =5*4*3*2*1 가 될 것을 알고 있습니다. 이건 이렇게도 표현이 가능합겁니다. =5*4! =5*4*3! =5*4*3*2! =5*4*3*2*1! 우리는 지금 구조가 비슷하다는 걸 알수있고, 어떤 문제를 해결할때 같은 구조를 가진 문제를 해결하는 방법을 재귀라고 합니다. 재귀는 다음과 같은 상황에 적합하게 사용됩니다. 주어진 문제가 (구조는 비슷하고) 더 작은 문제로 나뉘어 질 수 있는 경우 중첩된 루프가 많거.. 2021. 5. 13.
react 컴포넌트와 props로 데이터 보내기 이번엔 props에 대해 포스팅하려고 합니다. 리액트에 장점 중 하나는 컴포넌트형으로 작은 단위로 나눌 수 있다는 것입니다. 부모 컴포넌트에 있는 데이터들을 props를 통해 자식컴퍼넌트에서 사용할 수 있습니다. 위의 사진에서 보면 movie.js 컴포넌트안에 3번째 줄엔 props라고 써져있는것을 볼 수 있습니다. 그렇다면 부모 컴퍼넌트의 어떤 자료를 사용한 것일까요/ 6번 줄에 {props.movie.title} 과 7번 줄에 {props.movie.year} 이 부모 컴포넌트에서 가져온 자료, props라고 할 수 있습니다. 사용법은 위에와 같습니다. 왜 {props.movie.year}처럼 사용했을까요? 밑에 App.js를 보면 22번째 줄을 보면 movie라는 속성에 movie라는 속성을 만들어.. 2021. 5. 12.
자바스크립트_14개의 숫자와 수학 method 정리_toFixed_isNaN_Math.random_parseFloat 이번 포스팅은 자바스크립트 숫자와 수학 method에 대해 알아보겠습니다. toSting() 1 2 3 4 5 6 7 8 9 10 toString() 10진수 -> 2진수/16진수 let num =10; num.toString(); // "10" num.toString(2); // "1010" let num2 = 255; num2.toString(16); // "ff" cs Math Math.PI / Math.ceil() / Math.floor() / Math.round 1 2 3 4 5 6 7 8 9 10 11 12 13 Math.PI; 3.141592653589793 이 나옴 (원주율) Math.ceil(): 올림 let num1= 5.1; let num2= 5.7; Math.ceil(num1); /.. 2021. 5. 11.
자바스크립트_생성자 함수 개념정리 이번 포스팅은 생성장 함수에 대해 알아보겠습니다. 굉장히 간단하게 여러 변수를 만들어낼 수 있습니다. 천천히 한번 읽어보세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 생성자 함수 function User(name, age) { this.name = name; this.age = age; }; let user1 = new User('mike', 30); let user2 = new User('jane', 20); let user3 = new User('jun', 27); // 1) 함수 이름의 첫 글자를 대문자로 바꿔준다. // 2) new 연산자를 사용하여 호출한 형태다. // 3) .. 2021. 5. 10.
자바스크립트 식별자 API 개념정리(1)_getElementById, className, classList 사용법 식별자 api 엘리먼트를 제어하기 위해서는 그 엘리먼트를 조회하기 위한 식별자가 필요하다. 이번 포스팅은 식별자 api에 대해서 알아보겠습니다. HTML에서 엘리먼트의 이름과 id 그리고 class는 식별자로 사용됩니다.. 식별자 API는 이 식별자를 가져오고 변경하는 역할을 합니다. 1 2 3 4 5 html cdd javascript Colored by Color Scripter cs 태그네임을 찾는 방법 Element.id 문서에서 id는 단 하나만 등장할 수 있는 식별자다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 document.getElementById('active').tagname //=> "LI" document.getElementById('active').tagname.. 2021. 5. 10.
반응형

티스토리툴바