구멍을 외면하지 말자

aria-hidden=’true’와 aria-role=’none’ 1. aria-hidden=’true’ aria-hidden 속성은 요소를 접근성 트리에서 제거할 지 여부를 결정합니다. aria-hidden='true'로 설정하면 해당 요소가 접근성 트리에 노출되지 않을 뿐만 아니라 자식 요소들도 모두 영향 받아 사라지게 됩니다. 이렇게 접근성 트리에서 사라지면 스크린 리더 등 접근성을 지원하는 보조 기술의 도움을 받을 수 없습니다. aria-hidden 속성은 시각적인 렌더와는 직접적인...

모듈 시스템 (CJS, ESM) 1. 모듈 코드를 짜다보면 프로그램의 규모가 점차 커지면서 하나의 파일에 작성했던 코드를 관련된 내용끼리 여러 파일에 분리하곤 합니다. JavaScript에서는 각 파일을 서로 다른 모듈로 취급하고, 각 모듈에서는 변수나 함수를 공유하기 위해 이를 내보내고 불러올 수 있어야 합니다. 이 때, 프로젝트가 사용하고 있는 모듈 시스템과 사용하려는 모듈이...

2023년 돌아보기 연말에는 웹 접근성에 관한 글을 적느라 경황이 없었고 연초에는 개인 일정을 소화하느라 진득하게 회고할 겨를이 없었습니다. 그래서 2024년 새해가 시작된 지 2주가 지난 시점에서 2023년을 돌아봅니다. 아무래도 지난 반기 회고 때 상반기에 있었던 일을 다루었기 때문에 이번에는 하반기를 위주로 정리해 보려 합니다. 개발자 이현빈 아무래도 가장 큰 변화를...

WAI 문서로 접근성 이해하기 (2/2) 💡 W3C에서 출판한 기술 사양을 읽어보며 접근성을 높일 수 있는 개발 요소들을 알아봅니다. 1. 들어가며 지난 번에 작성한 WAI 문서로 접근성 이해하기 (1/2)에서는 웹 접근성이 무엇인지에 대해서 간략히 알아보고 시맨틱 태그를 사용할 때 접근성을 높이는 방법과 접근성을 고려하며 메뉴, 이미지 등의 요소를 개발하는 방법에 대해...

