🎞 #01 왓챠 클론코딩 'MICCHA' Phase1 기록 (프로젝트 하며 느낀점 / 프로젝트 소개)

👉 프로젝트 소개

영화, 예능, 드라마, 다큐 등등 갖가지 영상물을 제공해주는 왓챠 클론코딩 MICCHA - 믹챠 이다. 프로젝트 이름은 팀 이름과 왓챠를 본 따 지은 이름이다. 추후에는 디자이너 분께 부탁드려 로고까지 MiCCHA 로 교체했다.

👉 팀 소개

함께 프로젝트를 진행한 팀 이름은 MIC-TEAM ❗️ MIC이 의미하는 바는 May I Clone 이란 뜻인데, 팀분들과의 만남이 5월(May)이기도 하고 해석하면 '클론해도 될까요' 라는 뜻이다.

팀 인원은 총 5명으로 이루어져 있고 포지션은 백엔드 2명과 나를 포함하여 프론트엔드 2명 그리고 디자이너 1명으로 활동중이다. 직장인들로 결합된 팀으로 목표 작업물을 Phase 단계별로 나누어 러프하게 진행했다. 이렇게 여유롭게 작업하니 서로 책임감을 갖고 완성도를 높힐 수 있었다.

🔨 기술 스택

FrontEnd

BackEnd

⌛️ Phase 01 작업 기간

⭐️ 2021. 05. 11 ~ 06. 02

💻 작업 목표물

• 로그인 전 메인 페이지 full page + 스크롤
• 회원가입 페이지
• 로그인 페이지
• 비밀번호 찾기 + 이메일 발송

💭 프로젝트를 하며 느끼고 배운점 (+화면소개)

1. 함께하는 즐거움

얼마 전 퇴사한 회사에서는 사수도 함께 할 동료도 없어 외롭고 배움에 대한 갈증이 컸다. 그래서 이직을 결정했고 낼채공이 끝나기로부터 1년이 남아있는 때인 2020년부터 시작하여 올해 리액트 공부를 마치고 공부한 것들을 발휘하기 위해 사이드 프로젝트를 함께 할 사람들을 찾아나섰다.

그렇게 수많은 우여곡절 속에 찾고 찾다 나와 핏이 맞는 사람들을 구했다 ㅠㅠ

• 리액트로 하는 프로젝트
• 중간에 빤스런 하지 않으며 열정이 충만하고 책임감이 좋은 팀원
• 매사 적극적인 팀원
• git 브런치 생성을 비롯하여 코드리뷰 문화
• 서로 기술 공유 하며 배워갈 수 있는 팀원
• 약속을 잘 지키는 팀원

인복이 좋았던건지 작업하는 동안 너무 좋았고 즐겁게 작업할 수 있었다. 그렇게 다음 프로젝트도 함께 하기로 약속했다. 모두 올해 또는 내년 안으로 각자 원하는 회사에 합격해 잘 됐음하는 큰 바람이다.

갑자기 분위기 Gather Town 🏡 👥👤👥

매주 화요일과 주말마다 비대면 회의하는 공간이다. 프론트엔드로서 직업병인가 앞에 보여지는 것을 신경쓰다보니 새벽에 잠 안자고 꾸며봤다. 남들은 뻘짓이라 생각할 지 몰라도 매우 뿌듯함 만족

2. 자바스크립트의 중요성

그동안 리액트를 사용하면서 자바스크립트 공부 해야지 해야지.. 하다가 나의 사수 구글님께 의존하다 보니 소홀히 했는데 드디어 왜 자바스크립트 공부가 중요한지 뼈저리게 몸소 깨달았다.

회원가입과 로그인 폼에는 유효성 검사가 필수이니 그걸 자유자재로 잘 다룰려면 자바스크립트로 로직을 잘 짜야 된다는 것을. 구글링을 아무리 해도 한계가 있더라

구글링 결과 폼 형식 유효성 검사를 보다 쉽게 도와주는 formik, yup 같은 도구들을 추천했고, 나 또한 이것들을 사용하면 쉽게 처리할 수 있겠다 생각했는데 아니었다.

이름, 이메일, 비밀번호 폼태그가 조건에 따라 X 👉 O 로 아이콘이 바뀌고 이 조건들이 다 맞아야 버튼을 누를 수 있도록 활성화가 돼야하며 체크박스도 전체동의 했을 시와 옆에 (선택) 이라고 표기 된 체크박스를 해제 시킬 시 버튼 활성화 ❗️ 하지만 (필수) 라고 표기 된 체크박스 해제시 버튼 비활성화 ❗️ 등등 고려할 것들이 정말 많았다.

3. 쓸모있던 웹 퍼블리셔 경력

그동안 퍼블리싱 했던 이력들이 나름 쓸모가 크다. 내가 Phase 1 에서 작업한 것이라곤 Props를 이용해 활용도 좋은 UI 컴포넌트를 만들어 낸 것과 PC, IPad Pro, IPad Air, 아이폰X, 아이폰5 등등 다양한 디바이스에 유연하게 동작되도록 한 것 뿐이지만.. 솔직히 할 줄 아는 것이니까 동작되는거 보면서 제일 재밌었다. 할 줄 아는 것들이 더 늘어나면 진짜 개발이 재밌어질 것 같단 생각이 들었다. 앞으로 더 노력할 것. 화이팅

👉 Phase2 작업소개 바로가기

https://velog.io/@leemember/02-%EC%99%93%EC%B1%A0-%ED%81%B4%EB%A1%A0%EC%BD%94%EB%94%A9-MICCHA-Phase2%EA%B8%B0%EB%A1%9D-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%ED%9B%84-Home-%ED%99%94%EB%A9%B4

👉 사이트 바로가기

https://miccha.vercel.app/