[앗차피디아] 1차 클론 프로젝트 개요

OROSY·2021년 9월 3일
5

Project

목록 보기
1/3
post-thumbnail

🍀 1차 프로젝트

드디어 1차 프로젝트가 시작되었습니다. 저희 조는 왓챠피디아 사이트를 클론 프로젝트로 진행하게 되었습니다. 매우 좋은 팀워크와 진지한 회의를 통해 진행되고 있는 프로젝트만큼 1주 뒤에 나올 결과물이 굉장히 기대되는 1차 프로젝트이기도 합니다.

velog 내에서 논란이 많은 일주일이었습니다. 의견을 다소 피력하긴 했습니다만, 해당 글은 아무래도 현재의 저에게 일어난 일이기에 감정이 담길 수밖에 없었다 생각합니다. 저의 글을 좋아해주시는 분들이 많아진만큼 책임감이 커졌고, 그만큼 글을 작성하면서 죄송하고 우려하게 되는 마음이 생긴 것도 사실입니다.

아이유의 '스물셋'에서 나오는 가사 중 '인사하는 저 여자 아직 웃고 있을까 늘 불안해요'라는 말이 생각나는 일주일이었지만, 다시금 일깨워주는 계기가 되었습니다.

현재 중요한 것은 결국 저의 코딩 실력이고, 담당한 프로젝트의 기능 구현이며 코드 리팩토링입니다. 지금 저는 인생 중 가장 젊기에 그리고 절실하기에 3개의 프로젝트에 진심을 다해야합니다. 그래서 그만큼 다른 것에 신경을 쓰지 않으려 노력하고 있습니다.

그저 좋아하는 코딩을 하면서, 제가 또 좋아하는 글을 쓰는 일을 통해 여러분들에게 조금이나마 도움이 될 기록을 작성하는 것뿐입니다. 저의 후기나 생각을 들려드리는 일도 물론 계속 업로드할 것이며, 다만 현재 프로젝트에 계속 집중하고 있기 때문에 프로젝트 관련 글을 집중적으로 작성하도록 하겠습니다.

서론은 매번 그렇듯이 길었지만 그렇다면, 클론 프로젝트를 진행하는 앗차피디아에서 제가 맡게된 담당은 무엇일까요?

⛴ Nav | 내비게이션 바

간단한 Navbar 기능 구현을 맡았습니다. 위 스크린샷은 이미 구현 완료한 부분이며, 로고는 저희 팀 능력자이신 디자이너셨던 영현님이 맡아주셨습니다. 이 안에는 크게 검색 기능, 로그인과 회원가입 기능이 있습니다.

내비게이션 바

  • 검색
  • 최근 검색어
  • 인기 검색어
  • 색상 반전(추가 기능)

단순한 검색 기능 뿐만 아니라 최근 검색어, 인기 검색어까지 포함됩니다. 최근 검색어는 로그아웃이 되어도 계속 남아있습니다. 이 부분을 구현하며 tokenLocalStorage 혹은 Cookie등에 대한 개념을 배울 수 있을 것 같습니다.

그리고 추가 기능으로는 영화 상세페이지로 넘어갈 때 색상이 반전되는 효과에 스크롤이 어느 기준으로 내려가면 다시 위의 모양으로 돌아오는 기능이 구현되어 있습니다. 해당 부분도 가능하다면 구현해보고 싶은 기능입니다.

🔐 Login & Signup | 로그인 & 회원가입 기능

로그인 & 회원가입 기능

  • 모달창 구현하기
  • 로그인 & 회원가입 유효성 로직 검사
  • 유효성 검사 로직에 따른 레이아웃 구현
  • 작성한 내용 모두 삭제 버튼
  • 로그인 & 회원가입 양식이 비슷함으로 this.props.children을 통한 컴포넌트 재활용 구현

왓챠피디아에서 로그인과 회원가입은 페이지가 아닌 모달창으로 진행됩니다. 라이브러리 없이 진행되는 것이 1차 프로젝트이므로 해당 내용도 구현 중에 있습니다.

그리고 유효성 검사 로직은 백엔드와 같은 정규표현식이 필요하며 이에 따른 함수 사용이 많습니다. 그리고 입력값에 따라 체크 버튼, 경고 메세지, borderbackground-color 변화까지 매우 변화무쌍한 로그인, 회원가입 창입니다.

마지막으로 가장 중요한 컴포넌트 재활용입니다. 해당 로그인과 회원가입 컴포넌트는 몇 가지만 다를 뿐 전반적으로 매우 똑같은 레이아웃입니다. 이러한 경우, 자주 컴포넌트를 재활용하기 위해 this.props.children이라는 개념을 활용하게 되며 map이나 props를 통해 부모와 자식 요소에게 전달할 것이 많아지는 매우 복잡한 로직이 필요합니다.

이번 주말까지 구현을 완료하여 코드를 보여드릴 수 있었으면 좋겠습니다. 일단, 현재까지 구현한 내용만 보여드리도록 하겠습니다.

로그인, 회원가입은 백엔드 무현님, 우진님과 각각 통신하여 token까지 받아오는 것을 진행하였고, 위와 같이 로직에 따라 체크 버튼의 색깔이 변화하는 레이아웃과 아래의 경고 메시지까지 구현 완료한 상황입니다.

그러나 위에 언급한 컴포넌트 재활용의 부분이 저로서는 쉽지 않기 때문에 이번 주말은 거의 프로젝트에 시간을 쏟아야할 것 같습ㄴ다.

📔 Trello

현재 저희 '앗차차'팀은 위와 같이 Trello라는 앱을 통해서 팀원분들과 소통하고 작업 진행을 서로 확인하기 쉽게 계속해서 업데이트를 진행하고 있습니다.

팀 프로젝트를 진행하시게 된다면, 해당 앱을 꼭 추천드립니다. 그리고 위 내용을 보아하니 저를 제외한 5분이 모두 잘해주시고 있기 때문에 저만 잘하면 되겠구나라는 생각을 한 번 더 하게 되네요.

추가적으로 매우 꼼꼼한 명희님의 도움으로 Trello 안에서 매일 미팅을 하면서 회의록을 작성하며 어제까지 한 일과 오늘 할 일을 공유하고 있습니다. 이렇게 첫 프로젝트부터 개발자가 소통이 얼마나 중요한지 깨닫게 되어 운좋게 너무 좋은 팀을 만났다고 생각합니다.

🧑‍💻 실제 코드는 다음에..

이번 글에는 말그대로 저희 앗차피디아의 대략적인 진행 상황과 제가 담당한 부분의 개요를 담아보았습니다. 내일 업로드 되는 글에는 코딩을 진행하면서 기억하고 싶은 코드를 남기도록 하겠습니다.

그럼 다음 글에서 뵙도록 하겠습니다!👋👋

profile
Life is a matter of a direction not a speed.

0개의 댓글