아름다웠던 모내기 기업협업

⚒️ 프로젝트 소개

프레젤글로벌커넥션그룹에서 백오피스 개발을 한 달간 진행했습니다. 로그인, 비밀번호 변경, 게시글 조회, 게시글 등록 기능을 완성했습니다.

작업기간 : 2021-11-15 ~ 2021-12-09 (4주)

투입인원 : 3명(front 2 명, back 1 명)

담당업무

• Login
  • 아이디와 비밀번호 Validation
  • 서버 오류시 Chakra UI의 toast를 활용해 에러 메세지 전달
  • 로그인 성공시 로컬스토리지에 회원 정보 저장하고 메인 페이지로 이동하는 기능 구현
  • 로그인 및 마이데일리 페이지로 이동하는 아이콘 기능 구현
  • 로그인시 crypto를 사용해 암호화한 뒤 비밀번호 전송
• Change Password
  • 비밀번호 Validation
  • 비밀번호 변경 성공시 로컬스토리지에 있는 회원 정보 삭제(로그아웃)하고 로그인 페이지로 이동시키는 기능 구현
• Homepage(Post List)
  • Pagination custom hook 제작
  • Tab 변경시 다른 List 호출하는 기능 구현
  • moment 라이브러리를 활용해 원하는 형식으로 date를 보여주는 기능 구현
  • 게시글의 타입에 따라 다른 페이지로 이동하는 기능 구현(정보 등록, 정보 수정 페이지로 이동)
• Post Registration Page
  • 하나의 게시글에 대한 정보 등록 페이지 제작
  • 제품명에 따라 해당 네이버 상품 검색 페이지로 이동하는 기능 구현
  • 상품 정보를 담은 객체 Validation
  • 이미지를 업로드하는 기능 구현
  • 1차, 2차, 3차 카테고리 클릭시 상위 카테고리에 해당하는 API 호출하는 기능 구현
  • API로 호출한 Example Label에서 Main과 Hidden Label을 선택할 수 있는 기능 구현
  • API로 호출한 이미지 중 하나의 이미지만 선택할 수 있게 하고, 이미지 업로드 시 업로드된 이미지가 선택될 수 있도록 하는 기능 구현
• Others
  • 로그인한 회원만 로그인 외 페이지에 접근할 수 있도록 Protected Route 기능 구현
  • 컴포넌트 재사용을 통한 코드 작성 효율성 극대화
  • 404 Page 제작

스킬 및 사용툴

• View (React with TypeScript, React-Router, Styled-components, UI Library[antd, Semantic UI, Chakra UI], Apollo GraphQL)
• Other Tools (Git, Github, notion, Slack, Figma etc.)

❤️ 회고 ❤️

처음 마주한 Typescript와 Graphql, 그리고 새로운 기술 스택을 대하는 자세

요즘 말그대로 핫하다고 하는 Typescript와 Graphql을 다뤄볼 수 있게 되어 출근 전부터 굉장히 설렜고, 그만큼 잘할 수 있을까 하는 걱정이 됐다. 첫 출근을 앞두고 사용하게될 기술을 공부할 시간은 단 이틀 뿐이었다. 개념만 잡고 가자는 생각으로 지금까지 사용하던 자바스크립트, RestAPI와 무엇이 다른지 공부해갔고, 큰 그림을 그린 것은 프로젝트 시작 후 빠르게 실행에 옮기는데 큰 도움이 됐다. 처음엔 타입을 선언한다는 것이 도대체 왜 디버깅을 하는데 좋다는지 이해가 전혀 가지 않았고, props를 전달하는 과정에서 굉장히 많은 붉은 오류 글씨를 보게 되었다. 그냥 Any로 지정하고 싶다는 마음이 솓구쳐 올라왔지만 지난 프로젝트 때 쌓아올린 인내심으로 스택오버플로우의 도움을 받아 타입 오류의 늪에서 벗어날 수 있었다. 일주일 정도 best practice도 열심히 보고, legacy 코드도 읽고 해석하다 보니 적응이 되어 어느새 자연스럽게 interface.. type.. 을 적고 있는 내 모습을 발견했다. Apollo graphql을 사용하는데 있어서도 적응기간이 조금 필요했지만, 며칠 고생을 하더니 playground에 있는 docs를 보며 크게 복잡한 소통 없이 API를 사용할 수 있음에 감사하고 있는 나였다.

