겨리의 개발일기

DOM(Document Object Model)이란? ✅ 문서 객체 모델 ✅ HTML, XML 문서의 프로그래밍 interface ✅ 문서의 구조화된 표현을 제공하고 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다. DOM 자신에게 접근, 수정하는 방법은 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공되는데, 이를 DOM API(Application Programming Interface)라고 한다. DOM의 기능 1. HTML 문서에 대한 모델 구성 브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다.이 때 모델은 객체의 트리(DOM Tree)로 구성된다. 2. HTML 문서 내의 각 요소에 접근/수정 DOM은 모델 내의 각 객체에 접근하고 수정..

Programming/JavaScript 2023. 5. 15. 23:00

객체(Object)란? ✅ 자바스크립트에서 원시타입(Primitives)을 제외한 나머지 값들은 모두 객체이다. ✅ 자바스크립트의 객체는 key(키)-value(값) 으로 구성된 Property들의 집합이다. ✅ 함수는 일급 객체 이므로 값으로 취급할 수 있다. → Property 값으로 함수를 사용할 수 있음. 이 경우 일반 함수와 구분하기 위해 method 라고 부른다. ✅ 객체는 데이터를 의미하는 property와 데이터를 참조하고 조작할 수 잇는 동작을 뜻하는 method로 구성된 집합 ✅ 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 prototype 이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다. 1. Property(프로퍼티) ✅ 프로퍼티키(이름)와 프로퍼티 값으로 구성된..

Programming/JavaScript 2023. 5. 1. 18:31

Parameters primitiveparameters(원시파라미터) ✅ passed by value(값에 의한 전달) objectparameters(객체 파라미터) ✅ passed by reference(참조에 의한 전달) ✅ 주소를 통해 참조값에 접근 할 수 있다. passed by reference 예제 function changeName(obj){ obj.name = 'hello'; } const me = {name:'gyeol'}' changeName(me); console.log(me) // {name:'hello'} 출력 Default Parameters(ES6+) ✅ 매개변수에 값이 없거나 undefined가 전달될 경우 해당 매개변수를 기본값으로 초기화할 수있다. function show..

Programming/JavaScript 2023. 4. 25. 23:25

JavaScript를 HTML에 링크하는 방법 1. script 태그가 head에 위치한 경우 ✅ script 태그가 보이면 HTML 파싱을 멈추고 스크립트 파일을 실행한다. ✅ 단점 : 파일이 크면 느려진다. 2. script 태그가 body 내 끝 부분에 위치한 경우 ✅ 페이지가 완성된 후 스크립트 파일을 패칭한다. ✅ 장점 : HTML 컨텐츠를 빨리 노출시킬 수 있다. ✅ 단점 : JavaScript에 의존적인 페이지인 경우 사용자가 저상상적인 페이지를 보기 전까지 오래 걸릴 수 있다. 3. head 태그 안에 script 태그를 넣되 async 옵션을 사용한 경우 ✅ 브라우저가 HTML을 파싱하다가 script 파일을 병렬로 받도록 명령만 해놓고 파싱 후에 JavaScript 파일이 다운이 완료되..

Programming/JavaScript 2023. 4. 25. 00:21

Chapter 1. 타입 '타입' 이란 자바스크립트 엔진, 개발자 모두에게 어떤 값을 다른 값과 분별할 수 있는, 고유한 내부 특성의 집합을 뜻한다. 1.1 타입, 그 실체를 이해하자 자바스크립트에서 강제변환은 어떤 형태로든 일어날 수 있다. 그러므로 타입을 (내재된 특성까지) 확실하게 인지하고사용하는 것이 중요하다. 1.2 내장 타입 null undefined boolean number string object symbol(ES6~) 값의 타입은 typeof 연산자로 알 수 있다. typeof undefined === "undefined"; // true typeof true === boolean; // true typeof 42 === number; // true typeof "42" === stri..

Programming/JavaScript 2022. 8. 2. 00:53

사실 이 책을 읽기 시작한지는 꽤 됐지만, 생각보다 읽는 속도가 느린 것 같아 나름 강제성(?)을 부여하기 위해 한 주에 한 챕터씩 읽으며 정리 하고자 한다. 해당 책은 개발자 모임 만난 프론트엔드 시니어 회원분이 추천해주신 책인데 읽다가 저자의 말에 정곡을 콕콕 찔린 적이 한 두번이 아닐 정도로 예리한 책이다. 자바스크립트를 사용하지만 잘 모르는 사람들은 (혹은 내가 잘 안다고 착각하는 사람들은) 꼭 읽어봐야할 책이라고 생각한다! 또 저자가 비유도 되게 재밌게 하는데ㅋㅋ덕분에 지루하지않게 읽을 수 있어 좋았다. 실제로 나는 자기 전에 틈틈이 읽는 와중에 웃긴 구절이 있으면 개발자 지인들에게 공유해주기도 했었다 ㅋㅋㅋㅋ😏 참고로 책은 네이버를 통해 영풍문고해서 구매했는데 판매하는 곳은 다양하니 마음에 드..

Programming/JavaScript 2022. 8. 1. 18:42