[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 문서편집기 설명 및 개선] 1. vite 번들러 추가

목적 기존 프로젝트에선 번들러를 따로 사용하지 않고 vscode의 Live Server를 이용해 페이지가 잘 동작하는지 확인했습니다. 하지만 프로젝트를 다시 다듬게 되었을 때 제가 여러가지를 놓치고 있다는 생각이 들었고, 해당 부분을 vite 번들러를 이용한다면 많은 부분을 해소할 수 있다고 생각했기 때문에 이번 기회에 추가해봤습니다.  제가 얻을 수 있는 장점은 다음과 같습니다.오류 사전 탐지 : 빌드했을 때 오류가 발생하는지코드 최적화의존성 관리 용이CSS, 이미지, 폰트 등 자산 관리호환성 : babel 등 트랜스파일러를 이용해 최신 JS 문법을 구형 브라우저에서도 동작할 수 있도록 변환 추후 github action을 이용해 main으로 merge시 build에 오류가 존재하지 않을 때만 merg..

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

Vue로 영화 검색 페이지 만들기 학습을 하며 어려웠던 점 모음

https://omdbapi.com/위 사이트의 API를 이용해 영화 검색 웹을 만들고 있는 중이며 어려웠던 점을 하나씩 기록하려 한다.Key 은닉을 위해 서버리스 함수 사용을 위해 vercel이용!만약에 key 은닉을 하지 않는다면....network를 살펴보면 내가 사용한 key가 그대로 드러남을 알 수 있다.. 😭원래는 서버에서 처리를 해줘야하지만 현재로선 서버에서 처리해줄 수 없기 때문에 vercel을 대신 사용했다.이때 나는 axios 사용을 했다.get에 데이터를 전송해야했기 때문에 처음엔 get에 데이터를 어떻게 넣지...? 하며 아무것도 모르는 상태라 검색을 해봤더니params를 이용해 전송함을 알고 적용해보았다.완성된 코드는 아래와 같다.//src/store/movie.vueimport..

• format_list_bulleted 프로젝트/기타 (프로젝트)
• · 2024. 8. 7.
• textsms

[올해도 아좌좌🔥] 갓생을 꿈꾸는 당신을 위한 신년 계획 리마인더

안녕하세요, 갓생을 꿈꾸는 여러분!!벌써 새해입니다.🥳 다들 2024년에는 어떤 목표를 세울지, 어떻게 실천할 건지 계획 하셨나요?올해는 올해도 아좌좌🔥와 함께 2024년에 세울 신년 계획을 실천해보는건 어떠세요?올해도 아좌좌 링크 | 깃허브 링크 | 개발 노션 링크기획 배경 및 동기매년 많은 사람들이 새해 목표를 세우고 이를 달성하기 위해 노력합니다.하지만 시간이 지나면서 목표를 잊어버리거나 실천하지 못하는 경우가 많은데요, 신년 계획을 지키지 못하는 이유는 너무 다양합니다.야심차게 세운 신년 계획… 3일도 못 가는 이유 [별별심리]저희는 계획을 못 지키는 가장 큰 이유로 계획을 잊어버리거나 혼자서 나아가기가 힘들다는 점을 뽑았습니다. 그래서 “누군가가 옆에서 도와줄 수 있다면 목표를 보다 쉽게 이..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms

팀 프로젝트 중간 회고 : 올해도 아좌좌

벌써 데브코스 수료까지 한 달정도 남았습니다. 6월에 처음 데브코스에 합류할 때 설레는 마음으로 잘 해내보겠다 생각했는데 초심 그대로 가는것은 역시 힘듭니다. 8월까지 개인 공부와 스터디도 열심히 했었고 9월에 팀프로젝트도 마쳤는데 쌓아왔던 이 지식을 현재의 프로젝트에 잘 녹여내고있는지 확신은 들지않는 10월이었습니다.이제 취업도 해야하기 때문에 이력서도 쓰고 원서도 넣어보고 있지만 아직 부족한탓인지 좋은 결과가 있지는 않네요. 하지만 요즘 경기도 안좋고 원래 100개정도 써도 연락 올까 말까한게 취업이니 중꺾마 정신으로 열심히 해야겠다는 마음이 듭니다.(이번 프로젝트가 잘 되어서 1월에 행복하게(?) 트래픽 관리 하고 취업도 되어있으면 좋겠네요 😋)팀 프로젝트 - 올해도 아좌좌💪올해도 아좌좌 깃허브..

• format_list_bulleted 프로젝트/올해도 아좌좌
• · 2024. 8. 6.
• textsms