기업측의 자산으로 인하여 기업협업 동안 Task로 주어진 업무들은 따로 자료를 못 남긴다는 점을 알립니다.

🏢 기업소개(Uiti)

• 회사 소개 : 집현전 이라는 자사 Prop-tech 서비스를 통하여 빅데이터 기반 주거 목적의 부동산을 소비자에게 연결해주는 플랫폼 기업

Prop-tech란? AI와 Big Data 등 신산업 기술과 부동산의 융합된 새로운 기술 분야

What did you do?🤔

위티는 자사서비스도 운영하면서 SI 업무도 진행했다.
우리는 외주로 받은 당구장 커뮤니티 사이트의 admin 페이지를 제작하는 부분을 맡아 진행하였다.

1. 프로젝트 주제 📝

• 주제 : 당구 클럽 커뮤니티 플랫폼 서비스 中 이커머스 어드민 페이지 제작
• 협업 인원 : Front-end 5명
• 협업 기간 : 20.12.07 - 21.01.08 (한달)
• 기술 스텍 : Recat Hooks, React Router ,Typescript, Ant-Design, GitLab, Mono Repo, Lerna

2. 주어진 Task 🧑🏻‍💻

• 공통 Nav바 레이아웃 구현
• 주문내역 페이지의 항목별 테이블 기능 구현
• 주문내역 테이블 각 항목 우측에 '변경' 버튼 클릭시, 일부 상태 변경 기능 구현
• 쇼핑관리 페이지 테이블 항목별 테이블 기능 구현 및 이미지 업로드 기능 구현
• 항목별 검색, 필터 기능 구현
• 관리자 로그인, 로그아웃 기능 구현

3. 협업 도구 🛠

업무 진행과정은 위코드에서 배운 내용과 크게 다를바 없었다.
메신저 역할이자, 서로 정보를 공유할 때는 Slack,
업무의 진행과정 및 스케줄 관리는 Asana,
Github만 스다가 실무에서 처음 써보는 GitLab,
API의 사용은 Swagger, 이것만 있으면 언제든 어디서든 API를 붙여 볼 수 있었다.

4. 기억에 남는 코드 💻

위티 측에서는 admin 페이지를 구현하는데 굳이 리덕스를 쓸 필요가 없다고 말씀하셨다.
실제로 Ant-Design 라이브러리와 state만으로 검색 기능을 구현하는데 충분했다.

하지만 나는 리덕스에 대해 제대로 써본적이 없고, 라이브러리에만 의지하면 안된다 생각하기에
한번 리덕스로 전역에서 관리하고자 코드를 작성해봤다.

물론 기업측에서 지시를 내린 부분은 수용하고 잘 따르는 편이다. 번외로 연습삼아 만들어 보았다.

React-Hooks의 useReducer를 사용해서 만들어 보았다.

처음에 API에서 받아온 값을 useEffect를 사용하여 바로 dispatch로 reducer로 보낸다음 값을 뿌려주고
검색버튼을 눌렀을때 다시 dispatch하여 API로 쿼리스트링을 날려 다시 받아와서 값을 뿌려주는 형식으로 만들어 보았다.

그렇게 복잡하지 않은 작업이기에 react-hooks-useReducer 만으로 해결할 수 있을거 같다는 생각이 맞았다고 생각하니까 새로운 문제에 직면 해도 자신감을 잃지 않는 부분같다.

하지만 되도록이면 API를 전역에서 관리하지 않을수 있으면 관리하지 않는 것이 좋다.
그에대한 이유는 아래 링크를 참고하자.
전역 상태관리에 대한 단상

5. 결과 및 느낀점(회고)

결론부터 이야기한다면, 맡은 업무는 계획에 차질없이 잘 진행하였다.
위티측에서 우리에게 요청 한 내용으로는 아래와 같다.

1. admin 페이지인 만큼 디자인의 비중이 크게 많지가 않다. 알아서 잘 꾸미길 바란다.
2. Typescript, Ant-Design 라이브러리를 사용하여 페이지를 제작해주길 바란다.

