Travel to Frontend (372) 썸네일형 리스트형 [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 14회차 미션 패스트캠퍼스 프론트엔드 인강 14일차 지난시간에 이어 함수인자에서의 spread를 공부하고 scope의 기초를 배웠다. 함수의 인자에서 spread연산자를 이용하는법 먼저 인자와 파라미터의 차이를 알아보자 파라미터는 함수에서 받아오는 값이고 인자는 함수에 넣어주는 값이다. function.substract(x,y){ //파라미터 함수에 들어가는값 return x-y } const result = substract(1,2) //인자:함수에 넣어주는값 console.log(result); ...spread를 활용하면 이렇게 표현할수있다. function.substract(x,y){ return x-y } const numbers = [1,2] const result = substract(...numbers).. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 13회차 미션 패스트캠퍼스 프론트엔드 인강 13일차 지난시간에 이어 spread와 rest의 차이를 알아보고 reduce를 복습하였다. rest는 spread처럼 ...을 사용해 생김새는 비슷하지만 역할이다르다. spread처럼 객체, 배열, 파라미터함수에 사용할수있다. 객체에서의 rest const purpleCuteSlime = { name : '슬라임', attribute:'cute', color:'purple' } //객체 비구조할당 const {color, ...rest} = purpleCuteSlime console.log(color) console.log(rest)//컬러를 제외한 name과 attribute가 들어있다. rest대신에 다른 글자로도 바꿀수있다. ...cuteSlime처럼해도 동일한 결과값.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 12회차 미션 패스트캠퍼스 프론트엔드 인강 12일차 비구조화할당과 spread와 rest를 배워보았다(ES6 javascript의 ... 문법) 비구조화할당(구조분해) destructuring assignment 말이어려운데 쉽게말해 객체나 배열의 원소를 밖으로 꺼내는것을 의미하는 것같다. 객체 비구조화할당 //객체에서의 비구조할당 //만약 f의값이 없다고 가정할때 아래처럼 객체네 f=100이런식으로 넣어줌 const object = {a:1, b:2} const {a, b, f=100} = object console.log(a) console.log(b) console.log(f) //비구조할당은 함수의 파라미터에서도 적용가능 //만약 e의값이 없다고 가정할때 함수안에 e||2또는 아래처럼 객체네 e=3이런식으로 값.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 11회차 미션 패스트캠퍼스 프론트엔드 인강 11일차 for of, for in, continue, break와 객체의 key값과 value값을 빼는방법을 배워보았다. for of const numbers = [10,20,30] //나열하는방법 //1.for문 for(let i = 0; i console.log(num)) for of문보다는 for문이나 배열내장함수인 forEach를 더 많이쓴다고하니 for of는 알아만두자. 이번에는 객체의 특정값만 반환하는것을 배워보자 const doggy = { name:'멍멍이', sound: '멍멍', age:2 } console.log(Object.keys(doggy))//key값들을 배열로 받아오기 console.log(Object.values(doggy))//value값들.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 10회차 미션 패스트캠퍼스 프론트엔드 인강 10일차 함수의 기본 파라미터와 조건문을 더 스마트하게 쓰는방법을 배워보았다. 함수를 호출하게될때 원래 넣어야할 파라미터를 넣지않게됬을때 기본값을 지정하는 방법 예) 원의 넓이를 구하는 함수 function cal(r){ return Math.PI * r * r; } //const area = cal(1); const area = cal(); console.log(area) 단축평가논리계산법을 활용하면 이를 해결할수있다. function cal(r){ const radius = r || 1; return Math.PI * radius * radius; } const area = cal(); console.log(area) 하지만 더 간단한 방법이있다. function cal(.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 9회차 미션 패스트캠퍼스 프론트엔드 인강 9일차 카운터 프로젝트를 통해 DOM을 통한 자바스크립트와 html연동을 해보고, 단축평가논리계산법을 배웠다. DOM이란 각 태그에 대한 정보를 지니고있는 자바스크립트 객체이다. counter.html 0 +1 -1 DOM활용 예시 html에서 number, increase, decrease의 id값들을 자바스크립트에 가져올수있다. index.js const num = document.getElementById('number') const increse = document.getElementById('increase') const decrease = document.getElementById('decrease') 만약 id값이 number인 태그에 쓰여진 글자를 알고싶다면? .. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 8회차 미션 패스트캠퍼스 프론트엔드 인강 8일차 비동기함수 promise all, promise.race 그리고 truthy와 falsy를 공부해보았다. 지난시간에 배운 promise, async 와 await를 활용해 동물들을 호출해보자 function sleep(ms){ return new Promise(resolve => setTimeout(resolve,ms)) } const getDog = async () => { await sleep(1000) return '멍멍이' } const getRabit = async () => { await sleep(500) return '토끼' } const getTurtle = async () =>{ await sleep(3000) return '거북이' } async f.. [패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 7회차 미션 패스트캠퍼스 프론트엔드 인강 7일차. 비동기처리인 promise, async, await을 정리하였다. 비동기처리 종류가많아 너무나 헷갈리는데 동시에 다쓰면서 여러번 반복해 익숙해지면 될것같다. async와 await를 쓰면 promise의 단점을 보완해줄수있다.(ES8에 소개된 문법)그런데 promise는 es6버전이고 async, await은 es8이라 IE는 전부다 지원안되네.. promise promise는 비동기처리를 쉽게해주는 기능, 이전에는 비동기처리를위해 콜백함수를 사용하엿는데 콜백함수가 많아질경우 난잡해져 콜백지옥이생길수있다고한다. promise를 만드는방법 const myPromise = new Promise((resolve, reject) => { //구현 }); 1초뒤에 성공하는 프.. 이전 1 ··· 40 41 42 43 44 45 46 47 다음 목록 더보기
