본문 바로가기

분류 전체보기

 (214)
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} 와 같이 대괄호 {}를 사용해서 만들 수 있습니다. 자바스크립트에는 여러 종류의 객체가 있는데 함수도 객체의 일종입니다. 객체의 장점 중 하..
CORS에서 이기는 방법 How to win at CORS The 'how' and 'why' of CORS, from start to finish. jakearchibald.com CORS(Cross-Origin Resource Sharing) 교차 출처 리소스 공유는 브라우저가 자원을 가져오는 방법에 대한 부분이기 때문에 어렵다. 이는 30여년 전 최초의 웹 브라우저에서 시작된 일련의 행위다. 그 이후로 기능을 추가하고, 기본 동작을 개선하고, 웹을 너무 많이 바꾸지 안는 선에서 과거의 실수를 덮어 나갔다. CORS 없이 다른 도메인에 접근하기 브라우저는 거의 30년 동안 다른 사이트의 이미지를 포함할 수 있었다. 다른 사이트의 허락을 받을 필요 없이 그냥 할 수 있었다. 다른 사이트의 이미지뿐만 아니라 다른 자원을 가져오는..
자바스크립트는 어떻게 약속을 지킬까?(포스팅 리뷰) 자바스크립트에서 비동기 처리 자바스크립트는 싱글(Single-Threaded)언어이다. 최초로 등장했을 당시 자바스크립트의 용도는 웹 페이지에 간단하게 동적인 효과를 높이기 위한 경량 언어였다. 따라서 프로그래밍 난이도가 높은 멀티 스레드(Multi threaded) 모델을 적용할 이유가 없었다. 하지만 웹 애플리케이션에서 자바스크립트의 역할은 점점 중요해졌고 특히 싱글 스레드로는 동시성 처리에 한계가 분병했고, 이를 해결하기 위해 선택한 방법이 비동기 처리이다. 비동기 처리가 없다면 사용자는 페이지의 모든 컨텐츠가 로드될 때까지 텍스트를 입력할 수도, 버튼을 누를 수도 없었을 것이다. 가장 고전적인 비동기 처리 방법으로 콜백 함수가 있다. 콜백함수란 다른 함수에 인수로 넘겨준 함수를 의미한다. 브라우저..
Ovision Admin 페이지 개발 | SIA 인턴 Ovision Ovision SI Analytics solution accelerate utilizing in GEOINT to find creativeness in new forms of analytics and make experts' focus on insight ability. ovision.ai Ovision은 인공위성을 활용하여 사람이 일일이 분석하기 어려울 정도로 크고 방대한 위성 영상을 자동으로 분석하고 여러 유용한 정보로 제공해주는 소프트웨어이다. Ovision의 주요 기능은 다음과 같다. - AI 판독 결과 실시간 모니터링: 원하는 대상에 대한 분석 결과를 실시간으로 확인 가능 - 프로젝트 별 분석 관리: 목적에 맞는 지역과 타겟 별로 분석 결과를 관리할 수 있다. - 보고서 자동 생성..

티스토리툴바