DevLogSEO Jing

Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅

2026년 3월 22일2분 읽기

퀴즈 구조 변경

어제 만든 퀴즈 컴포넌트의 구조를 변경했다. 기존 구조가 MDX에서 쓰기 불편했는데, props 기반으로 깔끔하게 정리했다.

파일 탐색기 모바일 반응형

파일 탐색기가 모바일에서 좀 구렸다. 터치 영역이 너무 작고, 가로 스크롤이 생기는 문제가 있었다. 모바일 반응형을 제대로 수정했다.

코드 블럭 사용성 증대

코드 블럭에 복사 버튼, 언어 표시, 줄 번호 등 사용성을 높이는 기능들을 추가했다. 모바일에서 코드 블럭을 가로로 눕혀서 볼 수 있는 기능도 구상 중.

모바일 가로 코드 뷰어

프레젠테이션 기능

스터디에서 PPT를 만들지 말고, 블로그에 발표 모드를 넣자는 아이디어를 실행에 옮겼다. ArticleToolbar에 프레젠테이션 버튼을 추가하고, PresentationView 컴포넌트를 새로 만들었다.

MDX 컨텐츠를 --- 구분선 기준으로 슬라이드 단위로 나누고, 좌우 화살표로 넘길 수 있게 했다. 풀스크린 모드도 지원. 이제 블로그 글 하나가 곧 발표 자료가 된다.

모바일 프레젠테이션 모드

테스팅 도입

프레젠테이션 유틸 로직을 분리하면서 테스트 코드도 작성했다. presentation.utils.test.ts에 MDX 파싱, 슬라이드 분리 등의 테스트를 추가. ArticleQuiz 컴포넌트 테스트도 작성했다.

유틸 함수들도 별도 파일로 분리하고, vitest.config.ts에 테스트 설정을 추가. 커밋 로그를 보면 테스트 오류 수정 → 배포 오류 수정이 연달아 있는데, CI에서 터진 걸 잡느라 좀 고생했다.

스터디 주차별 자료 완성

씨랩 스터디 1~4주차 자료를 모두 작성했다. 내일이 첫 대면 날인데, 드디어 준비가 끝난 느낌. 해커톤 마인드로 10일간 달려왔는데, 블로그도 만들고 스터디 자료도 완성했다. 나름 성공적.

Post Q&A

오케이징에게 물어보기

Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅 전체를 기준으로 질문과 피드백을 받아요.답을 본 뒤에는 이 내용을 댓글로 달아서 서징에게도 물어볼 수 있어요. 작성자가 직접 볼 수 있어요!

0/500

포스트 목록

/SEOJing/devLog

파일 14개, 폴더 1개

Day 1 - 디자인 컨셉과 디자인 시스템 Day 2 - 블로그 스켈레톤과 MDX 파싱 Day 3 - MDX 이슈, 반응형, 다크모드 Day 4 - 배포와 CI/CD Day 5 - shiki 제거, MDX 모듈화, 그리고 대량 포스팅 Day 6 - 스터디 자료 작성과 데스크탑 비율 수정 Day 7 - Front Matter CMS와 관련 게시물 탐색기 Day 8 - 아티클 퀴즈와 스터디 자료 Day 9 - 프레젠테이션 모드, 코드블럭 개선, 테스팅 Day 10 - 프레젠테이션 모드 안정화 Day 11 - 프레젠테이션 확대 기능, FullscreenView 개선 Day 12 - 테스트 커버리지 개선, 모바일 프레젠테이션 버그 2건 수정 기술 블로그를 직접 제작하게 된 이유 왜 자꾸 프로젝트가 중단되는지

같은 섹션의 대표 이미지

24 posts · latest first

SEO Jing26. 04. 01.