처음 2주차까지는 고생을 좀 했던거 같다. 실무에서 직접 쓰이는 Typescript를 적용하는데 꽤나 애를 먹었고, 기존엔 style-component를 사용하여 레이아웃을 꾸몄다면, 이번엔 정해진 Library를 이용하여 그것을 커스텀해야하는데, 커스텀 하는 부분에서도 상당히 많은 시간을 쏟았던거 같다.

칭찬해주고 싶은 점👏🏻

이전까지는 처음 접하는 기술스텍이 있으면 지레 겁먹거나, 이걸 왜 써야되냐는 반감을 가지고 피하기 일쑤였는데, 어느순간 이런 마음들은 싹 사라진채 묵묵히 알아서 적용하는 내 스스로를 발견하게 되었다. 라이브러리에 대한 거부감과 어려움은 많이 사라진 것이 보였다.

그리고 동기가 본인에게 어렵지 않냐고 물었을때 정말 패기있게 그리고 별 대수롭지 않게 한 말이 생각난다.

"공식문서랑 구글링만 있으면 다 할 수 있지 안그래?"

시작이 반이다. 그리고 자신감이 나머지 반이다.

위코드의 자기주도학습의 효과가 이렇게 실무에서 보여진다는것을 느낀 순간 나는 한단계 더 develop 되었다고 생각하고 칭찬해주고 싶다.

아쉬운 점 + 보완해야 할 점🧐

실무에서 쓰이는 기술들과 새로운 라이브러리를 겪으며 시행착오를 많이 겪은 만큼 조급한 마음도 컸다.
기존에 프로젝트였으면 2시간이면 끝날 일들이 처음엔 하루,이틀씩 소요되고 있었고 성격이 살짝(?) 급한 탓에 조급한 마음이 들어 코드의 가독성이 살짝 떨어지고 있다는 것을 느꼈다.

항상 남한테만 조급해하지 말라고 조언을 해주던 나였는데, 막상 내가 조급해하니 참 아이러니했다.

그치만 이 조급함은 단순히 성격이 급해서가 아닌 회사에 나의 실력을 인정받기 위한 몸부림으로 생긴 조급함이 컸었던거 같다. 이제 이 조급함만 없애면 되겠네? 까짓꺼 이것도 없애보지, 난 다 할 수 있으니까

그리고 한가지 더 아쉬웠던 점이자 더더욱 열정이 생기게 된 부분은, 만약 리액트로만 만들었다면 이 주어진 업무보다 더 많은 결과물을 보여줄 수 있었을텐데 라고 생각을 했는데, 한편으로는 리액트를 이렇게 쉽게 다루기까지 계속된 반복과 쓰임이 있었음으로 지금 이 배운 기술들도 계속 익히면 언젠가는 이 기술도 쉽다 느끼겠지? 생각이 들었다.

끝으로, 마치며 🙇🏻

기업협업 마지막날이 되었고 한달이란 시간이 순식간에 흘러 지나갔다.
실무진 분들도 너무나 우리에게 잘해 주셨고, 대표님도 정말 우리를 너무 많이 신경써주셨다.
어떻게 보면 고작 한달밖에 안있는 우리를 생각보다 더 하나하나 신경써주셔서 너무나 감사했다.

그리고 무엇보다 학생의 신분이 아닌, 현업의 실무 관계자 분들의 눈높이에서 고민할 수 있는 경험이었다. 지금까지 동기들끼리 이 정도만 보이면, 이 정도 기능만 하면, 이라고 생각했지만 회사의 관계자 분들은 내가 지금까지 생각했던 것보다 두 걸음 정도는 더 앞선(진행속도나 완성도에서) 결과물을 원하였고 발빠르게 맞춰 나가는 소중한 시간이었다.

아직 더 경험해봐야 할 부분들이 많지만, 이제 더이상 겁먹지 않는다.

나는 뭐든지 잘할 수 있다는 마음가짐이 있으니까