레포지토리 설명
타입스크립트 웹사이트 의 코드베이스 관리를 위한 오픈소스 레포지토리
PR링크
문제 상황
•
비교를 위해 코드가 나란히 배치된 화면에서 일부가 잘리게 나오고 있음 (모바일 사이즈)
•
출퇴근길에 타블렛으로 공부하는 나에게는 곤란한 부분이라 수정하기로 하였다
원인 파악
•
막상 레포를 clone하여 살펴보니 해당 버그는 단 두 개의 페이지에서만 쓰이고 있었다
•
.full-width-table 이라는 셀렉터로 다른 한 개의 페이지는 deprecated
•
나처럼 작은 화면에서도 살펴보길 원하는 사람을 위해 overflow 속성을 적용
해결방안
•
overflow 속성 적용을 위해 table-container라는 새로운 부모 요소를 만들어 주었다
// packages/documentation/copy/en/handbook-v2/Everyday Types.md
<div class='table-container'>
<table class='full-width-table'>
(...)
</table>
</div>
JavaScript
복사
•
해당 요소에는 overflow-x: auto를 적용해 초과영역 발생 시 스크롤바를 생성하였다
// packages/typescriptlang-org/src/templates/markdown.scss
div.table-container {
overflow-x: auto;
display: table;
}
Scss
복사
•
작업 과정에서 레이아웃이 display: table 과 잘 맞다고 생각했다. 오히려 PC 사이즈에서 레이아웃이 틀어지는 현상이 발생한 점을 리뷰를 통해 알게되어 추가 커밋을 통해 제외하였다
// packages/typescriptlang-org/src/templates/markdown.scss
div.table-container {
// ...
display: table;
}
JavaScript
복사
느낀점
•
작업 과정에서 display: table 에 대해 공부하였고, 테이블 내 컨텐츠가 증가할 가능성이 굉장히 낮은 현재의 구성에는 불필요하다는 것을 알게되었다. (2개인 경우도 현재 기준 1페이지 뿐이고, 코드를 비교하는 내용의 특성상 3개 이상의 코드를 가로로 나란히 보여주는 경우는 거의 없을 것이다.)
•
PR을 올리면서 자연스럽게 확인용 페이지가 배포되기 때문에 협업 시 굉장히 유리하다는 생각이 들었다. 지금 회사에서 하고 있는 프로젝트도 고도화 단계가 되면 비슷하게 배포 파이프라인을 구성하고 싶다는 생각이 들었다.
•
PR 리뷰 과정에서 웹사이트 관리를 하는 별도의 인력이 아니라 마이크로 소프트에서 TypeScript 컴파일러와 pnpm 패키지 매니저를 개발하는 Jake Bailey 라는 분이 직접 사이트를 관리한다는 것을 알게 되었다. PR 과정에서 직접 리뷰를 받을 수 있어 의미있는 경험이 되었다. 
