전체 글(22)
-
Next Script 컴포넌트 코드 읽어보기
들어가며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 // ..
2024.05.20 -
React Server API 알아보기
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이 렌더된..
2024.05.19 -
널리 웹 접근성 강의 (KWCAG 24가지 항목)
널리 강의 정리본 웹 접근성이란- 접근성이란? 접근하는 정도를 말한다. 사전적 의미로는 사용자가 어떠한 제품이나 서비스 등에 접근해 편리하게 이용할 수 있는 정도를 뜻한다.- 그렇다면 웹 접근성이란? 어떠한 사용자(장애인, 노인)가 어떠한 기술환경에서도 전문적 능력 없이 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것- 간단히 정리하면 모든 사용자, 모든 기기, 모든 정보- 왜 접근성을 준수해야 할까? 1) 장애인차별금지법 장애 환경- 웹의 창시자의 말: 웹의 힘은 보편성에 있다. 장애에 구애 없이 모든 사람이 접근할 수 있도록 하는 것이 웹의 필수 요소다.- 모든 사람에 장애를 가진 사람도 속함- 장애의 정의: 신체적 또는 정신적 결함이 있는 것뿐만 아니라 정보를 얻지 못하도록 방해..
2024.05.13 -
테스트 알아보기 (Unit, E2E 그리고 Snapshot, Visual Regression)
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를 추적하여 오류 메세지를 출력한다. 위의 예제..
2024.05.09 -
SEO 알아보기 (feat. Dynamic Rendering, React-snap)
들어가며 SEO는 Search Engine Optimization의 약자로 검색엔진에서 더 찾기 쉽도록 사이트를 개선하는 프로세스이다. 나한텐 너무 많이 듣고 자주 말해서 마치 잘 알고 있다고 착각이 들지만, 막상 누군가에게 설명하려고 하면 한마디도 나오지 않는 주제이다. 가볍게 그 개념이라도 공부해보고자 한다. 참고로 구글을 기준으로 학습하려고 하며, 해당 문서를 참조하려고 한다. 구글 검색의 작동 방식구글 검색은 웹 크롤러라는 소프트웨어를 사용하는 완전히 자동화된 검색엔진이다. 웹 크롤러는 정기적으로 웹을 탐색하여 구글 색인(index)에 추가할 페이지를 찾는다. 실제로 구글 검색결과에 포함된 페이지의 대부분은 사이트 소유자가 사이트를 검색결과에 포함하기 위해 직접 제출한 것이 아닌, 구글 웹 크롤..
2024.05.05 -
웹 성능 지표
웹 성능 지표에는 어떤 것들이 있을까?가장 유명하고 자료도 가장 방대한 라이트하우스를 기준으로 웹성능 지표를 학습해보고자 한다. 성능 말고도 접근성, PWA, SEO에 대한 측정도 가능하다고 한다. 아래는 라이트하우스에서 측정 기준에 대한 가중치를 나타낸 표이다 (버전 10기준). 들어본 지표도 있고, 처음 보는 지표도 있다. 하나하나 조금씩 알아가보자. FCP (First Contentful Paint)FCP는 사용자가 페이지로 이동한 후 브라우저가 첫 번째 DOM 컨텐츠를 렌더링하는 데 걸리는 시간을 측정한다. 페이지의 이미지, 흰색이 아닌 , SVG는 DOM 컨텐츠로 간주되면 iframe 안의 모든 요소는 포함되지 않는다. 참고로 라이트하우스는 HTTP 아카이브의 실제 데이터를 기반으로 성능 지표..
2024.05.02