김성원의 코딩 일기

동작 방식 변수는 데이터를 할당 및 재할당할 때 사용한다. 변수에 값을 할당하면 메모리 셀 어딘가에 할당한 data가 저장되고 data가 어디 있는지 알려주는 메모리 주소가 주어진다. 선언한 변수 명은 주어진 메모리 주소를 가리킨다. null, nudefined vlaue - 할당된 값이 있음 null - 할당된 값이 없음 nudefined - 할당된 값이 있는지 없는지 모름

컴퓨터 주요 장치들 (많지만 3개를 뽑자면) 하드디스크 - 저장공간 CPU - 연산 메모리 - 임시 저장 문서파일 실행 시 클릭 시 cpu가 연산 후 하드디스크에서 데이터를 메모리로 넘김 연산 처리할 수 있는 애플리케이션 실행 수정하는 내용을 메모리에 주기적으로 수정 저장하면 메모리의 내용을 하드디스크로 넘김 메모리 메모리는 메모리셀 저장자치들을 연속으로 구성한 것 한 메모리셀 당 1byte(8bit) 애플리케이션을 실행하면 필요한 data 공간만큼 메모리셀을 차지 애플리케이션이 메모리에 올리면 code, data, stack, heap으로 구성 됨 code - 개발자가 작성한 코드 보관 data - 데이터 보관 stack - 실행 순서를 보관 heap - 여러 가지의 테이터를 묶음 객체 보관

자바스크립트가 동작하기 위해선 브라우저 안에 있는 엔진이 필요하며 동작은 인터프리터 방식이다. 인터프리터 런타임 시 코드를 한 줄씩 번역하면서 실행하는 방식 동적임 한 줄씩 번역하기 때문에 사용 시 느리다고 느낄 수 있음 (하지만 요즘 브라우저 엔진이 빨라 괜춘!) 다른 언어들은 동작은 컴파일러 방식이다. 컴파일러 코드를 컴파일링해 실행파일로 변환 후 실행하는 방식 정적임 첫 로딩은 시간이 걸리지만 코드가 전부 실행되므로 이후 빠르다고 느낌 ECMAScript js를 실행시키는 브라우저 엔진은 다양한 종류가 있다. 그래서 공통된 문법의 규격사항과 표준사항을 정한 것이 ECMAScript이다. 엔진종류 참고 JS(자바스크립트)란? JS(자바스크립트) - 웹페이지에 생동감을 주기 위해 만들어진 프로그래밍 언..

지금부터 사용함에 있어 무리는 없을 정도로 간단하게 정의를 해보았다. 추구 이론을 공부하고 다시 올릴 계획이다!! 이러는 이유는 리액트로 개인 프로젝트를 진행 중에 있는데 꼭 알아야 하는 내용이기 때문이다. 상세하게 알면 좋지만 추후로 미루겠다~~ 콜백 비동기로 요청하여 값을 받는 것! 예) function plus(num1, num2) { return num1 + num2 } function minus(num1, num2) { return num1 - num2 } // plus함수만 실행됨을 알 수 있다. console.log(plus(1, 2)) api를 비동기 호출할 때도 사용을 한다. promise(프라미스) 제작 코드 - 원격에서 스크립트를 불러오는 것 같은 시간이 걸리는 일 소비 코드 - 제작..

matches elem.matches(css)이 메서드는 요소 elem이 주어진 css 선택지와 일치하는지 여부를 판단 하여 true 또는 false를 반환한다. 요소가 담겨있는 배열 등을 순회해 원하는 요소만 걸러내고자 할 때 유용하다. 예시 ... ... closest 부모 요소, 부모 요소의 부모 요소 등 DOM 트리에서 특정 요소의 상위에 있는 요소들은 조상 요소라고 한다. 메소드 elem.closest(css)는 elem 자기 자신을 포함하여 css 선택자와 일치하는 가장 가까운 조상 요소를 해당 요소부터 시작해 DOM 트리를 한 단계씩 거슬러 올라가면서 원하는 요소를 찾는다. 요소를 찾으면, 검색을 멈추고 반환한다. 목차 1장 2장 getElementsBy 태그나 클래스 등을 이용해 원하는 노..

