<본죽> 1차 본죽 웹사이트 클론 프로젝트 회고록

김건우·2020년 8월 30일
project
0
post-thumbnail

프로젝트 소개

▶ 죽을 전문으로 판매하는 유명 프렌차이즈 사이트를 기반으로 한 기능 구현 프로젝트

▶ 개발기간

  • 2020년 8월 18(화) ~ 2020년 8월 28일(금)

▶ 팀 구성

  • Front-End: 4명 (이효정, 조윤민, 손수민, 김건우)
  • Back -End: 2명 (김해준, 권창식)

▶ Git Hub

▶ 개발 스케줄 관리와 소통을 위해 사용한 프로그램



구현 영상



사용된 기술

Common
  • JSON
  • Git
  • AWS
  • Linux
  • HTTP
  • Postman
    -. API 호출
    -. 응답 확인
Front-End
  • HTML / CSS
  • JavaScript
  • React
    -. create-react-app settings
    -. Routes
    -. React-Router-DOM
    -. fetch를 이용한 API 호출
    -. map을 이용한 jsx 리턴
    -. Routes.js 의 path 를 이용한 동적 라우팅
  • SCSS
Back-End
  • Python
  • Django
  • MySQL


내가 맡은 역할

Front-End 개발

메인페이지

  • 메인 페이지 레이아웃 구현
  • Nav, Footer 공통으로 사용하는 Component 구현
  • 스크롤 위치에 따라 변화하는 Nav
  • 현재 진행중인 Event Slider(마우스 끌기와, 시간에 따라 자동 넘김)
  • 컨텐츠에 대한 Scroll Event
  • 클릭한 컨텐츠와 맞는 데이터 송출
  • 동영상 목록을 보여주는 버튼형 Slider
  • 공지사항 애니메이션

로그인에 따른 권한

  • 로그인한 회원이 Token을 가지고 있는지 확인
  • 로그인 성공 시, Nav에 로그인 표시
  • Token 없을 시 회원가입으로 이동
  • Token 확인 될 시, 컨텐츠 이용 가능하도록 구현

검색 기능 구현

  • Nav 돋보기 아이콘 활용하여, 클릭에 반응하여 나타났다 사라지는 검색창 레이아웃 구현
  • 검색 후 결과 확인 가능한 레이아웃 구현
  • 검색 시, 동적라우팅 적용하여 URL 이동하며, 검색 내용 나타나도록 구현
  • fetch 함수 활용하여 쿼리스트링으로 전송하여 일치하는 데이터를 가지고 받음
  • 팀원의 Component 활용하여, 검색 결과에 대한 메뉴 Card 출력


잘한점 / 아쉬운점 / 해결 or 개선 방법

잘한점

팀원과의 소통

우리팀은 전반적으로 모든 팀원들과 소통이 잘되었다. 시시한 농담부터 서로 어떤 개발을 진행중이고 어떤 어려움에 처해있는지 까지 다 알고 있었다. 정말 잘한 부분이 많지만, 소통을 가장 먼저 적은 이유는 우리팀이 성공적으로 프로젝트를 마칠 수 있었던 이유중 가장 큰 부분이라고 생각하기 때문이다.

소통은 서로의 코드를 알아보게 해주었고, 이것은 서로의 어려움을 도와줄 수 있는 발판으로 작용하였다. 물론 각자의 역할이 있었지만, 팀원들의 지혜가 합쳐졌기에 자신의 역할을 충분히 해낼 수 있었다고 생각한다.

벡엔드와의 소통

팀원과의 소통과 따로 적은 이유는, 앞서 이야기한 소통과 데이터베이스의 정보를 가져오기 위한 소통을 다르게 느꼈기 때문이다. 서버와 연결하여 데이터를 가져온다는 개념은 알았지만, 사실 구현 한다는 것은 다른 문제였다. (사실 성공했을 때의 행복을 따로 기록하고 싶은 마음도 있다.)

mork 데이터를 활용하며, 내가 쉽게 데이터를 가져올 수 있는 구조를 벡엔드에게 보여주었고 벡엔드는 이를 반영하며 데이터베이스를 구조화 시켜주었다. 우리는 더 쉽고, 간단하게 하지만 누락되는 데이터는 없게 하기 위해 데이터 구조에 대하여 회의했다

긴밀한 소통은 내 걱정을 단번에 씻겨주었다. 우리의 로직대로 시도하여 단, 한번에 데이터를 불러왔을 때, 정말 너무 행복했다.

(김해준, 권창식 벡엔드 개발자에게 감사함을 표한다)

검색과 적용

웹사이트의 기능을 구현하는 과정은 모든 것이 새로웠다. 개발이란 늘 느껴왔지만 개념과 구현은 완전히 다르다. 항상 어려움에 닥치고, 어떤 문제는 나를 5시간 6시간씩 붙잡는다.
그러나 프로젝트를 진행 하는 동안 어떤 이슈가 발생해도 상관 없다는 마음가짐을 가졌다.
개발을 공부하며 느낀 것은, 문제를 만났을 때 어떤 방식으로 접근할지를 먼저 생각하고, 접근에 필요한 부분을 검색하고, 이를 적용하는 것만큼 현명한 방법은 없다는 것이다.

