React Enterprise System 삼성엔지니어링
삼성엔지니어링 EDP
React 사내 업무 화면 구축
엔지니어링 데이터를 통합 관리하는 사내 업무 플랫폼입니다.
- 기간
- 2021.10–2022.01
- 역할
- Frontend Developer · 프론트엔드 4인
Samsung EDPEnterprise Data Platform
At a glance
프로젝트 요약
사내 데이터를 조회하는 업무 화면을 개발했습니다. React 함수형 컴포넌트와 Hooks로 화면 상태를 처리했습니다.
- 클라이언트
- 삼성엔지니어링
- 기간
- 2021.10–2022.01
- 담당
- Frontend Developer · 프론트엔드 4인
- 기술
- React, Hooks, JavaScript, REST API
Problem
필요했던 작업
엔지니어링 업무에서 쓰는 데이터를 화면에 표시하고 사내 REST API와 연결해야 했습니다.
Ownership
맡은 일
프론트엔드 4인 중 한 명으로 React 함수형 컴포넌트와 Hooks를 사용해 업무 화면을 만들었습니다. 공통 컴포넌트와 사내 API 연동도 맡았습니다.
Decision
구현 방법
여러 화면에서 쓰는 UI를 공통 컴포넌트로 나눴습니다. API 요청에 따라 로딩·성공·오류 상태를 처리했습니다.
Outcome
작업 결과
사내 데이터를 조회·표시하는 업무 화면과 재사용할 수 있는 입력·표시 컴포넌트를 구현했습니다.
01 · Problem
프로젝트 배경
엔지니어링 데이터를 다루는 사내 업무 화면을 개발했습니다. 프론트엔드 4인 중 한 명으로 React 함수형 컴포넌트와 Hooks를 사용했습니다.
여러 업무 화면에서 반복되는 UI를 공통 컴포넌트로 만들었습니다. 사내 REST API를 연결하고 요청에 따른 화면 상태도 처리했습니다.
02 · Ownership
맡은 역할
Frontend Developer · 프론트엔드 4인
- React 함수형 컴포넌트와 Hooks로 업무 화면 개발
- 여러 업무 화면에서 쓰는 공통 UI 개발
- 사내 REST API 연동과 로딩·성공·오류 상태 처리
- 업무 데이터를 조회하고 표시하는 화면 구현
03 · Decisions
구현 방식
입력·표시 UI를 공통 컴포넌트로 분리
여러 업무 화면에서 반복되는 UI를 공통 컴포넌트로 만들었습니다. 같은 입력·표시 기능을 페이지마다 다시 작성하지 않고 가져다 썼습니다.
API 요청에 따른 화면 상태 처리
사내 API 요청에 따라 로딩·성공·오류 상태를 나눴습니다. React 함수형 컴포넌트와 Hooks로 각 상태의 화면 동작을 처리했습니다.
04 · Evidence
작업 내역
이 프로젝트에서 수정하거나 새로 만든 기능입니다.
주요 작업
- React 함수형 컴포넌트와 Hooks로 업무 화면 개발
- 반복되는 입력·표시 UI를 공통 컴포넌트로 분리
- 사내 REST API 연결과 응답 데이터 표시
- 업무에서 쓰는 데이터에 맞춰 화면 구성
05 · Outcome
작업 결과
- 프론트엔드 4인 중 한 명으로 React 업무 화면 구현
- 입력·표시 UI를 공통 컴포넌트로 만들어 재사용
- 사내 REST API 응답과 요청 상태를 화면에 반영
06 · Screens
주요 화면
화면을 누르면 크게 볼 수 있습니다.
07 · Workflow
작업 순서
보통 다음 순서로 작업합니다.
요청 내용 확인
기획서와 디자인을 읽고 바꿀 내용을 확인합니다. 운영 중인 서비스는 기존 코드도 함께 살펴봅니다.
화면과 데이터 확인
여러 화면에서 쓸 컴포넌트와 페이지별 상태를 구분합니다. 필요한 API와 예외 처리도 이때 확인합니다.
기능 개발
프로젝트의 코드 작성 방식과 API 규격에 맞춰 화면과 기능을 만듭니다.
동작 확인
화면 크기와 입력 상태를 바꾸며 동작을 확인합니다. QA에서 발견한 문제와 운영 중 받은 피드백을 반영합니다.