안녕하세요! MyDATA Labs 프론트엔드 신입으로 입사한 채연하입니다.
안녕하세요! MyDATA Labs 프론트엔드 신입으로 입사한 채연하입니다.
마이데이터의 온보딩 경험을 공유하고, 이를 통해 배운 React를 다시 되돌아보기 위해 글을 작성하고자 합니다.
입사 후 각 파트에 적응하기 위해 온보딩 과정을 진행하게 되는데요. 담당하게 될 프론트엔드 파트에서는 주로 React를 사용하고 있어 온보딩 또한 이와 관련된 토이 프로젝트로 진행했습니다.
JavaScript에 대한 주니어만큼의(?) 지식과 경험만 있는 저에게 새로운 기술인 React를 이용한 프로젝트 소식은 굉장히 설레게 만들었습니다.
리액트의 첫인상, 이것은 암호문인가요..?
프로젝트는 가장 기본인 게시판을 만드는 것으로 결정되었는데요. 우선 리더님이 Layout을 잡아주시고 거기에 Axios를 이용해 API를 호출하여 게시판 목록을 만들거나 로그인, 에러 처리, 상태 관리 등을 구성하였습니다.
리액트 공식 문서와, 개발자의 단짝인 Google 그리고 새로운 친구 Chat GPT 등을 활용하여 차근차근 게시판을 만들면서 느낀 리액트의 첫인상은 단어 그대로 “암호문” 같았습니다.
주로 명령형 프로그래밍 방식으로 코드를 작성했었어서 선언형 방식의 컴포넌트들로 구성된 리액트는 무언가 숨겨져 있고 암호를 해석하는 듯한 느낌을 받았습니다.
인상 깊었던 점
- Frontend - Backend 분리 개발
- API로 데이터 주고 받기
프론트엔드부터 백엔드까지 하나의 프로젝트로 구성된 코드만 봐와서 프론트엔드 파트의 코드만 따로 분리해서 개발한다고 했을 때 굉장히 충격이었는데요.
분리된 상태의 프로젝트는 굉장히 가볍다고 느껴졌고 데이터는 API로 전송하니 각각의 영역에 집중해서 개발하기에 더 용이하다고 생각됐습니다. 마치 어이 없지만 효율적인 넌센스 퀴즈의 답변을 보는 듯한 느낌이었다랄까..
- 상태관리와 Recoil
개인 프로젝트를 했을 때에는 상태 관리에 대한 필요성을 느끼지 못해 이러한 개념이 있다는 것을 몰랐었는데 이번에 상태 관리, 특히 Recoil에 대한 개념과 사용법을 익히기 위해 사용하게 되었습니다.
상태관리는 여러 방법으로 할 수 있고 그 중 Redux가 널리 사용되고 있는 것처럼 보였지만 상대적으로 적은 코드와 간단한 구조로 상태관리를 할 수 있다는 점에서 Recoil을 사용하게 되었습니다. Recoil은 게시판을 구성하면서 사용했던 Hook의 사용법과 유사하게 느껴졌고 덕분에 사용법을 익히는데 크게 어렵지 않았습니다. (토이 프로젝트가 아닌 큰 규모였다면 어려웠겠지만..)
Recoil을 공부하며 코딩을 해보니 리액트는 부모 컴포넌트에서 자식 컴포넌트로 Props를 넘겨주는 형태여서 더 복잡하고 기능이 많은 웹이었다면 필요한 State만 가져다 쓸 수 있겠다 싶어 꼭 나중에 또 사용해 보고 싶다는 생각이 들었습니다.
- Error Boundary
Error Boundary는 하위 컴포넌트 트리의 어디에서든 자바스크립트 에러를 기록하며 깨진 컴포넌트 트리 대신 폴백 UI를 보여주는 React 컴포넌트입니다. - https://ko.legacy.reactjs.org/docs/error-boundaries.html -
Error가 발생하면 사용자에게 그대로 에러 페이지를 보여주는 것이 아닌 ‘잠시 후 다시 접속하세요’ 나 ‘로그인 후 이용해 주세요’ 등 특정 UI가 담긴 페이지를 보여주는 것으로 어떻게 보면 웹 사이트를 이용하면서 당연하게 보았던 페이지들이다 보니 오히려 생각을 못 했던 점이라 기억에 남았었습니다.
마치며
온보딩은 기대했던 것처럼 재미있고 유익한 시간이었습니다. 오랜만에 사용한 Git의 오류들 때문에 해메이기도 하고 퓨어 자바스크립트와 자바로만 만들어본 게시판을 리액트 구조의 애플리케이션으로 개발하며 즐겁게 진행했던 것 같습니다. 앞으로 프론트에 국한되지 않고 리눅스, 네트워크 등 전반적으로 알아가고 공부해야겠다는 생각을 하며 글 마치겠습니다! 긴 글 읽어주셔서 감사합니다.
Share article