허도경, limewhale

이전에 작성했던 jQuery를 바닐라 JS로 변경하기라는 글에서도 잠깐 서술한 적이 있는 fetch에 대해서 알아보려고 합니다. fetch에 대하여 정리하면서 Ajax와 fetch, Axios의 차이점에 대해서도 간단히 정리해 보려고 합니다. 일반적으로 외부 API를 호출하기 위해서는 비동기 방식을 이용하여 데이터를 가져와야 합니다. JavsScript에서 비동기 통신을 위해 사용하는 대표적인 방법으로는 Ajax, Axios, fetch가 있습니다. 동기, 비동기 개념과 차이 -동기방식 (Synchronous : 동시에 일어나는) 요청과 그 결과가 동시에 일어난다는 약속으로, 바로 요청을 하면 시간이 여부에 상관없이 결과가 나올 때까지 기다렸다가 결과가 나타난 후 다음 명령어를 실행합니다. -비동기방식 ..

WAI-ARIA는 HTML의 접근성 문제를 보완하는 W3C 명세입니다. WAI-ARIA는 HTML 요소에 role 또는 aria-* 속성을 추가하여 콘텐츠의 '역할(roles), 상태(states), 속성(properties)' 정보를 보조기기에 제공합니다. WAI-ARIA 속성을 모든 HTML 요소에 무분별하게 사용할 수 있는 것은 아닙니다. role 또는 aria-* 속성을 특정 HTML 요소에 사용할 수 있는지 ARIA in HTML 명세를 검토하면서 적용해야 합니다. 1. HTML을 의미 있게 작성한다. 대부분의 WAI-ARIA 명세는 HTML 요소와 속성을 흉내내는 것입니다. 올바른 HTML을 사용한다면 WAI-ARIA 사용을 최소화할 수 있습니다. WAI-ARIA를 사용하기에 앞서 HTML을 ..

WAI-ARIA란? HTML로 화면의 마크업을 구성할 때 고려해야 하는 부분 중 하나가 웹 접근성인 부분입니다. 과거의 웹페이지는 정적인 정보성 화면이 주를 이루었습니다. 그래서 웹 표준을 지켜서 시멘틱 마크업과 접근성 요소들을 준수하면 웹 접근성 요소를 해결할 수 있었습니다. 하지만 최근에는 자바스크립트, AJAX 등을 활용하여 비동기 데이터를 불러오거나 시간에 따라 정보가 자동으로 업데이트되는 경우 전맹 시각장애인들은 스크린리더 등 보조기기에서 업데이트 된 정보를 인지하기 어려움을 느끼게 됩니다. 이러한 부분을 보완하기 위해 나온것이 WAI-ARIA입니다. WAI-ARIA는 W3C에 의해 제정된 웹 접근성을 위해 지원되는여러 가지 특성들을 대한 표준 기술 규격을 의미합니다. WAI는 ‘Web Acce..

디자이너가 전달한 화면의 GUI 작업을 하면 이미지 요소를 사용해야 하는 부분이 있는데 이를 최적화하기 위해 아이콘 요소는 SVG로 만들어서 처리를 하거나 이미지 자체 포맷을 압축하는 방법을 사용합니다. 그런데 이미지를 강제로 압축해서 처리하면 이미지 화질 요소가 낮아지게 되어 만족스러운 효과를 얻지 못하는 결과가 왕왕 나오기도 합니다. 이럴 때 사용자의 브라우저 환경에 따라서 이미지를 다르게 보여주는 환경으로 로직을 구성한다면 웹 최적화를 통해 속도면에서도 향상되고 이미지 품질면에서도 모두가 만족스러운 결과를 얻을 수 있을 거라 예상합니다. 이미지 품질을 유지하면서 속도를 개선하기 위해 차세대 포멧인 WebP와 avif를 이용하려고 합니다. WebP란 무엇인가요? Webp는 구글에서 만든 이미지 포멧으..

