전체 글 (194) 썸네일형 리스트형 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 판독 결과 실시간 모니터링: 원하는 대상에 대한 분석 결과를 실시간으로 확인 가능 - 프로젝트 별 분석 관리: 목적에 맞는 지역과 타겟 별로 분석 결과를 관리할 수 있다. - 보고서 자동 생성.. 모던 자바스크립트 튜토리얼 | 이벤트 위임 캡처링과 버블링을 활용하면 강력한 이벤트 핸들링 패턴인 이벤트 위임(event delegation)을 구현할 수 있습니다. 이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야할 때 사용됩니다. 이벤트 위임을 사용하면 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 단 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있습니다. 공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있습니다. 이를 이용해 이벤트를 핸들링합니다. 예제를 살펴봅시다. 다음은 고대 중국 철학에서 유래한 팔괘도입니다. HTML은 대략 다음과 같습니다. Bagua Chart: Direction, Element, Color, Meaning Northwest Metal .. 모던 자바스크립트 튜토리얼 | 버블링과 캡처링 버블링 버블링(bubbling)은 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 이벤트가 제일 깊은 곳에 있는 요소에서 시작해 부모 요소를 거슬러 올라가며 발생하는 모양이 마치 물속 거품(bubble)과 닮았기 때문입니다. 거의 모든 이벤트는 버블링이 됩니다. focus이벤트와 같이 버블링이 되지 않는 이벤트도 있습니다. event.target 부모 요소의 이벤트 핸들러는 이벤트가 정확히 어디서 발생했는지 등에 대한 자세한 정보를 얻을 수 있습니다. 이벤트가 발생한 가장 안쪽의 요소는 타깃(target) 요소라고 불리고, event.targ.. 프레임워크 없는 프론트엔드 개발 | 렌더링 모든 웹 애플리케이션에서 가장 중요한 기능 중 하나는 데이터의 표시이다. 좀 더 명확하게 말해 데이터를 표시한다는 것은 요소를 화면이나 다른 출력 장치에 렌더링한다는 것을 의미한다. W3C(World Wide Web Consortium)은 프로그래밍 방식으로 요소를 렌더링하는 방식을 문서 객체 모델 DOM(Document Object Model)로 정의했다. 문서 객체 모델 DOM은 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API이다. 자세한 내용은 W3C 규격 페이지를 참조. What is the Document Object Model? What is the Document Object Model? Editors Jonathan Robie, Texcel Research Introduction .. Widget Driven Development 아래 글을 번역한 것입니다. Widget Driven Development | Alexey Antipov Decomposition of UI applications into self-contained widgets leveraging streamlined Data Management alexei.me UI 애플리케이션을 개발할 때는 컴포넌트를 조합합니다. 각 UI 컴포넌트는 기본적으로 마크업, 범위가 지정된 스타일, 일부 UI 로직의 조합입니다. 데이터 관리는 컴포넌트 제어에서 제외되어 복잡한 데이터 흐름이 있는 복잡한 아키텍처를 초래합니다. 이 글에서는 컴포넌트를 데이터 로직과 UI를 모두 완벽하게 제어할 수 있는 자율적으로 격리된 위젯으로 변환하는 방법을 보여드리겠습니다. The History of .. 프레임워크 없는 프론트엔드 개발 | 프레임워크에 대한 이야기 프레임워크는 필요 없다. 중요한 것은 그림이지 프레임(그림틀)이 아니다. - 클라우스 킨스키 프레임워크란? 캠브리지 사전의 정의는 다음과 같다. 무언가를 만들 수 있는 지지 구조 이 정의는 소프트웨어 프레임워크의 일반적인 개념과 일치한다. 앵귤러 애플리케이션의 구조를 생각해 보면 이 정의와 정확히 일치하는 것을 알 수 있다. 앵귤러는 서비스, 구성요소와 파이프 같은 기본 요소를 사용해 애플리케이션을 빌드하는데 필요한 구조를 제공한다. 실제 애플리케이션에서 스택은 다른 요소들을 포함한다. loadash를 사용해 배열이나 객체를 조작하거나 moment.js를 사용해 날짜를 파싱할 수 있다. 이것이 프레임워크 도구일까? 자바스크립트 커뮤니티는 이를 라이브러리라고 부른다. 그렇다면 라이브러리와 프레임워크의 차이.. 이전 1 2 3 4 5 6 7 ··· 25 다음
