Invention History Project를 진행하며(1)

프로젝트 선별과 초기 과정

코드 스테이츠를 통한 파이널 프로젝트를 진행하게 되었다. 3주라는 시간이 주어졌고, 발표 준비를 포함하면 실제적으로 16~17일이라는 시간이 주어졌다. 초기에 무엇을 가지고 서비스를 만들 것이냐 라는 부분에서 부터 많은 난관들이 있었다. (내가 낸 아이디어 중에 냉장고에 남은 음식을 입력하면 만들어 먹을 수 있는 음식과 레시피를 제공하는 앱은 이미 존재한다는 이유로 거절되었고, 그리고 나의 얼굴 사진을 올리면 마네킹이 생성되고 원하는 컨셉과 스타일을 입력하면 코디를 제시하는 앱은 패션이라는 관심사가 팀원들에게 공감대가 형성되지 않아서 거절…ㅠ)

2일이라는 추가적인 아이디어 구상 시간을 가지고 팀원들과 결정한 프로젝트는 대표적인 발명품의 역사를 볼 수 있고, 자세한 내용도 확인해 볼 수 있으며 각 발명품의 주제를 가지고 댓글로 작성해 볼 수 있는 서비스를 제공하는 웹사이트를 제작 하자는 것 이었다.

아래와 같이 일정을 정하고 1주일간 기능 구현을 빠르게 진행하였다.

나는 원래 Back-End를 하고자 하였지만, 앞선 2주의 프로젝트에서 Front-End를 경험 하였기에 이어서 진행하는 것이 도움이 될 것이라 판단 하였기에, 결과와 속도라는 측면에서 Front-End를 하기로 결정했다.

위의 와이어 프레임은 내가 직접 작성하였다. 틀을 가지고 기능과 위치를 잡기 위함이었다.

위의 전체적인 기능의 흐름을 가지고 접근하고자 마지막으로 기능 플로우를 작성하고 코딩을 시작하였습니다.

주된 스택으로는 React Hooks를 사용하여 기능 구현을 하였다. Hooks를 사용하면서 가장 좋게 느꼈던 것은 React Class를 사용하는 것 보다 State와 Life Cycle을 사용하는 것에 있어서 굉장히 편리하였고, 가독성이 좋았다. 사용하면서 추가적으로 Redux를 섞어 사용했다면 좋았겠다는 아쉬움이 남아 있다.

회원가입, 메인페이지의 틀, 모든 상세페이지(댓글, 글쓰기, 수정, 삭제), 로그아웃 기능을 담당하였다. 실제적으로 기능들은 구현해 보았던 것 들이기 때문에 이전에 구현해 보았던 것들을 참고하여 작성하였다. 진정한 어려움은 디자인에 있었다. 다음 장에서 나의 삽질을 디테일하게 이야기 하고 싶다.