명언 내보내기 프로젝트

Description: 명언을 어딘가의 저장소에 저장하여 쉽게 fetch하기 위해서 시작된 프로젝트입니다. 특히 프로젝트 구현 능력을 향상 시키기 위하여 속도에 초점을 맞추고 총 약 3일 정도 소모된 프로젝트입니다.

현재 노트: KR-110.50
상위 분류: KR-110 개인 프로젝트

#개인프로젝트

프로젝트 개요

기억하고 싶은 나만의 명언을 정리하여 사용할 때 로컬이나, 웹 또는 특정 소프트웨어처럼 여러 환경마다 이 명언 파일을 작성하고 수정하고 접근하는 것이 어려움.
그래서 명언모음을 파일 형태로 만들고 API형태로 호출하여 사용하는 프로젝트를 만들기로 결정

코드 https://github.com/murphybread/fetchable-custom-quotes

이번 프로젝트의 주요 목표 중 하나는 빠르게 만들기

이번 프로젝트에서는 개발자 역량 향상을 위해 빠르게 를 메인 목표로 해서 프로직트 수행.
그 결과 해당 프로젝트 3일 정도 소모

아키텍쳐

첫 번째 사용 형태는 일반적인 url에 content 값을 포함하여 호출한 경우 해당 명언 데이터를 반환해주는 방법입니다.

두 번째 사용 형태는 Obsidian 이라는 특수한 환경에서 사용하는 형태입니다,

기획

가장 먼저 해당 기술을 구현하기 위한 시나리오를 작성했습니다.
클라이언트 쪽에서 그 중에서도 Obisidan을 사용하면서 web으로 배포를 사용하는 저의 케이스에 맞춰서 api호출을 통해 쉽게 명언 내용을 접근하는 것이였습니다.
(나중에 이야기 나오지만 이 Obsidian이라는 특수한 상황도 기획에서 충분히 고려될 필요가 있습니다...)

처음 기획을 기준으로 다음과 같이 수행하였습니다 (업데이트가 되는 경우 가장 최신글을 참조해주세요)

기술 스택
데이터 구조
인프라

기술 스택

기술 스택의 경우 JavaScript런타임 엔진인 Node.js로 정하였습니다. 웹 상에서 상호작용하며 특정 명언의 값을 필터리하는 것과 같은 로직을 구현하기에 Node.js 가 적합하다고 생각했습니다.
추가적으로 다른 React나 Next.js과 같은 라이브러리나 프레임워크는 사용하지 않기로 하였습니다. 현재 목표로하는 기능은 간단한 GET기능만을 수행하기에 순수 JavaScript로 충분하 다고 생각했습니다. 만약 해당 데이터의 추가, 수정, 관리 또는 여러 사람들의 것을 관리와 같이 복잡한 기능들이 요구 사항이였을 경우라면 고민 했을 테지만 현재 요구 사항을 고려하여 빠르고 간단하게 구현을 목표로 해당 기술 스택을 선정하였습니다.

data.json 은 GitHub에서 관리하는 것으로 결정하였습니다. 새로운 로직추가나 데이터 관리등 복잡하지 않게 중앙 저장소에서 관리한다면 코드와 함께 관리하는 것이 운영 비용을 줄이는 방법이라고 생각했습니다.

데이터 구조

특히 신경을 쓴 부분이었습니다. 왜냐하면 이 구조에 따라 이후 쿼리할 때라던가, 데이터를 관리할 때, 검색할 때의 성능등에 영향을 미칠 수 있기 때문이었습니다. 그래서 기획한 데이터 구조는 다음과 같습니다.

{
  "content": string,
  "author": string,
  "type": "quote"|"interpretation"|"original",
  "id": string(uuid4)
}

객체 형태로 각 명언을 다루며 이를 JSON형태로 관리하기로 하였습니다.

content: 필수적인 명언의 내용이 들어있는 속성입니다
author: 해당 명언을 말한 화자에대한 정보입니다.
type: 이 프로젝트는 독특하게 3가지 타입의 명언을 관리하게 됩니다. 해당 속성값을 통해 나중에 카테고리화 기능등에 사용하기위해 필요하다고 생각했습니다.

quote는 다른 사람이 한 말을 그대로 적는 경우
interpretation의 경우 다른 사람이 한 말을 제가 조금 추가하거나 수정한 경우
original은 제가 한 발언인 경우
id: 각 명언을 구분하기 위한 고유 값입니다. 처음에는 배열의 인덱스 정보를 생가해봤지만, 명언이 삭제되거나 수정되거나 한다면 쉽게 바뀌고 일반적으로 권장되지 않음으로 자주 이용되는 uuid4값을 사용하게 됐습니다.

인프라

인프라를 선정하기전 가장 중요한 항목을 정리하였습니다.

data의 경우 public이니 보안은 덜 중요
비용은 무료 일것
관리에 리소스를 사용하지 말것

위와 같은 조건들은 현실적으로 이 프로젝트를 운영하기위한 조건들이었습니다. 특히 비용이나 운영면에서 다음과 같은 조건을 찾아보았을 때 2가지 선택지가 있었습니다.

GitHub Pages
Vercel

고민 끝에 GitHub Pages로 결정하기로 하였습니다. 이전에 Vercel을 사용하였을 때 플랫폼종속적인 부분에서 문제가 발생한적이 있어서 차라리 GitHub소스와 연동이 되고 간단한 GitHub Pages를 하기로 선택하였습니다.

이 후에는 직접 구현하면서 겪은 크고 작은 트러블 슈팅등 프로젝트를 서비스하기 위한 과정들입니다.

기술

