토스에서 진행한 세션을 참고해, 직접 스크린리더 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..
자바스크립트의 원시타입과 참조타입 원시타입 String Number Bigint Boolean null undefined Symbol (ES6) 참조타입 Object Array function 자바스크립트의 작동원리 아래는 JS 엔진을 추상화한 그림이다. 콜스택 - 함수의 호출과 관계되는 지역변수, 매개변수 저장 메모리힙 - 사용자에 의해 직접 동적으로 할당되고 해제 원시타입의 데이터 할당 변수에 할당될 때 let foo = 10; // 변수 foo에는 10이 저장된 콜스택 메모리의 주소값이 저장 변수의 값은 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 재할당될 때 let foo = 10; foo = 20; 변수의 값은 새로운 콜스택 영역에 저장 변수에는 해당 콜스택 영역의 주소가 저장 ..
호이스팅이란? 스코프 안에 선언한 것들을 실행 전 스코프의 최상단으로 끌어올리는 것 .. 이 아니라! 끌어올려진 것 같은 현상 호이스팅의 대상 자바스크립트의 모든 선언에만 호이스팅이 일어난다. 즉, 할당에는 호이스팅이 일어나지 않는다. 변수 생성 과정 [1] 선언 단계(Declaration phase) 변수를 실행 컨텍스트의 변수 객체에 등록한다. 이 변수 객체는 스코프가 참조하는 대상이 된다. [2] 초기화 단계(Initialization phase) 변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다. 변수는 undefined로 초기화된다. [3] 할당 단계(Assignment phase) undefined로 초기화된 변수에 실제 값을 할당한다. 변수 생성 과정은 어떻게 진행되는가? 함수 선언문..
Effective Typescript 1장, 2장을 읽고 선정한 인터뷰 질문과 스터디 내용입니다. 내용요약 깃허브 저장소 1장 요약 링크 2장 요약 링크 인터뷰질문 Q. 프로젝트에 타입스크립트를 도입한 이유? A. 타입스크립트를 도입한 이유는 개발 생산성 향상입니다. 협업 시 문맥 파악이 용이하고 자동완성을 통해 효율성을 높일 수 있었습니다. 또한 컴파일 타임에 타입을 체크하는 정적 타이핑을 지원하기 때문에 에러를 사전에 방지할 수 있었습니다. Q. type을 선언하게 되면 코드가 늘어나는데, 이 부분에 대한 성능 처리? A. 타입스크립트는 자바스크립트 런타임 성능에 영향을 주지 않습니다. JS로 컴파일되는 과정에서 타입이 제거되기 때문입니다. Q. any타입을 지양해야 하는 이유 A. 프로젝트 중 느..
0. 왜 자동화를 시작하게 되었나 이전 프로젝트에서는 PR 하나마다 스크린샷과 영상을 첨부했으나, GUI와 기능만을, 그것도 수동으로 확인할 수 있었다. 각자의 개발환경이 다르다 보니 빌드 에러를 제대로 확인하지 않고 PR이 병합되는 상황이 발생했다,, ➡️ CI와 CI 자동화의 필요성 사실 vercel에서는 commit과 PR을 기준으로 한 CD 자동화를 코드 없이도 제공한다. 하지만 문제는 난 거지이고... 팀 플랜을 이용하기엔 돈이 아깝다는 것이다. (즉 organization으로 판 레포를 직접 배포할 수 없었다.) 그래서 다들 많이 사용하는 방법인, 팀 레포를 개인 레포로 fork해온 다음 개인레포를 배포하는 방법을 선택했는데, 이게 차아아암 귀찮다. 왜냐하면 포크한 내 레포는 당연하게도 항상 ..
