회고
[우테코] 21편 : 오픈미션 15일차
| 서론
안녕하세요 팡일입니다!
오늘은 우아한테크코스 8기 프리코스의 오픈미션 15일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!
| 오늘 한 일
1) QA
QA 진행하기
받은 QA 정리하기
2) 작성 페이지
다음, 이전 버튼 모바일에서만 보이게 수정하기
타이틀 크키, 감정 크기 개선하기
에디터 관련 수정하기
체크박스 마크다운 분법 인식되도록 개선
언어 별 코드 하이라이트 인식되도록 개선
마크다운 스타일 전반적으로 개선
최소 필드 작성 기준에 대한 고민 후 개선
3) 수정 페이지
수정 페이지 진입 시, 기존 데이터의 마크다운이 적용되지 않는 문제 해결
4) 디테일 페이지
공유 버튼 클릭 시, 모달 나오도록 개선
| 어려웠던 점 & 배운 점
1) SSR 환경과의 사투: 브라우저와 서버 사이의 간극을 넘어서
: 이번 작업에서 가장 큰 난관은 SvelteKit의 SSR(Server-Side Rendering) 환경과 Prism.js처럼 브라우저 중심으로 작동하는 라이브러리 사이의 근본적인 구조 차이를 해결하는 일이었습니다. 서버 환경에서는 window 객체가 존재하지 않아 Prism.js를 불러오는 순간 앱 전체가 멈추는 오류가 발생했고, SSR 메커니즘을 제대로 이해하지 않으면 해결이 불가능한 문제였습니다.
이를 극복하기 위해 SvelteKit의 $app/environment에서 제공하는 browser 변수를 활용해 실행 환경을 조건부로 분기하고, 클라이언트 환경에서만 Prism.js를 동적으로 로드하도록 구조를 재정비했습니다. 이 과정을 통해 단순한 코드 작성이 아니라, 프레임워크의 렌더링 원리를 이해하고 환경에 맞는 안전장치를 구축하는 ‘SSR 가딩(guarding)’의 중요성을 깊이 체감했습니다.
2) 라이브러리의 재구성: 내부까지 파고든 커스터마이징 경험
: 이번 작업은 라이브러리를 가져다 쓰는 수준을 넘어, 내부 동작까지 뜯어보며 필요한 기능을 스스로 만들어내야 했던 경험이기도 했습니다.
markdown-it이 생성하는 HTML 구조와 Prism.js 테마 및 플러그인이 기대하는 구조가 서로 달라 코드 하이라이팅이 깨지거나 라인 넘버가 적용되지 않는 문제가 계속 발생했습니다.
이를 해결하기 위해 문서를 깊이 살펴보고, renderer.rules.fence 같은 내부 API를 직접 오버라이드하여 코드블록의 HTML 출력 구조를 재정의했습니다. 이 경험을 통해 “라이브러리가 지원하지 않으면 손을 쓸 수 없다”는 수동적인 태도를 벗어나, 내부 구조를 분석하고 능동적으로 확장해 문제를 해결하는 자신감을 얻었습니다.
3) 타입스크립트와의 조화: 유연한 타입 시스템 활용법
: TypeScript의 정적 타입 시스템은 안정성을 보장해주지만, 순수 JavaScript 기반의 라이브러리와 결합할 때는 종종 장애물로 다가옵니다. 특히 markdown-it-task-lists처럼 타입 선언(.d.ts)을 제공하지 않는 라이브러리를 사용할 때마다 타입 오류가 발생했고, 프로젝트 전체의 타입 안정성 역시 위협받았습니다.
이 문제를 해결하기 위해 필요한 모듈의 .d.ts 파일을 직접 생성하고 타입을 수동으로 선언하는 방법을 선택했습니다. 이 과정은 TypeScript가 외부 JavaScript 모듈을 어떻게 인식하고 연결하는지를 더 깊이 이해하게 해줬으며, 엄격한 타입 환경에서도 유연하게 외부 생태계를 통합할 수 있는 실전적인 역량을 길러줬습니다.
| 내일 목표
1) QA
QA 진행하기
받은 QA 정리하기
2) 마이페이지
수정 전 입력 필드의 focus 제거하기
회원탈퇴 관련 에러 토스트 직관적으로 수정하기
3) 기타
로그아웃, 로그인, 수정, 삭제 공유 버튼 등의 cursor을 point로 변경하기
파비콘 수정하기
4) 리스트 페이지
작성 모드 기능 고민하기
5) 작성 페이지
배경색과 이모지 색이 겹치는 부분 개선
6) 디테일/공유 페이지
선택한 감정만 표시되도록 수정
| 한 줄 회고
: "마지막 한 주 화이팅해보자!"