vendor prefix란? CSS를 작성하면서 위와 같은 코드를 본 적이 있을 것이다. -webkit/-moz 등이 바로 벤더 프리픽스이다. 벤더 프리픽스(vendor prefix)란, 주요 웹 브라우저 공급자(vendor)가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹브라우저에 해당 기능을 알리기 위해 사용하는 접두사(prefix)를 의미한다. 주요 브라우저와 vendor prefix 브라우저 prefix Chrome, Safari 등 크로미움 기반 브라우저 -webkit 파이어폭스 -moz 엣지 (크로미움 이전) -ms 오페라 -o 지금까지는 남발했던 vendor prefix 나는 지금까지 이렇게 벤더 프리픽스를 활용했다. caniuse 를 활용해서 확인 (특이한 속성 이용할 경우) 크로스 브..
토스에서 진행한 세션을 참고해, 직접 스크린리더 UX 개선을 도입한 과정을 적었습니다. Accessible Name 스크린리더가 요소를 포커스했을 때 읽는 값 author - 특별한 속성을 사용해서 정하는 값 aria-label aria-labelledby alt ( 태그의 경우) contents - 요소의 텍스트 값 우선순위 - author > contents html 태그의 속성들 role 시멘틱태그는 암시적으로 role 을 갖고 있음 - role=“button” - role=“link” - role=“checkbox” Children Presentational 특정 role이 가진 특징 자식 요소의 Accessible Name 을 모아서 contents 로 사용 자식 요소를 스크린리더가 읽지 않도록..
웹 표준과 웹 접근성 웹 표준 - 어떤 환경(운영체제, 브라우저)에서도 이용할 수 있는 웹페이지를 만드는 방법 W3C에서 권고하는 웹에서 표준적으로 사용되는 기술이나 규칙 웹 접근성 - 어떤 사람이든 이용할 수 있는 웹페이지를 만드는 방법 웹 표준의 장점 호환성, 접근성 향상, SEO향상, 유지보수 용이 웹 표준을 준수하는 방법 1. DOCTYPE 선언 웹 페이지의 최상단에 DOCTYPE을 선언하여 웹 페이지가 어떤 버전의 HTML을 사용하는지 명시한다. DOCTYPE을 제대로 선언하지 않는다면? 각 DOCTYPE 별로 유효한 html 태그 상이 브라우저가 비표준 방식으로 해석하게 된다 2. 시멘틱 태그 사용 HTML5에서 새로 추가된 태그 "의미 있는" 태그를 활용하여 웹 페이지의 구조를 더욱 명확하게..
Effective Typescript 3장, 4장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 3장 요약 링크 4장 요약 링크 인터뷰질문 Q. 어떨 때 타입을 명시해야 하는가? A. 함수/메서드의 시그니처를 작성할 때, 객체 리터럴을 정의할 때, 함수의 반환값 Q. 제네릭이란? A. 타입을 마치 함수의 파라미터처럼 사용하는 것으로, 코드를 작성할 때가 아니라 코드가 수행될 때(런타임) 타입을 명시합니다. 여러 가지 타입에서 동작하는 컴포넌트를 생성하는 데에 유리합니다. Q. any와 unknown의 차이는? A. 둘 모두 모든 타입을 허용한다는 공통점이 있지만, unknown은 any와 다르게 다른 타입에 할당이 불가능하고, 타입 좁히기 없이 각 타입만의 연산들을 활용할 수 없습니다. 즉 u..
BFS 문제를 풀다가 JS에는 큐가 구현되어 있지 않다는 것을 알게 되었다 ^__^ 코딩테스트에서 큐가 필요한 상황이 오면 어떻게 해야 할까? 1. 시간복잡도 O(N) 시간제한이 널널할 때는 Array.shift() 를 사용하자. 큐의 pop과 동일한 기능을 한다. 하지만 배열의 원소를 하나씩 당기기 때문에 시간복잡도가 O(N)이다. 2. 시간복잡도 O(1) pop할 원소의 인덱스를 변수를 만들어 저장하자. let front = 0; while (front < queue.length) { const [x, y, z] = queue[top]; front += 1; /* ... */ } 인덱스를 옮김으로써 가장 앞의 원소가 어떤 것인지 판별할 수 있게 되었다. 실제 원소가 삭제되지는 않지만 FIFO 흉내내..
문제 https://www.acmicpc.net/problem/14940 14940번: 쉬운 최단거리 지도의 크기 n과 m이 주어진다. n은 세로의 크기, m은 가로의 크기다.(2 ≤ n ≤ 1000, 2 ≤ m ≤ 1000) 다음 n개의 줄에 m개의 숫자가 주어진다. 0은 갈 수 없는 땅이고 1은 갈 수 있는 땅, 2는 목표지점이 www.acmicpc.net 자바스크립트(node.js)로 풀이했습니다. 풀이과정 1차 시도 실패 이유 - 메모리 초과 갈 수 있는 모든 땅에 대해 bfs()를 다 돌림 -> visited는 bfs()를 호출할때마다 계속해서 할당 -> 메모리 초과 이뿐만 아니라 최단거리는 직전 땅의 거리 정보를 이용해 구할 수 있으므로 각 땅이 아니라 전체를 bfs() 돌리는게 맞다 for ..
자바스크립트의 원시타입과 참조타입 원시타입 String Number Bigint Boolean null undefined Symbol (ES6) 참조타입 Object Array function 자바스크립트의 작동원리 아래는 JS 엔진을 추상화한 그림이다. 콜스택 - 함수의 호출과 관계되는 지역변수, 매개변수 저장 메모리힙 - 사용자에 의해 직접 동적으로 할당되고 해제 원시타입의 데이터 할당 변수에 할당될 때 let foo = 10; // 변수 foo에는 10이 저장된 콜스택 메모리의 주소값이 저장 변수의 값은 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 재할당될 때 let foo = 10; foo = 20; 변수의 값은 새로운 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 ..
문제 https://www.acmicpc.net/problem/18111 18111번: 마인크래프트 팀 레드시프트는 대회 준비를 하다가 지루해져서 샌드박스 게임인 ‘마인크래프트’를 켰다. 마인크래프트는 1 × 1 × 1(세로, 가로, 높이) 크기의 블록들로 이루어진 3차원 세계에서 자유롭게 www.acmicpc.net 자바스크립트(node.js)로 풀이했습니다. 최종코드 const fs = require('fs'); const filePath = process.platform === 'linux' ? '/dev/stdin' : './input.txt'; const input = fs.readFileSync(filePath).toString().trim().split('\n'); const [n, m, b..
