vue.js 토이 프로젝트 - 코드 관리 서비스 제작기 (1) 프로젝트 소개

vue.js 토이 프로젝트, 메모 관리 서비스 "javascript-archive" 메인 페이지

 

javascript-archive 라는 vue.js 기반의 토이 프로젝트를 얼마전에 만들어 배포해두었다.

 

프로젝트를 만들게 된 이유는 코드 조각이나 코드들을 한 곳에 메모하고 관리할 수 있게 하려고 만들었다.

실제로 나는 업무나 공부 할 때 쓰이는 코드들을 아무렇게나 정리해둔다.

---

 

여기저기 아무렇게나 흩어진 코드들...

당장 찾아본 것만 해도, 맥북 디렉토리나 스티커 메모, 노션...

전 회사 업무 내용이 포함되어 첨부하진 않았지만 맥북 메모 앱에도 꽤 있다. 😅

 

맥북 포맷하기 전 미리 내용을 정리해서 그만이지

그냥 뒀다면 다람쥐마냥 코드 저장해놓고 잃어버리고 다시 쓰고 계속 반복했을 수도...?

 

 

아무튼 그리해서 나온 코드 관리 서비스 "javascript-archive".

원래는 혼자 쓰려고 대충 만들었는데 서비스라고 칭하기도 애매하고 뭔가 다 어설펐다.

그래서 이번에 기존 로직을 확 바꾸기로 마음 먹음.

 

기존 로직이라 하지만 사실 크게 특별한 건 없다.

일반적인 프로젝트처럼 서버가 존재하고 서버와 통신해서 데이터들을 저장하는 게 아니라

프로젝트 내부에 코드가 담긴 파일 리소스를 넣어두면 mounted 시점에 그 파일을 읽고, 목록에 보여 주는 방식.

깃허브에 올려 놓긴 했지만 이건 뭐... 내 코드 메모들 보고 가세요~ 하는 것도 아니고 🥹...

안 올려놓는 것 보다 못한 느낌...

 

게다가 디자인도 너무 내 취향을 잔뜩 담아서 누가 본다고 생각하니 조금 부끄러워졌다.

(마우스 포인터도 귀여운 고양이 발바닥 🐾)

 

변경기도 리팩토링기도 말이 이상하니, 제목은 그냥 제작기로 적었다. 사실 다시 만드는 수준의 작업 같아서... 😅

앞으로 진행할 내용은 이렇다.

---

 

1. 파일 관리 방식 변경

- (기존) 수동적인 파일 저장 + 동적으로 파일을 직접 읽어 조회하는 방식

- (변경) 웹스토리지의 로컬 스토리지를 이용하여 파일을 관리

- 로컬 스토리지를 이용하여 코드를 저장하면 동일한 플랫폼 환경,  동일한 브라우저에서만 확인할 수 있기 때문에 다른 플랫폼을 이용하게 되면 내용을 확인할 수 없다. 이 부분을 개선하기 위해서는 결국 데이터베이스가 필요하기 때문에 현재는 보류하고 추후에 고려해 볼 예정이다.

 

2. 코드 추가, 수정, 삭제 기능 추가

- 필수 기능인데 이제서야 추가하다니 😐

 

3. 전체적인 디자인 변경

- 발랄한 느낌을 주고자 테마 분위기를 지금처럼 부여했는데, 오히려 산만한 느낌이 드는 것 같다.

- 테마 변경 기능도 추가하면 좋을 듯

 

4. 코드 하이라이터 기능 수정

- 코드를 뿌려주는 코드블럭 기능이 미미하다. 자바스크립트의 예약어 키워드에 한해서 모조리 하이라이트하다 보니 window 객체의 do 부분을 하이라이트 한다던가... constructor의 const를 하이라이트해버린다.

 

---

 

 

프로젝트 주소

 

https://github.com/youngdev57/javascript-archive

GitHub - youngdev57/javascript-archive: 📝 흩어진 코드 메모들을 한 곳에서 관리할 수 있는 코드 관리 서

 

전체 코드는 github에서 확인할 수 있다. 데모도 여기서 이용 가능!

 

https://57youngdev.notion.site/javascript-archive-417e0a4a9b134a74b0c70a60ec463af1

javascript-archive | Notion

 

프로젝트 개요 및 관리는 notion 페이지에서 확인 가능하다.

 

---

 

 

기존 로직 살펴보기

 

// 파일의 코드 제목을 가져오는 부분
getCodeTitles() {
    this.codeTitles = [];

    const requireComponent = require.context(
        '@/../public/files/',
        false,
        /\.(txt|js|html|css)$/
    );

    requireComponent.keys().forEach(src => {
        const splited = src.split("/");
        if (splited.length > 0)
            this.codeTitles.push(splited[1]);
    });
},

 

기존 로직은 public/files 디렉토리에 코드 파일들을 미리 추가해놓고, 배포 후 프로젝트에 반영한다.

위 코드는 해당 디렉토리의 파일 목록을 동적으로 가져오고 순회하며, 코드가 담인 파일 제목들을 리스트에 저장한다.

 

getCodeContent(name) {
    this.code = "";

    fetch(`${process.env.BASE_URL}files/${name}`)
        .then(response => {
            if (!response.ok)
                throw new Error('cannot load file');

            return response.text();
        })
        .then(data => {
            this.code = data;
            this.$refs.highlighter.setCode(this.code);
        })
        .catch(error => {
            console.error(error);
        });
},

 

그리고 목록에서 조회할 파일 제목을 클릭하면 위 메소드를 통해 코드 하이라이팅을 거친 뒤 화면에 뿌려준다.

다음 포스팅에서는 이 코드들을 로컬 스토리지를 이용하는 방식으로 바꿔보려고 한다.