Contents

[k8s project] Frontend UI

Goorm kubernetes 전문가 양성 과정 중 프로젝트 진행 과정을 공유합니다.

Front-end: UI 구현

React js를 통해 UI를 구현했습니다. 팀원 모두가 React사용 경험이 없어 개인공부를 어느정도로 실시한 다음에 구현을 진행하였습니다. 저는 생활코딩으로 기초적인 지식을 쌓았습니다.
강의하나만으로 구현할 수 있는 정도까지 실력을 쌓았으면 좋았겠지만, 아무리 UI 디자인을 크게 신경쓰지 않는다고 해도 뚝딱 만들기에는 어려움이 많았습니다. 그래도 구글링 신공(?)으로 리엑트 템플릿이나 다른 사람이 많든 코드들을 보며 하나둘씩 UI 컴포넌트들을 만들다보니, 어떻게 만들어야할지 그래도 감이 잡혔습니다.

mui

https://mui.com/static/logo.png

mui라는 React UI 툴을 많이 사용했는데, 이걸 사용하니 그래도 봐줄만한 UI가 완성되었습니다.
https://user-images.githubusercontent.com/82520143/163703619-5cc7a12a-b105-4901-bbca-4cf34b72f560.png

react-table

https://react-table.tanstack.com/_next/static/images/logo-light-66d4dd9109004332c863391e6d1cb309.svg

react-table은 React로 Table UI를 간단하게 구현할 수 있도록 해주는 라이브러리로, 테이블 내 데이터를 검색하거나 정렬하는 것을 지원해주기 때문에 좀 더 쉽게 UI를 구현할 수 있었습니다.
https://user-images.githubusercontent.com/82520143/163703767-0855a1f1-0f52-49a9-a80f-638a95b71da7.png

회고

처음 시작할 때 프론트엔드는 못할거 같다는 생각이 들었는데, 그래도 막상 만들다보니 어느정도 감이 잡히고, 해볼만하다는 생각이 들었습니다. Backend쪽을 희망해서 프론트엔드는 등한시 했었는데, 서로 긴밀하게 연결되는 분야라 나중에 BE를 공부할 때도 많은 도움이 될거 같다는 생각이 들었습니다.(물론 backend를 해본건 아니지만… 😭) UI 구현하면서 Github로 협업하는 것도 처음 해보았는데 Organization Repo에서 fork해와서 작업하고, Github branch전략에 따라 기능별로 branch노 나누어서 구현 해보고, Issue&PR도 생성해보면서 add, commit, push밖에 모르던 git을 좀 더 잘 쓸수 있게 된거 같습니다 ㅎㅎ.