백준 6198 < 옥상 정원 꾸미기 > JavaScript
·
✏️ Study/⚙️ 알고리즘 & 자료구조
📍문제 링크https://www.acmicpc.net/problem/6198 6198번: 옥상 정원 꾸미기문제 도시에는 N개의 빌딩이 있다. 빌딩 관리인들은 매우 성실 하기 때문에, 다른 빌딩의 옥상 정원을 벤치마킹 하고 싶어한다. i번째 빌딩의 키가 hi이고, 모든 빌딩은 일렬로 서 있고 오른쪽으www.acmicpc.net 📍알고리즘 분류- 자료구조 - 스택 📍문제 풀이문제 요구사항은 쉽지만, N이 최대 8만에 달하기 때문에, O(N^2) 로는 해결할 수 없다 - 시간복잡도를 낮추기 위한 방법이 필요하다 배열을 순회하며 stack 길이만큼 반복문 수행 스택의 최신 값이 현재값보다 같거나 작으면, pop 실행, 아니면(가려져서 안보이므로) 종료 반복문 종료후 스택의 길이를 답에 더한다 그리고 스택에 현재..
[웹 접근성] 2. 웹 접근성 지침 (4) 유저의 쉬운 인지 제고
·
✏️ Study/🕸️ 웹 개발 공통
부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍13. 깜빡임과 번쩍임 사용 제한✅광과민성 발작- 1997년 일본에서 포켓몬스터 애니메이션의 특정 에피소드를 보고 750명의 어린이들이 구토, 어지럼증, 경련 등을 일으킴- 이는 밝은 빛의 화면 점멸이 연속되는 장면을 보고 일어난 광과민성 발작 때문으로 밝혀짐 ✅과도한 깜빡임과 번쩍임 방지- 점멸 컨텐츠가 차지하는 면적이 화면 전체 면접의 10% 미만이 되게 조정- 시간을 3초 미만으로 제한- 사전에 경고하며, 중단 가능한 수단을 제공 ✅PEAT- 컨텐츠가 초당 3~50회 깜빡이는지를 확인할 수 있는 프로그램https://trace.umd.edu/peat/ Photosensitive Ep..
#39 any를 구체적으로 변형해서 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리📍요약✅any보다 더 정확한 모델링을 위해,any[]{[key: string]: any}() => any 처럼 구체적인 형태를 사용해야 한다 📍any✅자바스크립트에서 표현할 수 있는 모든 값을 아우르는 매우 큰 범위의 타입- 원시 값- 정규식- 클래스- DOM 엘리먼트 등을 포함 ✅any 타입의 값을 그대로 정규식이나 함수에 넣으면 안됨- 아래 코드에서 any 대신 any[] 를 사용하여 배열이 아닌 경우를 걸러낼 수 있다 function getLengthBad(array: any) { // Don't do this! return array.length;}function getLength(array: any[]) { // 차라리 이렇게 ret..
[웹 접근성] 2. 웹 접근성 지침 (3) 유저 편의성 관련
·
✏️ Study/🕸️ 웹 개발 공통
부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍8. 키보드 사용 보장✅모든 기능은 키보드만으로도 사용할 수 있어야 한다 ✅마우스 오버 시 사용되는 아래 기능들에 대해서도 키보드 접근 시에도 동일한 기능이 수행되게 구현해야 한다- 마우스 오버 시 GNB의 서브메뉴 노출 기능- 자동 롤링 콘텐츠, 레이어를 노출하는 버튼 ✅ 또는 처럼 focus를 받을 수 없는 엘리먼트에 마우스 이벤트를 적용하면 안됨- focus를 받을 수 없으면 키보드로 접근이 불가하기 때문에 나 으로 대체하는 것이 좋다- 그런데, 엘리먼트에 href 어트리뷰트가 없으면 키보드 접근이 불가하므로, 반드시 사용해야 함- href 어트리뷰트가 있어도, onfocus..
백준 14891 < 톱니바퀴 > JavaScript
·
✏️ Study/⚙️ 알고리즘 & 자료구조
📍문제 링크 https://www.acmicpc.net/problem/14891 14891번: 톱니바퀴 총 8개의 톱니를 가지고 있는 톱니바퀴 4개가 아래 그림과 같이 일렬로 놓여져 있다. 또, 톱니는 N극 또는 S극 중 하나를 나타내고 있다. 톱니바퀴에는 번호가 매겨져 있는데, 가장 왼쪽 톱니바퀴 www.acmicpc.net 📍알고리즘 분류 - 구현 - 시뮬레이션 📍문제 풀이 - 톱니바퀴 동작 모델링하는 어려웠던 구현 문제 - 실제 톱니바퀴처럼 맞물려서 돌아가는 것이 아니라, 하나가 회전하면 맞닿은 톱니바퀴는 회전하지 않을 수도 있다 - 회전하는 톱니바퀴는 deque 으로 구현 📍코드 (JavaScript) const readline = require("readline"); const rl = read..
#38 any 타입은 가능한 좁은 범위에서만 사용하기
·
✏️ Study/🧽 JS & TS
이펙티브 타입스크립트 (댄 밴더캄 지음) 를 읽고 정리더보기5장 any 다루기#38 any 타입은 가능한 좁은 범위에서만 사용하기 📍요약✅any 의 사용 범위를 최소한으로 좁혀야 한다✅함수의 반환 타입이 any이면 절대 안된다 -> 다른 코드에 악영향을 미침✅강제로 타입 에러를 제거하려면 any 대신 @ts-ignore가 낫다 📍함수의 매개변수로 any 사용할 때- 함수의 매개변수로 any를 사용해야 할 때는매개변수 as any 형태로 사용하여 다른 코드에 영향이 없도록 하는 것이 좋다 interface Foo { foo: string; }interface Bar { bar: string; }declare function expressionReturningFoo(): Foo;function proce..
[웹 접근성] 2. 웹 접근성 지침 (2) 다양한 시각적 대체 수단
·
✏️ Study/🕸️ 웹 개발 공통
부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더 📍2. 자막 제공- 멀티미디어 컨텐츠에 포함된 음성 및 대사와 동등하게 대체 수단 제공 필요- 예) 청각 장애인을 위한 자막 제공 📍3. 색에 무관한 콘텐츠 인식- 콘텐츠는 색에 관계없이 인식될 수 있어야 함- 예를 들어 차트를 표현할 때, 단순한 색으로 범례를 나누면 색약, 색맹 등의 사람들에게 불편을 끼칠 수 있음- 패턴이나 굵기를 활용하여 나타내야 함 - 또한 슬라이드 버튼을 나타날 때도, 색 뿐만 아니라 모양으로 구분해야 한다 - 페이지네이션을 구현할 때에도 단순한 색 이외에 테두리, 굵기 등을 사용  📍4. 명확한 지시 사항 제공- 모양, 위치, 방향, 색, 크기 등으로만 정보..
[웹 접근성] 2. 웹 접근성 지침 (1) 개요, alt
·
✏️ Study/🕸️ 웹 개발 공통
부스트코스 웹 접근성 이해더보기1. 웹 접근성의 이해 2. 웹 접근성 지침 3. 웹 접근성 진단도구와 스크린 리더📍웹 접근성 지침✅WCAG(Web Content Accessibility Guidelines)- W3C에서 발표한 웹 콘텐츠 접근성 지침- 1997년 5월 처음 제정 우리나라는? => 한국형 웹 콘텐츠 접근성 지침✅KWCAG(Korean Web Content Accessibility Guidelines)- 23년 3월 14일 현재, 2.1버전이 최신 (KWCAG 2.1)- 크게 24가지 항목으로 나눌 수 있음📍상세 지침📍1. 적절한 대체 텍스트 제공✅alt 어트리뷰트로 대체 텍스트 제공- 스크린 리더 사용자는 alt 값을 오디오로 들을 수 있다- 텍스트가 있는 이미지의 대체 텍스트를 이미..