본문 바로가기

전체 글97

자바스크립트 객체 표기법과 JSON 문법의 차이 1. JSON에는 프로퍼티의 이름과 값을 표현하는 방식에 제한이 있습니다. (1) JSON에서는 각 프로퍼티의 이름을 반드시 큰따옴표(")로 감싸줘야 합니다. 잠깐 자바스크립트 코드로 member라는 객체를 생성해볼까요? const member = { name: 'Michael Kim', height: 180, weight: 70, hobbies: ['Basketball', 'Listening to music'] }; 자바스크립트에는 객체를 생성할 수 있는 여러 가지 방법이 있는데요. 그중 한 가지는 이런 식으로 중괄호('{ }') 안에 객체의 프로퍼티의 이름(키)과 값(밸류)쌍을 순서대로 나열해서 생성하는 방법입니다. 지금 보이는 표기를 Object Literal이라고 하는데요. Object Liter.. 2023. 11. 14.
자바스크립트의 데이터 타입 관련 정리 자바스크립트의 데이터 타입 자바스크립트에는 8가지 데이터 타입이 있습니다. number string boolean undefined null object symbol bigint 자바스크립트의 유연한 데이터 타입 자바스크립트는 데이터 타입이 유연한 프로그래밍 언어입니다. 맥락에 유연하게 변하는 데이터 타입의 특징은 처음엔 생소하고 혼란스러울 수 있지만, 잘 이해하고 활용한다면 좀 더 간결한 코드를 작성하고 빠르게 개발할 수 있는 장점이 될 수 있습니다! Truthy 값과 Falsy 값 if, for, while 등 불린 타입의 값이 요구되는 맥락에서는 조건식이나 불린 타입의 값 뿐만아니라 다른 타입의 값도 불린 값처럼 평가될 수 있는데요. 이 때, false 처럼 평가되는 값을 falsy 값, true .. 2023. 11. 8.
자바스크립트에서 사용하는 다양한 이벤트 리스트 정리 마우스 이벤트 mousedown 마우스 버튼을 누르는 순간 mouseup 마우스 버튼을 눌렀다 떼는 순간 click 왼쪽 버튼을 클릭한 순간 dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간 contextmenu 오른쪽 버튼을 클릭한 순간 mousemove 마우스를 움직이는 순간 mouseover 마우스 포인터가 요소 위로 올라온 순간 mouseout 마우스 포인터가 요소에서 벗어나는 순간 mouseenter 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) mouseleave 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) 키보드 이벤트 keydown 키보드의 버튼을 누르는 순간 keypress 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에.. 2023. 11. 7.
DOM 트리 중 요소 노드를 이동시킬 때 사용하는 프로퍼티 정리 요소 노드에 대한 이동 프로퍼티 프로퍼티유형결과 element.children 자식 요소 노드 element의 자식 요소 모음(HTMLCollection) element.firstElementChild 자식 요소 노드 element의 첫 번째 자식 요소 하나 element.lastElementChild 자식 요소 노드 element의 마지막 자식 요소 하나 element.parentElement 부모 요소 노드 element의 부모 요소 하나 element.previousElementSibling 형제 요소 노드 element의 이전(previous) 혹은 좌측(left)에 있는 요소 하나 element.nextElementSibling 형제 요소 노드 element의 다음(next) 혹은 우측(righ.. 2023. 11. 7.
자바스크립트로 태그 선택하는 방법 1. 자바스크립트로 태그 선택하기 메소드 의미 결과 document.getElementById('id') HTML id속성으로 태그 선택하기 id에 해당하는 태그 하나 document.getElementsByClassName('class') HTML class속성으로 태그 선택하기 class에 해당하는 태그 모음(HTMLCollection) document.getElementsByTagName('tag') HTML 태그 이름으로 태그 선택하기 tag에 해당하는 태그 모음(HTMLCollection) document.querySelector('css') css 선택자로 태그 선택하기 css 선택자에 해당하는 태그 중 가장 첫번째 태그 하나 document.querySelectorAll('css') css .. 2023. 11. 6.
Git의 PR merge에 대해 알아보자 Merge Pull Request 녹색 버튼 이 버튼을 누르게 되면 선택된 두 브랜치를 머지하게 되는데요. 위의 스크린샷에서 확인할 수 있는 것처럼 GitHub 에서는 이렇게 두 개의 브랜치를 머지하는 총 3가지의 방법이 있습니다. merge commit을 만들며 합치기 Squash and merge 하기 Rebase and merge 하기 각 방법들은 여러가지 장단점을 가지고 있습니다. 이제부터 각 병합 방법들이 어떤 방식으로 병합되고, 그 장단점은 무엇인지 알아보도록 하겠습니다. Merge Commit을 만들며 합치기 'Merge commit' 방식은 두 브랜치의 변경 사항을 모두 유지하면서 병합합니다. 이 방식을 사용하면, 각 브랜치의 변경 사항이 과거의 커밋으로 보존되고, 새로운 커밋이 추가되어 .. 2023. 10. 27.

티스토리툴바