[Vanilla JS 문서편집기 설명 및 개선] 9. Jest를 이용해 테스트 코드 적용하기

도입 목적지난번에 이어 Rich한 에디터를 만들어야하지만 그 전에 테스트 코드를 도입하기로 했습니다. 🎉이유는 Rich 에디터를 만들면서 코드도 너무 복잡하게 꼬이고, 버그 하나를 고치면 버그가 새로운 곳에서 생기는 문제가 자주 발생했기 때문입니다. 버그를 고치고 일일히 모든 기능을 테스트하기엔 자원의 낭비가 심했고 이에 따라 리팩토링을 하는데 엄두도 나지 않았습니다.하지만 테스트 코드를 적용한다면? 오류가 나도 테스트에서 알려주기 때문에 안심하며 리팩토링이 가능합니다!이런 목적으로 도입하게 되었고 연습삼아 Component 템플릿의 테스트 코드를 작성해보았습니다. 제가 Jest를 선택 한 이유와 테스트 코드의 장점, 환경 구축하는 법은 Jest를 Vite 프로젝트에 적용하기에 자세히 설명했습니다. C..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 9. 15.
• textsms

Jest를 Vite 프로젝트에 적용하기

사용 목적프로젝트를 진행하며 점점 테스트 코드의 필요성을 느끼게 되었습니다.한 부분에서 오류 나서 수정하면 기존에 잘 동작하던 부분에서 오류가 발생하고 수정하면 또 오류 발생하고... 무한반복...지금 프로젝트가 이 상태....오류를 수정하고 다른 곳에 문제가 없는지 직접 테스트해보는 건 정확도도 떨어지고 시간 낭비라 생각되었습니다. 그렇기 때문에 관심은 많았지만 미뤄뒀던 테스트 코드 적용을 해야겠다고 마음먹었습니다!테스트 코드를 작성해야하는 이유1. 사업의 신뢰성버그가 포함된 채로 배포된 코드는 서비스의 이미지를 추락시킵니다. 그리고 이 이미지를 회복하려면 많은 시간과 비용이 필요합니다. 테스트 코드는 예상하지 못한 버그를 조기에 발견해 서비스 이미지를 지켜주는 역할을 합니다. 2. 높은 유지보수성개발..

• format_list_bulleted 개발 공부/기타 (개발 공부)
• · 2024. 9. 15.
• textsms

Vercel Serverless 적용하기

이전에 서버 주소를 숨기고자 .env파일에 넣어놨는데 네... 다 보이고 있습니다. 네트워크 요청 주소를 숨길 수 있는 방법이 여러 개 존재하는데 Vercel Serverless 사용하기AWS API Gateway 사용하기SSR 사용하기등 여러가지가 있는데 그중 Vercel Serverless를 적용해 보겠습니다. Vercel CLI 설치일단 Vercel Serverless를 이용하게 되면 기존의 vite 명령어로 로컬에서 동작하는 걸 볼 수 없기 때문에 Vercel CLI를 설치해 줍니다.npm install -g vercel 개발 서버 실행 명령어는 다음과 같습니다.vercel dev root/api/index.js 파일 만들고 기존의 api 변경하기클라이언트에서 서버로 바로 요청하던 것을 Verce..

• format_list_bulleted 개발 공부/기타 (개발 공부)
• · 2024. 9. 8.
• textsms

[Vanilla JS 문서편집기 설명 및 개선] 8. Rich한 에디터 만들기(2)

지난번에 이어 Rich 한 에디터를 만들어 보겠습니다.Toolbar 만들기이번에는 글에 Bold, Italic, underline, strikethrough를 적용할 수 있는 툴바를 만드려 하는데, 해야 하는 작업은 다음과 같습니다.툴바 노드 만들기텍스트에 드래그했을 때 툴바 활성화, 드래그 해제 시 툴바 비활성 이벤트 추가Toolbar 노드 만들기툴바 노드를 만들 때 한 번만 만들어 놓고 불러오는 위치만 달라지기 때문에 setup에 호출해 줄 툴바를 만드는 함수 하나를 만듭니다.const setToolbar = () => { const toolbar = document.createElement("div"); toolbar.className = "editor__toolbar"; toolbar.inn..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 9. 8.
• textsms

[Vanilla JS 문서편집기 설명 및 개선] 7. Rich한 에디터 만들기(1)

노션의 화려한 기능의 에디터를 그나마 비슷하게 따라 하기 위해 여러 가지 도전을 해보려 합니다. 다음과 같은 순서로 진행합니다.enter로 다른 DOM으로 분리하기 & shift+enter로 줄 바꿈 하기Drag&Drop으로 위치 변경하기 enter로 다른 DOM으로 분리하기 & shift +enter로 줄 바꿈 하기먼저, contentEditable div를 만들어 해당 div안에서 enter를 입력하게 되면 새로운 contentEditable div를 만들 도록하겠습니다. export default class EditorTotalContents extends Component {... template() { return ` ..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 9. 6.
• textsms

[Vanilla JS 문서편집기 설명 및 개선] 6. 중앙 집중식 상태 관리 적용하기

프로젝트를 진행하던 중 사이드바에서의 동작이 에디터를 제어하거나 그 반대의 상황일 때 porps로 상태를 전달하기엔 적어도 3depth의 컴포넌트를 거쳐야 합니다. 이때 코드가 복잡해지면 상태를 관리하기 힘들어지는 props drilling 문제가 생기는데 이를 해결하기 위해 중앙 집중식 상태 관리를 적용했습니다. 이전에 작성한 Vanilla JS로 중앙 집중식 상태 관리 구현하기를 이용했습니다. 저는 총 2개의 store를 만들어 관리했습니다. 1. 사이드바의 전체 페이지들을 저장하는 store2. 현재 편집하려는 페이지의 Id를 저장하는 store  사이드바의 전체 페이지들을 저장하는 store store_pages.store.js store는 다음과 같이 만들어주었습니다.import { create..

• format_list_bulleted 프로젝트/Vanilla JS 문서편집기
• · 2024. 9. 4.
• textsms