전체 글 (194) 썸네일형 리스트형 오래된 var https://ko.javascript.info/var 오래된 var ko.javascript.info var message = "안녕하세요." alert(message) var는 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 다른 방식으로 동작합니다. 근래엔 var를 쓰지 않아서 이를 만나는 건 흔치 않은 일이지만, var는 오래된 스크립트에서 당신을 기다리고 있는 괴물같은 존재입니다. var는 블록 스코프가 없습니다. var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다. 블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다. if (true) { var test = true; // 'let' 대신 'var'를 사용했습니다. } alert(t.. 프레임워크 없는 프론트엔드 개발 | 웹 컴포넌트 오늘날의 최신 브라우저에서 웹 컴포넌트(Web Component)라고 하는 네이티브 API를 사용해 웹 애플리케이션에서 컴포넌트를 작성할 수 있다. API 웹 컴포넌트는 세가지 중요 기술로 구성된다. 이 기술은 개발자가 재사용할 수 있는 UI 컴포넌트를 작성하고 게시할 수 있게 해준다. - HTML 템플릿: 태그는 콘텐츠가 렌더링되지는 않지만 자바스크립트 코드에서 동적인 콘텐츠를 생성하는데 '스탬프'로 사용되도록 하려는 경우에 유용하다. - 사용자 정의 요소: 이 API를 통해 개발자는 완전한 기능을 갖춘 자신만의 DOM 요소를 작성할 수 있다. - 새도우(Shadow) DOM: 이 기술은 웹 컴포넌트가 컴포넌트 외부의 DOM에 영향을 받지 않아야 하는 경우에 유용하다. 다른 사람들과 공유할 수 있도록 .. 프레임워크 없는 프론트엔드 개발 | DOM 이벤트 관리 애플리케이션의 내용은 시간이 지남에 따라 변경된다. 이런 변경이 발생하게 만드는 것이 이벤트이다. 이벤트는 사용자에 의해 또는 시스템에 의해 생성됐는지 여부와 관계없이 DOM API에서 매우 중요한 부분이다. 실제 프로젝트에서 중요한 기능에 초점을 맞춰서 개발하고 새로운 요구가 생기면 이에 따라 아키텍처를 지속적으로 변경시키자. YAGNI 원칙 You aren't gonna need it: 정말 필요하다고 간주할 때까지 기능을 추가하지마라. YAGNI 원칙은 익스트림 프로그래밍 원칙 중 하나이다. YAGNI 원칙을 더 잘 설명하고자 XP의 창시자 중 한 명인 론 제프리스의 다음 인용문을 자주 사용한다. '당신이 필요하다고 예측할 때가 아니라 실제로 필요할 때 구현하라.' 이는 어떤 사례에서도 따를 만한 .. Prop Drilling 원문 : https://kentcdodds.com/blog/prop-drilling#why-is-prop-drillinggood 이 글의 목표는 Prop Drilling이 무엇인지 이해하는데 도움을 줄 뿐만 아니라, 언제 문제가 될 수 있으며 이를 회피하거나 피하기 위해 사용할 수 있는 메커니즘에 대해 설명하는 것입니다. What is prop drilling? Prop Drilling("스레딩"이라고 함)은 React 컴포넌트 트리의 일부로 데이터를 가져오기 위해 거쳐야 하는 프로세스를 말합니다. 상태를 가지고 있는 컴포넌트의 아주 간단한 예시를 살펴보겠습니다. function Toggle() { const [on, setOn] = React.useState(false) const toggle = ().. DOM 탐색하기 DOM 탐색하기 ko.javascript.info DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다. 하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 합니다. DOM에 수행하는 모든 연산은 document 객체에서 시작합니다. document 객체는 DOM에 접근하기 위한 '진입점'이죠. 진입점을 통과하면 어떤 노드에도 접근할 수 있습니다. 트리 상단의 documentElement와 body DOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있습니다. = document.documentElement document를 제외하고 DOM 트리 꼭대기에 있는 문서 노드는 태그에 해당하는 document.documentE.. getElement*, querySelector*로 요소 검색하기 document.getElementById 혹은 id를 사용해 요소 검색하기 요소에 id 속성이 있으면 위치에 상관없이 메서드 document.getElementById(id)를 이용하여 접근할 수 있습니다. Element 그런데 아래와 같이 id 속성 값을 그대로 딴 전역 변수를 이용해 접근할 수도 있습니다. Element 그런데 이렇게 요소 id를 따서 자동으로 선언된 전역 변수는 동일한 이름을 가진 변수가 선언되면 무용지물이 됩니다. 따라서 id를 따서 만들어진 전역 변수를 요소 접근시 사용하면 안됩니다. id에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작입니다. 브라우저는 스크립트의 네임 스페이스와 DOM의 네임 스페이스를 함께 사용할.. iterable 객체 반복 가능한(iterable, 이터러블)객체는 배열을 일반화한 객체입니다. 이터러블이라는 개념을 사용하면 어떤 객체에든 for...of 반복문을 적용할 수 있습니다. 배열은 대표적인 이터러블입니다. 배열 외에도 다수의 내장 객체가 반복 가능합니다. 문자열 역시 이터러블의 예입니다. 배열이 아닌 객체가 있는데, 이 객체가 어떤 것들의 컬렉션(목록, 집합등)을 나타내고 있는 경우 for...of 문법을 적용할 수만 있다면 컬렉션을 순회하는데 유용할 것입니다. Symbol.iterator 직접 이터러블 객체를 만들어 이터러블이라는 개념을 이해해 보도록 합시다. for...of를 적용하기에 적합해 보이는 배열이 아닌 객체를 만들겠습니다. 예시의 객체 range는 숫자 간격을 나타내고 있습니다. let range.. 모던 자바스크립트 튜토리얼 | 원시값의 메서드 원시값의 메서드 ko.javascript.info 자바스크립트는 원시값(문자열, 숫자등)을 마치 객체처럼 다룰 수 있게 해줍니다. 원시값에도 객체에서처럼 메서드를 호출할 수 있습니다. 원시값은 객체가 아닙니다. 원시값과 객체는 다음과 같은 차이가 있습니다. 원시값 - 원시형 값입니다. - 원시값의 종류는 문자(string), 숫자(number), bigint, 불린(boolean), 심볼(symbol), null, undefined 형으로 총 일곱가지입니다. 객체 - 프로퍼티에 다양한 종류의 값을 저장할 수 있습니다. - { name: "John", age: 30} 와 같이 대괄호 {}를 사용해서 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종입니다. 객체의 장점 중 하.. 이전 1 2 3 4 5 6 ··· 25 다음
