포트폴리오 콜렉션 사이트 개발기

키워드window.screen.width오늘 제가 발견한 이슈인 fingerprinting에 대해 이야기하기 전에 위 이슈가 나오게 된 배경 설명을 먼저 하고자 합니다.포트폴리오 콜렉션 프로젝트는 위와 같은 레이아웃으로 구성되어 있습니다.상단의 1fr 1fr auto

Second는 코드 블럭으로 사용할 것입니다.First는 Second에 있는 코드의 실행 결과를 보는 곳입니다.이를 위해서 Second에 표현되는 코드들이 Syntax hightligting이 되어야 가독성이 올라갈 것이라 생각했습니다.찾아보던 중, highlight.

한 파일에 있는 코드 텍스트를 읽어들여 웹페이지에 출력하려면 다음의 과정이 필요했습니다.markdown 파일 생성Backtick(\`)을 이용하여 코드 템플릿 영역을 만들고 프로그래밍 언어를 지정예시 코드를 코드 템플릿 영역에 작성예시 코드를 출력할 컴포넌트에서 타겟

App.tsx에 작성된 메인 레이아웃 부분의 코드는 원래 아래와 같았습니다.First, Second, Third는 각각 그리드 레이아웃에서 열(column)을 담당하고 있습니다.이 열은 article 태그로 감싸져있는데 위 코드를 보면 반복되는 부분이 보입니다. 위 코