Skip to main content

바이브코딩 백엔드, Go?



사이드 프로젝트를 만들 때는 주로 Firebase, Supabase 같은 서비스를 사용했습니다. 인증, DB, 파일 저장 등의 기능을 직접 구현하지 않아도 되기 때문에 프론트엔드 개발자 입장에서 빠르게 서비스를 만들기 좋았습니다.

하지만 여러 프로젝트를 진행해보면서 처음에는 크게 느끼지 못했던 단점들이 보이기 시작했습니다. 원하는 방식으로 데이터를 조회하거나 서비스 로직을 관리할 때 불편한 부분이 있었고, 프로젝트를 추가할 때마다 비용이 늘어나다 보니 새로운 아이디어가 있어도 선뜻 프로젝트를 시작하기 어려웠습니다.

그래서 앞으로는 백엔드를 직접 구현해보려고 합니다. AI의 도움을 받아 빠르게 학습하고 기능을 적용해보면서, 학습과 개발에 드는 시간과 공수도 줄일 수 있을 것 같습니다.

현재 운영하는 서비스들은 대부분 트래픽이 거의 없는 상태입니다. 이를 고려해 우선 한 서버에서 모든 서비스를 함께 운영하고, 트래픽이 늘어나거나 자원이 부족해지는 시점에 필요한 서비스부터 분리하기로 했습니다.

결론부터 말하면, 새롭게 시작하는 사이드 프로젝트에서는 백엔드에 Go를 사용해보려고 합니다. 이번 글에서는 서버와 언어를 선택한 이유, 그리고 앞으로의 구성 방향을 정리해보았습니다.

React에서 MSW 2.0 적용, 동적 경로 및 쿼리스트링을 받을 경우 핸들러 파일 수정하기



Mock Service Worker(MSW)는 웹 개발 및 테스트 환경에서 네트워크 요청을 모킹(mocking)하고, 가짜 응답을 제공하여 서버와의 상호작용을 시뮬레이션하는 도구입니다. 이 도구는 특히 API 호출을 테스트할 때 매우 유용하며, 서버가 실제로 존재하지 않거나 서버에 접근할 수 없는 경우에도 클라이언트 애플리케이션을 개발하고 디버깅할 수 있게 해줍니다.

`Error: error:0308010C:digital envelope routines::unsupported` 오류 해결하기



최신 노드 버전을 사용하면서 과거에 작업했던 프로젝트를 실행하거나 빌드할 경우 아래와 같은 오류가 발생할 수 있습니다.

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:68:19)
    at Object.createHash (node:crypto:138:10)
    at module.exports (/Users/syki66/Desktop/test/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:471:10)
    at /Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:503:5
    at /Users/syki66/Desktop/test/node_modules/webpack/lib/NormalModule.js:358:12
    at /Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/Users/syki66/Desktop/test/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/syki66/Desktop/test/node_modules/react-scripts/scripts/build.js:19
  throw err;
  ^

아래 방법 중 하나를 적용하면, 오류 해결이 가능합니다.

React에서 Firestore를 사용하여 DB 제어하기



Firebase의 Firestore는 유연하고 확장 가능한 NoSQL 기반의 데이터베이스이며, Collection, Document, Field로 구성되어 있고, 프론트엔드 코드만을 사용하여 빠르게 백엔드를 기능을 구현할 수 있습니다.

하지만 직접 백엔드를 구현하는 것에 비해 요금이 비싸고, 쿼리도 빈약하며, 기능의 커스텀에 제약이 많습니다.

위즈윅(WYSIWYG) 에디터, react-quill 사용하기



WYSIWYG(What You See Is What You Get)은 작성중인 문서와 출력될 결과를 동일하게 보여주어 문서 작성을 직관적이고 쉽게 할 수 있게 해줍니다.

리액트에서 WYSIWYG 에디터로 TOAST UI Editor, React Draft Wysiwyg, react-quill 등이 있습니다. 데모 페이지에 들어가 사용해본 결과 react-quill이 가장 사용성이 좋다 느껴져서 사용하게 되었습니다.