getElementById - 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(Id)를 이용해 id 값을 들고 있는 테그에 접근할 수 있다. 제목 id 속성값을 그대로 딴 전역 변수를 이용해 접근할 수도 있다. 제목 그런데 이렇게 요소 id를 따서 자동으로 선언된 전역변수는 동일한 이름을 가진 변수가 선언되면 무용지물이 된다. 제목 위와 같은 이유로 id를 전역변수로 사용해서 하는 것은 많이 위험하다. 그래서 document.getElementById('Id')를 사용할 것!! querySelecterAll document.querySelectorAll(css) 메소드는 자식 요소 중 css 선택자에 대응하는 요소를 모두 반환한다. 그렇기 때문에 황용도 높다!..

형제와 부모 노드 - 같은 부모를 가진 노드는 현제 노드라고 한다. 대표적으로 와 가 있다. nextSibling - 다음 형제 노드 정보를 알 수 있다. previousSibling - 이전 형제 노드 정보를 찾는다. parentNode - 부모 노드 정보를 알 수 있다. 요소 간 이동 - childNodes를 이용하면 텍스트 노드, 요소 노드, 심지어 주석 노드까지 참조할 수 있다. 하지만 실무에서 텍스트 노드나 주석 노드는 잘 다루지 않는다. 웹 페이지를 구성하는 태그의 문신인 요소 노드를 조작하는 작업이 대다수다. - 챕터 앞쪽에서 다뤘던 관계와 유사해 보인다. Element라는 단어가 추가된 점이 다르다. children - 프로퍼티는 해당 요소의 자식 노드 중 요소 노드만을 가리킴. first..

DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있다. 하지만 무엇가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 한다. DOM에 수행하는 모든 연산은 document 객체로 시작하면 된다. documentElement와 body, head = document.documentElement document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 태그에 해당하는 document.documentElement입니다. = document.body document.body는 요소에 해당하는 DOM 노드로, 자주 쓰이는 노드 중 하나입니다. = document.head 태그는 document.head로 접근할 수 있습니다. ※ DOM의 null은 '존재하지 않음' ..

DOM 구조 직접 보기 Live DOM Viewer에 들어가면 실시간으로 DOM 구조를 볼 수 있고 웹에서는 대방자 도구를 이용해면 DOM을 탐색할 수 있다. 개발자 도구에서 Elements 패널로 이동하면 DOM을 볼 수 있으며 임의로 바꿔 볼 수 도 있다. 내가 원하는 부분을 보고 싶으면 를 누르면 원하는 웹에서 원하는 위치를 누르면 DOM을 보여준다. Elements 패널 우측엔 여러 하위 패널들이 있다. Styles – 내장 규칙(회색 배경)을 포함하여 현재 선택한 요소에 적용된 CSS 규칙을 일률적으로 봐준다. 하단부 박스에 있는 크기(dimension), 마진(margin), 패딩(padding)을 비롯한 스타일 대부분을 Styles 패널에서 바로 수정해 볼 수 있다. Computed – 현재..

- DOM 따르면 모든 html 태그는 객체이다. 태그 하나가 감싸고 있는 자식 태그는 중첩 태그라고 부르고 내그 내의 문자 역시 객체이다. 이런 모듬 객체는 JS로 접근, 조작할 수 있다. 조작은 document를 이용하면 된다. 예) (퍼옴) document.body.style.background = 'red'; // 배경을 붉은색으로 변경하기 setTimeout(() => document.body.style.background = '', 3000); // 원상태로 복구하기 이 외에도 다양한 프로처티가 존재한다. inerHTML - 해당 노드의 HTML 콘텐츠 offsetWidth - 해당 노드의 너비 등등 DOM 예제 트리에 있는 노드는 모두 객체이다. 태그는 요소 노드(element node) (..