본문 바로가기

전체 글

 (12)
프론트엔드 개발자, AI와 페어 프로그래밍으로 풀스택 프로덕트 런칭하기 (feat. daily-literacy.com) Daily Literacy최근 '매일 문해력(Daily Literacy)' 이라는 서비스를 개발하고 런칭했다. 이 서비스는 매일 새로운 지문을 읽고, 문해력과 어휘력, 실무 소통 능력을 기르기 위해 기획된 웹 애플리케이션이다.현대인들의 짧아진 호흡에 맞춰 랭크 게임, 제너럴, 비즈니스, 어휘 등 다양한 모드의 텍스트를 제공하고 꾸준한 학습(Streak)을 유도한다.사실 요즘 나도 문해력이 떨어진 느낌이 있어서, 매일 읽는 습관을 만들려고 내가 쓰려고 만든 서비스다.기술 스택 선정과 그 이유AI 시대를 맞이하여 기술의 진입 장벽이 낮아졌다고는 하지만, 여전히 아키텍처를 설계하고 도구를 선택하는 것은 온전히 개발자의 몫이다. FE 개발자로서 사이드 프로젝트를 가장 효율적으로, 그러면서도 확장성 있게 구현하..
Vercel 최적화 (Serverless Funtions / Edge Functions) 개요next.js (vercel 로 배포) + supabase 로 구성한 사이드 프로젝트를 개발 중 문제가 하나 발생했다.local 환경에서는 문제 없었지만, prod 환경에서만 하면 next의 api 응답 시간이 너무 오래걸리는 것이다.vercel과 supabase 무료플랜을 사용하고 있었기 때문에 그런가 보다 했는데, 점점 prod 환경에서 테스트가 너무 불편해지자 유료 플랜으로 전환하지 않는 선에서 방법을 모색해보기로 했다.문제local 환경에서는 건당 100~200ms 정도 걸리는 api 요청이 prod 환경에서는 2s 가 걸린다.원인네트워크 통신 현황프로젝트의 네트워크 통신을 다이어그램으로 표현하자면 다음과 같다. 따라서 문제가 될 수 있는 구간은 2가지이다.웹브라우저와 next.js 서버 간 ..
FE 테스트 코드에 대한 고찰 FE 개발에 있어서 테스트 코드는 사용자가 직접 상호작용하는 인터페이스와 로직을 포함하기 때문에, 다른 종류의 테스트 코드와는 사뭇 다르다.혹자는 FE 테스트 코드는 Storybook과 같은 시각적 도구로 컴포넌트의 상태를 직접 확인하는 것이 충분하다고 주장한다.또는 FE에서 발생하는 모든 동작을 단위 함수로 작성하여 테스트하고, 그 밖의 영역은 굳이 테스트가 필요하지 않다고 말하기도 한다.하지만 실제 서비스 개발을 진행하다 보면, 단순한 시각 확인이나 함수 단위 테스트만으로는 사용자 경험 수준의 안정성을 보장하기 어렵다는 것을 느끼게 된다.이 글에서는 실제 FE 개발을 진행하며 느꼈던 테스트 코드의 필요성과, 만약 새로운 프로젝트를 시작한다면 어떤 테스트 시스템을 구성할 것인지 정리해 보았다.테스트 코..
직접 써보고 결정해보는 Firebase vs Supabase 개요jiujitsu-chart 프로젝트 개발을 위해 인증/인가 및 데이터베이스 연동을 담당할 백엔드 서비스를 선택하는 과정에서 여러 가지 옵션을 검토했고, 최종적으로 가격, 구현 난이도, JavaScript 지원 여부를 고려해 Firebase와 Supabase 두 가지로 선택지를 좁힐 수 있었다. 하지만 쉽게 둘 중 하나를 선택하기 어려웠고, 개인 사용 경험과 함께 일부 블로그글, 공식 문서를 참고하며 고민한 과정을 글로 정리하고자 한다.비교🤑 가격Firebase와 Supabase는 둘 다 다양한 가격 플랜을 제공하고 있으며, 프로젝트의 규모와 요구 사항에 따라 가격이 달라질 수 있다.따라서, 개발하려는 서비스의 요구 사항을 정확히 파악하고, 이에 가장 적합한 백엔드 서비스를 선택하는 것이 중요하다. ..
알고리즘, FE 실무에 적용하기 📖 개요 코딩 테스트를 위해 공부한 알고리즘 지식들은 개발 실무에서 사용할 일이 없을까? 개발 영역, 개발자의 역량, 개발 환경마다 다를 것이다. 이에 본인 얘기를 하자면 웹 플랫폼 서비스의 FE 개발자이며 주로 사용자에게 보여지는 화면을 개발한다. 보통 화면 개발이라 함은 사용자 인터페이스, 인터렉션 개발 서버 API 요청/응답 처리 일 것이다. 방대한 데이터를 직접 조회하는 경우는 없고, 어느정도 가공되어 응답된 데이터를 서버에서 받아서 사용하다보니 데이터를 효율적으로 탐색하고 처리하려는 고민보다는 사용자 인터페이스와 사용자 경험 최적화에 대한 고민을 주로 했었다. 최근에는 평소보다 데이터의 효과적인 탐색 및 처리에 대한 알고리즘적인 접근을 요구하는 상황이 발생했고 이를 정리하여 기록해두고자 한다. ..
주짓수 플로우 차트 만드는 사이트 소개 주짓수 플로우 차트를 만들 수 있는 사이트 입니다. https://www.jiujitsu-chart.com/ 도장에서 수련한 기술들, 본인만의 스파링 게임플랜을 플로우 차트로 기록합니다. 모든 기능들은 무료로 제공됩니다. 기능 구성 플로우 차트는 3가지 종류의 노드로 구성이 가능합니다. 이미지 중요한 포지션, 기술에 대한 시각적인 이해를 돕기 위한 내장 이미지들입니다. 해당 이미지들을 활용해서 본인의 차트를 더 풍성하게 작성해보세요. 텍스트 주짓수의 기술들은 수 많은 디테일과 경험에 의존합니다. 본인이 배우거나 깨달은 디테일들을 글자로 기록해보세요. 비디오 텍스트와 이미지 만으로는 충분하지 않을 수 있습니다. 함께 기록해두고 싶은 유튜브 영상을 플로우 차트에 포함시키세요. 비디오 노드를 생성한 다음..
OpenSource Contribute 후기 시간이 너무 많이 흘러버렸지만... 이제라도 남겨보는 오픈소스 컨트리뷰팅 후기 시작글 막연하게 오픈소스 개발에 대한 욕심이 있었다. 라이브러리 혹은 패키지 없이 개발하는 IT 개발 실무자는 없을 것이다. 어느순간 어쩌면 너무 본인이 라이브러리에만 의존하고 있지 않나라는 생각이 들었다. 아마 이런 죄책감(?)에서 비롯된 욕심이었나보다. 이런 생각에서 비롯되어 실제로 오픈소스 기여에 대한 경험을 정리하여 기록해두고자 한다. 본문 🔎 오픈소스 프로젝트 찾기 본인이 기여할 오픈소스를 찾는게 가장 첫번째였다. 돌아보자면, 이 단계에서 가장 긴 시간이 소요됐다. 나에게 있어 기여할 오픈소스 프로젝트를 찾는다는 건 다음과 같은 기준에 부합하는 프로젝트를 찾는 것이었다. 흥미로워 보이거나 본인이 평소에 사용했던 프로젝..
내 블로그가 검색되지 않는다 티스토리 블로그 글쓰기를 한지 어연 4개월째. 티스토리 블로그에서 작성한 글들이 구글에서 검색이 되지 않는 것을 발견했다. 전에 시험 삼아 시작해봤던 velog 블로그에는 똑같은 글이 있는데 여기는 잘 검색이 되지만, 티스토리에서 작성한 글은 검색이 되지 않는다. 그래서 이 글에서는 왜 티스토리에서 내가 작성한 글은 노출되지 않고, 어떤 문제가 있는지, 어떻게 해결하면 좋을지에 대해 본인이 찾아본 정보들을 정리해보고자 한다. 목표 티스토리에서 작성한 글이 구글에서 검색이 되지 않는다. 원인을 알아보자. 구글에서 내 블로그 글이 잘 검색되도록 개선하자. SEO 기본 가이드 SEO (Search Engine Optimization): 검색 엔진 최적화 구글에서 잘 정리한 SEO 문서가 있다. 😇 검색엔진 최..

티스토리툴바