Hello_coding

자바스크립트에서 객체 이외에도 기본형 7가지 타입이 있다. (string, number, boolean, null, undefined, symbol, bigint ) 기본형들은 불변이며 메서드를 가지지 않는다는 점에서 객체와 구별된다. 하지만 string을 예로 들어보면 메서드를 가진것 처럼 보인다. 🤷‍♂️ charAt은 string의 메서드가 아닌걸요? 'primitive'.charAt(3) // => "m" 여기서 등장하는 개념이 바로 객체래퍼 이다! 객체래퍼란? - 원시타입의 프로퍼티에 접근하려 할 때 생성되는 임시객체를 뜻한다. 즉 위의 예제를 다시 한번 살펴보면, string은 객체가 아니기 때문에 메서드가 없지만 new String (str)을 호출한 것처럼 문자열 리터럴을 객체로 변환시켜주..

* 미리 말하고 가자면 옵셔널 체이닝은 스펙에 추가 된 지 얼마 안된 문법으로 구식 브라우저에서는 폴리필이 필요합니다. * 사건의 개요 - 프로젝트 진행중 user정보의 length값으로 처리해주어야 할 코드가 있었다. 이때 user정보가 잘 들어왔을경우는 괜찮은데 . . . user정보가 없을때 length를 접근하려 하면 에러가 떳다. 그래서 나는 일단 아래와 같이 코드를 짯다. const userLength ; if (user) { userLength = user.length; } else { userLength = null; } //len값을 사용 . . . 그런데 여기서 구글링을 통해 옵셔널 체이닝이라는것을 발견했다! 옵셔널 체이닝 ? - ?. 를 사용하여 프로퍼티가 없는 중첩 객체를 에러 없이..

HTTP 요청 전송 기능을 제공하는 클라이언트 사이드 Web API 인 fetch Fetch ? - 비동기 네트워크 통신을 구현하기 위해 사용하는 Web API - HTTP 요청 전송 기능을 제공 - Ajax를 지원하는 비교적 최신 기술 - IE를 제외한 대부분 브라우저에서 제공 Fetch 함수의 기본 구조 const promise = fetch(resource, [options]) resource : HTTP 요청 보낼 URL (필수) options : method , headers , body (선택) default값은 GET Fetch 함수 동작 과정 - fetch 함수는 promise 객체 + 응답 헤더 + 응답몸체 반환 - promise 객체엔 HTTP 응답에 관한 정보가 있는 Response ..

콜백 지옥 탈출을 위해 Promise 가 나왔는데 async / await 는 뭐야?! Promise는 비동기 작업이 많아져도 콜백 함수처럼 코드의 깊이가 깊어지지 않는다. 하지만 다른 문제점이 있다. 1. 특정 조건에 따라 분기를 나누기 어렵다. 2. 어떤 부분에서 에러가 발생했는지 파악하기가 어렵다 3. 프로미스 체이닝도 반복되면 가독성이 떨어져 .then 지옥이 발생할 가능성이 있다. → 따라서 async/await가 등장하였다. async/await - 프로미스보다 가독성이 좋고 동기 프로그래밍을 작성하는 방식과 유사 - Promise 기반으로 동작 async선언 - async 키워드를 함수 앞에 붙여 사용한다. async function 함수이름() { return 결과 값; } - async가..

Promise를 들어가기 앞서 , 우리가 알아야할 것은 비동기 이해이다. 비동기 - 비동기 실행이란 순차적으로 수행이 완료되면 다음수행이 실행되는 것이 아니라 동작이 완료되지 않아도 다음코드가 실행되는 것을 의미 한다. - 자바스크립트 엔진은 한 번에 하나의 태스크만 실행 할 수 있는 싱글 스레드 방식으로 동작한다. - 싱글 스레드를 가지면서도 비동기로 동작할 수 있는 원리는 브라우저에 있는 Web API가 멀티 스레드로 동작하기 때문이다. 1. JS엔진의 콜 스택에 실행될 함수가 쌓인다. 2. 비동기로 실행될 경우 Web API를 호출한다. 3. Web API에선 콜 스택이 비면 콜백 큐 함수를 꺼내 콜 스택에 넣는다. 4. 이벤트루프와 콜백 큐 때문에 콜 스택이 하나여도 비동기 동작이 가능하다. 비동..

