monorepotsconfigturborepo[블로그 소개] 프론트엔드 - 구조 및 설정
[블로그 소개] 프론트엔드 블로그를 만들기 위해 여러 번 세팅을 시도했고, 그 과정에서 포기도 여러 번 했습니다. 다양한 시도 끝에 monorepo 구조로 구성하는 방식이 가장 깔끔하게 프로젝트를 나누고 사용하기에도 편하다는 결론에 도달했습니다. 단순히 폴더 구조만으로 기능을 구분하려 했을 때는 폴더가 지나치게 세분화되었고, 그렇다고 패키지들을 repo를 나누려 하면 관리하고 다른 앱에 적용하기 짜증납니다. 특히 에디터 기능을 포함하려다 보니 코드 양이 많아지면서 도메인과 코드가 섞이기 쉬웠습니다. 반면, 하나의 레포에서 모듈별로 분리하는 방식은 자연스럽게 도메인과 코드가 분리되며, 재사용성 및 사용성(개발자 경험)까지 확보할 수 있다는 점에서 확실히 장점이 있다고 느꼈습니다. 아래는 블로그 만들 때 사용한 Monorepo 구조입니다. 과거 폴더 구조 (tsconfig Reference 기능 사용) 현재 폴더 구조 (Just in Time packages 적용) 1.1 App과 Package 블로그 프로젝트에서 App은 스토리북, React Web, React Native 3개 입니다. 그리고 패키지는 Design System, Editor, Domain, Utils 4개와 ts와 esLint 설정을 위한 tsConfig, eslintConfig 2개로 구성했습니다. App React Web React Native Storybook Package DesignSystem Editor Domain Utils tsConfig esLintConfig 여기서 Domain을 별도로 분리한 목적은 좀더 API를 체계적으...2025-04-13
MySQLRedisSQL[블로그 소개] DB - ERD
[블로그 소개] DB 이번 글에서는 블로그에 사용한 DB와 그 ERD를 그리는 과정을 소개해드리려고 합니다. DB는 MySQL을 사용했습니다. 사용한 이유는 혼자서 만들기엔 익숙한 DB를 사용하는 것이 낫다고 판단했습니다. ERD(DB설계)를 그리기 전에 이상적인 소프트웨어 공학 개발 순서에서는 만들 제품에 대한 정의와 검증을 합니다. 그리고 아래 나열한 과정들이 ERD를 그리기 전에 수행해야할 과정들입니다. 레퍼런스 조사, 시장 조사, 아이디어 구체화 및 경쟁력 분석 요구사항 정의 및 기능 목록 작성 와이어프레임/화면 설계 use Case 정의(누가 어떤 기능을 사용하는가, 어떤 데이터를 CRUD 하는지 확인) user Flow 정의 (기능이 언제 데이터를 생성/수정/조회 하는가, 데이터 CRUD 타이밍 확인) class Diagram 정의 (객체들의 관계 조회, ERD 구조의 뼈대) 유즈케이스, 사용자 흐름, 클래스 다이어그램을 합쳐서 검증. 데이터 모델링 (ERD) 하지만 실제 현업에서 개발을 할 때는 위 과정과 순서를 그대로 따르지 않습니다. 목표를 달성하기 위한 시간과 인력이 한정되어 있고 소프트웨어 개발 방법론(폭포수, 애자일..)에 따라서도 달라지기 때문입니다. 저는 혼자서 블로그를 다 만들어야하기 때문에 다음과 같은 간단한 과정으로 ERD 설계를 했습니다. 블로그 레퍼런스 조사 기능 정의 DB 설계 (ERD) 구현 중 추가하고 싶은 기능이 있으면 기능 정의 추가 => ERD 변경 혼자 개발하기 때문에 저에게 모든 결정권이 있고, 모든 변경 내역과 플로우를 알고 있습니다. 그래서 구현 중에...2025-04-10✏️ 작성중...
Critical CSSSentryNextJs[블로그 소개] 프론트 엔드 - 성능 최적화
[블로그 소개] 프론트엔드 방문해주셔서 감사합니다. 1번째 글 이후 블로그의 마음에 안드는 부분 수정을 하느라 2번째 글 쓰기까지 많은 시간이 걸린 것 같습니다. 이번 글에서는 저가 어떤 방식들로 블로그를 최적화를 했는지 소개하려고 합니다. 우선 글을 읽기 앞서 함께(?) 축하할 일은 최적화 결과 Lighthouse 4가지 카테고리에서 모두 100점을 달성했다는 것입니다. 하하 이번 글에서 소개할 것은 성능에 영향을 끼치는 원인을 어떻게 찾았는지, 그리고 어떻게 최적화 했는지 소개드릴려고 합니다. 여기에 더해 Lighthouse로 점수로 측정되지는 않지만, [네트워크가 오류날 정도로 느린 상황]이나 [새로고침 상황에서 하얀색 깜박임으로 인한 불편한 상황]을 개선한 과정도 소개드리겠습니다. 우선 아래 사진은 최적화를 완전히 마치고 홈화면을 Lighthouse로 성능, 접근성, 권장사항, 검색엔진 4가지 카테고리의 점수를 측정한 결과들입니다. Lighthouse는 크롬 개발자도구의 Lighthouse탭에서 누구나 성능측정을 쉽게 할 수 있도록 만든 툴입니다. Lighthouse 점수 측정시 주의할 점은 사용자 네트워크, 컴퓨터, 브라우저 환경에 따라 다른 결과를 보여줄 수 있다는 점입니다. 대표적인 예로 ThirdParty Cookie를 브라우저에서 차단하지 않았거나, 네트워크가 느리면 성능 측정 결과가 달라집니다. 성능 측정할 때 뿐만 아니라 평소에도 브라우저 설정으로 써드파티 Cookie는 차단하시길 추천드립니다. Home 화면(어드민 로그인) Home 화면(일반유저 로그인) Home 화면(비 로그인) 어드...2025-03-27
ProseMirrorShikiNextJs[블로그 소개] 프론트엔드 - 에디터 (과거)
[블로그 소개] 프론트엔드 안녕하세요? 첫 번째 블로그 글입니다. 읽어주셔서 감사합니다. 저는 직접 홈페이지를 운영해보고 싶었고, 프로그래밍 하면서 고민하고 해결한 것들을 기록하고 공유하고 싶어 블로그를 만들었습니다. 화학공학과 찐 이과 출신이라 많이 글을 못씁니다. 쓴 글을 수정해가며 더 효율적으로 지식을 공유할 수 있도록 노력하겠습니다. 함께 더 쉽고 높게 성장할 수 있으면 좋겠습니다. 에디터를 만드는데 1달 가까이 사용할 정도로 공들였습니다. Toast UI, Editor.js, React-md-editor,Tiptap까지 커스텀 플러그인으로 원하는 기능을 추가 해보고 사용성과 확장성을 확인할 정도로 진심 이였습니다. 저에게 간택된 블로그 에디터는 ProseMirror 엔진 기반의 Tiptap 에디터입니다. 특징은 확장성이 엄청나지만, 그만큼 작은 기능도 많은 코드가 필요하다는 점입니다. 그리고 Viewer를 JSON과 Text 형식 모두 SSR로 렌더링할 수 있어서 NextJs, 백엔드와 찰떡궁합 에디터입니다! (※ 간단한 기능의 확장만 필요하면 플러그인이 많은 다른 에디터 강력 추천) 에디터 SSR 확장성 엔진 WYSIWYG Markdown RIch Text 기타 editor.js 🟡 中上 자체 ✅ 🟡 ✅ 노션, Json, 문서 좋음, 추천 react-md-editor ❌ 中 자체 ❌ ✅ ❌ 이지윅 때문에 사용성 떨어짐 toast UI ❌ 下 ProseMirror ✅ ✅ ✅ 문서화가 나쁨, 플러그인 적음. quill 🟡 中上 Delta ✅ 🟡 ✅ 문서 좋음, JSON, 추천. TipTap ✅...2025-03-16