서비스2024.04Nuxt3Markdown EditorLaTeX

테크카카오

프로젝트 개요

카카오 기술블로그 페이지로, 블로그, 이벤트, 커리어 등의 영역에서 다양한 카카오의 소식들을 카카오 개발자 및 관계자가 직접 작성하고 알려주는 페이지

오픈소스 마크다운 에디터를 기반으로 마크다운 파일을 작성하면 프론트 페이지에서 HTML 페이지로 렌더링
- 운영툴 내에 내장할 오픈소스 마크다운 에디터 커스텀
- 에디터 내 YouTube embed 기능 추가
- 에디터 내에서 개발 환경 API를 호출할 수 있도록 dev proxy 설정
LaTeX 문법 지원
- 라이브러리를 통한 LaTeX 문법 지원

YouTube embed 렌더링 문제
- 문제 iframe으로 삽입되는 YouTube 특성상 에디터에서 HTML 파싱 후 API를 통해 데이터가 전달될 때 서버의 XSS 대비로 해당 태그가 필터링되는 이슈가 발생하였다.
- 해결 에디터 내에서 HTML로 파싱될 때 YouTube iframe에 대하여 이를 판별할 수 있는 플래그를 삽입하도록 조치하고, 백엔드 API를 통해 전달될 때 해당 태그의 경우 필터링되지 않도록 협의하여 처리하였다.
API 호출 문제
- 문제 백엔드와의 협의 후 prod 환경에서 API와 도메인을 맞추어 호출하는 방식으로 개발하기로 하였기 때문에 dev proxy만을 고려하여 개발을 진행하였으나, 추후 도메인이 변경되는 등의 이슈가 있어서 CORS 에러가 발생하였다.
- 해결 이미 개발 구조를 맞추어 놓은 상태라, 도메인 변경에 따라 프론트 쪽에서도 모든 도메인 설정 부분을 그에 맞춰 수동으로 수정하였다.
- 개선 도메인 변경 문제는 언제든 발생할 수 있는 문제이기 때문에 사전 예방이 필요하며, proxy의 적극 활용과 다양한 개발 및 서비스 환경에서의 테스트가 필요하다.

페이지 개발을 직접 진행하지 않고, 선임 개발자로 프로젝트 일정, 리소스 관리 및 코드 리뷰 진행
백엔드에서 개발하는 운영툴 내 마크다운 에디터 커스텀 진행으로, 프론트 분야가 필요한 부분에 적절히 지원
기획 제안에 따른 새로운 프레임워크 Astro 검토
- 프론트 프레임워크인 Astro의 사용을 검토하였으며, 해당 프레임워크가 SSG에 최적화되어 성능 측면에서 효과적이며, 문법도 크게 다르지 않음을 파악
- 빠르게 진행되어야 하는 개발 일정과 러닝커브를 고려하여 안전하게 기존에 사용하던 Nuxt3 프레임워크로 개발 진행
- 새로운 프레임워크를 고려해 볼 수 있는 기회가 됨