분류 전체보기
Flux 패턴
🌐Flux 패턴등장 배경Flux 패턴?Flux 패턴Flux 패턴은 2014년 페이스북 F8 컨퍼런스에서 발표된 아키텍처로, CSR 어플리케이션을 만들기 위해 사용하는 디자인 패턴이다. 데이터 흐름을 일관성 있게 관리하여 예측가능성을 높이기 위해 고안되었다.등장 배경기존 어플리케이션이 보편적으로 사용하던 디자인 패턴은 MVC 패턴이었다. MVC는 Model, View, Controller의 약자로, Model에 데이터를 저장하고 Controller를 이용해 Model의 데이터를 관리한다. Model의 데이터가 변경되면 View로 전달되어 사용자에게 보여지고, 사용자 역시 View를 통해 데이터를 입력하면 Model을 업데이트 할 수 있게 된다. React의 State Hook을 대입해서 생각해보면, Mod..
웹 접근성
🌐웹 접근성웹 접근성을 갖추면 얻을 수 있는 효과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 주소값을_..