Frontend Tech Stack

우리가 사용하는 기술, 함께 만들어가는 서비스

웰네트웍스는 더 나은 사용자 경험과 효율적인 개발 환경을 위해 다양한 프론트엔드 기술을 활용하고 있습니다.

새로운 기술을 적극적으로 탐색하고, 서비스에 적합한 기술을 선택하며 안정적이고 확장 가능한 서비스를 만들어갑니다.

개발 과정에서 코드의 가독성과 유지보수성을 중요하게 생각하며, 여러 개발자가 함께 작업하기 좋은 환경을 만들어가고 있습니다.

우리가 사용하는 기술 스택

프론트엔드 개발에서는 화면 구성부터 API 통신, 데이터 관리, 사용자 입력 처리까지 다양한 작업이 이루어집니다.

웰네트웍스는 Next.js와 TypeScript를 중심으로 프론트엔드 개발 환경을 구성하고, TanStack Query, Zustand, React Hook Form, Zod, MUI 등의 기술을 활용하고 있습니다.

각 기술의 역할을 구분하고 서비스의 특성에 맞게 조합하여 효율적인 개발 환경을 만들어가고 있습니다.

프론트엔드 개발 환경

Next.js App Router와 TypeScript를 기반으로 React 생태계의 다양한 기술을 활용하고 있습니다.

Next.js의 파일 시스템 기반 라우팅과 레이아웃 구조를 활용하여 페이지를 구성하고, Server Components와 Client Components의 특성에 맞게 기능을 개발합니다.

효율적인 데이터와 상태 관리

데이터의 특성에 따라 서버 상태와 클라이언트 상태를 구분하여 관리하고 있습니다.

API를 통해 가져오는 서버 데이터는 주로 TanStack Query를 활용하여 요청과 캐싱, 데이터 갱신 및 로딩, 오류 상태를 관리합니다.

여러 컴포넌트에서 공유해야 하는 UI 상태나 사용자 선택 정보 등은 Zustand를 활용합니다. 각 상태의 역할과 사용 범위를 고려하여 서버 데이터와 클라이언트 상태를 효율적으로 관리하고 있습니다.

일관된 UI와 사용자 경험

Material UI(MUI)를 활용하여 재사용 가능한 UI 컴포넌트를 구성하고, 서비스 전반에 일관된 디자인을 적용합니다. 색상, 타이포그래피, 간격 등의 디자인 요소는 공통된 규칙에 따라 관리합니다.

MUI의 테마 시스템을 활용하면 여러 컴포넌트에 일관된 디자인 속성을 적용할 수 있고, 서비스의 디자인 방향이 변경되더라도 공통된 기준으로 수정할 수 있습니다.

개발자마다 서로 다른 스타일을 작성하는 상황을 줄이고, 사용자에게는 통일된 UI 경험을 제공할 수 있도록 구성하고 있습니다.

사용자 입력부터 데이터 검증까지

사용자 입력이 필요한 화면에서는 React Hook Form과 Zod를 함께 활용하고 있습니다.

React Hook Form을 통해 입력값과 폼의 제출 상태를 관리하고 Zod를 활용하여 필수 입력값이나 데이터 형식 등의 유효성을 검증합니다.

다양한 입력값을 처리하는 화면에서는 각 필드에 검증 규칙을 적용하고, 조건을 충족하지 않은 경우 오류 메시지를 표시합니다. 폼 상태 관리와 유효성 검증의 역할을 구분하여 사용자 입력을 일관된 방식으로 처리하고 있습니다.

우리가 지키는 코드 컨벤션

여러 개발자가 하나의 프로젝트를 함께 개발할 때는 일관된 코드 스타일을 유지하는 것이 중요합니다.

같은 기능이라도 개발자마다 코드를 작성하는 방식이 다를 수 있습니다. 코드 스타일과 프로젝트 구조에 일정한 기준이 있다면 다른 개발자가 작성한 코드를 이해하고 수정하는 과정이 수월해집니다.

웰네트웍스는 코드의 가독성과 유지보수성을 고려하여 일관된 작성 규칙을 적용하고 있습니다.

TypeScript를 기반으로 데이터와 컴포넌트의 타입을 명확하게 정의하고, ESLint와 Prettier를 활용하여 코드 스타일을 관리합니다.

세미콜론 사용, 작은따옴표 적용, import 순서 등 기본적인 작성 규칙을 통일하여 불필요한 스타일 차이를 줄이고 있습니다.

컴포넌트는 역할이 명확하게 드러나도록 구성하며, 재사용이 필요한 요소는 공통 컴포넌트로 관리합니다.

코드 작성 예시

import { Box, Typography } from '@mui/material';type ServiceCardProps = {  title: string;  description: string;};export function ServiceCard({  title,  description,}: ServiceCardProps) {  return (    <Box sx={{ p: 3, borderRadius: 2 }}>      <Typography variant="h6">        {title}      </Typography>      <Typography variant="body2">        {description}      </Typography>    </Box>  );}

위 코드는 TypeScript와 MUI를 활용한 간단한 컴포넌트 구성 예시입니다.

컴포넌트의 Props 타입을 정의하여 전달받는 데이터의 구조를 명확하게 하고, UI를 구성하는 요소들이 쉽게 구분되도록 작성합니다.

함께 성장하는 개발 문화

웰네트웍스는 더 나은 서비스를 만들기 위해 다양한 기술을 활용하고 효율적인 개발 방식을 고민하며 꾸준히 개선해 나가고 있습니다.

기술을 선택할 때는 서비스의 요구사항과 프로젝트의 특성을 고려하고 실제 개발 과정에서 경험한 문제들을 바탕으로 개선 방향을 찾아가고 있습니다.

새로운 기능을 구현하는 과정에서 다양한 기술을 경험하고, 기존 코드를 개선하며 더 효율적인 개발 방식을 고민할 수 있습니다.

앞으로도 안정적인 서비스와 유지보수하기 좋은 코드를 만들기 위해 개발 환경을 지속적으로 발전시켜 나가겠습니다.

실제 서비스 개발 과정에서 새로운 기술을 경험하고 다양한 문제를 함께 해결하며, 개발자로서 성장할 수 있는 환경을 만들어가고자 합니다.