Project12 [웹 프론트엔드 개발] 프론트엔드와 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. [Next.js] 사용자 상태 관리: React의 상태관리와 비교 Next.js 프로젝트에서 사용자의 상태를 관리하는 방법은 전통적인 React 어플리케이션에서 사용되는 방식과는 꽤나 차이가 있습니다. 이는 Next.js 프로젝트의 렌더링 방식과 연관이 있습니다. 본 글에서는 Next.js의 장점을 최대한 활용하기 위해 React 어플리케이션 개발 방식과는 다른 접근이 필요함을 설명하고자 합니다. 전통적인 CSR 어플리케이션의 상태 관리 CSR(Client Side Rendering) 어플리케이션에서의 상태 관리는 주로 브라우저의 로컬 스토리지 또는 세션 스토리지를 활용하여 이루어집니다. 이 방식을 통해, 사용자의 인터렉션 (버튼 클릭, 페이지 방문 등)을 기반으로 동적인 상태 관리가 가능해집니다. 이러한 CSR 어플리케이션은 구현이 편리하다는 장점이 있습니다만, 브라.. 2024. 2. 5. 이전 1 2 3 다음
