Resource/웹 프론트엔드9 [프론트엔드 아키텍쳐] 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] 데이터 패칭(Fetching), 캐싱(Caching), 재검증(Revalidating) next.js의 공식 문서를 한글로 번역하면서 공부한 내용을 정리한 글입니다. Data Fetching: Fetching, Caching, and Revalidating | Next.js Learn how to fetch, cache, and revalidate data in your Next.js application. nextjs.org 서버에서 fetch를 이용한 데이터 패칭 / 캐싱 / 재검증 Next.js에서는 fetch Web API를 확장해서, 사용자가 서버의 각 요청에 대한 캐싱, 재검증 동작을 구성할 수 있도록 합니다. 그리고 React는 컴포넌트 트리를 렌더링하는 동안 `fetch` 를 자동적으로 메모(memoize)합니다. Next.js에서는 서버 컴포넌트(server componen.. 2024. 2. 20. 이전 1 2 3 다음