모든 것을 외우고 다니는 개발자는 없다.
문제 상황에 맞춰 필요한 것을 검색하고 적용하는 것 또한 실력이고 개발이다.
이번 프로젝트를 진행하며 적극적으로 검색하고 적용하며 문제를 해결해 나간 나에게 칭찬하고 싶은 부분 중 하나이다.

아쉬운점

리펙토링

아직 쥬니어 개발자이기에 범하는 실수 이긴 하지만, 프로젝트 진행 첫 회의를 통해 계획을 세울 때 자신감에 차있었다.
이틀만에 무언가를 만들 수 있을 것 같았고, 기능을 구현 할 수 있을 것 같았다. 하지만...
미친듯이 구현만 하는 것은 매우 잘못된 개발 방식이다. 코드가 어떻게 작성되어 있는지 살펴보며 개발해 가는것은 매우 중요했다.

당시 나는 기능구현에 뿌듯해 하며, 첫 리뷰요청을 하였는데 리펙토링에 대하여 많은 리뷰를 받았다.
(엄청나게 긴 코드를 하나하나 읽어주시며 리뷰해주신 종택님께 너무 감사합니다.)
종택님의 표현이 너무 정확한거 같아 빌려 표현하자면, 하울의 움직이는 성 같은 코드를 짜고 있었다.
분명히 작동은 하는 코드다. 그런데 너무 지저분하다.
깔끔하고, 높은 가독성을 가진 코드는 팀원과의 협업을 원할하게 해주는데 매우 중요한 역할을 한다. 그리고 시간이 지나 내가 내코드를 보았을 때, 어떤 의도로 개발했는지 쉽게 파악할 수 있다.

다행히 하나 하나 리뷰를 달아주셔서, 리펙토링에 대하여 많은 공부를 하였고, 코드가 점점 깔끔해져갔다. 다음 프로젝트에서 스스로의 힘으로 내 코드를 돌아보면서 기능을 구현해갈 예정이다.

침착함

최종 발표위해 서비스를 배포하였는데, 갑자기 AWS에 문제가 생겼다. 서버는 돌아간다고 하는데, URL 접속이 안됬다.
나는 스스로를 나름 침착하다고 생각했는데, 처음 겪는 에러와 곧 있을 발표에 압박을 받기 시작했다.
시간은 다가오는데 해결은 되지 않아, 점점 허둥지둥 하기 시작했다.
GitHub에 conflict 해결을 하지 않은 파일을 push하고, 그 동안 잘해왔던 검색과 적용이 아닌 바로 해결점을 찾기를 원했다. 다행히 팀원들의 도움으로 침착함을 찾으며, 문제점을 하나씩 찾아가기 시작했다. 발표 2분전 서비스를 다시 배포하였고, 작동하기 시작했다. 너무 기뻤지만, 침착하지 못했던 내 모습이 떠올랐다.

이런 유형의 문제는 언제든지 발생할 수 있다. 개발자는 논리의 흐름이 중요하기 때문에 침착함을 잃으면 문제를 해결 할 수 없다. 컴퓨터에게 "아 몰라 이렇게 하면 되겠지"는 절대 통하지 않는다.
앞으로 침착하게 문제를 해결해 나갈 수 있는 훈련을 해나갈 것이다.

해결 or 개선 방법

주니어 개발자인 만큼 천천히 확실하게 공부하자

더 많은 기능을 빠르게 구현하고 싶은 욕심이 생기는 것은 당연한거다. 경험이 쌓이면서 자연스럽게 구현 속도는 빨라질 것이다. 이때, 기초가 튼튼한 개발자로서 기능을 구현하는 것이 중요하다. 모든 학문이 그러하듯이 기초는 항상 쉽고 재미없지만, 가장 중요하고 강력하다.

지금은 내 코드를 돌아보며, 개선할 점을 찾는 것이 더 중요하다. 앞으로 기능구현에 만족하는 것이 아니라, 내가 어떻게 구현하였는지 체크하며 개발해 나갈 것이다.

기록하고 싶은 코드 / 함수 / 로직

  • 내가 기록하고 싶은 코드들에 대한 자세한 설명은 따로 기록할 예정이다.
    이 글에서는 요약하며 글을 작성하려고 한다.

NavBar 메뉴에 마우스 hover시 해당 SubMenu 출력

  • Nav.js

  • SubMenu.js

코드설명

  • Nav의 Menu-Listfmf Map 함수로 구현한다.
  • OnMouseEnter 이벤트를 적용하여, 마우스가 올라갈 시, tabActiveHandler(idx) 함수가 실행된다.
  • map함수를 돌릴 때 첫번째 인자는 배열의 요소가 두번째는 index값이 들어가는데, 이를 활용하여 activeTab을 해당 index로 setState 해준다.
  • setState된 activeTab state 값은 SubMenu 컴포넌트의 SUB_MENU_TABLE의 각 인덱스로 적용되어 해당 요소만을 데이터로 보내준다.
  • SubMenu 컴포넌트는 해당 데이터만을 받았기 때문에, Index에 맞는 데이터만을 출력하는데 이때, index값과 같거나 크다는 것은, 마우스가 올라갔다는 뜻이기 때문에 Main Menu에 맞는 Sub Menu가 밑으로 출력 되게 된다.
profile
김건우
꾸준하게 공부하기
이전 포스트

<TIL-19> 인증과 인가

다음 포스트

<본죽> 1차 클론 프로젝트 회고록 : Scroll Evnet(기억하고 싶은 코드)

0개의 댓글