본문 바로가기

Web

(19)
[JAVASCRIPT] for~in vs for~of for~in 두 표현 들은 iterate 객체에 사용 할 수 있다. 일반 객체도 순회가 가능하다. const list = [1,2,3]; const obj = { name: "동준", age: 27}; for (let v in list){ console.log(v); // 0, 1, 2 console.log(list[v]) // 1, 2, 3 } for (let v in obj) { console.log(v); // age, name console.log(obj[v]) // "동준", 27 } for~of arrays, strings, maps, sets 과 같은 iterate 객체에 사용할 수 있다. 일반적인 object 형태는 사용 불가 const list = [1,2,3]; const obj = {..
[JAVASCRIPT] this this 일반적인 객체지향언어(C#, JAVA) 에서 this 는 특별한 처리가 없는한 항상 Class 본인을 가르킨다. 그러나 Javascript 에서 this 는 상당히 독특한 모습을 보여준다. this 가 가르키는 객체는 동적으로 변한다. 즉 호출 시점에 따라 this 는 변한다. 기본적으로 자바스크립트에서 this 는 window, global 을 가르킨다. ( strict mode 에선 undefined 할당 ) 객체에서 this 일반 함수 호출방식의 this 는 전부 window ( 전역 객체 ) 를 가르킨다. 즉 어떤 함수라도 일반 함수로 호출되면 this 는 전역 객체 메소드 형태 ( 객체가 호출하는 ) 라면 this 가 호출한 객체에 바인드 된다. const obj = { name: "j..
[CSS] 가변(동적) 정사각형 가변(동적) 정사각형 화면 넓이에 따라 가로 길이가 결정되는 정사각형이 필요한 경우 (반응형) padding-botton 속성을 활용하여 길이를 일치 시킨다. 일반 CSS .box{ width: 100% padding-bottom: 100%; } Tailwind Reference CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same) CSS 작업을 하다보면 너비값(width)은 가변으로 설정이 되지만, 높이값(height)은 가변으로 설정이 되지 않아서 고민을 해본 경험이 있을 것입니다. 이번 포스팅에서는 너비값 기준으로 높이값도 동 webruden.tistory.com There might be incorrect information or outdat..
[HTML] contenteditable (텍스트 조작) contenteditable 해당 속성을 활성화 시킬경우 텍스트 조작이 가능하다. Hello Reference contenteditable - HTML: Hypertext Markup Language | MDN contenteditable 전역 특성은 사용자가 요소를 편집할 수 있는지 나타내는 열거형 특성입니다. developer.mozilla.org There might be incorrect information or outdated content.
[REACT] React 기본 Hooks REACT v17 기준으로 작성된 글 입니다. useState 리엑트의 근본, 리엑트에서 값 저장 용도로 사용한다. 값을 할당 받고, 값과 변환 함수 ( Set ) 를 반환한다. State 값이 변하는 경우 렌더링이 발생한다, 즉 다시 그림을 그린다. 변환 함수 ( Set ) 은 콜백을 인자로 받아 기존 상태값을 얻을 수 있다. 기본 사용법 import React, { useState } from "react"; const App = () => { const [name, setName] = useState(""); return ( 내 이름은 { name } ) } return App; 여러 input 태그에 state 하나로 바인딩 하는 방법 import React, { useCallback, useSt..
[JAVASCRIPT] try-catch 에러 전파 Error 발생 자바스크립트 런타임 도중 에러가 발생할 경우 실행이 중지된다. 따라서 에러를 받아주기 위해 try - catch 로 예외처리를 한다. 스택의 아래방향으로 계속해서 에러를 전파한다. 단 문법적인 에러는 try catch 로 처리할수 없다. new Error("에러"); // 에러를 발생시킨것이 아닌 에러객체를 생성했기 때문에 런타임이 중지되지 않는다. throw new Error("에러"); // 이 밑에 코드들은 실행이 중지된다. (Node 기준) 일반적인 try-catch 예외처리 function A (){ try { B(); }catch(e){ console.log("A 가 잡음") } } function B () { try{ throw new Error("에러임"); }catch(e..
[JAVASCRIPT] isNaN 검사 isNaN NaN 타입 확인시 사용하는 메소드 typeof 로는 number 로 리턴됨 isNaN(NaN) // true isNaN(parseFloat("geoff")) // true typeof NaN // 'number' Reference How do you check that a number is NaN in JavaScript? I’ve only been trying it in Firefox’s JavaScript console, but neither of the following statements return true: parseFloat('geoff') == NaN; parseFloat('geoff') == Number.NaN; stackoverflow.com There might be in..
[JAVASCRIPT] DOM - 노드 조작 텍스트 조작 API 설명 nodeValue 노드의 텍스트 값을 변경한다. 텍스트 노드를 선택해야만 텍스트를 변경할 수 있다. textContent 요소노드의 텍스트 노드를 변경한다. HTML 마크업을 파싱하지 않는다. innerText textContent 와 마찬가지로 텍스트 노드를 변경한다. textContent 보다 느리고 CSS 에 영향을 받는다. 사용하지 않는 것이 좋다. nodeValue Hello textContent Hello World 내부에 요소 노드가 존재하여도 text 형태 노드만 반환한다. 내부에 텍스트를 삽입하면 모든 자식 노드가 제거되고 할당된 텍스트가 추가된다. HTML 마크업 형태를 파싱하지 않는다. DOM 조작 새로운 돔 노드가 추가, 생성, 삭제시 리플로우와 리페인트가 ..
[JAVASCRIPT] DOM - 노드 탐색 노드 탐색 API 설명 parentNode 부모 노드를 반환한다. 텍스트 노드가 부모인 경우는 없다. parentElement 부모 요소 노드를 반환한다. childNodes 자식 노드를 NodeList 에 담아 반환한다. 텍스트 노드 포함 children 자식 노드를 HTMLCollection 에 담아 반환한다. 텍스트 노드 미포함 firstChild 첫 번째 노드를 반환한다. 텍스트 노드가 반환될 수 있다. lastChild 마지막 노드를 반환한다. 텍스트 노드가 반환될 수 있다. firstElementChild 첫 번째 자식 요소 노드를 반환한다. 텍스트 노드 미포함 lastElementChild 마지막 자식 요소 노드를 반환한다. 텍스트 노드 미포함 previousSibling 자신의 이전 형제 ..
[JAVASCRIPT] DOM - 노드 취득 (HTMLCollection) 노드 취득 프론트엔드 개발자의 관점에서 HTML 태그 는 단순 태그를 넘어서 자바스크립트 객체의 관점으로 보아야 한다. DOM 에 접근할 수 있는 DOM API의 종류 API 설명 getElementById 태그의 id 속성을 이용하여 노드를 선택한다. getElementsByClassName 태그의 class 속성을 이용하여 노드를 선택한다. HTMLCollection 유사 배열객체 를 리턴 getElementsByTagName 태그의 이름을 이용하여 노드를 선택한다. HTMLCollection 유사 배열객체 를 리턴 querySelector CSS 선택자를 사용하여 노드를 선택한다. querySelectorAll CSS 선택자를 사용하여 여러 노드를 선택한다. NodeList 유사 배열객체를 리턴 g..