전체 글 (206) 썸네일형 리스트형 1.4 getElement*, querySelector*로 요소 검색하기 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 웹 페이지 내에서 요소들이 가까이 붙어있지 않은 경우 원하는 요소 노드에 접근하는 방법document.getElementById 혹은 id를 사용해 요소 검색 Element id 값에 하이픈(-)이 있는 경우 Element id를 따서 만들어진 전역변수를 요소 접근 시 사용하지 말아라.id 에 대응하는 전역변수는 명세서의 내용을 구현해 만들어진 것으로 표준이긴 하지만 하위 호환성을 위해 남겨둔 동작이다.브라우저는 스크립트의 네임스페이스와 DOM의 네임스페이스를 함께 사용할 수 있도록 한다.하지만 이름이 .. 1.3 DOM 탐색하기 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info DOM에 수행되는 모든 연산은 document 객체에서 시작한다.document 객체: DOM에 접근하기 위한 진입점 DOM의 노드 탐색트리 상단: documentElement, bodyDOM 트리 상단의 노드들은 document가 제공하는 프로퍼티를 사용해 접근할 수 있다. = document.documentElement = document.body 자식 노드 탐색: childNodes, firstChild, lastChild자식 노드 (child node, children)자식 노드는 부모 노드의 바로 아.. 1.2 DOM 트리 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info HTML은 태그(tag)로 이루어져 있다.모든 HTML 태그는 객체이다.태그 안에 감싸진 ‘자식’태그는 ‘중첩 태그 (nested tag)’라고 한다.태그 내의 문자(text) 역시 객체이다.→ 모든 객체(태그)는 자바스크립트를 통해 접근할 수 있다.ex) : document.bodyex) innerHTML: 해당 노드의 HTML 콘텐츠ex) offsetWidth: 해당 노드의 너비DOM의 구조 사슴에 관한 진실.위 코드를 태그 트리 구조로 나타내면 다음과 같다.태그 = 요소 노드(element node):.. 1.1 브라우저 환경과 다양한 명세서 모던 JavaScript 튜토리얼 파트 2. 브라우저: 문서, 이벤트, 인터페이스를 읽고 정리, 기록 브라우저 환경과 다양한 명세서 브라우저 환경과 다양한 명세서 ko.javascript.info 호스트 (host): 자바스크립트가 돌아가는 플랫폼ex) 브라우저, 웹서버 등호스트 환경 (host environment): 해당 플랫폼에 특정되는 기능ECMAScript (language core) + 플랫폼에 특정되는 객체와 함수를 제공한다.ex) 웹브라우저: 웹페이지를 제어하는 수단ex) Node.js: 서버 사이드 기능을 제공호스트 환경이 웹 브라우저인 경우최상단에 window 라는 root 객체가 존재한다.window 객체의 2가지 역할자바스크립트 코드의 전역 객체 ex) window.sayHi();브.. [vue3] nextTick() - DOM의 update flush를 기다리는 utility vue로 개발을 하면서 ref 반응형 데이터의 값이 업데이트 되는 시점이 헷갈려서 찾아보니 nextTick() 이라는 vue의 global API 함수를 알게되었다. https://ko.vuejs.org/api/general Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org 1. 문제상황공식문서의 예제를 살펴보면, ref 반응형 변수를 업데이트 했을 때 DOM의 업데이트가 일어나지 않았을 경우ref의 값을 바로 사용할 수 없다는 문제가 있다. 2. 해결vue에서 제공하는 nextTick() 이라는 함수를 사용하면 DOM이 업데이트 되어반응형 변수의 값이 업데이트 되었음을 보장하기 때문에 변경된 값을 사용할 수 있다.function nextTick.. [Clean Architecture] 책 읽기 7장 ~ 11장 3부 설계 원칙 좋은 소프트웨어 시스템은 깔끔한 코드로부터 시작한다. 좋은 아키텍처를 정의하는 원칙을 SOLID 라고 하고 이 원칙을 준수해서 작성하는 코드는 좋은 아키텍처를 만들 수 있다. SOLID 원칙은 클래스를 만들고 결합하는 방법에 대해 설명해준다. (여기서 클래스는 단순히 함수와 데이터를 결합한 집합의 의미) SOLID 원칙의 목적은? 중간 수준의 소프트웨어 구조가 1. 변경에 유연하고 2. 이해하기 쉽고 3. 많은 소프트웨어 시스템에 사용될 수 있는 컴포넌트의 기반이 될 수 있도록 만드는 것이 목적이다. (중간 수준의 소프트웨어는 모듈 수준이라고 이해하면 된다. 코드 레벨의 상위) 이 책의 설명 순서는 다음과 같다. SOLID -> 컴포넌트 세계의 SOLID를 대응하는 원칙 -> 고수준 아키.. UI업데이트를 메인스레드에서 해야하는 이유 with 데드락 문제 ㅇㅅㅇ 카테고리를 선택해서 필터링 된 리스트를 보여주는 화면에서 문제가 발생했다. 1. 앱이 튕기거나 2. 화면이 멈춰서 아무런 동작을 할 수 없었다. (앱은 돌아가지만 화면 터치가 막힌 상태) 자세히 살펴보면 데드락이 발생했고, outstanding async updates (비동기적으로 업데이트가 발생한 상태에서 해당 업데이트가 완료되기 전에 다른 업데이트가 추가로 발생하는 것) 가 있는 메인큐에서 이 메서드를 호출하는 것은 허용되지 않는다고 한다. 문제가 됐던 코드 원인이 되는 코드를 찾아 스레드를 거슬러 올라가보니 컬렉션 뷰의 데이터를 업데이트하는 코드를 찾을 수 있었다. 이 문제가 되는 코드를 빠르게 찾을 수 없었던 이유가.. 어째서인지 문제 발생한 코드는 단순히 subscribe를 하고 .. [Clean Architecture] 책 읽기 1장 ~ 6장 분명 책은 1년 전에 샀지만 그때 당시에는 함수형 프로그래밍? 그게ㅔ뭔ㄷ.. 시절이라 흥미가 가지 않던 책이었는데 iOS에서 클린 아키텍처를 직접 프로젝트에 적용해보니 개발시간이 단축되는 느낌이나 편리한 느낌이 있었다.. 근데 왜 편리한지, 왜 객체 지향 설계 원칙을 준수하면서 아키텍처를 만들었는지, 근본적인 물음이 해결되지는 않았기 때문에 책을 읽으면서 생각을 정리해보려고 한돠,, 1장. 설계와 아키텍처란? 제대로 된 소프트웨어를 만들면 아주 적은 인력만으로도 새로운 기능을 추가하거나 유지보수할 수 있다. 변경은 단순해지고 빠르게 반영할 수 있다. 결함은 적어지고 잦아든다. 최소한의 노력으로 기능과 유연성을 최대화할 수 있다. 이런 일을 가능하게 해주는 것이 아키텍처라고 한다. 여기서 중요한 말은 유연.. 이전 1 2 3 4 5 ··· 26 다음 목록 더보기
