요즈음 진행하고 있는 프로젝트는 현재 참여하고 있는 1:1 기상 스터디를 플랫폼화 하는 프로젝트입니다.프론트엔드 팀원으로 참여하며 이 프로젝트를 시작할 때 구조 설계에 특히 신경을 써서 선택했습니다.처음 기획 때 이야기가 나왔지만 이 프로젝트는 기능이 늘어날 가능성이 (특히) 높기도 하고, 사이드 프로젝트인 만큼 팀원 변경이 자주 일어날 수 있는 가능성이 높았습니다. 그렇기에 유지보수에 좋고, 기능 단위로 나누기에 협업에 좋다는 점을 들어 FSD 아키텍처를 선택했습니다. 하지만 얼마 전, 팀원이 대대적으로 좀 바뀌게 되었고 폴더 구조를 이해하는 과정에서 여러 질문이 생겼습니다."이건 widgets에 하는 건가요 features에 하는 건가요?""api도 공통으로 쓰이면 그냥 shared에 작성하면 되나..

왜 이 글을 쓰게 되었는가최근 진행 중인 프로젝트에서는 shadcn ui를 기반으로 UI 컴포넌트를 구현하고 있습니다. 프로젝트를 Next.js와 tailwind를 사용해서 개발하기도 하고, headless 컴포넌트이면서 class-variance-authority(cva)를 조합해서 커스터마이징 할 수 있다는 게 편리할 것 같아 사용하기로 선택했습니다. shadcn으로 받아온 파일은 되도록 원형 코드 그대로 유지하면서, shared/ui 폴더에 별도로 커스텀 한 컴포넌트를 만들어 사용하는 방식으로 구조를 잡았습니다.기본 컴포넌트를 직접 수정하지 않도록 해서 유지보수성을 확보하고자 한 선택이었습니다. 하지만 막상 사용해 보니까 예상치 못한 불편함과 어려움이 있었습니다.아마 제가 headless ui를 사..

아키텍처 패턴이 왜 중요할까?소프트웨어를 개발하면서 가장 흔히 마주치는 문제 중 하나가 기능이 많아질수록 코드가 복잡해지고 유지보수가 어려워진다는 점입니다.특히 UI 로직과 비즈니스 로직이 섞여 있는 경우, 단순한 수정 하나가 연쇄적으로 많은 부분을 건드려야 하는 문제도 생기고, 테스트를 진행하기도 어려워질 수 있습니다. 이때 바로 이 아키텍처 패턴이 유용하게 사용됩니다.아키텍처 패턴은 역할을 명확하게 나누어 코드의 책임을 분리하고, 유지보수와 확장성을 높이는 방법으로 활용됩니다.대표적 아키텍처 패턴에는 MVC, MVVM 외에도 MVP.. 등이 있고, 특히 안드로이드나 프론트 개발의 경우에는 MVP와 MVVM이 많이 사용됩니다. 처음 아키텍처에 대해 공부할 때는 왜 이렇게 어렵게 구조를 나누고, 아키텍처..

Q. 주소창에 특정 웹 페이지의 주소를 입력했을 때 어떤 일이 일어나나요? 프론트엔드 개발자를 준비하고 있다면 면접 단골 질문에 해당 질문이 있는 걸 많이 봤을 것이라고 생각한다.나 또한 해당 질문을 많이 봤지만 블로그를 작성하면서 한 번도 브라우저의 렌더링 관련이나, 데이터 전달을 작성하거나 공부하지 않았다는 것이 문득 생각났다. 프론트엔드를 개발하려면 어떤 과정을 통해 데이터가 전달되고 화면에 렌더링 되는지를 확실하게 알고 있어야 한다.그래서 이번 기회에 해당 과정을 한번 제대로 정리해 보고자 해당 주제를 작성해보려 한다.  주소창에 주소를 입력한다 → 특정 주소로 이동한다.사실 브라우저가 어떻게 작동하는지 알지 못하는 사람은 단순히 주소를 이동할 때 위 두 단계밖에 확인하지 못합니다.그러나 저희는 ..

이번에 프로젝트를 시작하게 되면서, 항상 그렇듯이 어떤 기능을 사용하고 사용하지 않을 것인지에 대한 회의를 진행했다.그러다 캐시에 대한 이야기를 나누며 Tanstack query에 대한 이야기가 나왔다.Next.js를 사용해서 프로젝트를 진행하는데 Next.js의 fetch기능과 Tanstack query 두 가지중 선택하는 과정이 있었다.결론적으로는 Tanstack query를 사용하지만, 정확히 두 기능의 차이가 뭔지,프로젝트에서 기술을 사용하는 이유를 정확히 알고 시작을 하는 게 좋지 않을까?라는 생각에 해당 주제로 글을 작성하게 되었다.    "Tanstack query랑 Next.js의 fetch.. 둘 다 캐싱하는 거 아닌가?" 처음 프로젝트에 뭘 사용할 지 의견을 나누는 과정에서 이 두 가지..

프로젝트를 개발하면서 떼 놓을 수 없는 것 중 하나는 바로 알림입니다.서비스를 이용하는 사용자가 지속적으로, 자주 서비스에 접근하게 만드는 것이 좋기 때문이죠.고객을 유치할 수 있는 방법 중 가장 손쉽게 접근할 수 있는 것이 바로 알람입니다. 웹에서 알림을 보내려면 Web Push Notification을 이용하거나, 앱이면 인앱(In-app) 알림이나 Firebase를 이용한 푸시 알림 등 그 선택지가 더 다양하기도 합니다. 그러나 한 프로젝트에서 저는 이 반대의 경우를 마주하게 됩니다.사용자가 데이터를 보내고, 서버(+AI모델)에서 이 데이터를 처리한 후 처리한 데이터를 화면에 보여줘야 하는데  이런 상황을 마주하게 됩니다.프론트에서 할 수 있는 건, 하염없이 기다리며 일정 시간마다 ( 혹시 일 끝났..

쓰다 보니 프로젝트 회고가 되어버린 Presigned URL 업로드 포스트....하지만 기억을 되짚어 보며 복습도 되고 좋네요 ^-^bPresigned URL이란?웹 어플리케이션을 개발하면서 파일을 업로드해야 할 경우가 생기면 여러분은 어떤 방식을 이용하나요?아마 가장 먼저 떠오르는 방법은 파일을 서버에 올리고, 서버를 거쳐 파일을 S3에 업로드하는 방식을 떠올리실 거라 생각합니다.🤔 그러나 이 방식에 불필요한 서버 부하와 비효율적인 네트워크 사용이라는 문제가 있습니다.바로 이 문제를 해결하기 위해 Presigned URL이 등장헀습니다. 그래서 정확히 Presigned URL이 뭐냐고 물으신다면. 정말 말 그대로 미리발급된(Presigned) URL이라고 생각하시면 됩니다.잠시 AWS에서 정의한 Pr..