본문 바로가기

React3

[프론트엔드 아키텍쳐] 프론트엔드 아키텍쳐 도입 일기 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.
[React] 프론트엔드 테스트와 의존성 분리 프론트엔드와 테스트 대부분 웹 프론트엔드 개발자들은 테스트 코드의 중요성에 대해서 어렴풋이 알고는 있다고 생각합니다. 다만, 아래와 같은 이야기들로 테스트 코드 관련 담론을 무마하는 경향이 있는 것 같습니다. 프론트엔드는 코드 변경이 빈번하다던데, 웹 프론트엔드에서 굳이 테스트 코드를 짜야하나? (반박) 테스트 코드를 작성하면 변경사항이 기존 기능에 영향을 미치는지 빠르게 확인할 수 있다. (반박) 코드 변경에 따른 예상치 못한 버그를 사전에 방지할 수 있다. 프론트엔드 개발자가 직접 UI를 확인하면서 개발할텐데 테스트 코드를 굳이 작성할 필요는 없지 않나? (반박) 프론트엔드 개발자의 수동 테스트도 중요하지만, 테스트 코드는 자동화된 테스트를 통해 일관된 품질을 유지하는 데 도움이 된다. (반박) 수동.. 2023. 11. 29.