20210313

子使漆彫開仕. 對曰, “吾斯之未能信.” 子說.

공자께서 칠조개에게 벼슬살이를 시키려 하시자, 그가 말하였다.

“저는 아직 그 일에 자신이 없습니다.” 이에 공자께서 기뻐하셨다.

이제 4주 프로젝트가 끝났다. 하지만 나는 벼슬을 할 수 있을까?

프로젝트 회고

4주 프로젝트 마무리

Kogong Pirates

창민, 지상, 제현, 상권
4명의 선원이 다시 모여 4주 프로젝트를 시작했다.

시작한지 28일차. 프로젝트가 드디어 끝났다.

그래서 이제 그동안 있었던 일들을 돌아보려고 한다.

프로젝트 1주차 - 프로젝트 시작

우리는 프로젝트 1주차에 무엇을 했을까??

처음에는 원래 “화장실 리뷰 앱”을 계획하고 있었다.
그래서 거기에 맞춰 서로 아이디어를 내던 중 도저히 이 아이더로는
좋은 결과물을 만들어내지 못할 것 같은 기분이 들었다.

그래서 중간에 주제 변경을 하였다.
다행히 제킴이 좋은 아이디어를 내주었고 거기에 살을 덧붙여
지금의 “연근마켓”이 탄생할 수 있었다.

작고 재미있는 아이디어에서 시작한 것이
서로 뼈를 만들고 살을 붙여주니 어느새 이렇게 좋은 결과물이 됐다.

물론 그때는 이렇게 잘 만들줄은 몰랐지.
쨌든!

그렇게 아이디어를 정하고, API를 만들고 프로토타입을 만들고 와이어프레임을 만들고
앞으로 어떻게 만들지 계획을 세우다 보니 어느새 첫 주가 모두 지나갔다.

제킴, 빵맨, 지땅이라서 아이디어 회의하는 시간 조차 즐거웠고 하하호호 하며 만들 수 있었다.
아마 이때 우리는 열심히 “무야호~”를 외치며 회의를 했을 것이다.

지금은 안 씨는 무야호.. 그때는 무야호만 해도 웃음벨이었는데
벌써 밈이 끝나다니..

그래도 새로운 밈이 생겼다. 바로 “멈춰”
앞으로 잘 쓰자.

첫 주차에 만들었던 내용들.
자연스럽게 코드를 작성하며 디자인이 많이 변경됐다.

이제 보면 처음 디자인은 진짜 별로였던 것 같다.
물론 지금 디자인도 나중에 보면 그러겠지??

프로젝트 2주차

2주차에는 우리는 공부만 했다.

공부한 내용은 TypeScript, TypeScript로 작성하는 react-hooks, redux
그리고 기본적인 css와 반응형 디자인 하는 방법.

이거를 한 주 동안 공부를 했다.
여기서 가장 많이 도움이 된 것은 역시 css와 반응형이다.

css기초를 그래도 잡아놔서 div로 감싸는 일들이 어렵지 않았다.
flex나 column도 이제는 어느정도 잘 쓸 수 있고,
그리고 반응형으로 모든 페이지를 꾸미다 보니 감도 잘 잡을 수 있었다. 반응형은 앞으로도 꾸준히 사용할 것 같다.
2주 프로젝트에 비해 css부분이 많이 성장해서 진짜 기쁘다.

타입스크립트는 아직 제대로 쓰는 방법을 모른다.
그래서 약간 겉핥기 식으로 배웠기 떄문에 프로젝트에서 타입스크립트를 잘 썼다고 하기는 힘들 것 같다.

그리고 redux는 열심히 공부했지만, 우리 프로젝트에서 유용하게 사용할 수 있는 부분이 매우 적다고 판단했다.
일단 프로젝트 규모가 작은 편이고,
전역 상태로 관리할 아이들이 로그인 상태뿐이었기에.

props 전달도 딱히 없었기에 redux를 쓰는 것이 오히려 더 불편해질 것 같았다.
공부는 열심히 했지만 못 썼다고 해서 아쉬운 것은 없다.
지금 생각해봐도 버리길 잘했다. 굳이 들고 있었으면 괜히 프로젝트만 더 힘들어졌을 것 같다.

이렇게 공부를 하며 일주일을 보냈다.
아마 공부하는 주가 가장 여유로웠던 것 같다.

프로젝트 3주차

본격적으로 코드를 작성을 시작했던 시기다.

감정소, 상점 페이지

가장 먼저 나는 감정소 페이지를 만들었다.
내용은 페이크 데이터로 채우고 시작했다.

만드는 것은 크게 어렵지 않았다.
이미 2주 프로젝트때도 했던 것이고,
달라진 게 있다면 그냥 디자인??

처음에는 프로토타입대로 디자인 했지만 4주차에 들어가면서
새롭게 디자인 바꾸기도 했다.