항상 발전하는 개발자가 되고 싶다. 웹을 구성하는 기술은 지금 이 회고록을 적고 있는 시간에도 변하고 있으며, 이 변화에 적응하지 못한다면 좋은 개발자가 될 수 없을 것이다. 기업 협업 이전에는 세션을 들으며 어느 정도의 가이드라인을 따라 학습했다면, 지금부터는 방대한 개발 정보의 홍수 속에서 스스로 어떤 개발자가 될지 결정해야 한다. 앞으로는 변화에 관심을 갖되 두려움이나 편견은 갖지 말고 공부해보자. 공식문서와 친해진다면 그 기술은 곧 나의 것!

이제는 말만 들어도 든든한 그 이름, TEAM 진짜 별로다. 내 마음의 별로..🤩

좋은 분들과 함께 일하며 성장할 수 있다는 것은 정말 큰 축복이다. 축복받은 우리팀 덕분에 나의 내면, 그리고 기술적 성장 속도는 세 배가 되었다.

기업협업 팀이 발표되자마자 알았다. 정말 우리팀 너무 별로라는 것을. 내 마음의 별로!!!!!! 멘토님께서 아무런 걱정이 되지 않는다고 하실 만큼 우리 팀의 케미는 소문이 자자했다. ( 제 생각입니다 ㅎㅎ ) 결론적으로, 우리 팀은 정말 합이 잘 맞았다. 팀원들의 열정, 텐션, 체력, 관심, 집중, 휴식의 정도가 모두 달랐는데, 달랐기에 서로 보완해줄 수 있었고 너무 불타지도 너무 식지도 않은 채 한달 내내 가볍지만 무거운(?) 마음으로 프로젝트를 진행할 수 있었다. 지금 이 회고가 모순일 수도 있지만, 그 만큼 팀 내 균형이 잘 지켜졌다. 또한, 다양한 경험을 가진 세 명이 만나 개발 외에도 많은 도움을 받고 배웠으며, 다시 한 번 우리 팀원분들께 정말 소중한 경험과 시간을 만들어주셔서 감사하다는 말씀을 전합니다. 각자의 자리에서 지금처럼만 꾸준히 성장하며 다시 동료로 만났으면 좋겠습니다.

모내기와 함께

감사하게도, 첫출근날부터 직원분들과 모두 인사를 나눌 수 있었다. 모든 분들과 함께 프로젝트를 진행하지는 못해 아쉽지만, Figma를 보며 이해되지 않거나 개선이 필요한 부분에 대해 소통할 수 있었다. 이를 통해 왜 개발자는 다른 직무에 계신 분들과 소통을 자주 해야 하는지 알 수 있었고, 개발에 대한 내용을 누구나 이해할 수 있게 풀어 설명하는 능력이 중요하다고 느꼈다.

기업협업을 하며 PR에 대한 코드 리뷰를 받았으며, 주 1회 리뷰 세션에 참여했다. 그 과정에서 몰라서 적용을 못했던 것들에 대해 피드백 받고 공부하여 적용할 수 있었으며, 지금까지 지켜오던 컨벤션과 다르게 해당 기업에서 사용하는 컨벤션에 맞춰가며 코드를 작성할 수 있었다. 처음 해보는 것은 팀원과 논의하여 로직을 세우고, 아무리 고민해도 모를 때에는 도움을 요청해 힌트를 얻어 프로젝트를 수월하게 진행할 수 있었다.

항상 진행 상황을 체크하고 때로는 명확한 가이드라인, 때로는 힌트를 던져주신 개발자 분들께 정말 감사드리며, 마주치면 항상 응원의 말씀을 해주시던 모든 모내기 분들께 감사드립니다.

✏️ 새로 배운 작기도 하고 크기도 하지만 소중한 것들

• Graphql은 URI가 하나! 서버를 키고 playground로 들어가 docs를 보며 내가 원하는 쿼리를 뽑아쓸 수 있다. Restful API와 비교했을 때 프론트엔드의 자유도가 굉~장히 높은 편! API documentation을 따로 만들지 않아도 되는 점, 불필요한 데이터를 받지 않아도 된다는 점은 굉장한 장점인 것 같다.
• Apollo Graphql 사용시 useQuery와 useLazyQuery를 사용해 호출 시점을 다르게 만들 수 있다. CUD는 useMutation으로 호출한다.
• 상황에 따라 UI Library를 사용하면 개발 속도를 높일 수 있다. 백오피스의 경우 서비스 사용자의 접근이 불가하기 때문에 UI의 중요도가 상대적으로 낮아 라이브러리를 도입하는 경우가 종종 있다고 들었다.
• protected route 코드를 작성해 로그인하지 않은 경우(로컬스토리지나 상태관리 라이브러리 스토어에 로그인 정보가 저장되어 있지 않으면) 접근 권한이 없는 페이지에 접근하지 못하도록 만들 수 있다. 프로젝트를 할 때 여기까지 고려하지 않았는데, 실제 서비스시 무조건 필요한 기능이다.