이전에 누구나 쉽게 가로 스크롤 메뉴 적용하기라는 주제로 글을 작성한 적이 있습니다. 그곳에 어떤 분이 댓글로 질문을 해주셨는데요. 질문의 내용은 스크롤을 없애고 싶다는 것이 요점이었습니다. 우선 스크롤바를 사라지게 하는 방법으로는 스크롤 기능을 유지할 것인지, 스크롤 기능이 적용되지 않게 해서 스크롤을 없애달라는 것인지에 따라 방법이 나뉘게 됩니다. 스크롤 자체를 막고 싶다면 CSS 속성 overflow: hidden을 사용하면 스크롤 기능이 사라지게 됩니다. 아마 저분의 질문은 모바일이 아닌 웹에서 스크롤 기능은 유지하면서 스크롤 바의 모양만 없애고 싶었던 것 같습니다. 그 경우에는 아래 속성을 적용해 주면 됩니다. ul { scrollbar-width: none; -ms-overflow-style:..

GUI 작업을 진행하면서 간격에 대한 정의는 CSS에 정의하는 게 가장 좋다고 생각합니다. 하지만 유지보수와 CSS로 대응이 어려울 때, 개발 화면에서 직접 수정이 필요할 때 등 다양한 상황이 발생할 수 있는데 이럴 때 유용하게 사용할 수 있는 게 클래스로 간격을 만들어서 사용하는 것입니다. as-is to-be 코드도 간결해졌고 클래스명도 직관적이기 때문에 CSS를 잘 모르는 개발자분들과 협업을 진행할때도 유용하게 사용할 수 있습니다. /**************************************** * Padding, Margin 정의 * p는 padding, m은 margin을 나타냄. * t는 상단 b는 하단 l은 왼쪽 r은 오른쪽의 방향 * ex : * pt10 => padding-to..

jQuery에 익숙해지면 너무나도 간단하지만 저는 요즘 작업할 때 jQuery를 사용하지 않고 순수 자바스크립트로 작업을 하려고 합니다. React나 Vue와 같은 프레임이 많이지면서 jQuery와 같이 Dom을 직접 탐색하여 이벤트를 발생시키는 건 스크립트 충돌면에서도 좋지 않고 또 별도의 npm을 설치해야 하기 때문입니다. 자바스크립트에서 jQuery 없이 사용하려면 너무나도 불편했던 형제선택, siblings()를 사용해 보겠습니다. function siblings(t) { const children = t.parentElement.children; const tempArr = []; for (let i = 0; i < children.length; i++) { tempArr.push(childre..

CSS 그리드 레이아웃이란? CSS 그리드 레이아웃(Grid Layout)은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 HTML 기본 요소로 작성된 컨트롤 간의 관계를 정의하는 데 아주 탁월합니다. 테이블과 마찬가지로 그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다. 하지만, 테이블과 달리 CSS 그리드는 다양한 레이아웃을 훨씬 더 쉽게 구현할 수 있습니다. 예를 들어, 그리드 컨테이너 속 자식 요소를, 마치 CSS로 일일이 위치를 지정해 준 것처럼, 실제로 겹치게 층을 지면서 자리를 잡도록 각 요소의 위치를 지정해 줄 수도 있습니다. Flex와 지금 공부할 Grid의 가장 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Gri..

CSS에서 한번 익혀두면 두고두고 사용할 수 있는 Flexbox를 알아보려고 합니다. 지금 당장 본인의 코드에서 사용하고 있지 않다고 하더라도 이번만큼은 반드시 알아두면 도움이 될 거라 생각합니다. 그럼 지금부터 같이 Flexbox를 알아볼게요. 물론 Flexbox를 모른다고 해서 레이아웃 구성을 못 하는 것은 아니지만 확실히 알고 있으면 우리에게 많은 이점을 주는 것은 사실입니다. 밥을 숟가락을 이용해서 먹는 것과 손으로 먹는 느낌이랄까요? 한 번만 시간 내서 천천히 읽다 보면 어느 순간 Flexbox는 이미 내 코드가 되어 있을거에요. 그럼 우리는 이렇게 외치겠죠. Flex 해버렸잖아~~ 그럼 지금부터 진짜 Flexbox에 대하여 알아보도록 하겠습니다. 전체적인 내용은 참조 내용에 제가 읽기 편하도록..

이 글은 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)이 html5rocks.com에 게시한 "How Browsers Work: Behind the scenes of modern web browsers"를 번역한 글입니다. 탈리 가르시엘은 몇 년간 브라우저 내부와 관련된 공개 자료를 확인하고, C++ 코드 수백만 줄 분량의 WebKit이나 Gecko 같은 오픈소스 렌더링 엔진의 소스 코드를 직접 분석하면서 어떻게 브라우저가 동작하는지 파악했습니다. 📖 소개 브라우저는 아마도 가장 많이 사용하는 소프트웨어입니다. 이 글을 통해 브라우저가 어떻게 동작하는지 이해하고 설명하려고 합니다. 이 글을 읽고 나면, 브라우저 주소 창에 특정 URL을 입력했을 때 어떤 과정을 거쳐 페이지가 화면에 보이게 되는지..