감정소 페이지에서 한 내용은 주로 map으로 데이터를 뿌려주고,
페이지네이션을 통해 6개씩 2페이지로 데이터를 나눈 것.
그리고 간단한 버튼 만들고 반응형 디자인을 한 것이 전부이다.
어려운 게 없었던 페이지.

감정소 페이지랑 상점페이지에 들어가는 로직은 똑같고 디자인만 달랐기에
대부분 복사 붙여넣기로 해결 완료!

감정소, 상점 리스트 페이지

다음에는 전체 리스트가 있는 페이지를 만들었다.
여기에 들어가는 주요 기능은 카테고리였다.
카테고리 클릭시 해당 카테고리로 데이터를 분류해주는 것.

이 내용도 전에 만들어 본적이 있어서 어렵지 않게 했다.
axios로 받아온 데이터를 filter를 사용해 그냥 뿌려줬을 뿐이니까.

그리고 여기도 더보기 버튼을 만들어서 데이터를 나눠주고.

가장 어려웠던 부분은 카테고리 디자인이었다.
클릭한 것은 active로 색을 바꿔줌과 동시에 다른 버튼을 글릭하면
기존에 있던 active는 사라지고 새롭게 누른 곳으로 active가 이동하는 기능.

엄청 어려운 것은 아니지만 조금 까다로웠다.
내가 해결한 방식은 className을 add와 remove를 통해
클릭할 때 add로 새로운 클레스 네임을 지정해줘서 효과를 주고,
다른 것을 버튼을 클릭했을 때 버튼 내용과 active된 버튼의 value값이 다르면
기존에 active 효과가 있는 녀석의 classname에 remove를 줘서 기존 효과를 지웠다.

요게 성공하고 나니 여기 페이지도 어렵지 않게 완성할 수 있었다.

다만, 카테고리 디자인이 폰으로 볼 때 어떻게 해야 예쁘게 나올 수 있을지 고민을 많이 했다.
결국에는 그냥 간단하게 만듦!

게시글 상세보기 페이지, 댓글

그리고 3주차 막바지에는 게시글 상세보기 페이지를 만들었다.

처음에는 이미지를 4개까지 등록해서
이미지를 넘겨서 올린 이미지를 큰 이미지로 하나씩 볼 수 있도록 만드는 것이 제일 어려웠다.

일단, className을 add하고 remove시키는 것도 어려웠고,
이미지를 하나씩 보여주는 것도 매우 힘든 과정이었다.
그래서 억지로 어떻게든 만들긴 했는데
결국 이미지를 1개만 등록하는 방식으로 하기로 했다.
덕분에 일이 줄었다.

그리고 여기에는 좋아요, 감정하기, 구매하기, 수정, 삭제 기능이 있다.
아마 가장 많은 기능이 함축된 곳이라 생각한다.

좋아요랑 감정하기는 쉽게 했다.
그냥 post 요청이니까.

수정이 제일 어려웠는데 이건 4주에 만들었기에 그때 다시 쓴다.
삭제도 그냥 요청이었기에 어렵다고 생각하진 않았다.

그리고 여기에는 댓글 수정 삭제도 있었다.
사실 댓글 기능도 2주차에 만들었기에
어렵지 않게 만들었다.

이렇게 보니까 대부분의 페이지에서 코드를 작성할 때
진짜 어려워서 끙끙댄 적은 없는 것 같다.

그냥 제일 힘들었던 것은 css 와 반응형.
이것도 코드가 어려운 것이 아니라, 그냥 디자인을 어떻게 해야할지 가장 많이 고민했다.

디자인은 디자이너가 해주길 바란다.
누가 디자인 해주면 css로 만들 수 있을텐데..

코딩보다 디자인 때문에 css에 들인 시간이 더 많다.

여기까지 만들고 나니 대부분의 페이지가 완성된 상태였다.
같은 프론트 엔드 빵맨이 메인페이지, 로그인 기능, 마이페이지를 만들어주었기에.

그리고 4주차에는 팀 합숙이 있어서 3주차 코딩할 때 좀 빡세게 한 것도 있다.

프로젝트 4주차

먼저 4주차 시작은 팀 합숙으로 시작했다.
지땅이가 서울로 올라와서 빵맨, 제킴, 지땅, 코공 이렇게 4명이 정말 재미있게 놀았다.

영등포쪽에 호스텔도 잡고, 맛있는 것도 많이 먹었다.
그리고 카페에서 다 같이 코딩고 하고.

마지막 밤에는 헤어지는 것이 아쉬워서
새벽 6시까지 떠들다가 잠든 것 같다.

합숙에 대한 자세한 내용은 일기에 있으니 그걸 보자.