Attribute ? - HTML 요소의 동작을 제어하기 위한 추가적인 정보를 제공한다. - 글로벌 어트리뷰트 :id , class ,style ,title ,lang ,hidden 등 - HTML 문서가 파싱될때 , 어트리뷰트 하나당 하나의 노드가 생성된다. - attributes 프로퍼티는 NamedNodeMap 객체에 담겨 요소 노드의 attribute에 저장된다. ( NamedNodeMap 객체 : 유사배열객체 , 이터러블 ) attributes 프로퍼티의 불편한점 - getter만 존재하는 읽기 전용 접근자 프로퍼티이다. - 따라서 값을 취득하는것은 가능하지만 수정은 불가능하다. - 값을 취득할때도 유사배열 객체를 다뤄야하기 때문에 불편하다! ▷ 따라서 getAttribute , setAttri..

코딩을 하던중 아이템이 클릭 이벤트에 반응하도록 등록을 하고 싶어 for문을 이용하여 addEventListener을 등록해주었다. 하지만 이렇게 하나하나 등록하는것은 부적합한 코드인것 같아 알아보니 '이벤트 위임'을 알게되었다. (사실 이미 배웠던거지만 생각이 안났던 ㅜㅜ..) 실제로 DOM요소에 이벤트 핸들러를 많이 등록할 수록 성능저하의 원인이 된다. 그렇기에 DOM요소에 여러개의 이벤트 핸들러를 등록할 필요 없이 이벤트 위임을 통해 접근하는 방법을 알아보자. 이벤트 위임 - 이벤트 위임을 사용하면 각 요소마다 핸들러를 할당하지 않고 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다. - event.target을 이용해 실제 어디서 이벤트가 발생했는지 알 수 있..

DOM 조작 - DOM조작이란 새로운 노드를 생성하여 DOM에 추가하거나, 기존 노드를 삭제 또는 교체하는것을 말한다. - 성능에 영향을 주므로 최적화를 위해 주의하여 다뤄야한다. innerHTML - 요소내에 포함된 HTML마크업을 가져오거나 설정 - 렌더링된 콘텐츠를 표현 [단점] - 그대로 innerHTML 프로퍼티에 할당하는것은 XSS에 취약하므로 위험하다. - 또한 HTML마크업 문자열을 할당하는 경우 , 요소노드의 모든 자식노드를 제거하고 할당한 HTML 마크업 문자열을 파싱한다. - 새로운 요소를 삽입할때 위치를 지정할 수 없다. insertAdjacentHTML - 요소노드를 주어진 위치에 배치 const sayHi = document.querySelector('.sayHi'); sayHi..

노드탐색 - 요소노드를 얻고, DOM트리의 노드를 옮겨다니며 탐색할 경우가 있다. - 노드탐색 프로퍼티는 모두 자체적으로 값을 갖진 않고 다른 데이터 프로퍼티 값을 읽거나 저장할 때 호출되는 프로퍼티 (== 접근자 프로퍼티)이다. - 노드 탐색 프로퍼티는 setter없이 getter만 존재한다. 공백 텍스트 노드 HTML 요소 사이 스페이스, 탭 , 줄바꿈등의 공백 문자는 텍스트 노드를 생성한다. 이를 공백 텍스트 노드라 한다. * 읽기 전! 프로퍼티를 볼땐 요소노드만 반환하는지 텍스트 노드도 반환하는지 구별하며 알아두면 좋을 것 같다! 자식 노드 탐색 프로퍼티 1) Node.prototype.childNodes : 요소노드 + 텍스트 노드 포함 2) Element.prototype.children : ..

DOM이란? - HTML 문서의 계층적 구조와 정보를 표현하며, 이를 제어할 수 있는 API (프로퍼티,메소드)를 제공하는 트리자료구조이다. - 이때 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 "노드 (node)" 라고 한다. 여기서 나오는 트리자료구조에 대해 잠깐 알아보자. Tree Data Structure? - 트리자료구조는 노트들의 계층구조로 이뤄진다. - 부모,자식노드로 구성되어 노드간 계층적 구조를 표현하는 비선형 자료구조이다. - 최상위 노드는 root노드라고하고, 자식노드가 없는 노드를 leaf노드라고 한다. 노드타입? 노드타입은 총 12개지만 중요한 노트 타입 4가지를 살펴보자. 1. 문서노드 - DOM 트리의 최상위에 존재하는 루트노드 -> 노드들의 진입점역할 - document 객..