본문 바로가기

Front-End: Web/JavaScript

 (85)
[코딩애플] js part 3-6. async/await Promise 어려워서 싫으면 async/await을 사용합시다 async/await 2018년에 나온 신문법 프로미스를 더 깔끔하게 사용할 수 있는 키워드 순차적으로 많은 걸 사용할 때 유용함 예제 연산이 끝나면 특정 코드를 실행하고 싶다면 -> 콜백함수 쓰기 function 더하기(콜백){ 1 + 1; 콜백(); } 더하기(함수); 근데 이거 하기 싫으면 -> Promise 써보겠음 function 더하기(){ return new Promise(...) } 더하기().then(function(){ }) 근데 프로미스 만들기 너무 귀찮다 -> async / await **async를 funciton 앞에 붙이면 함수가 Promise 역할 가능** **함수 실행 후에 Promise 오브젝트가 남는다.**..
[코딩애플] js part 3-5. ES6 Promise 인간의 언어로 설명하는 ES6 Promise 사용 방법 콜백함수 만드는 거랑 비슷한데, 콜백함수보다는 약간 기능이 더 많다. 옆으로 길어지지 않아서 굳 실패할 경우에도 코드실행 가능 (catch) 일반 콜백함수 : 1번 실행 후 2번 실행해주세요~ Promise로 만든 거 : 1번 실행 후 성공시 2번 실행해주세요~ 실패시 3번 실행해주세요~ var 프로미스 = new Promise(); 프로미스.then(function(){ // 프로미스가 성공일 경우 실행할 코드 }).catch(function(){ // 실패할 경우에 실행할 코드 }).finally(function(){ // 성공이든 실패든 결과가 났을 때 실행할 코드 }) Promise = 성공/실패 판정 기계 그래서 성공, 실패 판정을 내가 판..
[코딩애플] js part 3-4. 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리 자바스크립트는 동기식 처리(Synchronous) 한 번에 코드 한 줄씩 차례로 실행 병렬처리 가능하다? ㄴㄴ 자바스크립트는 오래걸리는 연산 만나면 멈춤 console.log(1); console.log(2); console.log(3); // 1 // 2 // 3 // => 동기! 비동기식처리(Asynchronous) 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식 자바스크립트가 아니라 자바스크립트 실행하는 브라우저 덕분에 가능 오래걸리거나 실행까지 오래 걸리는 함수들 setTimeout eventListener ajax setTimeout console.log(1); setTimeout(() => {console.log(2)}, 1000);..
[코딩애플] js part 3-3. Stack, Queue를 이용한 웹브라우저 동작원리 Stack, Queue를 이용한 웹브라우저 동작원리 문법만 배운다고 코딩잘하는 사람이 되는게 아닙니다. 오늘 배울 건 웹브라우저의 동작원리인데 상식으로 알아두면 여러분 코딩생활에 도움이될 수 있습니다. 이벤트리스너, setTimeout 같은거 다룰 때 의도와는 다르게 미스터리하게 동작하는 경우가 많은데 그것은 이런 이유였다고 합니다. 웹 브라우저란 서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램입니다. 근데 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있습니다. 이걸 알고계시면 앞으로 코드잘짤 수 있습니다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있습니다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 돌립니다. stack이 뭐냐고요? ..
[코딩애플] js part 3-2. import / export를 이용한 파일간 모듈식 개발 import / export를 이용한 파일간 모듈식 개발 기본적인 방법(전통적인 방법) .js(library.js) 파일을 만들어서 자바스크립트를 보관한다. 이렇게 **모듈화**해서 개발할 수 있다. ES6: import/export **import 가져올거 from '경로'** 로 파일을 다른 파일을 가져올 수 있다. 근데 library.js에 있던 모든 내용을 가져오지 않는다. 필요한 정보만 가져올 수 있다. **export default 내보낼거** // library.js var a = 10; export default a; a를 가져왔는지 확인해보자. 특징 export default를 쓰면 import할 때 이름을 바꿔도 됨 export default는 파일당 1회 사용 var a = 10; v..
[코딩애플] js part 3-1. 틀린그림 찾기능력이 향상되는 Destructuring 문법 틀린그림 찾기능력이 향상되는 Destructuring 문법 ES6부터 추가된 문법 =패턴 매칭 array, object를 해체해서 쓸 수 있다. array 데이터를 전부 변수에 담으려면? array 하나를 만들자. var arr = [2,3,4]; arr에 담긴 자료들이 아주 중요해서 전부 꺼내서 변수에 담고 싶다. var a = arr[0]; var b = arr[1]; 이걸 좀 더 쉽게 할 수 있는 문법이다. var [a,b,c] = [2,3,4]; a; // 2 b; // 3 c; // 4 이렇게 1) **모양만 맞춰 변수를 선언하면 변수가 생긴다**. 2) **직관적으로 변수를 만들 수 있다**. array destructuring 할 때 몇개를 빼먹는다면 등호로 기본값(defaultValue) ..
[코딩애플] js part 2-8. class, extends, getter, setter 연습문제 class, extends, getter, setter 연습문제 1. 직접 class 구조 만들어보기 갑자기 강아지 SNS를 만들고 싶어서 자바스크립트로 열심히 코딩하던 중, 여러 강아지 정보들을 담은 유사한 오브젝트 자료형을 테스트삼아 몇개 만들려고 합니다. var 강아지1 = { type : '말티즈', color : 'white' }; var 강아지2 = { type : '진돗개', color : 'brown' }; 이렇게 쭉 많이 만들고 싶은데 하드코딩하기 싫어서 class를 만들어 강아지 오브젝트들을 뽑고 싶습니다. 그럼 class를 어떻게 만드는게 좋을까요? ➡️ class Dog { constructor(type, color) { this.type = type; this.color = col..
[코딩애플] js part 2-7. getter, setter 대체 왜 쓰는지 알아보기 getter, setter 대체 왜 쓰는지 알아보기 object를 생성해보자. var 사람 = { name: 'Park', age: 30 } object에서 age 자료를 꺼내고 싶으면? 사람.age; 근데 요새는 자료를 바로 꺼내지 않고, **자료를 꺼내는 법을 함수로 만들어서 꺼낸다**(유행하는 잡기술임). 내년 age를 알고 싶은 함수를 추가해보자. var 사람 = { name: 'Park', age: 30, nextAge(){ // 지금 age에서 1을 더해서 출력하는 함수 return this.age + 1; // this == 사람 object } } 사람.age + 1; // 31 사람.nextAge(); // 31 age + 1하면 더 쉬운데 왜 nextAge를 만들까? 함수를 만들어 ob..
반응형

티스토리툴바