OTTER-LOG

w3c validator이란?

w3c validator 은 소스파일 또는 url을 확인하여 브라우저에 제대로 표현되고 있는지 마크업에는 오류가 없는지를 확인해주는 사이트입니다. 이번, 블로그 프로젝트를 진행하면서 점점 컴포넌트가 많아지면서 해당 마크업이 맞는지 확인하는 과정이 까다로웠는데 해당 사이트를 통해 마크업의 오류를 점검할 수 있었습니다.

위의 경로에서 소스코드를 직접 입력, 업로드 또는 url을 입력하는 방식으로 확인할 수 있습니다.

저같은 경우에는 다음과 같은 문제점들이 확인되었습니다.

문제점 개선하기

span

filterOption 컴포넌트를 작성할때, 너무 갑작스럽게 만드는 바람에 span 태그에 onClick 으로 router 를 이동하는 방법으로 설정해 두었는데 해당 부분에서 오류가 발견되었습니다. ~~너무 당연한 부분이었으나 해당 컴포넌트를 만들 때에 정신이 너무 없었습니다.~~

// 수정전

const FilterOption = (props: any) => {
	...
  return (
    _**<span**_
      className={`cursor-pointer border border-l-0 px-3 py-2 text-sm font-bold italic first:border-l hover:bg-deepGray md:text-lg ${
        filterBy && filterBy === value && "bg-deepGray"
      }`}
      _**onClick={handleClick}**_
    >
      {value.toUpperCase()}
    _**</span>**_
  );
};

// 수정 후

const FilterOption = (props: any) => {
  const router = useRouter();
  const { filterBy } = router.query;
  const { value } = props;

  const nextQuery = {
    pathname: "/post",
    query: {
      filterBy: filterBy === value ? undefined : value,
    },
  };

  return (
    <CustomLink
      href={nextQuery}
      shallow={true}
      className='`cursor-pointer ${ filterBy && filterBy === value && "bg-deepGray" border border-l-0 px-3
      py-2 text-sm font-bold italic first:border-l hover:bg-deepGray md:text-lg'
    >
      {value.toUpperCase()}
    </CustomLink>
  );
};

span 태그의 의미가 없어져, span 태그를 제거하고 만들어둔 Link 태그로 대체했습니다.

Icon

깃허브 Icon 컴포넌트 태그에서 오류가 발생했습니다. 민망하게도 오타가 있었기 때문입니다. _black 를 blank 로 수정했습니다.

또한 이를 수정하면서 target 특성에 대해서도 정리했습니다.

• _blank 는 기본속성이며, 새 창으로 연결됩니다.
• blank는 기본속성은 아니지만, 브라우저의 새 탭으로 연결됩니다.

저는 이중 blank 로 적용했습니다.

time

저는 time 태그를 통해 해당 아티클이 작성된 시간을 제공하고자 하였습니다. 사실 time 태그에 대해서 제대로 알아보지 않고 그냥 사용했었는데 해당 부분이 문제가 되었습니다.

mdn 문서에 따르면 time 태그는 다음과 같이 사용합니다.

<time datetime="2018-07-07">July 7</time>

// 저는 여기 datetime 항목이 아예 빠져 있었습니다.

다행히, Date 타입으로 받아오는 last_mod 프로퍼티가 존재해 다음과 같이 수정했습니다.

// '2022-07-05' 이러한 `Date` 타입을 가져옵니다.

<time className='font-semi-bold text-xs' dateTime={lastMod.toString()}>
				// string 타입만을 받을 수 있어 toString()을 사용했습니다.
          {publishedAt}
</time>

개선 확인하기

위의 사항을 정리하고, 다시한번 발리데이터를 이용해보니 오류가 없음을 확인할 수 있었습니다.

사람이 마크업을 할 때에 때때로 실수가 발생할 수 있다고 생각합니다. 또는 제가 한 마크업이 잘 되었는지 모를때도 있습니다. 그럴 때에 w3c validator 를 사용하면 이처럼 간단히 마크업을 체크해볼 수 있습니다.

Ref

• w3c validator