waf 프로젝트 회고.

waf 서비스 링크
git hub 레포지토리

생각보다 짧지 않았던 2주간 팀원들과 함께했던 프로젝트 회고록.
리팩토링 일지 보러가기

나의 역할

팀원은 총 4명으로 구성되었고, 나는 프론트 엔드를 맡았다.
프론트엔드에서 맡은 역할 - 냉장고 직접 디자인(일러스트), 물건 추가시 그림과 음식재료 정보 렌더링, 소비기한 날짜 계산, 유튜브API를 활용한 레시피 페이지

사용한 기술 스택

• HTML
• CSS
• Javascript
• React
• React-Router
• axios
• prettier
• Eslint

프로젝트 목표와 만족도

목표
나는 항상 완성 시키는것에 중점을 두고 모든 일을 시작한다. 이번 프로젝트도 마찬가지였다. 그러나 완성을 못하더라도 끝까지 포기 하지않고, 노력했다면 만족! 이라는 목표를 세웠었다.

만족도
85 out of 100.
내가 생각한것보다 너무 잘 나왔다. 디자인도 마음에 들었고, 팀원들과 한번에 감정싸움없이 소통하여 프로젝트를 끝마쳤다는점에서 높은 점수를 주고 싶다.
그러나 아쉬운점은 냉장고가 반응형으로 움직이지 않는다는 점. 이 문제를 풀기위해서 몇일을 쏟아 부었지만, 남은것은 (의미있는...?)삽질뿐 !! 그래도 이때 flex를 사용했고, position도 사용해봤다. 또 처음으로 grid도 시도해봤음.

배운점 및 교훈

1. 프로젝트를 하기전 기획의 중요성을 다시 느꼈다.

처음에 팀원들과 와이어 프래임과 워크 플로우를 작성하였을때, 구체적으로 작성하지 않았다. 그래서 기초틀이 정확하지않아서 코드를 짤 때, 내 멋대로 했었고, 또 코드를 작성하면서 필요한 기능이 생각났었다.

처음부터 확실하게 팀원들과 상의 후 프로젝트에 참여하면 수월하게 프로젝트 진행이 가능했었을거 같다.

2. 코드를 조금 더 깔끔하게 작성하기.

꼭 완성하고 싶다는 마음이 있었다. 그래서 프로젝트 초반임에도 불구하고 코드를 너무 나만 알아보게 쓴거 같다는 느낌을 살짝 받았다.

다음엔 같은 포지션에서 일할 팀원에게 미안하지 않게 코드를 좀 더 직관적이고, 주석을 달아서 설명을 적어 놓도록 하겠고, 파이널 프로젝트를 한 후에 코드 리팩토링을 시도하겠다.

잘한점

1. 커뮤니케이션

나만 잘한것이 아니라 우리 팀원 모두 서로를 배려하여 커뮤니케이션을 원활하게 했다. 나 역시 커뮤니케이션면에서 자신이 있었다. 이미 UX/UI때 커뮤니케이션의 중요성을 느꼈기때문에 상대의 의견을 존중하고, 내 고집을 없애고 이번에 프로젝트에 참여하여 생각했던것보다 더 좋은 결과를 얻었던거 같다.

앞으로도 커뮤니케이션의 중요성을 잊지않고, 팀원들과 같이 !!

어려웠던 점 또는 아쉬운점

1. 리액트에서 props 내리기

사실 리액트에 어느정도 자신이 있었다. 당연히 엄청 잘하지는 않지만, props내리기, 끌어올리기 & life cycle에 공부를 많이 해놔서 여기에서는 문제가 없을거라고 생각했지만, axios에서 받아온 정보를 state에 저장하고, props로 내리는 작업에서 많은 스트레스를 받았다. 특히 로그인 부분에서. 그래서 어쩔수 없이 local storage를 사용할여 로그인 부분을 구현하였다.

어려움을 겪을 당시에 많이 찾아봤지만, 해결 하지 못해서 나에 대한 실망감을 가지고있다. 다음번엔 꼭 이 문제를 내가 직접 해결하도록 하겠다!

2. grid사용

냉장고 위에 이미지를 넣는 부분을 여러가지로 시도했었지만 실패했었다. 시간이 조금 더 있었더라면 grid를 더 공부해서 더 잘 해볼 수 있지 않았을까 하는생각이 든다.

