Today Hailie Learned

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 ..

SPA 등장배경 전통적인 웹사이트 => 사용자가 웹사이트 내의 다른 페이지로 이동하면, 브라우저가 페이지를 보여주기 위해 매번 HTML 파일로 된 "페이지 전체"를 불러왔다. 시간이 지나면서 웹사이트가 보다 복잡해지고 애플리케이션의 형태를 가지게 되면서, 사용자와 서비스 사이에 더욱 많은 상호작용이 일어나게 되었다. 하지만 이때마다 중복되는 요소들을 매번 불러오는 것이 서버와의 불필요한 트래픽을 발생시켰고, 매번 모든 페이지를 불러옴에 따라 더 느린 반응성을 갖게 되었다. 이에 대한 고민을 해결하기 위해 나온 것이 바로 SPA!!! 1990년대 후반에 HTML 문서 전체가 아닌, 업데이트에 필요한 데이터만 서버에서 전달받아 이 데이터를 JavaScript가 동적으로 HTML 요소를 생성해서 화면에 보여주..

컴포넌트란? 하나의 기능 구현을 위한 여러 종류의 코드 묶음이다. // UI를 구성하는 필수 요소이다. // 컴포넌트는 리액트의 심장이다. const Component = () => { return ( {정의1} {정의2} ) }; 컴포넌트를 여러개 만들고 조합해서 어플리케이션을 만들 수 있다. 모든 리액트 애플리케이션은 최소 한 개의 컴포넌트를 가지고 있고, 이 컴포넌트는 애플리케이션 내부적으로는 근원(root)이 되는 역할을 한다. 이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층적 구조(hierarchy)를 트리 구조로 형상화할 수 있다. ➥ 위 그림에서 최상위 컴포넌트인 A가 root (근원)이 되고, 다른 자식 컴포넌트를 가질 수 있다. ➥ 이러한 트리 ..

보호되어 있는 글입니다.

문제. 프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다. 전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 제한 조건 phone_number는 길이 4 이상, 20이하인 문자열입니다. 입출력 예 phone_numberreturn "01033334444" "*******4444" "027778888" "*****8888" function solution(phone_number) { // 입력받은 phone_number에서 4개만 빼고 그 숫자만큼 반복하는 반복문을 만든다. // 반복문을 돈 숫자만큼 *을 빈문자열에 추가해주자. // ..

JSX란? JavaScript XML 리액트에서 UI를 구성할 때 사용하는 문법으로 JS를 확장한 문법이다. JSX는 브라우저가 바로 실행할 수 있는 JS코드가 아니라서 브라우저가 이해할 수 있는 JS 코드로 변환시켜줘야한다. 이때, Babel을 사용한다. Babel가 JSX를 브라우저가 이해할 수 있는 JS로 컴파일한다. 컴파일을 하면 브라우저가 JS를 읽고 화면에 렌더링할 수 있게 된다. JSX를 사용하면 JS만으로 마크업 형태의 코드를 작성해서 DOM에 배치할 수 있게 된다. (CSS, JSX 문법만을 가지고 웹 어플리케이션 개발 가능!) 주의할 점! JSX은 HTML처럼 생겼지만, HTML이 아니기 때문에 “Babel”을 이용한 컴파일 과정이 필요하다. JSX를 왜 써야하지? DOM 코드보다 명시..

리액트란? 프론트엔드 개발을 위한 자바스크립트 오픈소스 라이브러리 입니다. 리액트를 왜 사용하는 걸까? 리엑트의 아래 3가지 특징 덕분에 프론트엔드 개발을 더 효과적으로 할 수 있다. 1. 선언형 2. 컴포넌트 기반 3. 범용성 (다양한 곳에서 활용 가능) 1. 선언형 리액트는 한 페이지를 보여주기 위해 HTML/CSS/JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍을 지향한다. *개발에서 선언(명시적)이라는 뜻은 코드를 자세히 분석하지 않고도 코드의 의미를 분명히 알 수 있게 작성하는 방식을 의미한다. queryselector로 HTML 내의 코드를 받아와서 JS 파일에서 개발하는 환경은 직관적이라고 볼 수 없다. 반면, 리액트는 JSX라는 HTML..

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() 함수는 ..

class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum() { return this.first + this.second; } } class PersonPlus extends Person{ avg() { return (this.first + this.second) / 2; } } const kim = new PersonPlus('kim', 10, 20); console.log('kim.sum()',kim.sum()); console.log('kim.avg()',kim.avg()); // 출력값 kim.sum() 30 kim.avg() 15 👇 위 코드에서 P..