본문 바로가기

분류 전체보기

 (231)
자바스크립트 최신 문법 (ES6, ES11) ES-6 /////////////////////////////////////////// // Shorthand property names /////////////////////////////////////////// // key와 value가 같으면 생략할 수 있다 { const ellie1 ={ name: 'Ellie', age: 18, } const name = 'Ellie'; const age = '18'; // Bad const ellie2 = { name: name, age: age } // Good const ellie3 = { name, age, } } /////////////////////////////////////////// // Destricturing Assignment //////..
자바스크립트 Tutorial By Ellie (11) 비동기의 꽃 JavaScript async 와 await 그리고 유용한 Promise APIs // async & await // clear style of using promise :) // 1. async async function fetchUser() { // do network request in 10 secs.... return 'ellie'; } const user = fetchUser(); user.then(console.log); console.log(user); // 2. await // await은 async가 붙은 함수 안에서만 사용한다. function delay(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } asy..
자바스크립트 Tutorial By Ellie (10) 프로미스 개념부터 활용까지 JavaScript Promise promise.js 'use strict'; // Promise is a JavaScript object for asynchronous operation. // State: pending -> fullfulled or rejected // Producer vs Consumer // 1. Producer // when new Promise is created, the executor runs automatically. // Promise Object 만들기 // 무거운 작업은 Promise로 비동기적으로 하는게 좋다 const promise = new Promise((resolve, reject) => { // doign some heavy wo..
Final team Project 진행과정 (05/26) 오늘 회의내용 정리 각자 맡은 역활을 준비해서 왔고 내가 맡은 스토리보드를 제작하기위해 먼저 오븐으로 작업을 시작했다. 우리팀에 구현할 내용들을 모아 일단 메뉴, 관리자 메뉴로 틀을 잡았다 네비바는 왼쪽으로 넘기고 상단에 프로필과 알람기능을 추가하였다 이 부분은 모든 페이지에 사용할 생각이다. 내일은 팀원들과 회의해 구체적으로 몇페이지를 더 만들어야 하는지 들어가야할 기능이 무엇인지 다시 이야기 할 계획이다. 또 프론트엔드 + 근태기능을 내가 맡는데 근태기능은 좀더 회의를 하고 구도를 잡아야 할것같다. 아래는 06/03일날 발표해야할 내용이다. ---------------------------------------------------------------------- ## PPT 목차 1. 프로젝트 제..
자바스크립트 Tutorial By Ellie (9) 동기 : Code가 작성된 순서대로 실행 비동기 : Task가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 Task를 실행한다. Callback : 비동기로 주어진 일을 다 마친다음에 해당 함수를 실행하도록 추후 업무를 맡겨놓는 것 'use stric'; //////////////////////////////////// // 1. JavaScript is aychronous //////////////////////////////////// // Execute the code block in order after hoisting // code가 나타나는 순서대로 실행이 된다 // hoisting: var, function declaration // callback : 전달해준 함수를 다시 불러줘 //..
자바스크립트 Tutorial By Ellie (8) 10. JSON 개념 정리 와 활용방법 유용한 사이트: JSON Diff checker: http://www.jsondiff.com/ JSON Beautifier/editor: https://jsonbeautifier.org/ JSON Parser: https://jsonparser.org/ JSON Validator: https://tools.learningcontainer.com/json-validator/ //////////////////////////////////// // JSON //////////////////////////////////// // JavaScript Object Notation // 1. Object to JSON // stringify(obj) let json = JSON..
자바스크립트 Tutorial By Ellie (7) 'use strict'; // Q1. make a string out of an array { const fruits = ['apple', 'banana', 'orange']; const result = fruits.join(' & '); console.log(result); } // Q2. make an array out of a string { const fruits = '🍎, 🥝, 🍌, 🍒'; const result = fruits.split(","); console.log(result); } // Q3. make this array look like this: [5, 4, 3, 2, 1] { const array = [1, 2, 3, 4, 5]; const result = array.reverse..
자바스크립트 Tutorial By Ellie (6) 8. 배열 제대로 알고 쓰자. 자바스크립트 배열 개념과 APIs 총정리 비슷한 종류의 데이터를 묶어서 한곳에 보관하는것이 "자료구조" Object 자료구조 Object와 자료구조의 차이 Object : 서로 연관된 특징과 행동을 묶어놓는 것 자료구조 : 비슷한 타입의 Object들을 묶어놓는 것 보통 다른언어에서는 동일한 타입에 Object만 담을 수 있다 JavaScript === dynamically typed language 자바스크립는 다 담을 수 있지만 좋지 않다. 자료구조 알고리즘 : 어떤상황에 뭘 써야하는지 공부 배열 칸칸히 모여있는 자료구조 Index지정되어있음 Index로 접근에 중간중간 삭제가능하다 // Array🎉 // 1. Declaration const arr1 = new Arra..

티스토리툴바