화요일까지 합숙을 하고 나머지 기간에 다시 기능을 만들었다.
서버가 API를 워낙 잘 만들어줘서
서버와의 통신은 크게 어렵지 않았다.

서로 post 요청, get 요청을 어떻게 보내고 받는지 알고 있으니까
생각한대로 데이터가 보내졌고, 받아졌다.

덕분에 페이크 데이터는 지우고 데이터베이스에 있는 걸로 만들 수 있었다.
이 작업을 하면서 디자인도 많이 바꾸기도 했다.

3주차에 만든 디자인을 보니까 부족한 점이 많아서
실제 판매사이트들을 많이 참고했고, 그 결과 많이 좋아졌다.

대부분의 기능은 어렵지 않았다.
내가 만든 기능 중에 그나마 까다로웠던 것은 게시글 수정이었다.
수정은 기존 데이터를 갖고 있는 상태에서 수정 페이지로 넘어갔어야 했기 때문에
props전달 과정이 몇번 있었다.

그리고 이 작업은 빵맨이랑 지땅이 많이 도와줘서 완성할 수 있었다.
집단지성의 힘!!

그렇게 우리는 금요일에 모든 기능을 마쳤다.
그런데 문제는, 막상 완성이라고 하고 끝내놓고 보니
자잘한 버그들이 었았다.

-값이 들어가거나, 사진 파일의 크기가 1메가로 설정되어 있거나,
좋아요 버튼이 핸드폰에서는 바로 바뀌지 않거나,
아이폰에서는 버튼 색이 보이지 않거나.

그리고 반응형도 잘못 만든 부분도 있고.

지금까지 발견한 실수들은 모두 고쳤다.
다행히 간단하게 손보면 고칠 수 있는 내용들이어서 그랬다.

결국에는 마무리도 잘했다.
발표는 내가 맡았는데, 엔지니어님이 발표도 깔끔하다고 해서 정말 기분 좋았다.
이렇게 코공의 길었던 4주 프로젝트가 막을 내렸다.

프로젝트 느낀점

일단 프로젝트를 하면서 가장 많이 느낀 것은 같이 하는 프로젝트 팀원들이 너무 좋다는 점이다.
빵맨, 제킴, 지땅.
어디서 이렇게 재미이고, 마음 맞는 멤버들을 구할 수 있을까?
나는 정말 은혜를 많이 받았다고 생각한다.

이들과 평생 연락하고 지내고 싶고, 멤버들 덕분에 행복하게 프로젝트를 했기에
이 은혜를 꼭 갚고 싶다.

아마 이 멤버들이 아니었다면 프로젝트가 힘들고 완성도도 낮았을 것 같다.
정말 좋은 팀원을 만나게 해주셔서 감사하다.

코드 작성에 있어서는 큰 어려움 없이 진행이 됐다.
2주 프로젝트가 도움이 정말 많이 됐던 것 같다.
새로 추가된 기능들도 있었지만, 로직을 구상하는 것이 어렵게 느껴진 것은 없었고,
대부분 생각한대로 잘 만들 수 있었다.

너무 간단한 기능들이라서 그런 것 같기도 하다.

그리고 4주 프로젝트를 진행하며 정말 많이 성장한 것을 느꼈다.
2주 프로젝트와는 차원이 다른 퀄리티로 만들었기 떄문이다.
그때는 반응형도 몰랐으니 당연하다.

역시 반응형이 있어야 보기도 좋고 맛도 좋고 완성도가 있다고 느끼는 것 같다.
반응형 디자인 강의를 알려준 빵맨 떙큐!!

여러모로 즐겁고 애착도 가는 프로젝트였다.
지금도 보면 뿌듯하고, 남들에게 자랑도 하고싶다.
물론 몇 년뒤에 보면 수준 낮은 프로젝트처럼 보일 수도 있겠지만
적어도 지금 행복하고 만족하면 그만 아니겠는가?

이제 남은 것은 취없이다.
그런데 이 상태로 취업을 잘할 수 있을거라고 생각하지는 않는다.
현업은 내가 상상할 수 없을 정도로 여려운 일들이 많을 테니까.
나는 아직도 TIL 150을 넘기지 못한 초보인데..

부디 잡서칭 기간도 열심히 해서 좋은 곳에 취직하고 싶다.

쨌든 그건 내일부터 생각하고 프로젝트 잘 마무리해서 정말 기쁘고 좋다.
무야호~~~~~~~~~~~~~~~~

싸랑해요 코공해적단
싸랑해요 제킴 빵맨 지땅

프로젝트 결과물

메인페이지

로그인

감정소, 상점 페이지

전체 리스트 페이지

게시글 상세보기 페이지

서치 페이지

글 작성 페이지

마이 페이지

프로젝트 끝!!!!!!!!!!!!!!!

본좌, 벼슬길에 오르기 전에 나 자신을 돌아보자.