😎 프로젝트 소개 및 목적

• 슬로우 라이프스타일을 소개하는 잡지사이트

• 개발 기간 : 2020년 8월 31일 ~ 2020년 9월 11일(12일)

• 개발 인원 : Front-end 3명, Back-end 2명

• GitHub : Front-End, Back-End

• 목적

  • Progress: Scrum 진행 방식에 대해 이해하고 적용해며 프로젝트를 진행한다.

  • Communication: 협업 프로젝트를 통해 프론트 간의, 또한 백엔드와의 의사소통에서 필요한 내용들을 경험한다.

  • 매일 아침 스탠드업 미팅을 가진다.

  • React: 함수형 React 컴포넌트, Hook을 사용하여 데이터 통신, 컴포넌트 분리 및 관리, 컴포넌트 간 데이터 바인딩을 적용해 본다.

  • Styled-Components: js 파일 안에서 컴포넌트의 스타일을 지정하고, 컴포넌트의 상태를 props로 받아 스타일 적용을 다르게 할 수 있다.

  • Network: fetch나 axios를 사용하여 서버 api에 요청하고 응답받은 데이터를 화면에 보여준다.

🎥 프로젝트 결과물

구현 페이지 및 기능

Front-end- GitHub

Front-End

기술스택

• HTML, CSS, JS(es6+)
• React(CRA 세팅), Styled-Components(SCSS)

협업 툴

• Git
• GitHub
• Slack
• Trello
• Google Meet
• Zoom

구현 기능

본인구현은 갈색으로 처리했습니다.

• 네비게이션 바

• 메인 페이지

• Footer

• 장바구니 모달 창

• 카테고리 모달 창

• 검색 모달 창

• 검색 기능

• 로그인 및 회원가입

• 소셜 로그인(Kakao)

• 사용자 개인 페이지

• 제품 상세 페이지

• 제품 사진 슬라이더

• 상품 리스트 페이지

🤓 잘한점

잘한점은 명확한 것 같다. 전례없던 언택트 프로젝트의 진행을 마무리한 것이다.
매일같이 모두들 구글 meet 또는 zoom을 통해 진행상황을 확인하고 모르는 것이 있으면 서로 물어보고 멘토들에게 진행상항을 공유하고 등등의 다양한 행위를 결국 해냈으니 말이다.

이런 상황에서 많은 추억도 생기고 많은 아쉬움도 생겼으나 결국 그 상황을 버텨낸 것이 잘한것이라 생각된다 :)

그럼에도 새로운 함수형 컴포넌트, hooks, styled component의 공부 및 적용을 멈추지 않고 진행한 것은 정말 잘한 일인 것 같다.

그리고 여기저기 쓰이던 버튼을 하나의 컴포넌트로 두고 재활용한 것도 아주 잘한 것 같다 :)

🤯 아쉬운점

일단 타팀과의 비교를 아니해야하나.. 성미상 그것은 불가능하니 있는대로 적을 생각이다.
코로나 2.5단계 진입으로 인해 위코드에서 팀원을 만날 수 없는 상황이었다.

타팀들은 어떻게든 오프라인으로 만나 프로젝트를 진행하였으며 우리팀은 다소 소극적이었고 나도 그랬다.

프로젝트가 처음시작될 때 멘토님들이 해주었던 이야기가 생각이 났다.

팀 분위기가 그 팀의 결과물을 만들어낸다고...

물론 아쉬운 부분은 언제나 존재할 것이나 프로젝트에 관해서는 조금 많이 아쉽다.

1차프로젝트로 인한 체력고갈 및 의지의 부족으로 인해 시간내에 뽑아낼 수 있는 능력만큼은 만들어내지 못한 것 같다.

📜 보여주고싶은 코드

그럼에도 나는 보여주고 싶은 코드가 있다 .. 후후후...
일단 styled Component와 Hooks는 팀원들에게 쓰자고 강요(?)까지 하면서 새로운 기술을 쓰며 프로젝트를 진행하고 싶은 마음이 컸다.
그렇게 hooks를 쓰다보니 custom hook을 사용할 일이 만들어 져 버렸다.(이 방법말고도 분명히 존재할 것 같다)

1. Custom Hooks

커스텀 훅을 사용하여 일정 부분에서만 이벤트를 먹도록 만들고 싶었다.

킨포크 사이트의 경우에는 스크롤 시 navigation bar에 존재하는 로고가 움직이는데 이것이 일정 스크롤 이상은 가장 작아진 상태로 유지되기에 그때는 이벤트를 읽고 싶지 않았다!

자세한 코드는 해당 Github에서 확인할 수 있다!

2.Parallize

Paraalize는 처음에 위의 로고와 같은방식으로 스크롤을 통한 이벤트를 받아 해당 화면을가진 div를 저 위치에 position abolute 및 z-index를 통해 구현하려고 했다.
이벤트가 남발되는 것 + 생각만큼 부드럽게 구현이 되지 않음을 경험하고 구글링을 통해 css로 간단하게 해결할 수 있음을 알게 되며 검색의 중요성을 다시한번 깨닫게 되었다고 한다 :) ...

아래와 같이 간단한 css를 통해 구현이 가능했다고 한다 :) ..

background의 이미지를 고정해놓고 스크롤에 따라 다른 요소들이 움직일때 뒷 배경은 가만히 있게 되는 것이다.

자세한 코드는 해당 Github에서 확인할 수 있다!

소감

짧은 시간동안의 학습이었으며 말도 안되는 속도로 개발을 배우고 있는 것 같다.

앞으로 어떤 것을 배운들 지금처럼 해낼 수 있겠다는 자신감이 생긴다.
위코드의 커리큘럼에 감사함을 보내고 자신들을 불태우며 수강생들에게 지식 습득방법을 전파해주는 멘토분들이 항상 고맙다.

그리고 이상하게도 이런 위기를 함께 겪어서 그런지 동기분들이 더 귀중하게 느껴진다

앞으로 다들 개발자라는 타이틀을 가지고 함께 나아갔으면 좋겠다 :)

🏄‍♀️끝!