본문 바로가기

코린이공부목록

(73)
async , await Async 와 Await 체이닝 되는 promise 를 간결하고 간편하게 사용할 수 있고, 비동기 코드를 마치 동기 코드처럼 보이게 작성할 수 있음 Async 사용 async 를 함수 선언 앞에 붙여주게 된다면 함수 내부는 모두 비동기로 바뀌게 된다. ( 함수 내부에 전부 Promise 가 씌워진다고 생각 ) 1. promise 를 사용했을 때 const fetchUser = () => { return new Promise((resolve,reject) => { resolve('promise') }) } const user = fetchUser() console.log(user) 2. async 를 사용했을 떄 const fetchUser = async () => { return 'async' } con..
[ES6] 비동기 함수 (Promise) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 동기적 처리 작업을 요청함과 동시에 작업의 결과를 그 자리에서 받을 수 있는 데이터 처리 방식 비동기 처리 작업을 요청하지만 결과는 그 자리에서 꼭 받지 않아도되는 데이터 처리 방식 비동기 처리의 대표적인 예 서버에 데이터를 요청하고 결과를 기다리는 과정 - 서버에 데이터를 요청하는 동안 다른 작업을 진행하다가 데이터 요청이 완료되면 본격적으로 작업을 진행 자바스크립트의 비동기 처리 - 자바스크립트의 엔진은 싱글 스레드로 이루어져 있어, 동시에 두가지 작업을 할 수 없다 - 자바스크립트의 엔진은 비동기 처리가 가능하도록 설계되어있음 - 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 ..
[ES6] 라이브러리 의존성 관리 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 의존성 어떤 파일이나 코드가 다른 파일이나 코드를 필요로 하는 것을 뜻함 기존 자바스크립트의 라이브러리 의존성 관리 방법 기존 자바스크립트는 라이브러리나 모듈을 관리하는 방법이 매우 불편했음 1. script 와 같은 엘리먼트를 이용하여 관리 script.js 를 먼저 참조할 경우 정의되지 않는 함수를 참조하는 의존성 문제가 발생 ES6 라이브러리 의존성 관리 방법 1. import 구문 사용 script 엘리멘트 없이 연결된 파일 및 의존 파일을 먼저 모두 내려 받고 코드를 구동하는 방식 import MyModule from './MyModule.js'; //기본 import { ModuleName } fro..
[ES6] 객체 확장 표현식과 구조 분해 할당 Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 객체 확장 표현식 객체 생성 방식을 좀 더 간결하고 동적으로 생성할 수 있음 기존 자바스크립트의 객체 확장 표현식 사용 방법 객체와 객체의 값을 선언하기 위해 키 이름과 값을 각각 할당해야 했음. const x = 0; const y = 0; const obj = { x: x, y: y}; const randomKeyString = 'other'; const combined = {}; combined['one' + randomKeyString] = 'some value'; const obj2 = { methodA: function() { console.log('A'); }, methodB: function() ..
[ES6] 화살표 함수 (arrow function) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 화살표 함수에 대해서 - ES6에 추가된 표현식을 사용하는 함수로 화살표 기호 ( => ) 로 함수를 선언함 - 화살표 기둥 = 을 사용하므로 fat arrow function 이라고도 함 - 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 장점을 가지고 있음 화살표 함수의 제한점 - this 나 super 에 대한 바인딩이 없음 - methods 로 사용될 수 없음 - new.target 키워드가 없음 - 일반적으로 스코프를 지정할 때 사용하는 call, apply, bind 메소드를 사용할 수 없음 - 생성자로 사용할 수 없음 (constructor) - yield를 화살표 함수 내부에서 사용..
[ES6 문법] 클래스 (Class) Do it! 리액트 프로그래밍 정석 책과 다른 책을 참고하며 공부한 내용을 정리하는 글입니다. 클래스 (Class)에 대해서 - 기존 자바스크립트는 클래스 표현식이 없어서 프로토타입 기반(prototype-based) 객체지향 언어 - 클래스는 객체 지향 프로그래밍 (OOP) 을 정의하는 개념 중 하나 - 똑같은 객체를 여러 번 다시 찍어내기 위한 틀 , 즉 템플릿 (template) 이다. 동일한 변수와 메서드 등을 가지는 객체를 붕어빵에 비유한다면, 클래스는 붕어빵 틀에 비유할 수 있음 클래스 (Class) 와 인스턴스 (instance) - 인스턴스 (instance) 란 객체를 만들기 위한 틀 (template) 을 의미하는 클래스를 실제로 사용할 수 있는 객체로 만드는 것 - 클래스로 구현된 구..
[ES6 문법] 가변 변수와 불변 변수 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 가변 변수 와 불변 변수의 의미 - 기존 자바스크립트 문법은 변수 선언에 var 키워드를 사용했다. 가변 변수 - 값을 수정할 수 있는 변수 - let 키워드 - 읽거나 수정할 수 있음 - 재선언 X , 재할당 O let jin = "유진"; jin = "yujin" console.log(jin) => yujin ... let jin = "유진"; let jin = "yujin" console.log(jin) => error​ 불변 변수 - 값을 수정할 수 없는 변수 - const 키워드 - 읽기만 가능함 - 재선언 X, 재할당 X const jin = "유진" console.log(jin) => 유진 ... const j..
[ES6 문법] 전개 연산자 (spread operator) Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 전개 연산자란 - 나열형 자료를 추출하거나 연결할 때 사용하는 문법 - 배열이나 객체, 변수명 앞에 마침표 세 개(...) 를 입력하는게 특징 - 배열, 객체, 함수 인자 표현식([].{},()) 안에서만 사용해야함 이전 배열 문법 예제 1. 배열의 각 요소를 추출하여 새로운 배열을 만듬 const array1 = ['one', 'two']; const array2 = ['three', 'four']; const combined = [array1[0], array1[1], array2[0], array2[1]]; console.log(combined) 2. concat () 함수로 두 배열을 합치기 const array1 ..