프론트엔드42 WAI-ARIA WAI-ARIA WAI(Web Accessibility Initiative) 웹 표준을 정하는 W3C에서 웹 접근성을 담당하는 기관 ARIA(Accessible Rich Internet Applications) 장애가 있는 사람들이 웹 콘텐츠와 웹 응용 프로그램에 더 쉽게 액세스할 수 있도록 해주는 즉, 웹 접근성을 갖추기 위한 기술 RIA(Rich Internet Applications) 따로 프로그램을 설치하지 않아도 웹 브라우저를 통해 사용할 수 있는 편리성 + 프로그램을 직접 설치해서 사용하는 것 처럼 빠른 반응의 사용자 인터페이스를 동시에 가지는 웹 애플리케이션. SPA를 의미하는 경우가 많다. WAI-ARIA의 필요성 HTML요소에 의미를 부여한 시멘틱 요소를 사용하는 것만으로도 웹 접근성을 .. 2023. 4. 27. 웹 접근성 웹 접근성의 목적 어떤 상황이든, 어떤 사람이든 정보를 제공받지 못하는 경우가 없도록 하는 것 웹 접근성의 실태 우리나라는 높은 정보화 수준에도 불구하고 웹 접근성의 수준은 높지 않다. 2021년 기준, 일반 국민의 정보화 수준을 100점이라고 할 때, 장애인/고령층 등 디지털 취약 계층의 정보화 지수는 75.4점이었고, 우리나라 웹 사이트들의 웹 접근성 평균 점수는 100점 만점에 60.8점이었다. 모든 공공기관과 법인의 웹 사이트는 웹 접근성을 의무적으로 갖추도록 하는 법이 있음에도 불구하고, 다양한 장애 상황으 ㄹ모두 고려하여 웹 접근성을 확보한 경우는 찾아보기 어렵다. 특히 규모가 작은 웹 사이트에서 웹 접근성을 갖춘 사례는 더욱 찾기 힘들다. 웹 접근성을 갖추면 얻을 수 있는 효과 1. 사용자층.. 2023. 4. 27. DOM(Document Object Model) DOM(Document Object Model) DOM은 Document Object Model의 약자로, HTML 요소를 Object(JavaScript Object)처럼 조작할 수 있는 Model이다. 즉, JavaScript를 사용할 수 있다면, DOM을 이용하여 HTML을 조작할 수 있는 것이다. DOM을 이용하면 HTML로 구성된 웹 페이지를 동적으로 움직이게 만들 수 있으며, 소셜미디어 등에서 새롭게 생성되는 게시물을 저장하고 분류하는 작업을 구현할 수 있다. CRUD(Create, Read, Update and Delete) 앞으로 어떤 종류의 개발이나 컴퓨터 언어를 배우더라도, 당장 모든 속성과 메서드를 바로 외울 수는 없다. 그러므로 가장 중요한 CRUD를 먼저 이해하는 것이 새로운 언어.. 2023. 4. 26. Redux - 기초 Redux는 컴포넌트에서 상태를 분리하여 따로 관리할 수 있게해주는 상태 관리 라이브러리이다. 상태 변경 로직을 컴포넌트로부터 분리하면 표현에 집중한, 보다 단순한 함수 컴포넌트로 만들 수 있게된다. Redux의 상태관리 메커니즘 1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성된다. 2. 이 Action 객체는 Dispatch 함수의 인자로 전달된다. 3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해준다. 4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경한다. 5. 상태가 변경되면, React는 화면을 다시 렌더링 한다. Store Store는 상태가 .. 2023. 4. 24. React - Styled Components Styled Components CSS in JS 라이브러리를 사용하면 CSS도 쉽게 Javascript 안에 넣어줄 수 있으므로, HTML + JS + CSS까지 묶어서 하나의 JS파일 안에서 컴포넌트 단위로 개발할 수 있게 된다. 이러한 CSS in JS 라이브러리 중에서 현재 가장 있기 있는 라이브러리가 Styled Components이다. Styled Components 문법 1. 컴포넌트 만들기 ES6의 Templete Literals 문법(백틱 `)을 사용한다. 2. 컴포넌트를 재활용해서 새로운 컴포넌트 만들기 컴포넌트를 선언하고 styled( )에 재활용할 컴포넌트를 전달해주면 된다. 3. Props 활용하기 Styled Component로 만든 컴포넌트도 React 컴포넌트처럼 props를.. 2023. 4. 19. JavaScript - 다양한 메서드들 Math 내장 객체 메서드 Math.floor( ) : 괄호 안의 숫자를 내림하여 반환 Math.ceil( ) : 괄호 안의 숫자를 올림하여 반환 Math.round( ) : 괄호 안의 숫자를 반올림하여 반환 Math.abs( ) : 괄호 안의 숫자의 절대값을 반환 Math.sqrt( ) : 괄호 안의 숫자의 루트값을 반환 Math.pow(2, 5) : 2의 5승인 32를 반환 문자열 주요 메서드 .toLowerCase( ) : 문자열을 소문자로 변경 .toUpperCase( ) : 문자열을 대문자로 변경 .concat( ) : 문자열 연결 연산자 +처럼 문자열을 이어 붙임 .indexOf( ) : 문자열 내에 특정 문자가 몇 번째에 위치하는지 확인. 찾는 문자가 2개 이상일 경우 가장 앞에 있는 문자의.. 2023. 4. 18. 이전 1 2 3 4 5 6 7 다음
