Front End
웹 접근성
🌐웹 접근성웹 접근성을 갖추면 얻을 수 있는 효과1. 사용자층 확대2. 다양한 환경 지원3. 사회적 이미지 향상웹 컨텐츠 접근성 지침인식의 용이성(Perceivable)운용의 용이성(Operable)이해의 용이성(Understandable)견고성(Robust)WAI-ARIAWAI-ARIA의 필요성WAI-ARIA 사용법역할(Role)상태(State)속성(Property)웹 접근성웹 접근성은 어떤 사람이든 웹 페이지에 있는 컨텐츠를 동등한 수준으로 접근하고 이해할 수 있도록 보장하는 것을 뜻한다. 일반적으로는 장애인, 고령자 등 신체적인 제약을 토대로 이야기하지만 일반 사용자들도 갑작스런 입/출력장치에 대한 제약 상황으로 인해 불편함을 겪을 수 있으며, 결국 웹 접근성의 궁극적인 목적은 어떤 상황이든, 어떤..
SEO
🌐SEO (Search Engine Optimization)On-Page SEOOff-Page SEOSEO에 영향을 미치는 요소1. 2. 3. 4. 컨텐츠SEO (Search Engine Optimization)SEO(Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진의 작동 방식에 맞게 웹 페이지를 최적화해주는 작업을 의미하며, SEO를 통해 검색 엔진에서 웹 페이지를 보다 더 상위에 노출될 수 있게끔 만들 수 있다. SEO는 크게 On-Page SEO와 OFF-Page SEO 두 가지로 나뉜다.On-Page SEO페이지 내부에서 진행할 수 있는 SEO로, 제목과 콘텐츠, 핵심 키워드의 배치, 효율적인 HTML 요소 사용법 등을 이용하는 방법이다., 요소를 이용해 검색 키..
Custom Component (Styled Components, Storybook)
Component Driven Development (CDD)Styled ComponentsStyled Components 설치Styled Components 문법컴포넌트 만들기컴포넌트 재활용Props 활용Props로 조건부 렌더링하기Props 값으로 렌더링하기전역 스타일 설정StorybookStorybook 설치Storybook 기본 사용법Component Driven Development (CDD)Component Driven Development는 디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 부품단위로 만들어 나가는 개발방법을 의미한다. 페이지 전체에 적용될 수 있는 작은 요소들(버튼, 토글, 모달 등)을 사전에 먼저 컴포넌트화 하여 해당 요소가 필요할 때 재사용하고, 이런 컴포넌트..
useRef
DOM reference를 활용할 수 있는 useRef예제 1 : focus예제 2 : media playbackDOM reference를 활용할 수 있는 useRefReact만 가지고 거의 대부분의 프론트엔드 요구사항을 구현할 수 있어 DOM 지식이 필요없다고 생각할 수 있지만, React로 모든 개발 요구 사항을 충족할 수는 없다. 아래처럼 DOM 엘리먼트의 주소값을 활용해야 하는 경우 특히 그렇다.focustext selectionmedia playback애니메이션 적용d3.js, greensock 등 DOM 기반 라이브러리 활용React는 이런 예외적인 상황에서 useRef로 DOM 노드, 엘리먼트, 그리고 React 컴포넌트 주소값을 참조할 수 있다. 아래의 예시코드를 보자.const 주소값을_..
UI 디자인 패턴 구현
Modal기능 구현Tab기능 구현Tag기능 구현Toggle기능 구현Autocomplete기능 구현Modalimport { useState, useRef } from "react"; import styled from "styled-components"; export const Modal = () => { const [isOpen, setIsOpen] = useState(false); const refBackdrop = useRef(null); const openModalHandler = (event) => { event.preventDefault(); setIsOpen(!isOpen); }; return ( {isOpen ? "Opened!" : "Open Modal"} {isOpen ? ( { if (e..