WAI 문서로 접근성 이해하기 (1/2) 💡 W3C에서 출판한 기술 사양을 읽어보며 접근성을 높일 수 있는 개발 요소들을 알아봅니다. 1. 웹 접근성이란 웹 접근성이란 노인, 장애인, 환자를 포함한 누구나 웹에 접근하여 웹 페이지를 탐색하거나 상호작용할 수 있게 지원하는 것을 말합니다. 웹 접근성을 지원하기 위한 방법에는 대표적으로 WAI-ARIA(Web Accessibility Initiative – Accessible...

@supports로 fallback style 적용하기 💡 CSS 쿼리를 사용한 하위 브라우저에서의 스타일 대응 방법을 소개합니다. 1. 들어가며 웹 개발 환경이 빠르게 변한다는 것은 비단 유행하는 프레임워크가 시시각각 변한다는 것을 의미할 뿐만 아니라 새롭게 사용할 수 있는 기능들이 많아진다는 것을 의미하기도 하는 것 같습니다. 라이브러리나 프레임워크의 버전이 올라가면 이전에 쓰던 기능의 사용법이...

2023년 상반기 돌아보기 - 활동을 중심으로 💡 지난 반년간 무엇을 했는지 돌아봅니다! 차가운 스터디 올해 1월부터 부스트캠프에서 만난 동료들과 스터디를 만들어 더 나은 개발자가 되기 위해 다양한 주제로 학습하고 있습니다. 어쩌다 보니 내부적으로 주제를 정해서 시즌제로 진행하고 있습니다. 시즌1에는 다시 기본기부터 탄탄하게 하자는 의미로 평소에 잘 사용하지 않는 HTML 속성이나...

컴포넌트 인터랙션 테스트 💡 컴포넌트 인터랙션을 테스트해보기 위해서 Storybook에서 Cypress와 Play function을 적용한 내용을 정리합니다. 1. 들어가며 이전에 작성했던 글(디자인 시스템에 Compound Component Pattern 적용해보기, 스토리북의 Docs 기능으로 컴포넌트 라이브러리 문서화하기)에 이어서 CDS(Cold Design System)와 관련된 세번째 글을 작성하게 되었습니다. CDS를 개발할 때 담당했던 컴포넌트 중 하나인 Slider 컴포넌트는 <input...

꼬리 물기 최적화 💡 ES6에서 추가되었던 꼬리 물기 최적화에 대해서 정리해봅니다. 1. 들어가며 이전에 작성했던 ECMAScript 2023 살펴보기 글을 작성하고 나서 이전 ECMAScript 버전의 변경 사항도 살펴볼 겸 ES6부터 추가된 스펙에 대해서 훑어보았습니다. 대부분은 그동안 JavaScript를 사용하며 자주 접했던 내용들이라 큰 문제없이 이해할 수 있었습니다. 그 중에서 얼마 전 JavaScript...

첫 오픈 소스 컨트리뷰션 이야기: 어떻게 시작했고 무엇을 배웠나 💡 처음으로 오픈 소스에 기여한 경험을 공유합니다. 1. 어떻게 시작했나 작년에 진행한 프로젝트에서 실시간 공동 편집이라는 주제로 웹 어플리케이션을 만들었던 적이 있습니다. 당시에 여러 레퍼런스를 찾아보던 중 yorkie라는 오픈 소스 라이브러리를 발견하게 되었습니다. CRDT라는 다소 생소한 자료구조를 구현해야 하는 것이 큰...

ECMAScript 2023 살펴보기 💡 14번째 버전인 ECMAScript 2023에 추가된 스펙에 대해서 살펴봅니다. 1. 새로운 기능들 공부해야 하는 내용은 대개 우연으로 다가옵니다. 며칠 전 JavaScript 스터디를 진행하던 중 모던 JavaScript 튜토리얼에서 참고 링크로 되어 있는 ECMAScript 명세서를 열어보게 되었습니다. 같이 학습하고 있던 동료 분께서 “벌써 2024를 준비하네요?” 라는 말씀을 하셨습니다. 무슨...

스토리북의 Docs 기능으로 컴포넌트 라이브러리 문서화하기 💡 UI 컴포넌트 렌더링을 확인할 때 사용했던 Storybook으로 각 컴포넌트 정보를 문서화한 과정을 정리해봅니다. 1. 문서화 지난 포스트에서 다루었던 CDS(Cold Design System)의 목표 중 하나로 라이브러리 배포를 준비하고 있습니다. 배포 전에 각 컴포넌트들을 리팩토링할 뿐만 아니라 chakra, NextUI, Radix같은 라이브러리들처럼 각 컴포넌트에 대한 설명을...

디자인 시스템에 Compound Component Pattern 적용해보기 💡 디자인 시스템을 만들어가면서 React의 합성 컴포넌트 패턴을 사용하여 Tabs 컴포넌트를 만들었던 내용을 정리합니다. 1. 배경 지난 2월 초부터 부스트캠프를 수료한 동료 프론트엔드 개발자분들과 의기투합하여 함께 디자인 시스템을 만들자는 원대한 목표를 가지고 ‘차가운 디자인 시스템 (Cold Design System, 이하 CDS)’을 만들어 가고 있습니다. React...

V8 Garbage Collection 💡 V8 엔진에서 JavaScript Garbage Collection 동작 방식을 정리합니다. 1. Garbage Collection Garbage Collection을 단어 그대로 해석하면 ‘쓰레기 수집’입니다. 프로그래밍에서 더 이상 사용하지 않는 메모리(Garbage)를 모아서 처리하는(Collection) 소프트웨어의 내부 동작을 일컫습니다. Garbage Collection처럼 메모리를 비워주는 단계를 거치지 않는다면 컴퓨터에서 응용 프로그램이 실행되는 데에 큰 제약이 있을 것입니다....

React 웹 앱을 데스크탑 앱으로 만들어보기 💡 React로 만들었던 프로젝트를 Electron으로 감싸는 과정과 발생한 에러에 대해서 다룹니다. 1. Electron 도입 배경 저번 포스트에서 등장했던 Codocs 프로젝트를 시작할 때쯤이었습니다. 팀원들끼리 각자 하고 싶은 개발 내용에 대해서 공유하는 자리에서 Electron에 대해서 언급했습니다. 마치 Notion이나 Obsidian같은 노트 앱들을 데스크탑에서 사용할 수 있는 것처럼...

Amazon EC2 를 사용해서 프로젝트 배포하기 - 사진으로 보는 튜토리얼 💡 프로젝트 배포를 위해 AWS 인스턴스를 생성하는 과정을 사진으로 정리합니다. 1. 배포하기 작년 12월을 끝으로 부스트캠프 7기 그룹 프로젝트 함께 쓰는 공동 문서, Codocs는 부스트캠프로부터 NCP (네이버 클라우드 플랫폼) 크레딧을 제공받아 안정적으로 배포할 수 있었습니다. 크레딧 만료일이 1월말까지였기 때문에 어쩔...

JavaScript 의 Prototype 에 대해서 💡 JavaScript 특징 중 하나인 Prototype 에 대한 지식을 정리합니다. 1. 객체와 Prototype Javascript에서는 객체를 상속하기 위하여 프로토타입이라는 방식을 사용합니다 -MDN 설명 중- Java나 Python과 같은 프로그래밍 언어에서 ‘객체’를 ‘상속’하기 위해서 Class를 사용합니다. 일반적으로 Class에 대해서 배우게 되면 필드와 메서드로 구성된다고 이야기합니다. 여기서 필드와 메서드는...

2022년 돌아보기 - 월별 일정을 중심으로 원래는 연말 회고를 할 생각이 없었습니다. 거창한 내용을 적어야 할 것 같았고, 그렇게 적을만한 사건도 없다는 생각에 그냥 넘기려고 했죠. 근데 막상 12월의 마지막 날, 쉬는 주말에 가벼운 마음으로 글 하나 작성하는 것도 괜찮겠다는 생각이 들어 간단하게 적어보려 합니다. 개인적인 일정은 노션 캘린더에서 관리하고...

부스트캠프 웹·모바일 7기 후기 들어가며 어느덧 창밖의 초록은 지고 하얀 눈이 내려왔네요. 무려 5개월이 지났습니다. 부스트캠프를 하기 전까지만 해도 대학교 연구실에서 프론트엔드 개발자의 꿈을 키우며 관련된 연구 과제를 개발하고 있었습니다. 홀로 전공을 살리지 않고 웹 개발을 해야겠다고 생각하여 일찍이 다른 길로 걸었습니다. 그러다 보니 개발하면서 생기는 고민을 깊이 있게 나눌...

Lighthouse CI 적용기 - GitHub Actions 만들기 💡 웹 성능 측정 도구인 Lighthouse 를 적용하고 GitHub Actions 를 만들어봅니다. 1. Lighthouse 도입 배경 부스트캠프 그룹 프로젝트 기간 첫 주차에 저희 조 주제를 바탕으로 마스터께서 테크 스펙을 작성해주셨습니다. 이 때, 임팩트 측정에서 눈길을 사로 잡는 한 단어가 있었습니다. 바로 라이트하우스 입니다....

React Concurrent Mode - Data fetching, Suspense, React hook 💡 React 의 동시성 모드와 관련한 기능들에 대해서 알아봅니다. 1. React React 가 등장하기 전에 동적인 웹 프론트엔드 개발을 위해서 주로 사용되던 라이브러리는 jQery 였습니다. jQuery 는 브라우저에 있는 DOM 을 제어하고 이벤트를 등록하는 작업들을 편리하게 수행할 수 있도록 도와주었습니다. 하지만,...

Browser Render Test - Reflow, Repaint, dev Tools 💡 브라우저의 Reflow 와 Repaint 를 개발자 도구로 확인해봅니다. 1. 브라우저 렌더링 프로세스 일반적으로 웹을 개발할 때 세 가지 언어 HTML, CSS, Javascript 를 사용합니다. 작성된 각각의 파일들은 브라우저를 통해서 사용자들에게 보여집니다. 소스 코드들이 잘 갖춰진 형태의 웹 페이지로 만들어지는 과정을 브라우저...

부스트 컨퍼런스 2022 후기 💡 후기라고 쓰고 기행이라 읽습니다. 네이버 부스트캠프에서 주관하는 부스트 컨퍼런스 2022에 참석했습니다. 부스트캠프 멤버십 (이하 ‘멤버십’) 과정에 있으면서 처음이자 마지막이 될 오프라인 이벤트라고 생각해서 바로 신청했었습니다. 부스트 컨퍼런스 2022는 다음과 같이 세 가지 파트로 구성되어 있습니다. 웹·모바일 분야의 학습자 (이하 ‘캠퍼’)가 연사가 되어 개발 중에 겪었던...

Tagged Templates 💡 Javascript 의 Template Literals 를 발전시켜서 함수로 파싱하여 사용할 수 있습니다. 자바스크립트에서는 ES6 부터 백틱 ( ` ` ) 을 사용하여 문자열을 표현할 수 있습니다. 플레이스 홀더 ( ‘${ }’ ) 를 사용하면 추가적으로 문자열 안에 변수를 담을 수도 있습니다. const today = new Date(); console.log(`Today is ${today}`);...