들어가며 최근에 접근성을 학습하며 뭐랄까 반성을 많이 하게 됐다. 다른 사람에게 도움을 주는 사람이 되고 싶어 (계기가 돈이든, 개인적 만족이든 상관 없이 다른 사람을 돕는게 인간에게 주어진 숙제라 생각했다. 물론 군대에서 한 생각이다.) 프론트 개발자가 됐는데 웹의 보편적인 가치를 무시한 채 너무 기술 그 자체에만 몰두했었다. 다양한 사람이 장애 환경에 구애받지 않고 서비스에 접근하는 것. 가장 중요한 가치를 잊은 채 코딩을 했던건 아닐까. 항상 본질을 잊지 말아야겠다. 선택지 오놀은 여러 페이지에 걸쳐 다양한 선택지를 골라야 한다. 기존에는 어떤 ARIA 태그도 사용하지 않았기에 시각 장애 사용자의 경우 스크린 리더를 통해 접근하면 각 선택지의 선택 여부를 알기 어렵다는 문제가 있었다. 따라서 다음과..

들어가며Next 공식문서에 Script태그를 보면 다음과 같은 설명이 나와있다.beforeInteractive: Load before any Next.js code and before any page hydration occurs.afterInteractive: (default) Load early but after some hydration on the page occurs.lazyOnload: Load during browser idle time.하지만 자꾸 제대로 이해했다는 느낌이 들지 않아서 직접 Next의 깃헙을 들어가 코드를 까봤다. 매번 라이브러리/프레임워크의 코드를 까보려고 시도할 때마다 실패했지만, 언젠간 늘겠지 하는 마음이다.  afterInteractive, lazyOnload // ..

RenderToStringreact-dom/server 모듈에서 제공하는 renderToString 메서드는 React 트리를 HTML 문자열로 렌더링한다. 자세히 알아보기 전에 간단한 API 사용법은 다음과 같다.// renderToString(reactNode, options?) // reactNode는 HTML로 렌더하려는 리액트 노드를 의미한다.// options는 서버 렌더에서 사용될 옵션들을 의미한다. // 옵션 중 identifierPrefix의 경우 hydrateRoot에 사용될 prefix와 같아야 한다.import { renderToString } from 'react-dom/server';const html = renderToString(); 위 예제에서 html 에는 App이 렌더된..

널리 강의 정리본 웹 접근성이란- 접근성이란? 접근하는 정도를 말한다. 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻한다.- 그렇다면 웹 접근성이란? 어떠한 사용자(장애인, 노인)가 어떠한 기술환경에서도 전문적 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것- 간단히 정리하면 모든 사용자, 모든 기기, 모든 정보- 왜 접근성을 준수해야 할까? 1) 장애인차별금지법  장애 환경- 웹의 창시자의 말: 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.- 모든 사람에 장애를 가진 사람도 속함- 장애의 정의: 신체적 또는 정신적 결함이 있는 것뿐만 아니라 정보를 얻지 못하도록 방해..

Unit Test 단위 테스트(Unit Test)는 함수나 메서드와 같이 하나의 작은 코드 단위를 테스트한다. 즉 특정 모듈이 목표한 기능을 올바르게 수행하고 있는지 검증하는 절차다. 중요한 점은 다른 코드들은 모두 잘 동작한다는 가정하에 해당 모듈이 잘 동작하는 지를 테스트 한다는 점이다. 가장 간단한 Jest 예제를 확인해보자.function sum(a, b){ return a + b;}it("a+b", () => { expect(sum(1, 3)).toBe(4);} toBe는 Jest의 matcher로, expect가 반환한 "expectation" 객체를 Object.is를 사용하여 테스트한다. Jest가 실행되면 실패한 모든 matcher를 추적하여 오류 메세지를 출력한다. 위의 예제..

들어가며 SEO는 Search Engine Optimization의 약자로 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스이다. 나한텐 너무 많이 듣고 자주 말해서 마치 잘 알고 있다고 착각이 들지만, 막상 누군가에게 설명하려고 하면 한마디도 나오지 않는 주제이다. 가볍게 그 개념이라도 공부해보고자 한다. 참고로 구글을 기준으로 학습하려고 하며, 해당 문서를 참조하려고 한다.  구글 검색의 작동 방식구글 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. 웹 크롤러는 정기적으로 웹을 탐색하여 구글 색인(index)에 추가할 페이지를 찾는다. 실제로 구글 검색결과에 포함된 페이지의 대부분은 사이트 소유자가 사이트를 검색결과에 포함하기 위해 직접 제출한 것이 아닌, 구글 웹 크롤..