Today Hailie Learned

input 태그의 type='number' 의 특성을 잘 활용하는 방법=> valueAsNumber 를 사용한다.  기존 코드const inputAmount = Number.parseInt(elements.moneyInput.value); if (!inputAmount || inputAmount  valueAsNumber 사용 코드const inputAmount = elements.moneyInput.valueAsNumber; if (Number.isNaN(inputAmount) || inputAmount   장점- input 값을 숫자로 직접 가져와서 불필요한 형변환 과정이 없어진다.  주의- valueAsNumber은 숫자가 아닌 경우 NaN을 반환하기 때문에 유효성 검사시 아래처럼 사용해야한다...

객체 불변성이란? immutability = 변화가능하지 않음 👉 데이터의 원본이 훼손되는 것을 막는다. => 불변 (immutability), 필요할때만 새로 만든다. String Number Boolean Null Undefined Symbol => 가변 (mutability), 생성할 때마다 새로 만든다. Object Array Function let p1 = 1; let p2 = 1; console.log(p1, p2, p1 === p2); // 1,1,true // 원시데이터 타입은 값이 같으면 같은 곳을 가리켜서 true다. let o1 = {name:'hailie'} let o2 = {name:'hailie'} console.log(o1, o2, o1 === o2); // {name:'hai..

✔️ 이번 정독을 통해 알게 된 것 Promise가 무엇인가요? Promise.all은 언제 사용하나요? 🤔 Promise가 무엇인가요? 🤓 자바스크립트는 비동기 처리를 위한 패턴으로 콜백 함수를 사용하는데, 콜백 함수는 콜백 헬로 가독성이 나쁘고 비동기 처리 중 발생한 에러의 처리가 곤란하다는 한계가 있습니다. 이를 보완하기 위해 ES6에서 프로미스가 도입되어 콜백 함수의 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있습니다. 🤔 Promise.all은 언제 사용하나요? 🤓 앞선 비동기 처리 결과를 다음 비동기 처리가 사용하지 않는다면, 비동기 처리를 순차적으로 처리할 필요가 없기 때문에, 이때 Promise.all 메서드를 사용해서 비동기 처리를 병렬로 처리할 수 있습니다. ..

✔️ 이번 정독을 통해 알게 된 것 화살표 함수 REST 파라미터 매개변수 기본값 ✔️ 화살표 함수 함수 표현식으로 정의해야 합니다. 함수 몸체가 하나의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있습니다. // concise body const power = x => x ** 2; // 위 표현은 다음과 동일하다. // block body const power = x => { return x ** 2; }; power(2); // -> 4 단, 함수 몸체가 하나의 몸으로 구성된다 해도 함수 몸체의 문이 표현식이 아닌 문이라면 중괄호를 생략할 수 없다. const arrow = () => const x = 1; // SyntaxError: Unexpected token 'const' ..

✔️ 이번 정독을 통해 알게 된 것 Ajax란 무엇인가요? 🤔 Ajax란 무엇인가요? 🤓 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말합니다. ✔️ Ajax 자바스크립트를 사용해서 브라우저가 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식을 말한다. Ajax는 브라우저에서 제공하는 Web API인 XMLHttpRequest 객체를 기반으로 동작한다. XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다. (자바스크립트를 사용해서 HTTP 요청을 전송하려면 XMLHttpRequest 객체를..

✔️ 이번 정독을 통해 알게 된 것 동기와 비동기에 대해서 설명해주세요. 테스크 큐가 무엇인가요? 이벤트 루프가 무엇인가요? 🤔 동기와 비동기에 대해서 설명해주세요. 🤓 동기 = 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 테스크가 종료할 때까지 이후 테스크들이 블로킹되는 단점이 있습니다. 비동기 = 현재 실행 중인 테스크가 종료되지 않은 상태라 해도 다음 테스크를 곧바로 실행하는 방식이라 블로킹이 발생하지 않습니다. 하지만 테스크의 실행 순서가 보장되지 않는다는 단점이 있습니다. 🤔 테스크 큐가 무엇인가요? 🤓 setTimeout, setInterval와 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역입니다. 🤔 이벤트 루프가 무엇인가요?..

✔️ 이번 정독을 통해 알게 된 것 REST API가 무엇인가요? 🤔 REST API가 무엇인가요? 🤓 REST를 기반으로 서비스 API를 구현한 것을 의미하는데, 여기서 REST는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐를 의미합니다. ✔️ REST의 의미 (REpresentational State Transfer) REST = HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐이다. RESTfull = REST의 기본 원칙을 성실히 지킨 서비스 디자인을 'RESTfull'이라고 표현한다. REST API = REST를 기반으로 서비스 API를 구현한 것을 의미한다. ✔️ REST API의 구성 자원 resource, 행위 verb, ..

✔️ 이번 정독을 통해 알게 된 것 DOM이란 무엇인가요? innerHTML의 단점은 무엇인가요? 🤔 DOM이란 무엇인가요? 🤓 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료구조이다. 🤔 innerHTML의 단점은 무엇인가요? 🤓 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하는 것은 XSS(크로스 사이트 스크립팅 공격)에 취약합니다. 또한 요소 노드의 기존 자식 노드를 제거하고 할당한 HTML 마크업 문자열을 파싱하여 DOM을 변경하게 됩니다. ✔️ DOM이란? Document Object Model은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공..

✔️ 이번 정독을 통해 알게 된 것 파싱이 무엇인가요? 렌더링이 무엇인가요? 브라우저의 렌더링 과정? script 태그를 body 태그 최하단에 추가하는 이유 🤔 파싱이 무엇인가요? 🤓 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성하는 과정을 말합니다. 🤔 렌더링이 무엇인가요? 🤓 HTML, CSS, JS로 작성된 문서를 파싱해서 브라우저에 시각적으로 출력하는 것을 말합니다. 🤔 브라우저의 렌더링 과정? 🤓 브라우저는 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받습니다. 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고, 이..

✔️ 이번 정독을 통해 알게 된 것 클로저는 무엇인가요? 렉시컬 스코프가 무엇인가요? 🤔 클로저는 무엇인가요? 🤓 클로저는 함수와 그 함수가 선언된 렉시컬 환경과의 조합입니다. 🤔 렉시컬 스코프가 무엇인가요? 🤓 자바스크립트 엔진은 함수를 어디에 정의했는지에 따라 상위 스코프를 결정하는데 이를 렉시컬 스코프라고 합니다. ✔️ 클로저란 클로저는 자바스크립트 고유의 개념이 아니다. 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 특성이다. 클로저 in MDN 👉 A closure is the combination of a function and the lexical environment within which that function was declared. 클로저는 함수와 그 함수가 선언된..