Hebom's Dev

querySelector와 getElementById 중 무엇을 써야 될지 개념이 없어서 정리를 해봅니다. querySelector는 다양한 선택자를 입력할 수 있어서 선호했더니, 다른분들은 속도가 느리다고 잘 안쓰는 편이라고 합니다. querySelector 선택자(selector)와 일치하는 첫번째 엘리먼트 객체를 반환합니다. 일치하는 엘리먼트가 없으면 null을 반환합니다. 선택자는 ' '(외따옴표)나 " "(쌍따옴표)로 시작하며, 선택자의 종류에 따라 말머리가 달라집니다. (아래 예시를 참고) 구문 querySelector(selectors); 예시 document.querySelector('img'); //선택자가 html태그일때 아무것도 붙이지 않는다. document.querySelector..

JS로 CCS 스타일의 속성값을 알아낼 수 있는 짝꿍을 소개합니다! getComputedStyle와 getPropertyValue입니다. getComputedStyle은 객체형태로 반환해주고 getPropertyValue로 속성값을 가져올 수 있다고 합니다. getComputedStyle 구문 var style = window.getComputedStyle(element[, pseudoElt]); * element : 속성값을 얻으려는 요소 * pseudoElt : 의사요소(=pseudo-elements, ::after, ::before, ::marker등등... )를 지정하는 문자열. 보통 생략되거나 null이어야 함 getComutedStyle 구문 매개변수로 지정된 CSS속성의 값을 반환합니다. v..

오늘도 인터넷 강의를 듣다가 모르는 것이 등장했습니다! 제이슨은 무엇일까요? JSON (=JavaScript Object Notation) 이란? 나무 위키의 내용 발췌 일반적으로 서버에서 클라이언트로 데이터를 보낼 때 사용하는 양식을 말합니다. 클라이언트가 사용하는 언어에 관계없이 통일된 데이터를 주고 받을 수 있도록, 일정한 패턴을 지닌 문자열을 생성해 내보내면 클라이언트는 그를 해석해 데이터를 자기만의 방식으로 온전히 저장, 표시할 수 있게 됩니다. 과거 웹 초기 시절부터 사용되어 온 XML은 헤더와 태그등의 여러 요소로 가독성이 떨어지고, 쓸데없이 용량을 잡아먹는다는 단점이 항상 지적되어 왔다. 이에 대응해 간결하고 통일된 양식으로 각광을 받고 있는 것이 JSON입니다. 그래도 표면적으로 W3C의..

