개요
(주)에이비에이치 재직 관련 문서입니다.
사용 기술
•
Frontend : React, Next.js, TypeScript
•
Backend : Next.js API Route, MySQL
•
etc : Git, Gitea
수행 내용
회사 소개 홈페이지 개발 (프로토타입)•
기간 : 24.01.15. ~ 24.02.01. (약 2주)
•
기술 : React
•
성과 : ‘(주)에이비에이치’ Service Website 프로토타입 개발 완료
•
업무
◦
타 부서와의 협업 역량 확인 중점
◦
CSS design system 구성
◦
AdobeXD 기반 스타일링
◦
Docker를 이용한 사내망 배포
◦
구현 사항
▪
반응형 지원 (PC, 태블릿, 모바일)
▪
이미지 업로드 및 저장 기능
▪
이미지 처리 API 적용
▪
상단 GNB, 우측 하단 Contact Button 애니메이션 적용
◦
라이브러리를 이용한 UI 구현
▪
▪
•
Before&After 이미지를 슬라이더 드래그를 통해 확인할 수 있도록 구성
▪
•
여러 이미지 중 하나를 선택하여 확인할 수 있도록 리스트 형태로 구성 (가로 스크롤을 마우스 드래그로 이용할 수 있음)
◦
입력값 검사 및 에러 핸들링
▪
‘Super Resolution’에서 이미지를 업로드하지 않고 ‘처리하기’ 클릭 시 뜨는 오류 문구
▪
‘사용자 등록’에서 입력하지 않은 항목이 존재하는 상태에서 ‘등록하기’ 클릭 시 뜨는 오류 문구
시연 영상 스크린샷 스마트공장 MES 리뉴얼•
기간 : 24.02.02. ~ 24.02.26. (약 1개월)
•
기술 : React, Next.js, TypeScript, MySQL
•
성과 : 공장 설비 모니터링 웹사이트 개발 완료
•
업무
◦
tailwindCSS design system 구성
◦
협업을 위한 공용 컴포넌트 분담 개발
▪
AdobeXD 기반 스타일링
◦
실시간 데이터, 그래프 뷰어 구현
▪
react-chartjs-2 라이브러리 이용 및 커스텀 스타일링 적용
◦
설비명, 날짜/시간 등의 데이터 필터링 구현
◦
Next.js API Route를 이용한 API 개발
▪
API 명세(Schema, docs) 작성 및 구현
▪
React-Query Custom Hook 모듈화
•
query key를 이용한 분기 처리
◦
전달 parameter에 따라 하나의 API에서 서로 다른 기능을 제공할 수 있도록 구성하기 위함
◦
동일한 API를 사용한 동시 요청 처리를 위함
•
실시간 제공 여부에 따른 분기 처리
◦
실시간 데이터 제공이 필요한 페이지와 그렇지 않은 페이지로 나뉘는 상황
◦
전달 parameter에 따라 refetchInterval key 동적 할당을 통해 해결
◦
기상청 단기예보 API 적용
▪
1시간에 1번씩 주기적으로 온/습도 데이터를 불러옴
◦
Docker를 이용한 사내망 배포
스크린샷 기타•
Gitea 환경 구성
◦
사내 프로젝트 형상관리를 위한 Gitea 도입을 제안
▪
기존 개발팀에서 형상관리가 이루어지고 있지 않아, 파일 단위로 프로젝트가 오가는 비효율적인 방식을 개선하기 위해 Gitea 환경을 구축하여 사용하는 것을 제안함
▪
Gitea : Github, Gitlab과 같은 Git 기반의 형상 관리 플랫폼으로, Go 언어 기반으로 개발되어 가벼운 서버에 사용하기 용이함
◦
사내 NAS에 구축 완료