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을 반환하기 때문에 유효성 검사시 아래처럼 사용해야한다...

2중 border를 사용하는데 각도가 맞지 않아서 이리저리 찾아보다가 발견하게 된 CSS 입니다.  overflow-clip-margin overflow-clip-margin = overflow 속성 값이 clip인 경우에만 동작하며, 바깥쪽 범위를 지정합니다.  👀 눈으로 알아보기 기본 HTML 이 내용은 컨테이너를 넘어서지만, 클리핑 마진 덕분에 여유 공간이 있습니다.  .container { width: 300px; height: 200px; border: 2px solid #000;}.content { width: 350px; height: 250px; background-color: lightblue;} 를 적용하지 않았다면, .content의 너비인 350px로 넘어가버립니다.   ove..

사이즈 용량 줄이기가 아니라 svg 크기 줄이기 방법입니다. 기존 svg 코드 preserveAspectRatio="none" 을 넣고 width와 height를 수정하면 됩니다. svg 관련 추천 사이트 코드 입력시 svg 를 볼 수 있습니다. https://www.svgviewer.dev/

객체 불변성이란? 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, 즉 프로퍼티와 메서드를 제공..