놀러와요 버그의 숲

본글은 자바스크립트 딥다이브 39장 DOM 파트를 요약한 내용입니다 (p.677~ p.709) 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM (Document Object Model) : HTML 문서의 계층적 구조와 정보를 표현하여 이를 제어할 수 있는 API, 즉 프로퍼티와 메서드를 제공하는 트리 자료 구조다. 39.1 노드 HTML 요소는 HTML 문서를 구성하는 개별적인 요소를 의미한다. HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 반환된다. 이때 HTML 요소의 속성은 속성 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다. HTML 요소의 콘텐츠 영역(시작태그와 종료 태그 사이) 에는 텍스트 ..

자바스크립트 딥다이브 25장 (p.417~p.435) 25.1 클래스는 프로토타입의 문접적 설탕인가? 자바스크립트는 프로토타입 기반 객체지향 언어이다. 프로토타입 기반 객체지향 언어는 클래스가 필요없는 객체지향 프로그래밍 언어다. ES5에서는 클래스 없이도 다음과 같이 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현 할 수 있다. // ES5 생성자 함수 var Person = (function () { // 생성자 함수 function Person(name) { this.name = name; } // 프로토타입 메서드 Person.prototype.sayHi = function () { console.log('Hi! My name is ' + this.name); }; // 생성자 함수 ..

자바스크립트 딥다이브 17장 (p.234~ p.248 ) 객체 리터럴에 의한 객체 생성 방식은 가장 일반적이고 간단한 객체 생성 방식이다. 이번 장에서는 다양한 객체 생성 방식중에서 생성자 함수를 이용해 객체를 생성하는 방식을 살펴보자. 17.1 object 생성자 함수 (p.234~235) 만드는 방법 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성하여 반환한다. 빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('Hi! My name is ..

12.5 함수의 호출 (p.168~174) 12.5.1 매개변수와 인수 #함수를 호출하는 법 함수는 함수를 가리키는 식별자와 한쌍의 소괄호인 함수 호출 연산자로 호출한다. 함수 호출 연산자 내에는 0개 이상의 인수를 쉼표로 구분해서 나열한다. 매개변수에 인수가 순서대로 할당되고, 함수 몸체의 문들이 실행되기 시작한다. // 함수 선언문 function add(x, y) { return x + y; } // 함수 호출 // 인수 1과 2는 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다. var result = add(1, 2); -함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. 함수를 호출할 때 매개변수의 개수만큼 인수를 전달하는 것이 일반적이지만, 그렇지 않은 경우..

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할때 사용한다. #종류 1.조건문 -if else문 -switch 문 2.반복문 -for문 -while문 3.break문 4.continue문 cf) 블록문 :0개 이상의 문을 중괄호로 묶은 것. 코드블록 또는 블록이라고 부르기도 한다. 자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할수도 있으나, 일반적으로 제어문이나 함수를 정의할 떄 사용하는 것이 일반적이다. {var foo = 10;} 1.조건문 1)if/else 문 if문과 else문은 2번이상 사용할 수 없지만, else if문은 여러 번 사용할 수 있다. 만약 코드 블록 내의 문이 하나 뿐이라면 중괄호를 생략할 수 있다. var num =2; ..

쓰던 내용이 다 날라갔다. 임시 저장 해놨는데도 날라갔다. 그래서 오늘은 가장 자바스크립트 딥다이브 07장 연산자를 읽으면서 가장 실무에 필요할 거 같은 것만 포스팅 해보려고 한다. 연산자는 하나 이상의 표현식을 대상으로 산술,할당, 비교, 논리, 타입,지수,연산 등을 수행해 하나의 값을 만든다. 연산자는 결국 하나의 값을 만든다는 표현이 인상적이었다. 연산자는 결국 어떤 표현을 통해 하나의 값을 만드는 역할까지 수행하는 애였구나! 종류: 1) 5*4 / ++ -> 산술연산자 2) "My name is" + "Lee" => 문자열 연결 연산자 3) color = "red" -> 할당 연산자 4) 3>5 -> 비교 연산자 5) && || -> 논리 연산자 6) typeof "hi" -> 타입 연산자 제일 ..