종종 클래스, 오브젝트, 인스턴스라는 용어를 들어본적이 있습니다. 대체 클래스, 오브젝트, 인스턴스가 뭘까요? 요약하자면, 🔶 객체(Object)는 상태(state)와 행동(behavior)의 묶음입니다. 🔶 클래스(Class)는 생성된 객체의 설계도(blueprint)나 프로토타입(Prototype)입니다. 🔶 인스턴스(Instance)는 클래스의 유니크한 유닛을 말합니다. 무... 무슨 소리인지요? 하나씩 세밀하게 들여다봅시다. 📌 객체(Object) 현실의 객체(object)는 두가지 특성을 가지고 있습니다. 인간을 예로 들어본다면, 상태(state, 이름과 나이 키, 몸무게 등등..)와 행동(뛴다. 잔다, 먹는다)로 나뉩니다. 자동차를 예로 들어본다면, 상태(현재 스피드, 기어 상태) 와 행동(브..

자바스크립트에서 문자열 표시할때 쌍따옴표? 따옴표? 를 써야 하나 갸우뚱했습니다. 자바스크립트에서는 문자열을 쌍따옴표 (" ")나 따옴표(' ') 다 인정한다고 합니다. 다만, 코드에서 일관성을 유지하는게 중요하다고 하네요. 즉, 쌍따옴표로 문자열을 표현하면 모두 쌍따옴표로 표시해주는 게 좋습니다. 워낙 플러그인이 알아서 포맷을 맞춰주니 그럴일이 없겠지만, 통일해서 쓰도록 합시다! 추가로 문자열 안에 따옴표를 넣고 싶을때는 이렇게 하면 됩니다. let frenchfry = "I like 'cheeze fry'"; //결과값 : I like 'cheeze fry' //그 반대도 가능하다. let frenchfry = 'I like "cheeze fry"'; //결과값 : I like "cheeze fry"..

📌 화살표 함수는 왜 쓰는건가요? function이라는 키워드를 사용하지 않아 코드가 짧아지고 입출력 기능을 직관적으로 전달해주는 장점이 있습니다. ES6문법부터 등장했다고 합니다. 📌 화살표 함수를 사용한 예시를 살펴봅시다. //기존에 함수를 표현할때 const sum = function (x,y) { return x + y; } //화살표 함수를 사용했을때 const add = (x, y) => { return x + y; } 훨씬 간결해보이네요.! 📌 매개변수가 하나일때는 괄호를 제거할 수도 있습니다. 다만, 매개변수가 없을때, 매개변수가 여러 개 일때는 괄호를 제거할 수 없으니 유의합시다. const square = x => { return x * x; } 📌 화살표함수는 리턴값까지 뺄수도 있다고..

요즘은 벌레잡기 게임 클론 코딩을 하고 있다. 변수에 중괄호({ })가 나와서 찾아본 것을 공부해보자! 말이 딱딱하고 어렵다! 구조 분해할당(Destructuring)은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식이다. 여기서 객체 구조 분해할당(Object Destructuring) 은 객체의 값을 변수에 담을 수 있다. 객체에서 여러개를 접근할때 하나씩 꺼내기가 귀찮으니까 중괄호를 사용해서 한꺼번에 접근한다. 이 표현식은 ES6버전에 새로 추가된 기능이라고 한다. 예시를 살펴보자! const user = { email: "harvey@mail.com", password: "dIkNGkdoPH", firstName: "Harvey", lastName: "Milk", ..

currentTarget : 이벤트를 등록해 놓은 요소를 반환한다. Target : 이벤트가 발생한 요소를 반환한다. 말이 어려우니 다음과 같이 예시를 들어보자. 사과 바나나 const myDiv = document.getElementById('mydiv'); myDiv.addEventListener('click',(e)=>{ console.log('currentTarget : ',e.currentTarget.tagName) console.log('target : ',e.target.tagName) }); 결과값은 다음과 같다. currentTarget는 이벤트를 등록해 놓은 요소이기 때문에 listener를 붙여놓은 div가 출력된다. target은 이벤트가 발생한 요소를 반환하기 때문에 다음과 같다...

들어가기에 앞서 forEach를 알기전까지는 배열의 요소를 순서대로 실행하는 코드를 짤때 for반복문으로 사용하곤 했다. //반복문 사용 const items = ["item1", "item2", "item3"]; for (let i = 0; i < items.length; i++) { console.log(items[i]); } //결과 item1 item2 item3 이걸 좀 더 간소화하게 만들수가 있었는데?! forEach 배열의 요소 각각에 대해 주어진 함수를 실행한다. 다만, 요즘은 자주 사용하지 않는다고 한다. 최근에 나온 for of 가 각광받고 있는데, 함수를 넣을 필요도 없어서 코드를 더 짧게 짤수 있다. 위에서 언급한 for반복문을 다음과 같이 forEach를 사용해서 표현할 수 있다...

textContext, innerHtml, innerText는 이름도 비슷하고 자주 헷갈리는 면이 있어서 정리를 해보자! 이 세 녀석은 비슷하게 자바 스크립트로 텍스트를 꺼내거나 추가할 수 있는 속성들이다. 약간씩 차이가 있는데 다음과 같다. textContext 이 녀석은 노드에 포함된 숨겨진 텍스트 문자열을 가져오거나 추가할 수도 있다. 이 녀석이 호환이 제일 잘되고 빠른 장점이 있다고 하고 의도한대로 가공할 수 있는 장점이 있다. 형식 element.textContent = "내용" 예시 Dom practice Let's practice! innerText 화면에 보이는 내용들을 읽어올때 유용하다고 한다. 하지만 내부에 특별한 스타일 적용이 없을때는 적합하지 않다. 형식 element.innerTe..

함수란? 하나의 기능을 가진 코드를 여기저기 만들어놓으면 지저분해지고 유지보수가힘들다. 그래서 한군데에 정의해놓고 여기저기서 재활용하려고 만들어졌다고 한다. 여기서 잠깐! 함수는 기능을 정의하고 꼭 호출을 해야 한다! 함수 선언 방식 * function : 난 함수야! 라고 선언한다. * 함수 이름을 넣는다. * 괄호안에 매개변수를 추가할 수 있다. 매개변수가 여러 개면 쉼표(,)로 구분해준다. 예시 1) 기본형 function singSong() { //1. 선언한다. console.log("DO"); console.log("RE"); console.log("MI"); } singSong(); //2. 호출한다. 2) 매개변수 사용 function greet(person){ console.log(`Hi..

📝 함수공부중이다. 문자열의 첫문자를 대문자로 바꾸는 함수를 짜보다가 다시 찾아보게 된 녀석(toUpperCase(), substring()들이다. toUpperCase() 문자열을 대문자로 바꿔주는 메서드이다. 형식 str.toUpperCase() 반대로 toLowerCase()도 있다. 이 메소드는 문자열을 소문자로 변환한다. substring() 문자열에서 자르고 싶은 구간을 지정해서 그 문자열을 반환해준다. 형식 substring(시작위치 , 종료위치) 특징 * 종료 위치의 -1까지 문자열을 자른다. * 종료위치를 지정하지 않으면 끝까지 자른다. * 시작위치 > 종료위치 인 경우, 두 값이 바뀐 듯 작동된다. (아래 3번째 예시를 참고바람) let str = '중요한건꺾이지않는마음'; let re..