[회고] MOBI

kimi·2024년 3월 14일

모비는 값비싼 사교육, 현실적 시간 투자의 결여에 겁먹은 세상의 모든 비전공자들을 위해 무료로 교육을 제공하고 취업 이후의 인프라 형성을 통해 새로운 시작을 응원하는 비영리 단체입니다. 현재는 내부 추천으로만 운영되고 있으며 향후 홈페이지 개설 및 외부 공개를 통해 영역을 점차 확장해 나갈 예정입니다!

작년 4월경에 프론트엔드 수업을 처음으로 들었습니다.

수업만으로는 협업과 문제 해결에 있어 다른 사람들과 함께 공유하고 배우는 경험이 조금 아쉽다고 판단이되어, 커뮤니티를 알아보고 가입하게 되었습니다.

모비는 소통을 중요시하는 단체였습니다

저는 함께 할 때 능률이 올라간다고 생각하고, 사람들과 소통하는 것을 좋아하기에 이 단체에 꼭 들어가고 싶었습니다!

다행히도, 최종적으로 mobi에 합류하게 되었습니다!

바쁘게 챌린지 하듯 한 주 한 주를 보내다 보니,
시간이 정말 빠르게 지나갔습니다 😮

배운 내용 중 중요하거나 기억에 남는 내용들을 정리해 보려고 합니다!

🚀 Weekly I Learned

1week : 상태 관리와 컴포넌트 구조화(+URL parameters, pagination)

1주차에는 먼저 페어와 함께 컴포넌트 구조를 나누는 기준이나 방법에 대해서 토의하였습니다.

기본적으로 화면상에서 변화가 일어나는 데이터들은 상태로 관리해야한다고 생각합니다.
그러나 웹사이트의 크기가 커지고, 복잡해질수록 상태관리는 어려워집니다.

상태를 "잘" 관리하는 것이란,

1. prop을 추적하기 용이해야한다(유지보수, props drilling 관련)
2. 상태관리 라이브러리를 사용한 Single Source of Truth, 업데이트의 일관성
3. 불변성 유지 (spread 연산자...)

라고 생각합니다. 상태관리를 잘하면, 코드의 유지보수성 및 유연성, 확장성이 더해져 어플리케이션의 성능과 사용자 경험이 향상됩니다.

컴포넌트를 나누는 기준은 이러합니다.

1. 코드가 너무 길어져서 가독성이 좋지 않을 때
2. 재사용 될 가능성이 있는 경우

컴포넌트를 잘 나누면 높은 모듈화와 재사용성이 높아져 효율적인 협업이 가능해집니다.

1주차에는 이런식으로 기본적인 내용을 중점적으로 다루어 앞으로의 학습에 대한 발판을 마련했습니다!

2week

디자인 시스템을 활용한 공용 컴포넌트 만들기

UI 인벤토리 만들기

다양한 스타일 라이브러리를 활용하여 디자인 시스템 적용하기

UI 라이브러리 사용하여 컴포넌트 3개씩 사용해보기

컴포넌트 주도 개발을 통해 코드의 재사용성을 높이고, 유지보수를 용이하게 하여 디자이너와 협업 시 어떻게 진행하는지 알아보았습니다.

디자이너와의 협업은 컴포넌트 기반 개발에서 매우 중요합니다.
이렇게 협업하면 일관된 디자인을 유지하고, 시간과 노력을 절약할 수 있다는 장점이 있습니다.

디자인 시스템을 적용한 재사용 가능한 컴포넌트를 만들면서 다양한 CSS, UI 관련 라이브러리를 사용해 보았습니다.

라이브러리들을 사용해보며, 많은 공식문서를 접하게 되었습니다.
공식문서를 잘 읽는 것은 매우 중요하지만, 왠지 모르게 두렵게 느껴지기도 했습니다.

하지만 페어와 함께 읽으면서 테스트하고 기본 개념을 이해하니, 조금 더 쉽게 접근할 수 있었습니다.

협업의 중요성에 대해 알고, 공식문서를 파헤치는 것에 대한 두려움을 떨쳐낼 수 있었던 뜻깊은 시간이었습니다!

3week

RHF를 활용하여 회원가입 토이 프로젝트 만들기 + 생각해보기 정리하기

