[Vanilla JS 문서편집기 설명 및 개선] 5. VirtualDOM처럼 렌더링하기

[Vanilla JS 문서편집기 설명 및 개선] 3. 사이드바 렌더링 최적화 및 성능 비용 절감 글을 작성했지만 이는 가독성이 매우 매우 좋지 않고 다른 부분의 렌더링을 최적화하려면 코드를 새로 작성해야 한다는 문제가 있습니다. 기능을 추가할 때마다 새로운 문제에 직면하는 사이드 이펙트도 있어 정말 딱 그 부분만을 위한 최적화였던 것입니다.   저는 렌더링 최적화 방식을 개선해야 할 필요성을 느꼈고 일관성 있도록 최적화하고 싶었습니다. 따라서, 리액트에서 렌더링 하는 방식인 VirtualDOM처럼 기존 DOM과 새로 만들어질 DOM을 비교해 변경된 부분만 업데이트해 주는 방식을 적용해보려 합니다. VirtualDOM이란?실제 DOM을 조작하는 방식이 아닌, 실제 DOM을 모방한 가상의 DOM을 만들어 실..

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

[Vanilla JS 문서편집기 설명 및 개선] 4. 컴포넌트 템플릿 만들기

컴포넌트 템플릿이전에 리액트나 뷰를 이용할 때는 정해져 있는 형식이 있었기 때문에 편리했습니다. 반면에, Vanilla JS는 제가 자유롭게 작성할 수 있는 구조입니다. 기존 코드는 규칙도 이전에 작성한 코드를 보며 ctrl+c, v 방식으로 비슷하게 만들었습니다. 하지만 이는 비효율적인 방법으로 컴포넌트가 늘어날 수록 부담되는 방법입니다. 또, 가독성이 좋지 않기 때문에 다른 사람이 봤을 때 어떤 기능을 하는지, 어떤 방식으로 작성했는지 알 수 없는 문제가 있습니다.  그렇기 때문에 편리하게 형식을 항상 동일하게 가져갈 수 있도록 작성해야 할 필요성을 느껴 컴포넌트 템플릿을 만들어 사용했습니다. export default class Component { $target; props; state; ..

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

2024 FECONF 참여 후기

안녕하세요! 오늘은 FECONF를 다녀왔습니다. 세션 내용들이 전부 알찼고 부스도 굉장히 재미있었습니다.이번엔 세종대학교 광개토회관 B2에서 진행했고, 지난 회차에 비해 자리도 널찍해 대부분의 인원이 편안하게 앉아서 들을 수 있었던 것 같습니다. 정말 운 좋게 티켓팅을 성공해 다녀올 수 있었습니다.  다음에 가시는 분은 1시간 일찍부터 들어갈 수 있으니까 그때 들어가면 모든 부스를 쾌적하게 돌 수 있습니다.(세션 시작한 후에 방문하면 아래 사진보다 훨씬 많은 사람들을 볼 수 있습니다.)  세션은 아래의 사진과 같이 준비되어 있었고 저는 Speaker B만 들었습니다. A도 듣고싶었지만 몸은 하나니까.. 유튜브로 나중에 봐야겠습니다.준비된 세션을 봤을 때 요즘 테스트 자동화가 뜨거운 주제인 것 같았습니다...

• format_list_bulleted 기타
• · 2024. 8. 24.
• textsms

[Vanilla JS 문서편집기 설명 및 개선] 3. 사이드바 렌더링 최적화 및 성능 비용 절감

사이드바 렌더링 최적화기본적으로 사이드바의 동작은 페이지를 눌렀을 때 하위 항목을 보여주도록 되어있습니다. 이때, 기존 코드에선 사이드바 전체를 렌더링하고 있고 이 방식은 이미 존재하는 노드를 반복해서 그리기 때문에 자원을 낭비하게 됩니다. 따라서 렌더링을 최적화하기 위해 변경되는 부분만 추가&삭제하는 방식으로 렌더링 최적화를 하려 합니다.  사이드바 렌더링을 최적화하기 위해 다음과 같은 순서로 진행하였습니다. 1. 페이지의 열림 닫힘 여부 판단set을 이용해 열린 페이지의 id를 저장해 놓습니다. 만약 닫혀있는 페이지를 누르면 set에 해당 id가 입력되고, 열려있는 페이지를 누르면 set에 존재하는 해당 id가 삭제되는 방식으로 동작하게 합니다. (set의 시간복잡도는 O(1)이기 때문에 효율적이라 ..

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

[Vanilla JS 문서편집기 설명 및 개선] 2. 서버 요청 로직

서버 요청 로직제가 만든 문서 편집기의 API 요청은 다음과 같이 정리됩니다.사이드바전체 문서 구조 불러오기 - GET문서 생성하기  - POST문서 삭제하기 - DELETE문서 편집기특정 문서의 조회하기 - GET특정 문서 수정하기 - PUTAPI를 요청하기 위해 request 함수를 만들어 API_END_POINT에 url, options를 이용해 그때그때 필요한 상황에 맞춰 사용할 수 있게 했고, 만약 API 처리 중 이상이 생기면 홈으로 돌아가도록 했습니다. export const request = async (url = "", options = {}) => { try { const res = await fetch(`${API_END_POINT}${url}`, { ...option..

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

Vanilla JS로 중앙 집중식 상태 관리 구현하기

중앙 집중식 상태관리란?우리가 react나 vue를 사용할 때 전역으로 가져와 사용해야 하는 데이터를 관리해야 할 필요성을 느껴 사용하는 Redux, Vuex, zustand, recoil 등이 이에 해당됩니다.  state, setState와 무엇이 다를까?컴포넌트 안의 상태를 관리하는 state, setState는 컴포넌트 내에서만 상태를 관리하고, 변경될 때마다 해당 컴포넌트를 다시 렌더링 하도록 되어있습니다. 상태가 해당 컴포넌트에만 영항을 미치며, 상태 변경은 이 컴포넌트 내에서만 추적되므로 다른 컴포넌트에서 특정 컴포넌트에서 사용하는 상태를 이용하기 어렵습니다. 반면, 중앙 집중식 상태관리는 전역적인 상태 관리가 가능하며, 여러 컴포넌트에서 동일한 상태를 공유하고 이를 관찰할 수 있습니다. 여..

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