[멋쟁이 사자처럼] 멋사 프론트엔드 스쿨 5기를 마치며 남기는 회고(팀프로젝트, 수료)

 ❤️‍🔥 Liked

• 멋쟁이 사자처럼 프론트엔드 5기를 수료하면서 가장 크게 배워간 것은 협업 능력과 팀 문화인 것 같다. 실제로 경험해 보니 정기적으로 진행되는 수업이나 프로젝트 과정에 몰두하다 보면 스스로를 한계까지 몰아가기도 하는데 외부에 있는 친한 친구들 보다도 같은 목표를 가지고 공부하는 동료들에게 많이 의지할 수 있었다. 나이나, 지역 등 환경의 차이를 넘어서서 끈끈하게 서로 응원해 주고 지지해주고 있다는 느낌을 자주 받을 수 있다. 같은 목표를 두고 있는데 경쟁하지 않고 서로 응원해 주는 소중한 경험은 사회에서 쉽게 얻을 수 없기 때문에 더 소중했던 경험!
• 팀문화가 생성될 수 있도록 분위기를 조성해주는 운영진 분들의 능력이 정말 탁월하다고 느꼈다. 덕분에 더 열심히 해서 기대 이상으로 성장할 수 있었던 것 같다. 수강생에게 언젠가 이런 조직에 소속되고 싶다는 좋은 표본을 몸소 보여주신 것 같아서 좋았다.
• 수료하면서 정말 생각지도 못했던 상을 받게 되었다. 이전에 진행했던 동료특강 덕분에 받은 '콘텐츠상'과 매주 진행되는 주간 설문에서 칭찬을 많이 받아서 받은 '동료 칭찬상' 예비 합격자라 늦게 합류하는 바람에 개근상을 못 받아서 아쉬웠는데 동기들 덕분에 상을 받게 되어서 너무너무너무너무.. 감동 받았고 큰 힘이 되었다! 💝 

 

 

집에서 등기로 받고 한 번 더  감동 받았어요... 좋은 추억 만들어 주신 프엔 5기 동기들과 운영진분께 감사드립니다!

 

 

• 정규 수업이 마무리 되고 3주 정도 팀프로젝트를 진행하게 되는데 팀편성 공지 이후로 크게 긴장이 되기 시작했다. 당시에 우리 조는 3명으로 구성되어서 더 걱정이었지만 지나고 보니 실력과 성향이 비슷한 3명이 한 팀이 된 점이 큰 강점으로 작용했던 것 같다. 프로젝트를 시작하면서 당장 내가 할 수 있는 것, 배워야 하는 것에 대해 조사하고 샘플을 구현해 보는 시간, 팀원 분들과 함께 회의하며 프로젝트 기획부터 하나하나 진행해 갔던 경험이 큰 성취감을 안겨주었고, 노력한 만큼 좋은 결과물로 돌아와서 정말 기뻤다.
• 우리 팀은 협업을 진행하면서 git flow 전략을 활용했는데, 덕분에 PR, Merge에 대한 개념을 잡을 수 있었다. 전부 Mbti 대문자 J들만 모여있어서 매일 코딩하며 새벽 3-4시에 잠들면서도 문서 작성이나, 깃헙 이슈 등록, 칸반보드 관리를 통한 일정을 함께 체크했던 일들이 즐겁고 좋은 기억으로 남았다ㅎㅎ (J들..최고야!)
• 멋사 정규 과정은 끝이 났지만 프로젝트는 끝나지 않았다...ㅎㅎ 제로웨이스트 SNS 플랫폼으로 netlify를 통해 배포가 완료되었는데, 현재 리팩토링 과정에 들어가서 팀원들과 함께 성능 최적화를 중심으로 개편하기로 했다. 진행하면서 1차적으로 모듈화 했던 코드들은 좀 더 디벨롭한 뒤에 전역에 적용해서 중복 코드를 최소화하고, 성능 측정 시 문제점으로 나타났던 이미지 최적화에 대해서는 라이브러리를 도입해 볼지, 방법론에 대한 고민을 좀 더 해보려고 한다. 또 useMemo나 useCallback 훅을 사용해 비동기 스레드 작업을 최소화하는 작업을 진행할 예정이다.
• React 입문 자체에 러닝 커브가 있었는데 프로젝트를 통해 Recoil, React-Query 라이브러리도 경험해보게 되면서 Server State, Client State에 대한 이해를 키울 수 있었고 React의 상태 관리 방식에 대해 익숙해질 수 있었다. 프로젝트를 진행하면서 겪은 문제점에 대한 트러블 슈팅, 장단점 분석, 기술 포스팅은 다른 게시물로 이어서 작성하려고 한다. :)

