minTech

🖐️시작 전 자바스크립트에서 변수 선언을 하는 방법에는 var, let, const 3가지가 있다. ES6 이전에는 var 하나로 변수 선언이 이루어졌지만 ES6 이후로 let과 const 로 변수 선언이 가능해졌으며, 두 개의 사용을 권장한다. 이 두 가지를 권장하는 이유는 무엇이며, 세 가지의 차이점은 무엇일까? 👉 변수 선언 방식 var의 경우 재선언이 가능하다. 아래와 같은 코드를 작성 후, 동작하면 정상적으로 "melon"이 잘 출력된다. var fruit = "apple"; var fruit = "melon"; console.log(fruit); //melon let과 const의 경우 재선언이 불가능하다. 재선언 시, 이미 선언이 이루어졌다고 오류가 발생한다. let fruit = "appl..

🖐️시작 전 데이터 타입 자바스크립트의 데이터 타입에는 기본형(Primitive Type)과 참조형(Reference Type)이 있다. 기본형(Primitive Type) String, Number, Bigint, Boolean, undefined, symbol, null 메모리 영역에서의 변경이 불가능하나, 재할당이 가능하다. let value = "original"; value = "change"; 기본형은 불변성을 가지고 있기 때문에 기존 메모리에 생성된 값이 변경된 것이 아니라 다른 메모리를 가리키기 때문에 값이 바뀌는 것처럼 보이는 것이다. 할당 연산자(=) 를 이용 변수에 값 할당 시, 실제 값이 저장된다. 따라서 복사한 값이 재할당되더라도 원본에는 전혀 영향을 받지 않는다. let valu..

🖐️시작 전에 DOM 객체에 직접적으로 공부하기 시작하면서 attribute와 property에 대해 제일 헷갈렸다. 그래서 둘의 차이를 정리해보았다. attribute attribute는 html에서 요소에 추가적인 정보를 넣을 때 사용되는 요소이다. 글 만으로는 이해가 안 갈 때는 예시를 통해 이해하는 것이 제일 좋다. 위에서 div는 요소(element)이다. 요소 내에 정의된 class를 속성(attribute)이며, class에 할당된 "myClass" 가 속성값(attribute value) 이 된다. property HTML 문서에서 DOM 객체로 만들어지면서 HTML의 attribute가 요소의 property가 된다. 즉, 다시 말해서 property는 DOM 안에서 attribute를 ..

innerHTML, outerHTML innerHTML, outerHTML은 입력 받은 문자열을 요소로 만들어 HTML을 추가/변경이 가능하였다. 하지만, 위의 방법은 기존의 내용을 삭제하고, 새롭게 할당된 값을 덮어 씌우는 방식이기 때문에 복구 해야 하는 상황이 생긴다면 기존의 내용을 다시 찾아서 넣어야 하는 문제가 발생하게 된다 기존의 갖고 있던 내용을 삭제하지 않고 보존하기 위해서는 요소 노드를 추가하는 방법을 사용한다!! ➕ 요소 노드 추가 노드 추가의 동작 과정은 다음과 같다. ☝️요소 노드 만들기 document의 createElement() 메서드를 통해 원하는 태그를 가진 노드를 만든다. let newNode = document.createElement( 태그명 ); ✌️요소 노드 꾸미기 ..

DOM 노드들은 프로퍼티들을 갖는다. 그 중 주요한 프로퍼티들 몇 가지를 정리해보았다. 👉 innerHTML 요소 안에 있는 HTML 자체를 문자열로 리턴한다. 들여쓰기와 줄 바꿈 모두 포함한다. HTML의 내용을 수정하거나, + 연산자를 이용해 요소 추가도 가능하다. [html의 body] It's content! [javascript] const tag = document.querySelector('#content'); tag.innerHTML = "changed content !!" [result] 다음 결과를 보면 content의 내용이 "It's content !" => "changed content !!" 로 바뀌었음을 확인할 수 있다. ‼️ 주의 + 연산자를 이용해 요소를 추가할 경우 기존의..

DOM DOM은 웹 페이지/문서 에 나타나는 HTML 문서 전체를 객체로 표현한 것을 의미한다. * 웹 페이지/웹문서 : 웹 브라우저에 나타나는 컨텐츠 부분 DOM 트리란? HTML 위의 HTML의 구조는 !+enter를 치면 나오는 자동으로 짜여지는 HTML의 구조이다. HTML은 다음과 같이 계층 구조를 이루며, 계층 간의 관계에는 부모태그와 자식태그가 있다. DOM 트리 DOM 의 경우 HTML과 동일하게 계층구조이다. HTML과 다른 점이 있다면, 각 객체를 노드(Node)라고 표현하며, 각 노드끼리의 관계에는 부모노드, 자식노드, 형제노드가 있다. DOM트리구조의 경우 다양한 노드 타입을 갖는다. 요소 노드 : 태그를 표현하는 노드 텍스트 노드 : 문자를 표현하는 노드 💡텍스트 노드의 경우 따로..

Javascript를 통해 웹페이지를 다루기 위해서는 원하는 요소를 정확하게 선택할 수 있어야 한다. 이러한 요소를 선택하는 방법에 대해 작성하였다. 👉 Id 명으로 요소 선택하기 let tag = document.getElementById( 아이디명 ) 필요한 아이디를 가진 태그를 명확하게 선택할 수 있다. 만약 존재하지 않는 태그를 선택할 경우 null 값을 출력한다. 👉 Class명으로 요소 선택하기 let tags = document.getElementsByClassName( 클래스명 ) 여러 개의 요소들이 배열의 형태 같이 저장된다. 배열의 형태 같지만 완벽한 배열의 형태가 아닌 유사 배열 객체(Array-Like Object) 임을 주의한다. 요소들의 순서는 깊이에 상관없이 HTML의 위부터 ..

🫸브라우저 렌더링 원리에 대해 알기 전에 ☝️ 브라우저란(browser)? 인터넷에서 웹 서버의 모든 정보를 볼 수 있도록 하고, 문서 검색을 도와주는 응용 프로그램이다. 우리는 필요한 정보를 얻기 위해서 구글이나 네이버에 접속한다. 해당 사이트에 접속하기 위해 사용하는 도구를 '브라우저'라고 한다. ✌️렌더링(Rendering)이란 서버로부터 HTML, CSS, JavaScript로 작성된 파일을 받아 브라우저에 시각적으로 출력하는 것을 말한다. 👩‍🎨브라우저 렌더링 과정의 대략적인 그림 사용자가 원하는 URL을 입력하면 아래 과정으로 렌더링을 진행한다. client가 서버에 주소를 보내면 sever에서는 해당 HTML 파일로 응답을 한다. CSS 파일과 JS파일도 마찬가지로 client에서 파일 요청..