Project/웹 프론트엔드10 [Frontend] Next.js server action + CSR 개요Next.js 의 장점인 서버 사이드 렌더링을 최대한으로 활용하려면, server action 이 필요하게 됩니다. 그렇지만 서버 사이드 렌더링만을 사용해서는 인터렉티브 한 웹사이트를 만들려고 할 때 ‘use client'를 쓰라는 오류를 만나게 됩니다.결국 Next.js를 잘 쓰려면 서버 사이드 렌더링과 클라이언트 사이드 렌더링을 잘 접목시켜야 하는데 이번 SARDIP work-space 프로젝트에서는 이 작업을 어떻게 진행했는지 설명드리겠습니다.Server ActionNext.js 공식 문서에서는 server action을 서버에서 실행되는 비동기 함수라고 정의하고 있습니다. 서버 및 클라이언트 컴포넌트에서 호출된다고 하는데 개인적으로는 보통 클라이언트 사이드에서 사용하는 경우가 많았던 것 같습니.. 2024. 10. 19. [프론트엔드 아키텍쳐] 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. 이전 1 2 3 다음