파이널 프로젝트전까지 grid 공부를 더 해서 리팩토링할때 써보도록 하겠다.

3. Oauth를 사용한 소셜 로그인 기능 구현

이 모든걸을 다 혼자 다 했다면 욕심이다. 그래도 이 기능도 구현해보고 싶었던 기능이있다.

꼭 다음 프로젝트에는 내가 구현해보겠다.

프로젝트 과정 및 나의 생각.

프로젝트 시작 전

당시 프로젝트 시작을 기다리고 있을때, 자신감에 차 있었다. 코드 스테이츠 과정동안 잘해왔었고, 마지막 HA도 너무 쉽게 풀었기 때문이었다. 이 뿐만 UX/UI공부를 하면서 얻었던 지식을 사용하여 프로젝트를 잘 할 수 있을거 같았다.
한가지 걱정되었던 부분은 어떤 아이디어를 프로젝트로 사용할지였다.

프로젝트 시작

초반

// 초반에 했던 일들.
1. 아이디어 구상
2. api작성 및 git hub에 wiki작성
3. 와이어 프래임, 워크플로우 작성
4. 깃헙 세팅

시작은 너무 좋았다. 하고 싶었던분들과 팀으로 만났고, 새로 만난분도 너무 좋으신 분이었다.

4명이서 프로젝트를 선정하기 위해서 모두 하나씩 아이디어를 꺼냈고, 운이 좋게 내 아이디어가 선정이 되었다. 내 아이디어가 특출났다기보다는 우리가 정말 할 수 있는것이 무엇인지를 생각하다보니 냉장고 관리하는 서비스를 하게되었다.

내 아이디어가 선정되어서 기뻤지만, 갑자기 걱정되기 시작했다. 과연 내가 잘할 수 있을까? 라는 생각을 엄청 많이 했다. 항상 우리가 생각하는것들은 좋지만, 직접 실현하기전까지는 정말 이게 좋은 아이디어인지 아닌지를 판별하기 어렵기때문이고, 또한 시작 전과를 다르게도 내 실력이 다른분들에게 민폐가 되지는 않을까라는 생각때문이었다.

아이디어 선정 후 기초 셋팅을 진행했다. 처음부터 참 어려웠다. 이전에는 코트 스테이츠에서 제공해준 레파지토리를 쉽게 쉽게 할 수 있었지만, 우리들이 처음부터 직접 만드는 서비스다보니 api를 같이 설정하고, 스키마 작성, 와이어 프래임, 워크 플로우, 깃헙 설정등.... 코드 치기전에 정말 할일들이 많았다. 지금에서야 그때 더 꼼꼼히 작성했어야지라는 생각을 하지만 그땐 이렇게 중요할 줄 몰랐기에 ㅎㅎ.

중반

// 중반에 했던 일들.
1. 브랜치 만들고, 작업하기
2. 코드 치기
3. 깃 푸쉬와 머지

코드 치는것이야 그렇게 어렵지는 않았다. 항상 해왔던것기 때문에. 그러나 우리에게 가장 짜증나고 힘들었던곳은 1번과 3번이었다. 가끔은 브랜치 생성을 까먹고 dev에서 코드를 쳤었고, 푸쉬를 잘 못해서 고생하고, 머지도 master에 해서 고생도 해봤다. 그때는 한시가 급해 짜증나고, 잘 못 건들면 코드가 날라갈까봐 마음도 조려봤지만, 지금은 정말 좋은 경험이었다. 현업에서 그런 실수를 하는것보단 프로젝트때 하고 현업에서 안하면 되닌까!

그래도 팀원들이 너무 잘했고, 나도 생각보다 잘해서 코드는 금방 쳤었다. 또 다른 팀들보다 진도도 빨랐다.

후반

서로의 sprint를 마치고 나서. 배포만 할 일이 남았을때, 문제점이 하나씩 보이기 시작했다. 초반에 재대로 작성하지 못한 와이어 프래임과 워크 플로우가 문제였다. 모든 코드를 조립한 후에 다같이 보니, 어떤 기능은 누락되어있었고, 어디에 기능을 추가해야할지 고민하다보니 막바지에 급했던거 같다.
그래도 많은 팀들이 고생했던 배포부분은 아무런 문제없이 진행했다. 이 부분은 정말 다행이었다!

waf 서비스 링크
git hub 레포지토리
리팩토링 일지 보러가기