기업협업 회고


기업협업 기간


2023.03.13 ~ 2023.04.06

적용기술


  • React.tsx, styled-Component, React-query

협업툴


Monday

monday 를 통해서 협업 기간동안 작일, 금일 어떠한 것들을 했으며, 어떠한 것들을 진행을 할것인지 에 대해서 기업 CTO 님과 매일 내용을 공유 하였다.


담당 프로젝트 기능


QR code 타이머

  • 사용자의 데이터가 담긴 유효한 qr 코드에 15초 타이머 기능 구현
  • 15초 시간이 지나면 해당 qr 코드는 더이상 유효하지 않도록 구현
  • 15초 시간이 지나면 유효한 새로운 qr 코드 생성

사진


Modal ( Recoil 라이브러리 )

  • Recoil 라이브러리를 이용해 전역에서 관리 할 수 있고 재사용 가능 한 Modal 구현

사진


댓글 기능

  • 사용자들 간 소통을 할 수 있는 댓글 기능 구현
  • 사용자가 댓글을 입력 하면 해당 데이터를 post 해서 서버로 보내고, 보낸 데이터를 다시 get 해서 댓글 내용을 사용자의 이미지, 이름과 함께 보여질 수 있도록 구현

사진


회고


4주 라는 시간동안 기업협업을 다녀왔다.
첫주에는 지금껏 접하지 못했던 타입스크립트 에 대해서 study 를 먼저 하면 좋을것 같다고 CTO 님께서 말씀 주셔서 첫주에는 타입스크립트 공부를 진행 했다.
단순 타입만 지정 해주면 되는거 아닌가? 라는 생각에 공부를 시작 했는데 공부를 하면 할수록 어려운 타입스크립트… 쉽지만은 않았던것 같다…

첫주가 흘렀고, 둘째주 부터 하나씩 기능을 구현 해달라고 하셨고, 그렇게 처음 할당 받은 기능은 QR 코드 관련 타임 설정이었다.

사용자의 데이터가 담긴 유효한 qr 코드에 15 초 타이머를 생성 하고, 15초의 시간이 지나고 나면 새로운 qr 코드가 생성될 수 있도록 구현 그리고 이전 qr 코드는 더이상 유효 하지 않도록 구현 하는 것이다.
타이머 설정하는 것은 비교적 어렵거나 시간이 오래걸리지는 않았던 것 같다. ( 물론 구글의 힘을 빌… )
qr 코드 부분에서 시간이 좀 걸리고 막혔던 부분은 15초의 시간이 지난 후 qr 코드는 새로운 유효한 qr 코드를 재 생성이 되어야 하는 부분이다.

처음에 상당히 빠른 시간에 구현을 했는데, qr 코드가 재 생성 되었을때 원래와는 다르게 생긴 코드를 생성 했던것..

왜 다르지를 고민하고 검색하고 찾아 본 결과 아예 완전히 다른 새로운 qr 코드를 만들었던 것이다.
그리고 깨닳은 다른 한가지는 내가 처음 구현 했던 것 처럼 코드를 생성하게 되면, 어떠한 데이터가 담겨져 있지 않겠구나를 깨닳았다.
그렇게 qr 코드는 잘 마무리 지을 수 있었다.

셋째주 가 시작이 되었고 두번째 할당받은 기능은 사용자가 전체보기 를 클릭했을때, modal 창을 하나 띄우고, 해당 modal 창에서 사용자가 보유하고 있는 데이터들을 무한 스크롤을 통해 보여주는 기능이였다.

우선 Modal 같은 경우에는 이전에 프로젝트에서 한번 만들어 본 경험이 있었다 그래서 간단하게 useState 를 사용하여 Modal 창을 구현 할 수 있었지만 기업에서 Recoil 이라는 라이브러리를 사용하고 있었고, 그럼 Recoil 을 활용해 Modal 창을 구현 해보면 어떨까? 라는 생각이 문득 들어 Recoil 라이브러리를 활용을 해서 전역에서 관리 할 수 있는 Modal 기능을 구현 했고, 재사용도 하면 좋겠다는 생각에 재사용 가능 하도록 구현을 했다.
그리고 데이터를 무한 스크롤을 통해 보유하고 있는 모든 데이터들을 화면에 보여주는 기능을 구현을 해야했고, 리액트 쿼리 라이브러리의 인피니트쿼리를 사용을 해서 스크롤 하면서 데이터가 더있다면 계속 데이터를 불러올 수 있도록 구현을 했다.

하지만 역시 쉽게 흘러가지 않았고 Blocker 가 있었으니..
내가 만든 Modal 은 자식 컴포넌트 인데, ref 를 인지 하지 못해 데이터를 제대로 불러오지 못하는 상황이 발생했다.

처음에는 코드를 한줄 한줄 보면서 뭐가 문제인지 계속 뜯어보았고, 구글링도 챗지피티도 열심히 키보드를 두들기며 찾아보았지만 문제 해결을 하지 못했지만,, 찾아낸 답은 ref 를 인지 하지 못했던것..

모달의 부모컴포넌트에 useRef 를 import 해서 ref 를 만들어 주었고, 자식 컴포넌트인 Modal 컴포넌트에 ref 를 forward 해서 인지 하도록 만들어 주었더니,, 데이터가 착착 잘 꽂히기 시작 했다… ㅎ…

또 하나 배우며 성장 했다 😎

마지막주 마지막으로 할당 받은 기능은 댓글 기능 이었다..
댓글기능중에 여러가지가 있었으나. 정해진 혀업 기간내에 마지막주 일주일동안 내가 할 수 있었던건 사용자가 댓글을 입력하면 해당 데이터를 post 해서 서버로 보내고, 보낸 데이터를 다시 get 해서 댓글 내용을 사용자의 이미지, 이름과 함께 보여질 수 있도록 구현하는 것이었다.

생각보다 어렵지 않았던것은 위에서 진행 했던것처럼 인피니트쿼리를 한번 사용을 해봐서일까. 순조롭진 않았지만 해결 할 수 있었던것 같다..

현업에서의 경험은 값진 경헙이었던것 같다.
실제 기업에서 사용하는 코드를 볼 수 있는 좋은 기회 였던것 같고, 처음 접하는 것들도 많았으며, 문제를 보고 힘들지만 해결 해 나가고 많은것을 배울 수 있었던것 같다.

한단계 또 성장 할 수 있었던 계기가 되었던 좋은 기간 이었던 것 같다.


  • 기업 - METABON(주)

(본인이 만든 기능 코드 외 이미지나 영상은 업로드 가능 하다고 CTO 님께 허락 받았습니다. 감사합니다)