수업을 듣다가 문득 의문이 들었다. 변수는 굳이 왜 쓰는거지? 없으면 안되나? 주머니라는 개념을 통해서 대충 값을 저장한다는 정도는 알고 있었지만, 왜 쓰는지에 대한 정확한 이유를 알진 못한다. (변수를 사용하는 방법에 대해서만 알고 있지) 나는 기술이란 "어떠한 문제를 해결해 주는 툴 🔨" 이라고 생각한다. 그래서 어떤 기술과 관련된 지식을 이해할 때는 문제점을 실제로 겪어보고 이를 해결해보는 과정이 가장 효과적인 공부 방법이라고 생각한다. (이러한 문제를 겪지 않고, 바로 해결책을 쓰는 법을 배운다면, 속 빈 강정 같은 지식이라고 표현하고 싶다.) 간단히, 구글링을 해보고, 관련된 예시를 만들어보았다. 만약 여자친구와 기념일이 1000일이였다고 가정해보자. 그리고 기념일 계산을 위해 위의 예시처럼 여..

자바스크립트의 가장 중요한 역할 중 하나는 HTML 문서를 조작하는 것이다. 그래 그건 알겠어. 그런데 정확히 어떻게 조작해? 이것에 대해서 의문점을 가져본적이 없다. 그냥 태그 써서 요소를 불러왔지. (이 글은 계속 업데이트 될 예정이니 내용이 빈약하더라도..걱정 말아라) MDN 문서를 살펴보니, 어떻게 조작하는지를 알려면 DOM의 개념을 이해해야 한다고 한다. 한번 살펴보자. Introduction to the DOM The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. -> DOM 일단 그자체에서 유추해보..

현재 시간 새벽 6시 11분. known to unknown 프로젝트의 서막을 알린다. 멋쟁이 사자처럼 프론트엔드 스쿨 멘토 Gary님과 개발자 조은님의 추천으로 시작하게 되었다. 🙇‍♀️ known to unknown 프로젝트는 아는 것에서부터 시작해서 당연하게 생각한 지식에 한 번더 의문을 품는 것을 목적으로 한다. 즉, 당연한 것을 당연하게 여기지 않는 비판적인 자세로, 더 딥하게 컴퓨터 언어를 이해하고자 한다. 그 시작은 자바스크립트로 하려고 한다 (나는 자바스크립트 전문가가 되고 싶다. 자바스크립트와 사랑에 빠지고 싶다) 이 글을 보는 사람들이여. 부디 내가 잘못 이해한 개념이 있거나, 피드백이 있다면 환영이다. 나는 마음을 따뜻하게 해주는 위로보다, 진심 어린 팩트 폭력을 선호한다. (댓글로 ..

오늘 개발일지는 좀 남다르게 배운 내용 위주보다는 감정을 써보려고한다 (어처피 필기 내용은 다 공책에 있으니까. 약간 이렇게 배운 내용을 굳이 다시 개발일지에 옮겨적는게 살짝 현타오기도 하구 ㅎㅎ 겸사겸사 근데 귀찮은건 아니다. 사실 쪼금 귀찮다. ) 음...오늘은 좀 코딩하면서 제일 우울했다. 왜냐하면 코딩 챌린지하면서 내가 너무 무기력하고 응용력이 없다고 느꼈기 때문이다. 여기저기 구글링 해도 답이 잘 안나와서 막 slack에다가 질문도 했다. (다행히 사람들이 좋으셔서 내 질문에 폭발적인 답변을 해주었다) 한편으로는 답변이 감사하기도 했지만, 저 사람들은 어떻게 저렇게 잘알지? 라는 부러움과 질투심도 들었다. (지금 돌이켜 보면 내가 마음이 너무 급했다) 내가 이렇게 조급한 마음이 드는 이유는 내가..