일단 만들고, 필요에 의해 개선하자. 무턱대고 정답에 가까운 방법을 엿들어 개발하는 일은 없도록 하자. 이번엔 간단한 웹 사이트를 하나 개발할 생각이다. 내가 작성한 게시물이 하나 있고, 그 게시물에는 여러 사람이 댓글을 남길 수 있도록 만들 것이다. 고려해야 할 사항은 다음과 같다. 게시물은 나(어드민)만 작성하고 수정할 수 있어야 한다.게시물에는 여러 사람이 작성한 댓글들을 순차적으로 보여준다. 논리구조상 게시물이 먼저 구현되어야 할 것 같은데, 게시물 작성 및 수정에는 특수한 조건이 필요하므로 댓글 기능 먼저 구현하기로 하였다. 댓글 기능에도 사실 추가하고 싶은 게 몇 가지 있지만 일단은 익명으로 누구나 작성할 수 있도록 개발해야겠다. API 명세부터 작성해 보았다. 혼자 진행하는 프로젝트라 꼭 선..

들어가기 전에가장 흔하게 사용되는 Common 패키지에 대해 말하자면, 결국 핵심은 구조화 및 가독성 향상이다.프로젝트를 진행하다 보면 프로젝트 내 여러 모듈이나 레이어에서 공통으로 쓰이는 코드가 생기기 마련이다. 코드 재사용성을 극대화하고 중복 코드를 방지하기 위해, 나아가 유지보수 측면에서 편리하기 위해 우리는 공통 코드들을 따로 빼게 된다. 이러한 코드들의 모음집이 Common 패키지인 셈이다.※ 사실 패키지 구조라는 게 명확한 답이 있는 건 아니다 보니 가벼운 마음으로 읽었으면 한다. Common vs GlobalCommon으로 퉁쳐서 사용하는 경우가 많은데 사실 Common 패키지와 Global 패키지는 서로 의미가 다르다.Common: 공통으로 사용되는 모든 코드를 모아두는 패키지Global:..

보호되어 있는 글입니다.

스크롤 이벤트일부 로직이 로컬 스토리지를 사용하는 경우, 메인 스레드를 차단할 우려가 있어 requestIdleCallback을 통해 브라우저가 유휴 상태일 때만 실행되도록 고려하였으나, 현재 실질적으로 사용하고 있는 로직은 간단한 연산 후 DOM에 스타일만 반영하는 수준이므로 쓰로틀 + 디바운싱 구조만으로도 충분하다고 판단하였다. 오히려 requestIdleCallback을 사용하면 불필요한 지연이 발생할 수 있다. 메인 스레드를 막을 정도로 무거운 작업이 추가된다면 그때 다시 고려해야겠다. 현재로서는 성능보다 UX 측면에서 지연으로 인한 부작용이 생길 가능성이 다분하다. *Progress Bar가 실질적으로 사용자 경험 향상에 도움이 되지 않는다면, 완전 삭제도 고려하고 있다. 스크롤 이벤트 자체가 ..

일단 기능 구현부터 마치기로 했다.최적화 문제는 어차피 아무리 고민해도 끝이 없다. 막상 배포하고 나면 예상하지 못한 곳에서 새로운 이슈가 분명 터질 것이다.구현 목록1. 매뉴얼 세이브 취소 *아주 작은 이슈가 있었는데 해결했다.이제는 사용자가 직접 등록한 웹 페이지에 대해 직접 삭제할 수 있다.*HTML이 익숙하지 않아 컨테이너 실수한 거랑 삭제 후 갱신된 정보로 새로 호출하지 않아 미적용되던 문제였다.2. 타이틀 축약 및 툴팁 제공 타이틀이 너무 긴 웹 페이지인 경우, 타이틀을 축약해 표시하도록 패치했다.사용자가 마우스를 갖다 대면, 툴팁 형식으로 풀 타이틀이 제공된다.3. 잔여 용량 정보 확인 사용자가 현재 사용 중인 용량을 직접 알 수 있게 되었다.이를 통해 조금 더 원활한 관리가 가능할 것으로 ..

현재는 savedSites 배열을 순회하며 새로 넘겨받은 url과 일치하는 사이트가 있는지, 인덱스를 통해 중복을 판단한다. 만약 중복이라면 url을 제외한 모든 요소를 갱신하고 있다. (title, lastAccessed, scroll, height) 팝업의 경우, Manual Save를 누를 때마다 진행률이 갱신된다.실제 진행률을 동적으로 반영하지 않아, 사용자가 직접 갱신해 주는 것이나 다름없다. 아쉬운 점이 몇 가지 보인다.일단 첫째, Map으로 관리했다면 어땠을까?왜 배열로 관리했을까?Map을 사용할 경우, 직렬화 이슈가 발생한다.배열은 JSON으로 자동 변환되지만, Map은 그렇지 않기 때문이다. 그럼에도 불구하고, 로직상 Map이 훨씬 깔끔하고 빠른 건 명백하다.적절한 변환 과정만 거치면 충..

Where Was I?Where-Was-I?는 크롬을 통해 여러 웹 페이지를 오가는 사용자들을 위해 만들어졌다. 바쁜 현대 사회 속에서, 우리는 참 다양한 웹 페이지를 이용하게 되는데,여기서 문제는, 자주, 혹은 가끔이라도 재방문해야 하는 경우가 존재한다는 것이다.북마크는 WWI를 대체할 수 없다.크롬에서는 자주 이용하는 웹 페이지를 북마크로 관리할 수 있다.그렇다면 Where-Was-I?는 왜 필요한 걸까? 답은 간단하다.북마크는 Where-Was-I?를 대체할 수 없다.1. 북마크의 관리 범위는 상당히 제한적이다.웹 페이지를 북마크에 직접 등록해야 하는 수고스러움이 있다.나는 이것에 대해 사용자 의존도 문제라고 부른다.사용자가 북마크 하는 것을 깜빡할 수 있다.사용자는 북마크 대상을 명확히 구분할 능..

번들링 환경 구축Vite를 사용할 예정인데, 그러려면 일단 Node.js부터 설치해야 한다.*Node.js가 설치되어 있는지는 터미널에서 node -v로 간단하게 확인 가능하다.공식 사이트에서 LTS 버전 다운로드하고 설치하면 된다.참고로, 설치 과정에서 npm도 같이 깔리니 따로 설치할 필요는 없다.설치가 끝나면 node -v, npm -v 찍어서 확인하자.아마 높은 확률로 이렇게 뜰 텐데, PowerShell 보안 정책상 npm 실행이 차단된 상태라고 볼 수 있다.Windows PowerShell은 .ps1 스크립트 실행을 막아서 실수나 악성 코드 실행을 방지하려고 한다. npm.ps1도 일종의 스크립트이기 때문에, 기본 정책인 Restricted에서는 사용할 수 없다. 관리자 권한으로 실행해 다음 ..