나만의 보일러 템플릿 만들기

느슨한 관계 만들기

스파게티 코드 리펙터링 해보기

3주차 학습을 통해서 react-hook-form이라는 라이브러리를 접하게 되었습니다.
회원가입 로그인 로직을 보다 간단하고 직관적으로 구현할 수 있었습니다.

내부 최적화가 되어있어 성능이 우수하고, 유효성 검사를 실시간으로 관리할 수 있다는 점이 인상적이었습니다.

향후 프로젝트에도 rhf+yup, rhf+zod 를 모두 사용해보며 라이브러리에 대해 공부하고 실무 경험을 쌓았습니다.

나만의 보일러 템플릿을 만들면서, 내가 왜 이런 폴더를 만들었었는지 이런 파일명을 사용했는지 다시 한 번 되돌아보며 프로젝트 구조에 대한 이해도를 높였습니다.

(그 전까지는 consts폴더도 아무런 생각 없이 만들었는데,
이번에는 파일을 만들 때 어디에 넣을지, ui 라이브러리를 추가하면서도
왜 이 폴더의 이 파일명으로 작명해야하는지 생각을 해볼 수 있었습니다)

eslint와 prettier 파일을 설정하면서 그 안의 속성들에 대해서 다시 공부하였습니다.

보일러 템플릿을 통해 한 층 더 효율적인 개발을 할 수 있을 것으로 기대됩니다!

느슨한 관계를 만들며 유지보수성과 확장성을 향상시킬 수 있는 코드들을 만들어보았습니다.
모듈화를 통해 독립적인 단위로 분리하고, 전역상태관리를 통해 각 컴포넌트 간의 의존성을 최소화하고, 커스텀 훅 함수를 활용하여 로직을 재사용 할 수 있는 단위로 분리하였습니다.

4week: 자기주도 학습 주

타이머 만들어 보기
https://timer-gold-one.vercel.app/
TodoApi 활용하여 TodoList 만들기
https://github.com/kiminn/todo-api

4주차에는 자기주도 학습을 진행하며 부족한 점을 채워나갔습니다.

타이머를 만들며 useEffect, useRef, useState의 차이점에 대해서 정리하였고,
setInterval과 clearInterval를 통해 반복되는 로직을 처리하였습니다.

백엔드 api를 활용하여 Todolist를 만들고 간단한 CRUD를 해보았습니다.

자기주도 학습 주는 애매하게 넘어가거나 당시 그냥 생각없이 지나쳤던 중요하고 기본적인 개념들을 다시 되새길 수 있는 소중한 주였습니다.

이 경험을 통해, 계속 스스로 저의 부족한 점을 발견하고 극복해나가야겠다는 생각을 하게 되었습니다!

5week : 타입 스크립트

타입스크립트가 무엇인지 명확히 알고 있어야한다.

타입스크립트의 장점과 사용 이유를 알고 있어야한다.

자바스크립트에 타입을 추론할 수 있도록 타입 부여를 할 수 있어야 한다.

항상 강의시간에 말로만 듣던 타입스크립트에 대해서 배우게 되었습니다.

왜 동적 타입 언어인 JS가 에러가 많은지, 또 왜 TS를 써야하는지 정리해보았습니다.

다양한 타입들을 페어와 함게 정리하며 간단한 예제도 만들어보았습니다.

아래는 타입스크립트를 배우면서 썼던 블로그 포스팅입니다.!

🟦 타입스크립트 velog 포스팅

6week: 타입스크립트 프로젝트

chap-chap 프로젝트 진행
🔗 chap-chap 회고 링크
postMobism 프로젝트 진행
🔗 postMobism 회고 링크

6주차에 타입스크립트 프로젝트를 진행했습니다. 페어들과 함께 하루의 반을 태우면서 열심히 작업했던 기억이 있습니다. 백엔드 데이터 분석 부족으로 완성도 있는 프로젝트를 만들진 못하였지만, 지금 저의 가치관인 "함께 성장하고 발전하는 것"의 중요성에 대해서 일깨워준 소중한 프로젝트였습니다! chap-chap 프로젝트의 아쉬움은 postMobism에서 다시 thunderClient나 draw.io를 이용해 분석하며 채워봤습니다!