🤔🏗️ 삽질 노트 svg 배포하기 🚜 🔨👷

그거아냐·2024년 9월 15일

삽질노트

목록 보기

2/4

문제의 시작

당시 상황

졸작을 위해서 깃허브 리드미에 띄울 동적인 이미지가 필요하였음
svg파일을 사용하기로 했고, 배포주소/badge/?name={username} 을 통해
유저이름을 받아오고, api를 통해 사용자의 정보를 받아 svg를 동적을 생성해야함
프론트엔드 담당이기 때문에 리액트를 통해 개발하고자 하였음

레퍼런스를 찾아보니 아래의 2가지 방식으로 구현되었음

![Badge](https://port-0-rankit-badge-node-m13a9z9a30079128.sel4.cloudtype.app/badge?name=User123.svg)

![Badge](https://port-0-rankit-badge-node-m13a9z9a30079128.sel4.cloudtype.app/badge?name=User123)

.svg가 사용된 방법은 이미 만들어진 정적인 이미지를 디렉토리 경로를 통해서 가져옴
.svg가 없는 부분은 동적으로 변화하는

<svg></svg>

태그안에 이미지를 만들어줌 아래의 방법을 사용

이루고자 했던바

해당 링크로 마크다운을 통해 띄웠을 때, 동적으로 생성된 svg가 표시되어야함
url을 통해 username을 받아오고, api를 통해 관련 정보를 받아와서 띄워주는데 이것을 리액트로 구현하고자 하였음
vite와 pnpm으로 세팅을 하고, gitaction을 통해 gitpage에 자동배포하여 공짜로 이용하는 꼼수를 사용하고 싶었음

해본 삽질들

위에서 언급한대로 깃페이지에 배포를 하였음

리액트를 사용해 구현함
-> 리액트 이기 때문에

<html><head><body>

이런 태그가 자동으로 빌드되어 붙기 때문에 마크다운 문서에 활용할 수 없었음
그래서 리액트 내에서 만들어서 svg로 어디든 서버에 탑재를 해야 된다는 결론을 얻었었음

삽질한 내용을 바탕으로 졸작 회의를 진행함
회의 중 리액트가 아니라 다른 방법을 무조건적으로 사용해야 된다는 깨달음을 얻음
(다른 유사 서비스들의 코드를 뒤져보니 백엔드 프레임워크들을 사용한 것으로 확인이 되었음)

해결책

node.js 사용
url에 받은 정보를 바탕으로

<svg></svg>

이것만을 return하는 코드를 만들음
local은 의미 없다고 생각하여, cloudtype이라는 것을 알게됨
https://github.com/jamooooong/rankit-badge-node
여기에 node.js를 통해 배포를 진행

추가적인 문제
피그마에서 svg를 만드니 text관련 태그가 다깨짐
일러스트로 진행해야 태그가 안깨지고 깔끔하게 나옴
코드 자체가 쉬워서 보면 text어디를 건들여야 할건지 눈에 보임

느낀점

맨날 리액트만 하다보니 모든 것을 리액트로 할려고 했던 멍청함을 느꼈음
node를 처음 사용해보았는데 간단해서 gpt를 사용해서 쉽게 만들었음

그거아냐

지금 하고 있는 그거 그거아냐

이전 포스트

🤔🏗️ 삽질 노트 시작 🚜 🔨👷

다음 포스트