Next.js8 [프론트엔드 아키텍쳐] SARDIP WEB-GIS Monorepo 안녕하세요. 이번 글에서는 현재 회사에서 진행중인 프로젝트의 규모가 확장됨에 따라 기존 모놀리식 프로젝트를 확장해서 새로운 아키텍쳐를 도입한 내용을 공유하고자 합니다. MFA, FSD 등 프로젝트 확장에 적용할 수 있는 다양한 프론트엔드 아키텍쳐가 존재하지만, 그중에서도 저희는 Vercel에서 추천하는 모노레포 라이브러리인 turbo와 최근 모노레포 구성에서 각광받고 있으며 또한 Vercel에서 모노레포 구성 시 추천하는 pnpm을 사용했습니다. 간단한 사용법은 turbo 공식 홈페이지에 나와있어서 문서를 읽어보시면서 따라하시면 충분히 이해하실 수 있을 것입니다. 중요한 것은 사용한 게 아니라 왜 turbo + pnpm 구조인 모노레포를 사용하였는지 이므로, 본 글에서는 그에 대해 작성하겠습니다. MFA.. 2024. 6. 6. [웹 프론트엔드 개발] 프론트엔드와 DTO - DTO는 일반적으로 백엔드에서 데이터를 전송하는 객체를 의미한다.- 서비스 로직에 DTO를 전송하여 비즈니스 로직을 처리하게 된다.- 만약 DTO 생성 시에 처리해야하는 로직이 있다면 이를 내부 메서드에서 구현하여 처리한다.- 하지만 좀 더 복잡한 로직이 수반된다면 이는 서비스 로직으로 옮겨간다. (DTO 예시)interface UserDTO { id: number; name: string; email: string;}class User { id: number; name: string; email: string; constructor(dto: UserDTO) { this.id = dto.id; this.name = dto.name; this.email = dto.email.. 2024. 6. 6. [프론트엔드 아키텍쳐] 프론트엔드 아키텍쳐 도입 일기 LUMIR SARDIP WEB-GIS들어가며안녕하세요. 이번 글에서는 루미르의 SARDIP WEB-GIS 프로젝트(2024.01.02 ~ 2024.02.28) 개발을 진행하면서 겪은 어려움들과 이 어려움을 해결하기 위해, 프론트엔드에서는 아키텍쳐를 어떻게 구성하면 좋을지에 대한 고민을 담은 내용을 정리해보려고 합니다. 이번 프로젝트의 경우, 백엔드 개발자인 사수님과 프론트엔드 개발자, 저 두명이서 진행하게 된 프로젝트입니다. (사내 웹 개발자가 두명뿐이어서 당장 투입할 수 있는 인력들은 모두 참여하게 된 것이라고 보시면 되겠습니다.) 프로젝트의 프론트엔드 개발자가 한 명 뿐이라 힘들었다기 보다는 오히려 혼자 하나의 프로젝트를 구성하다 보니 이것저것 많이 시도할 수 있는 기회를 얻어서 더 좋았다고 생각했습.. 2024. 4. 1. [Next.js] 사용자 상태 관리: React의 상태관리와 비교 Next.js 프로젝트에서 사용자의 상태를 관리하는 방법은 전통적인 React 어플리케이션에서 사용되는 방식과는 꽤나 차이가 있습니다. 이는 Next.js 프로젝트의 렌더링 방식과 연관이 있습니다. 본 글에서는 Next.js의 장점을 최대한 활용하기 위해 React 어플리케이션 개발 방식과는 다른 접근이 필요함을 설명하고자 합니다. 전통적인 CSR 어플리케이션의 상태 관리 CSR(Client Side Rendering) 어플리케이션에서의 상태 관리는 주로 브라우저의 로컬 스토리지 또는 세션 스토리지를 활용하여 이루어집니다. 이 방식을 통해, 사용자의 인터렉션 (버튼 클릭, 페이지 방문 등)을 기반으로 동적인 상태 관리가 가능해집니다. 이러한 CSR 어플리케이션은 구현이 편리하다는 장점이 있습니다만, 브라.. 2024. 2. 5. 이전 1 2 다음