GitHubPages 구현 후 예상치 못한 쿤 문제인 클라이언트상에서 해당 로직
Vercel functions로 동적 사이트 구현
실제로 활용하기 위한 content 필터
데이터관리를 위한 서버구현시 에러와 로컬에서 해결하는 방법

글 1개 분량 그리고 form및 uuid기능은 추가했지만 큰 문제로... 롤백

결과

vercel funtion기준으로 리 라우팅됨

기본 경로에서 data.json출력

?id=013ebc01-5ed5-45b0-baea-c3f4d2fe72fa파라미터로 해당 quote 출력

기술

data.js 와 같은 형태로 파일 형태로 저장한 후 어디에서든 fetch가능한 형태가 best

클라이언트쪽에서는 API형태로 간단하게 호출

data.js

실제 명언 내용: 문자열. 한국어,영어 모두 포함하게 UTF

작가: 해당 명언을 말한 작가

종류: 내가 생각한 original인지, 다른사람이 말한 quote, 아니면 다른사람이 말한 것을 내식대로 해석한 interpretation

ID: key관리를 위한 ID 발급. ID는 DB를 따로 쓰지 않기 때문에 확인하기 위해 UUID사용 - UUID사용이유는 고유성 보장. 순차적으로 1,2,3,4도 고려해봤지만 명언이 수정되거나 중간에 삭제되는 경우 구조에 문제가 발생. - UUID는 버전 4 사용


content: string

author: string

type: 'original' | `quote` | `interpretation`

id: `uuid`

보안성은 낮음

무료 필수

외부 웹에서 링크나 api형태로 사용가능해야함

특히 md파일에서 사용가능형태가 필요함

AI 검색 추천

GitHub Pages
jsDelivr

중요 결정

여기서 결정해야하나? 옵시디언내부 md파일용일지, 아니면 외부 웹서버 용도로 사용할지?

일단 md파일을 기준으로 표기하는 것은 버리기. data.js를 활용해야하고 웹상에서 가져오기 위해서 웹에서 동작하는 프로젝트로 설정

어려움

무료 정적사이트는 API형태가 불간으함. 사용하는 측에서는 간단하게 주소만 입력해서 API 호출하듯이 사용하고 싶었음

왜냐하면 특정 작가나, ID를 명언에서 쿼리하고 싶었으나 이런 REST API 동작은 정적 사이트에서는 불가

그렇다면 해결 법은 클라이언트 측에서 query하는 JavaScript 로직을 구현하여 정적사이트 data.js를 가져다 쓰기

REST API를 구현한 서버 엔드포인트를 만들어서 클라이언트측에서는 주소만 검색하는 형태로 구현

즉 다른 곳에서 일반적으로 사용가능하게 만드는 점은 포기하기로하고 내 특별한 케이스인 IT블로그에서 호출용, 그래서 클라이언트에서 구현하는 방법으로만 고려하기

(무료인 정적사이트를 사용하기 위해)

일단 로컬에서 구현해보고 동작 한다면, 실제 사용할 웹 블로그 페이지에 script방식으로 넣어보기

테스트 결과 일단 서버만드는게 제일 현실적임

api형식이 아니다보니 웹 블로그에서 그럼 query방식을 사용해야하는데, 이를 옵시디언 md파일에서 구현해야함. 매우매우 어려움

나중에 파일 추가하는것도 번거롭기 때문에 파일 관리까지 가능한 서버를 만드는게 제일로 결론

vercel funtion(serverless)를 사용하기로함

무료
vercel 플랫폼 많이 사용해봄
node환경에서도 쉽게 배포 가능

옵시디언에서 플러그인 형태로 req가능 확인

하지만 표기가 안됨

dataview로 표기되는 것 확인

중요 결정

여기서 결정해야하나? 옵시디언내부 md파일용일지, 아니면 외부 웹서버 용도로 사용할지?
일단 md파일을 기준으로 표기하는 것은 버리기. data.js를 활용해야하고 웹상에서 가져오기 위해서 웹에서 동작하는 프로젝트로 설정

어려움
무료 정적사이트는 API형태가 불간으함. 사용하는 측에서는 간단하게 주소만 입력해서 API 호출하듯이 사용하고 싶었음
왜냐하면 특정 작가나, ID를 명언에서 쿼리하고 싶었으나 이런 REST API 동작은 정적 사이트에서는 불가

그렇다면 해결 법은 클라이언트 측에서 query하는 JavaScript 로직을 구현하여 정적사이트 data.js를 가져다 쓰기
or
REST API를 구현한 서버 엔드포인트를 만들어서 클라이언트측에서는 주소만 검색하는 형태로 구현

즉 다른 곳에서 일반적으로 사용가능하게 만드는 점은 포기하기로하고 내 특별한 케이스인 IT블로그에서 호출용, 그래서 클라이언트에서 구현하는 방법으로만 고려하기
(무료인 정적사이트를 사용하기 위해)

일단 로컬에서 구현해보고 동작 한다면, 실제 사용할 웹 블로그 페이지에 script방식으로 넣어보기

테스트 결과 일단 서버만드는게 제일 현실적임
api형식이 아니다보니 웹 블로그에서 그럼 query방식을 사용해야하는데, 이를 옵시디언 md파일에서 구현해야함. 매우매우 어려움
나중에 파일 추가하는것도 번거롭기 때문에 파일 관리까지 가능한 서버를 만드는게 제일로 결론

블로그용

감으로 찾은 문제해결
아마 parsed에서 배열방식을 object로 반환하게 예전 기억에서 배열도 오브젝트였던것을 기억
그래서 parsed가아닌 parsed[0]으로 접근 해봄.
Array.isArray(parsed)로 확인까지 완료