Today Hailie Learned

토이 프로젝트에서 더미 데이트를 작성했습니다. 더미데이터는 배열 안의 객체의 나열로 만들었습니다. 지금은 id의 숫자를 기준으로 오름차순으로 화면에 나타나는데, 저는 내림차순으로 화면에 나오게 하고 싶었습니다. 실습 const arr = [{p:1},{p:2},{p:3},{p:4},{p:5}] arr.sort((f,s) => { const idF = f.p; const idS = s.p; if(idF > idS) { return -1; } if(idF < idS) { return 1; } return 0; } ) 결과 [ { p: 5 }, { p: 4 }, { p: 3 }, { p: 2 }, { p: 1 } ] 실제 코드 function Data({ data, setData }) { // dummydat..

배열.find()는 반복문이지만, 원하는 것을 찾으면 (return이 true) 찾아준다. (첫번째만!!) let cities = ['seoul', 'busan', 'incheon', 'ulsan', 'jeju']; let city = 'jeju'; let chars = 4; let chars3 = 7; let match = cities.find(item => { if(city === item) return true; }); console.log(match); // 결과값 // 'jeju' let match2 = cities.find(item => { if(item.length === chars) return true }) console.log(match2) // 결과값 // 'jeju' let matc..

let user = {name: 'Mike', age: 30}; let {name, age} = user; console.log(name); // 'Mike' console.log(age); // 30 위 식에서 let {name, age} = user; 는 let name = user.name; let age = user.age; 와 같다. ⭐️순서를 바꾸어도 동일하게 작동한다. (배열 구조분해와 다른점)⭐️ let user = {name: 'Mike', age: 30}; let {age, name} = user; console.log(name); // 'Mike' console.log(age); // 30 ⭐️프로퍼티의 키 값을 무조건 동일하게 사용할 필요없다. ⭐️ ⭐️⭐️변수 이름을 바꿀 수 있다..

JSON이란? JSON은 JavaScript Object Notation의 줄임말로, 서로 다른 프로그램 사이에서 데이터 교환을 위해 만들어진 객체 형태의 포맷이다. 이 형식은 사람이 읽고 쓰기에 용이하며, 기계가 분석하고 생성함에도 용이하다. 네트워크를 통해, 어떤 객체 내용을 다른 프로그램에게 전송한다고 가정할 때, 메시지를 보내는 발신자와 메시지를 받는 수신자가 같은 프로그램을 사용하거나, 문자열처럼 범용적으로 읽을 수 있는 형태여야 한다. 객체는 타입 변환을 이용해 String으로 변환할 경우 객체 내용을 포함하지 않는다. JavaScript에서 객체를 문자열로 변환하기위해 메서드(message.toString())나 형변환(String(message))을 시도하면, [object Object] ..

1. reduce 사용하기 // For large data, it's better to use reduce. Supose arr has a large data in this case: const arr = [1, 5, 3, 5, 2]; const max = arr.reduce((a, b) => { return Math.max(a, b) }); // console.log(max); // 5 2. Math.max.apply 사용하기 // For arrays with relatively few elements you can use apply: const arr = [1, 5, 3, 5, 2]; const max = Math.max.apply(null, arr); //console.log(max); //5 3...

🤔nvm이란? nvm(Node Version Manager)= Node.js 를 설치하는 툴이자, Node.js의 다양한 버전을 관리하는 프로그램 (Node.js의 다양한 버전을 쉽게 설치할 수 있다. ) nvm을 왜 쓰지? OS에 특정 버젼의 Node.js 를 설치하면, 여러 버전의 Node.js 를 설치해야 할 경우에 대응을 할 수가 없게 된다. 그렇기 때문에 먼저 nvm 을 설치하고, 설치한 nvm 을 통하여 원하는 특정 버젼의 Node.js 를 원하는 조건에 따라 복수로 설치하는 방법이 나중을 위해서는 더 좋은 방법이 된다. ⭕️ nvm 설치 후 ➝ Node.js 설치 후➝ npm 설치! 🤔npm이란? npm(Node Package Manager) = Node.js 로 개발된 프로그램을(npm 패..

Node는 무엇일까? JavaScript의 런타임이다. 우리는 JavaScript을 따로 설치하지 않는다. 대신 일정한 사양을 갖추어야 한다. ECMAScript 사양을 갖추면 브라우저가 JavaScript를 실행한다! 오랫동안 브라우저는 JavaScript를 작성하고 실행할 수 있는 유일한 장소였다. 그래서 JavaScript는 웹 애플리케이션에 적합하다. Node는 브라우저 밖에서 작동되는 JavaScript의 실행 환경이다. 이제 JavaScript 코드를 브라우저를 열지 않고, 심지어 브라우저가 없어도 실행할 수 있다. (그렇다고 똑같은 일을 할 수 있는 건 아니다. ) (-> 브라우저가 없으면 문서 객체 모델을 쓸 수 없고, 사용자의 입력, 이벤트 등을 사용할 수 없다. ) 그래도 Node는 정..

Async function는 비동기 코드를 아주 깔끔하게 작성하도록 돕는 함수이다. (Promise함수보다 더 깔끔!) Promise 위에 적용되기 때문에 Promise에 뿌리는 설탕이라고도 한다. 참고 **IE에서는 지원하지 않는다. ** async & await async 자체가 함수를 비동기 함수로 선언하는 키워드이다. 함수 앞에 async를 입력해서 함수를 비동기 함수로 선언하면, 함수는 자동으로 Promise를 반환한다. ➥ 빈 함수를 호출하면 undefined가 출력된다. ➥ 비어있는 async 함수를 호출하면 Promise가 출력된다. ➥ 비어있는 async 화살표 함수를 호출하면 Promise가 출력된다. ➥ async 화살표 함수를 호출하면 Promise가 리턴된다. Promise의 원리..

👇 우리가 콜백을 해야하는 이유 반복해야할때마다 같은 식을 여러번 써야한다. setTimeout(() => { document.body.style.backgroundColor = 'red'; }, 1000) setTimeout(() => { document.body.style.backgroundColor = 'orange'; }, 2000) setTimeout(() => { document.body.style.backgroundColor = 'yellow'; }, 3000) setTimeout(() => { document.body.style.backgroundColor = 'green'; }, 4000) setTimeout(() => { document.body.style.backgroundColor ..

Math.random() ⇒ 0 ~ 1 사이의 숫자를 랜덤으로 출력한다. (1미만) (소수점이하도 모두 출력) Math.random() * 10 ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (소수점이하도 모두 출력) Math.floor(Math.random() * 10) ⇒ 0 ~ 10 사이의 숫자를 랜덤으로 출력한다. (10미만) (정수만) Math.floor(Math.random() * 10) + 1 ⇒ 1 ~ 11 사이의 숫자를 랜덤으로 출력한다. (11미만) (정수만) **더 알아보기** Math.floor() 함수는 입력받은 숫자를 내림한 정수를 리턴하는 함수입니다. Math.ceil() 함수는 입력받은 숫자를 올림한 정수를 리턴하는 함수입니다. Math.round() 함수는 ..