Language/JavaScript(ES6) (48) 썸네일형 리스트형 [ES6]CallBack,Promise,Async/Await 비동기함수 출처 : https://medium.com/@constell99 동기(지금) VS 비동기(나중)동기와 비동기의 구분은 요청받고 응답받는 시간대의 차이라고 생각합니다 요청하고-응답받는 시간을 하나의 박스(box)라로 정의한다면, 동기는 박스 안에서 움직이고, 비동기는 박스를 벗어나 작동되는 원리 라고 생각합니다.동기 : 요청과 응답이 같은 시간대 “안에” 고정되어 있어, 요청에 대해 응답이 완료되기까지 프로그램이 정지합니다. 응답을 받고나서야 비로소 다시 진행되는 특성을 가집니다.비동기 : 요청-응답 간 결합이 자유로워 프로그램이 응답 받기 위해 대기하지 않고 쿨하게?! 자기 갈길?! 가는 특성입니다. 언젠간 응답을 받을테고 다음 로직을 수행 합니다.동기(synchronous)요청을 하는 시기와 응답을 받.. [Babel]바벨 기본시작 여태까지 아무 생각없이 사용해왔는데, 기본적인것은 정리 하는게 좋을꺼 같아서.. https://babeljs.io/ nodejs에서 바벨을 사용하기 위해서 다음과 같이 설치 한다. npm install --save-dev @babel/core @babel/node 바벨을 기본적으로 사용하려면 core와 node의 설치가 필요하고 그 이외에 버전을 설치하여야 하는데 여기서는 presets버전을 설치 했다(최신버전이면서 실험적이지는 않은..) npm install @babel/preset-env 그리고 이를 관리하기 위해 .babelrc라는 폴더를 만들어 관리 한다. .babelrec{ "presets" : ["@babel/preset-env"]} node로 실행시킬 때 바벨을 거쳐가고 싶어서 package.. [JS] getter/setter 출처 : http://mygumi.tistory.com/161 처음에는 get()과 set()의 용도 자체를 이해하지 못했고언젠가부터는 get() set()을 왜 사용하는지 이해를 못했는데이제서야 이해가 되는 것 같다. 그중에서 위 블로그가 가장 설명을 잘 해주시는 것 같다. 사용하는 이유들로는 1. 캡슐화2. 사용성 두가지 인것 같다. MVVM패턴을 설명하기 위해 강사님이 설명한 코드이다. 결론만 보면 1. set()을 통해서 model(data)를 바꿀 때,어떤 경우라도 val(변수)를 받아 바뀐다viewModel.model = val같은 식으로 변수를 전달했다면 viewModel.model = "break"와 같이아예 기능을 마비시켰을지도 모르는 일을 방지했다. 2. get() set() 이라는 함.. [ES6]Map과Set 책을 읽다가 Map과 Set에 대해 나왔는데여태까지 한번도 써본 적도 없고왜 써야 되는지 이해가 안되서여기저기 찾아보고 읽어보다 책과 똑같은 예제로 포스팅 하신분이 계서서 가져왔다.(https://shin-ae.github.io/)MAPES6이전에는 키와 값을 연결하려면 객체를 사용해야 했음. 하지만 객체를 이런 목적으로 사용하면 여러가지 단점이 생김프로토타입 체인 때문에 의도하지 않은 연결이 생길 수 있음객체 안 연결된 키와 값이 몇 개나 되는지 쉽게 알아낼 방법이 없음키는 반드시 문자열이나 심볼이어야 하므로 객체를 키로 써서 값과 연결할 수 없음객체는 프로퍼티 순서를 전혀 보장하지 않음map은 키와 값을 연결할 목적이라면 객체보다 나은 선택라고 하는데... 나는 get() has() size()와 같.. [ES6]객체와 객체지향프로그래밍 용어(Terminology)섹션Class객체의 특성을 정의ObjectClass의 인스턴스Property객체의 특성(예: 색깔)Method객체의 능력(예: 걷기)Constructor인스턴스화 되는 시점에서 호출되는 메서드Inheritance클래스는 다른 클래스로부터 특성들을 상속받을 수 있다.Encapsulation클래스는 해당 객체의 특성들만을 정의할 수 있고, 메서드는 그 메서드가 어떻게 실행되는지만 정의할 수 있다. (외부 접근 불가)Abstraction복잡한 상속, 메서드, 객체의 속성의 결합은 반드시 현실 세계를 시뮬레이션할 수 있어야 한다.Polymorphism다른 클래스들이 같은 메서드나 속성으로 정의될 수 있다.객체지향 프로그래밍에 대한 보다 확장된 설명은 Object-oriented pro.. [ES6]for문(for of문 다시보기) for문 종류가 너무 많다. 책을 읽다가 정리해야 겠다고 생각해서 작성 foreach 반복문foreach 반복문은 오직 Array 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다.var items = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); // 출력 결과: item, item2, item3foreac.. [ES6]Array Method 오랜만에 배열 메소드를 볼려니 헷갈려서 이번 기회에 확실하게 정리하자 1. push pop shift unshift배열의 처음이나 끝에서 요소 하나를 추가하거나 제거하기 2. concat배열의 끝에 여러 요소 추가하여 사본 반환하기(arr는 바뀌지 않음) 3. slice배열 일부 가져오기 첫번째 매개변수는 시작점두번째 매개변수는 끝점 음수는 뒤에서 세고 양수일때 end는 인덱스 전까지음수일때는 start가 인덱스 전까지선택됨4. splice임의의 위치에 요소 추가하거나 제거하기 첫번째 매개변수는 시작점두번째 매개변수는 시작점에서 몇개나 지워나갈지세번째 매개변수부터는 추가해나갈 아이템들4. copyWithin배열 안에서 요소 교체하기 첫번째 매개변수는 복사한 요소를 붙혀넣을 위치두번째는 복사를 시작할 시작.. [Javascript]Map(iterator) 이전부터 map메소드를 사용하긴 했는데, 이런 식으로 어떤 내용을 반복해서 불러오는 방법을 iterator(반복자)라고 하는가 보다. 예시로 위의 코드를 살펴보자 array.map을 하게 되면 function map이 리턴되어진다 맵은 펑션을 받나보다. 다음과 같이 리턴하게 되면 값을 출력하게 되고 함수의 첫번째 파람비터는 array의 모든 값들 인가보다. 자 이를 이용해서 비디오 리액트 리스트를 추가해 보자 import React from "react";import VideoListItem from "./video_list_item"; const VideoList = (props) => { const VideoItems = props.videos.map((video) => { return }) retu.. 이전 1 2 3 4 5 6 다음