GitHub - JAYCODE-git/final-18-EarthUs: 🌎 우리의 지구를 함께 지켜요!

 

 

 💣 Lacked

• 협업을 하면서 가장 크게 느꼈던 건 코드가 레거시가 되면 안 된다는 것이었다. 
  중복 코드를 줄이는 것도 중요하지만 누가 봐도 이해할 수 있는 코드,
  팀원들에게 일일이 설명할 필요가 없는 코드를 작성하는 것이 중요하다는 점을 느꼈다.
• 현재 서비스 전체에 환경변수가 지정되지 않아 있다. 추후에 보안에 대한 학습 보완이 필요하다.
• 다양한 라이브러리를 사용해보고 싶어서 Recoil, React-Query를 사용했는데 JD를 보면
  아직도 Redux가 대세인 것으로 보인다...! Redux를 더 공부해야 할지 고민이다.
• 프로젝트를 진행하면서 기술 블로그, GPT, 공식문서를 참고했는데 확실히 프론트엔드 시장의 변화가 빠르다고 느낀 게, 블로그나 GPT에서 얻은 정보가 이미 지난 버전의 정보인 경우가 많았다. 공식문서의 도움을 받을 수 있도록 영어 공부를 더 해야겠다고 생각했다.

 

 

 ✏️ Learned

• 팀원들에게 많이 배웠다. 협업에 임하는 태도도 그렇고 같이 공부하는 입장에서 눈에 띄게 기술적으로 성장하는 팀원들의 모습을 볼 때  가장 큰 동기부여가 되어주었다.
• 웹접근성에 진심인 사람들만 모였다...! 디자인에 있어서도 4.5:1의 명암 대비를 만족해야 한다는 점을 이론으로만 알고 있었는데 직접 적용해 보면서 컬러코드도 외웠고, 키보드 탭이벤트나 스크린 리더에 대응해 볼 수 있었다.
• Recoil은 리액트 친화적인 문법이라 비교적 숙지하는데 어려움은 없었다. 전역으로 관리하는 회원의 정보를 저장하고 보여주는 데 사용했다. 추후에 쇼핑 기능을 추가할 예정인데 이때 상품에 대한 전역 상태관리로 한번 더 활용해보려고 한다.
• React-Query는 axios와 조합해서 사용해서 서버 데이터를 비동기로 호출하는 커스텀 훅을 만들어보면서 이번 프로젝트에서 가장 많이 공부했던 기술이었다. 덕분에 api 호출 방식과 메서드에 대한 이해를 키울 수 있었고 앞으로 axios는 계속 사용할 것 같은데 React-Query를 실무에서 얼마나 사용하게 될지는 잘 모르겠다. 무엇보다 정말 사용하기 편하다는 장점이 있었다. 
• 고정관념 같은 브라우저의 작동 원리가 리액트(SPA) 환경에서는 확실히 차이가 있기도 하다는 점도 느꼈다.
  예를 들면 브라우저가 새로고침되는 개념이 아닌 리액트의 마운트, 업데이트, 언마운트 과정을 실제 프로젝트를 경험해 보면서 데이터를 캐싱해 주는 조건식을 추가해줘야 했던 점이나, 리액트의 단방향 데이터 바인딩 방식을 보완하기 위해 도입한 Recoil이 React의 Context의 범위 내에 위치하고 있었다는 점 등등... 결국 React의 구조에 대해 이론으로만 아는 것이 아니라 직접 경험해 보면서 코드로 이해하는 경험을 하게 되었다.

🔥 핵심 기술

 

 

 👩🏻‍💻 Longed For

• 2달 정도 더 하고 싶은데..(미련 가득) 멋사 과정은 아쉽게도 끝이 났지만 앞서 말한 대로 얼스어스 프로젝트는 리팩토링, 기능 추가구현 단계를 팀원들과 함께 진행하기로 해서 앞으로 리액트 프로젝트는 꾸준히 진행하려고 한다. 우선 1차 리팩토링 기간은 3주로 잡았다!
• JSON Generator 바닐라 JS 오픈소스 프로젝트 참여.
• 위니브측에서 제공해 주는 오픈마켓 API로 React 쇼핑몰 완성하기.
• 회고조에서 진행하다 프로젝트로 중단된 리액트 공식문서 스터디 진행.
• 타입스크립트 입문!