Raon.c -
Llm활용해서 귀찮은 작업 단순화하기
서론 저는 COFFEE DB라는 서비스를 운영하고 있습니다. 이 서비스는 스페셜티 커피 원두 정보를 모아 필터링하여 사용자에게 제공하는 서비스입니다. 서비스 운영 초기에는 외부 웹사이트에서 커피 정보를 하나하나 수작업으로 복사하여 데이터베이스에 입력했습니다. 이 방법을 선택한 이유는 초기에는 데이터의 양이 적었고, 빠르게 서비스를 시작하려는 목적이 있었기 때문입니다.이 과정은 매우 번거롭고 휴먼 에러가 발생하기 쉬웠기 때문에, 작업을 효율화할...
-
개인 프로젝트의 생산성 향상을 위한 모노레포 도입기 -2- w/브랜치 전략
효율적인 모노레포 관리를 위해서 수립한 브랜치 전략을 소개합니다. 고민하는 과정을 공유하며, Trunk Based Development 브랜치 전략을 기반으로 브랜치 전략을 수립했습니다. 안녕하세요! 모노레포와 관련한 두 번째 글 입니다.이전 글에서는 패키지매니저 선택과 간단히 TurboRepo를 세팅해보고 Vercel에 배포해보았습니다. 이번 글에서는 모노레포에서의 브랜치 전략을 수립해보고 관련하여 배포 전략도 수립하여 효율적으로 개발을 진...
-
개인 프로젝트의 생산성 향상을 위한 모노레포 도입기 -1- w/TurboRepo
개인 프로젝트 생산성 향상을 위해 TurboRep를 활용한 모노레포를 도입한 경험을 소개합니다.모노레포를 도입하게된 계기 및 도입하며 고민한 흔적을 공유합니다. 안녕하세요! 오랜만에 글을 작성하는것 같습니다. 그동안 개인적인 공부도 하고, 몇개의 사이드 프로젝트 개발을 하느라 글을 쓰는것을 미뤄왔습니다.변명입니다 느꼈던 불편함 사이드 프로젝트를 진행하고 코드를 작성하면서 느꼈던 몇 가지 불편한 점이 있었습니다. 분명히 이전에 개발했던 컴포넌...
-
Content Card에 fade-up 애니메이션 적용하기
블로그의 컨텐츠 카드에 페이드업 애니메이션을 적용한 경험을 공유합니다.tailwindcss를 활용했습니다. 이번 블로그 글은 간단하게 작성해보려 합니다. 최근 블로그의 컨텐츠 카드에 fade-up 애니메이션을 적용했습니다. 먼저 적용된 결과물을 보시죠. 보시다시피 컨텐츠 카드가 살짝 아래쪽에 있다가 위로 올라오면서 opacity가 변화하는 애니메이션입니다. 간단하쥬? 🤓 간단하게 tailwind.cofig.js 에 keyframe을 등록해...
-
Tailwindcss inset의 하위호환 이슈
Tailwindcss를 사용하면서 발생한 하위호환 이슈에 대해 소개합니다.발생한 이슈, 발생한 원인, 가능한 해결법, 적용한 해결법 순으로 소개합니다. 발생한 이슈 어느 날 평화롭게 업무를 보던 도중 하나의 버그 티켓이 할당되었습니다.특정 iOS 기기에서 화면의 요소들이 정상적으로 보이지 않는다라는 이슈였습니다. 해당 버그가 발생하는 기기를 보고 확인하기 전 해당 이슈가 발생하는 페이지에 웹 사파리로 접근하여 확인했을때는 정상적으로 요소들이 ...
-
블로그에 Radix Themes 적용 후기
현재는 Radix Themes를 사용하지 않고 radix ui를 래핑한 개인적인 ui 라이브러리를 사용하고 있습니다. Raon.dev 기술 블로그에 Radix Themes를 적용한 후기를 공유합니다.해당 기술에 대해 자세히 살펴보지는 않고 단순 후기를 공유합니다. 지난 5월 Raon.dev 라는 기술 블로그를 만들었습니다.velog, 티스토리, medium 등 블로그를 운영할 수 있는 다양한 플랫폼이 있었지만, 저는 직접 블로그를 구축하고 개...
-
Serverless SQL, Vercel Postgres 찍먹 해보기.
Vercel이 새롭게 선보인 Serverless database인 Vercel Postgres를 알아봅니다. Next.js v13.4, node 18 을 기준으로 작성하였습니다. 많은 웹 개발자가 Next.js를 통해서 개발하고 vercel을 통해서 자신이 만든 서비스를 배포합니다. (저도)Vercel을 통해 배포하면, 따로 웹 서버를 관리할 필요 없이 서비스를 안정적으로 배포 및 유지보수할 수 있다는 장점이 있습니다. Vercel을 통해 풀...
-
Next.js v13의 sitemap.js 및 metadata 적용하기
Next.js 13.4 버전을 기준으로 App Router를 활용한 기술블로그를 개발하며 겪은 경험을 공유합니다.간단하게 sitemap.xml을 만드는 방법 및 App Router의 새로운 Metadata API를 살펴봅니다. 사이트맵이란? 사이트맵은 사이트에 있는 페이지에 대한 정보를 제공하는 파일 입니다. 다양한 검색 엔진(ex. Google, naver)은 이 파일을 읽고 사이트를 보다 효율적으로 크롤링 할 수 있습니다.따라서, 본인의 ...