OUR + YOUR SPACE

동기식 과 비동기식 출처: https://www.youtube.com/watch?v=s1vpVCrT8f4 [드림코딩 by 엘리] 동기식 JavaScript is synchronus 자바스크립트는 동기식임 Execute the code block by order after hoisting 호이스팅 이후에 순서에 따라 위에서 아래로 실행됨 hoisting이란 var 변수 또는 함수는 자바스크립트 실행시 자동적으로 제일위로 올라간다는 뜻 비동기식이란 하나의 일이 완료될때까지 기다리지 않고 다음에 해야될 일을 바로 실행되는 것을 말함 //javascript는 동기식이다. 위에서 아래로 순차적으로 console.log('1'); console.log('2'); console.log(&..

callback & callback hell 출처: https://www.youtube.com/watch?v=s1vpVCrT8f4 [드림코딩 by 엘리] callback 우리가 전달해준 함수를 나중에 불러줘~~ console.log('1'); //1초뒤에 콜백함수를 실행하라 //ES6 이전의 코드 setTimeout( // 콜백함수 function() { console.log('2'); } ,1000 ); //ES6에서 제공하는 Arrow function을 이용 // setTimeout( // [이부분이 콜백함수] // () => console.log('2') // ,1000 // ); console.log('3'); // console.log(&..

Function 심화 출처: https://www.youtube.com/watch?v=e_lU39U-5bQ [드림코딩 by 엘리] Function (함수) fundamental building block in the program 프로그램의 기본 구성 요소 subprogram can be used multiple times 재활용이 가능함 performs a task or calculates a value 작업을 수행하거나 값을 계산 1. Function declaration 함수 선언 function name(param1, param2) { body... return;} one function === one thing 하나의 함수는 하나의 일만 naming:doSomething, command, ver..

외부에서 가져온 날짜 API를 호출 출처: https://youtu.be/5fAMu2ORvDA [노마드 코더 Nomad Coders] 우선 디바이스의 위치정보를 불러온다. 가져온 위치 정보를 로컬 디바이스에 저장하고 이를 이용 날짜 정보를 가져온다. 키워드1. Navigator 인터페이스 사용자 에이전트의 상태와 신원 정보를 나타냄 Navigator.geolocation : 디바이스 위치에 접근을 허용하기 위한 객체를 반환 키워드2. fetch API 네트워크 통신을 포함한 리소스 취득을 위한 인터페이스 IE 에서는 지원하지 않음 [polyfill 이용] Promise를 기반으로 되어 있음 기본구조 fetch('http://example.com/movies.json') .then(funct..

Image Background 출처: https://youtu.be/aHlJqxLREcY [노마드 코더 Nomad Coders] 배경을 랜덤이미지로 출력 키워드1. Math.random() 0 이상 1 미만의 부동소숫점 의사 난수. //두 값 사이의 난수 생성하기 function getRandomArbitrary(min, max) { return Math.random() * (max - min) + min; // min 보다 크거나 같으며, max 보다 작은값 } //두 값 사이의 정수 난수 생성하기 function getRandomInt(min, max) { min = Math.ceil(min); max = Math.floor(max); return Math.floor(Math.random() * (m..

3단계 삭제 버튼을 눌러 로컬스토리지에서 삭제 및 페이지에서 지우기 출처: https://youtu.be/dbPOjiG5WJ4 [노마드 코더 Nomad Coders] 버튼 클릭시 화면에서 해당 리스트 삭제 로컬스토리지에서 데이터를 삭제 키워드1. filter() 배열의 각요소마다 한번씩 호출이 되며 해당값이 true 인것들을 모아서 반환 자세한 내용은 https://tcss.tistory.com/entry/18-Array-APIs?category=865698 참고 const fruits = ['apple', 'banana', 'orange']; let result = fruits.join(); console.log(result); //결과값: apple,bana..

Array APIs 출처: https://www.youtube.com/watch?v=3CUjtKJ7PJg&t=1142s [드림코딩 by 엘리] Q1. make a string out of an array 배열을 String으로 변환 키워드: join(separator) 메서드는 배열의 모든 요소를 연결해 하나의 문자열로 반환 separator:배열의 각 요소를 구분할 문자열을 지정. 생략하면 배열의 요소들이 쉼표로 구분 const fruits = ['apple', 'banana', 'orange']; let result = fruits.join(); console.log(result); //결과값: apple,banana,orange result = fruits..

2단계 todolist 에 저장한 값을 로컬스토리지에 저장하고 출력 출처: https://youtu.be/JEbOaI_0phc [노마드 코더 Nomad Coders] 사용자의 할일을 입력폼에 등록시 로컬스토리지에 저장 저장한 할일을 출력 키워드1. JSON.stringify, JSON.parse Object형태를 String형태로 상호 변환시킴 자세한 내용은 https://tcss.tistory.com/entry/16-JSON?category=865698 참고 키워드2. forEach 배열반복 Looping over an array 배열 반복 자세한 내용은 https://tcss.tistory.com/entry/Array-%EC%8B%AC%ED%99%94%ED%95%99%EC%8A%B5?category=..

JSON [Javascript Object Notation] 출처: https://www.youtube.com/watch?v=FN_D4Ihs3LE [드림코딩 by 엘리] 1. JSON.stringify(obj) Object => JSON serialize 으로 변환 key,value 형태의 Object 가 String(문자형)으로 변환 기본구문 let json = JSON.stringify(['apple', 'banana']); console.log(json); // 결과값 ["apple","banana"] console.log(typeof json); //결과값: string const rabbit ={ name : 'tori', color: 'whit..

Array 심화학습 출처: https://www.youtube.com/watch?v=yOdAVDuHUKQ [드림코딩 by 엘리] 1. Declaration [선언] const arr1 = new Array(); const arr2 = []; 2. Index position [index 접근] const fruits = ['apple', 'banana']; console.log(fruits); //결과값 [ 'apple', 'banana' ] console.log(fruits.length); //배열의 개수 반환 결과값 2 console.log(fruits[0]); //결과값 apple console.log(fruits[1]); //결과값 banan..