Project. 1 | 오늘의 집 클론코딩

code_yoon20·2020년 11월 29일
0
post-thumbnail

걱정

1차 프로젝트를 하루 앞둔 15일 일요일, 나는 어떤 마음으로 프로젝트에 임하기로 했을까..

우리팀의 우리의집은 Burning House...

팀명도 HOT

(사실 house of tommorow 내일의 집인건 비밀)

1.프론트엔드

(가장 깔끔한 모습이였던 우리팀)

사실 이번 14기에는,

프론트엔트와 백엔드의 비율이 반반으로 백엔드가 2명이 더 많을 만큼 백엔드의 비중이 높다.

그로인해 다른기수의 프로젝트에 비해 상대적으로 프론트엔드의 비중이 더 높아진 만큼,

개개인의 실력이 '프로젝트를 성공적으로 끝내기에는' 굉장히 중요했다.

프로젝트를 진행하는 의미를 내 실력은 부족하지만,

성공적인 결과물을 보여주는데에 더욱 의미를 두고있었던 나로써는 굉장한 부담이 아닐 수 없었다.

다음날 팀원이 발표가 나고, 프론트엔드가 3명이라는 소식에 다행이라고 생각했다.. 물론 그 팀 구성도

멘토님들이 구성하는거라 나같은 사람을 프론트엔드가 두명인 팀에 구성 할 리가 만무했지만, 참 다행이였다.

2.스탠드업 미팅

팀원들과의 첫 스탠드업 미팅.

팀원들 끼리 오늘의집 홈페이지가 어떻게 구성되어있고, 우리가 2주 내에 구성할 수 있는 부분은 어디까지 인가를 명확하게 할 필요가 있었다.

'Trello ' 어플을 활용해서 자신이 구현 할 수 있는 부분을 카드로 만들어서, 2주동안 할 일
이번주에 할 일, 지금 진행중인 일, 등등 자신이 하는 일을 세분화 하여 다른팀원들과 공유 해서 우리의 목표치에 얼마만큼 도달했는지 공유할 수 있었다.

3. 내 기획

(실제 오늘의집에 있는 게시글입니다.

사진 출처 :https://ohou.se/contents/card_collections/5432274?affect_type=CardIndex&affect_id=0)

처음 내가 생각했던 기획은 딱 저 화면이였다. 게시한 사진 한장과 그 아래 게시한 사진에 오늘의 집에서 판매되는 어떤 물품들을 사용했는지 , 댓글 기능 , 오른쪽에 그 유저의 프로필과 그아래 이 포스트 하나에 어떤 게시사진이 올라와있는지 나타내주는 기능이였다.

4. 실행

기획을 짜고 코딩을 시작했다.

레이아웃을 짜는 과정, 귀찮고 좀 복잡했지만 나만 알아보면 될 수준의 구성 자체는 어렵지 않았다.

구현한 레이아웃에 대한 기능들을 생각해 보았다. (이렇게 글 쓸생각이였으면 서버켜져있을때 사진 몇장 찍어둘걸 그랬네..)

가장 먼저 눈에 띄는 기능, 우리팀에서 가장 핵심이라고 생각했던 기능은 게시 화면에 마우스가 올라가면 특정 위치에 + 모양의 핀이 뜨고 그 핀에 마우스를 가져다 대면 그 물품을 구매할 수 있는 페이지로 이동하는것이였다.

그 기능을 가장 중요하다고 생각했던 이유는

오늘의 집 사이트는 유저들이 자신의 방을 어떤 가구, 어떤 아이템으로 꾸몄는지 공유하고

마음에 들면 직접 그 가구 혹은 아이템을 눌러 구매 페이지로 이동하여, 바로바로 구매 할 수있는 사이트다.

즉 포스팅,블로깅 페이지에서 스토어, 커머스 페이지로의 전환이 가장 핵심인 사이트라고 생각했고, 무슨일이 있어도 이 기능은 꼭 구현하자고, 팀원들과 기획을 했다.

5. 느낀점

구현했던 기능들 코드들을 하나씩 설명하자면 10페이지짜리 사용설명서가 되어버릴것 같아서 그냥 느낀 점을 쓰려고 한다.

처음에 내가 맡았던 기능은 포스팅 페이지의 포스트리스트 페이지, 포스트를 눌렀을때 상세 페이지을 구현 하는것이였다. 쉽게 생각하고 덤볐다가 뒤로 넘어져 코가 깨질뻔 했다. 아니 두번은 깨진것 같다. 날마다 ' 이게 왜 안되지.. 어떻게 구현해야하지.. ' 라고 머리를 쥐어뜯으며 생각했다.

멘토님들을 붙잡고 계속 질문했고 질문할 때 마다 이해가 되지않아서. 정말 내가 너무 멍청한 것 처럼 느껴졌고 어느날은 그런 감정이 너무 심해져서, 프로젝트고 뭐고 그냥 위코드 과정 자체를 포기하고 싶다는 생각도 많이 들었다. 그러다 내가 구현해야할 코드들은 너무너무너무 많이 남았지만, 머리를 좀 식히고 싶다는 마음에 무작정 위워크 건물을 빠져나와 선정릉 쪽 산책길을 무작정 걸었다. 그냥 진짜 아무런 생각없이 걷고싶은 마음에 나왔건만 그 놈의 코딩생각은 떠나가질 않았다. 거기서 그래도 내가 포기할 정도는 아니라고 다시 마음을 먹었고, 그 덕분에 2차 프로젝트가 있다는 사실을 인지했다. 1차때 너무 완벽한 모습을 바라고 시간에 쫒기듯 하지말고,
눈을 멀리, 2차프로젝트로, 넘어서는 내가 위코드를 수료하고 더 나아가 프론트엔드 개발자가 되기위한 초석을 다지기 위해 코드 치는 행위에 대한 반복숙달에 의미를 두기로 마음을 먹었다.

쉽게말해 2차프로젝트를 위한 성장, 연습의 기회로 생각하기 시작했더니 마감을 1시간 남겨놓은 웹툰작가의 마음마냥 마음은 급한데 아무것도 손에 잡히지 않는듯한 그런 초조함은 많이 줄었고, 더 이상 다른팀, 우리팀원들의 속도에 얽메이지 않기로했다. 다만 그래도 팀 프로젝트이기 때문에 내가 미완성인 상태로 마무리를 지으면 팀의 작품이 미완성인 상태로 남기 때문에 거창하지만 미완성된 페이지 보단 빈약해보이지만 하기로 한 기능은 완벽한 홈페이지를 만들고 싶어졌다. 그러기 위해서는 팀원들과의 기획수정이 필요했다.

어느 날 스탠드업 미팅에서 팀원들에게 솔직하게 말했다. 내가 맡은 부분이 그렇게 양적으로 많은건 아니지라서 말하긴 좀 염치 없었지만, 내 실력에 비해서 맡은 부분의 난이도가 높다. 시간안에 다 구현하지 못할 것 같으니 기획안을 수정하는것이 좋겠다라고, 어렵사리 말을 꺼냈다. 팀원들은 내 말을 잘 들어줬고,

멘토님들과의 팀 미팅에서 수정한 기획안에대해 이야기를 나누고, 수정한대로 진행하기로 했다.

힘들었지만, 겨우겨우 프로젝트를 잘 마치게 되었고, 발표도 잘 마무리 지었다.

6. 기억에 남는 코드

위코드에 들어온지 6주가 지난 지금 1차프로젝트를 하면서 6주차 개발자 치고는 상당한 수의 코드를 쳤다. 그 중에 기억에 남는 코드가 몇 줄 있다.

사실 기억에 남는 코드는 참 많다. 아직 이해를 완전히 하지 못했을 뿐....

위 사진은 댓글기능과 그 댓글에 대한 답글을 다는 기능에 대한 코드다.

부모 컴포넌트에서 map method 를 활용해 백엔드에 저장되어있는 댓글 내역을 불러와 화면에 랜더링 하고, 그 댓글 컴포넌트 안에서 또 map method를 활용해서 사용자가 입력한 내용을 데이터 베이스에 저장하고 그 내용을 다시 불러와서 랜더링 하는 과정인데... 생각보다 헷갈려서 쓰다가 쓰다가 헷갈려서 오랜기간 주석처리해놓고 나중에 다시작성한... 그런 작지만 소중한 내 코드 들이다.

포스트 디테일 화면에 핀 기능을 담당하는 코드들이다.

이미지 태그를 감싸는 부모 태그에 onMouseEnter, onMouseLeave 이벤트를 적용해, 이벤트가 생길때마다, 기존의state값을 변경시키고, 그 state에 따라 하위 태그의 className 이 결정되며, className에 따라 다른 CSS가 적용되어 핀이 보였다, 안보였다, 상세정보가 보였다, 안보였다 하게끔 만들어 줬다.

그리고 그 상품 정보를 클릭했을 땐,

this.props.history.push(path경로)

위의 방법을 이용하여 그 상품의 구매 페이지로 이동할 수 있게 하였다.

마치며....

사실 2주 동안 굉장히 험난했던 과정이였다고 생각한다. 2주동안 내가 모르는 영역에 뛰어들어야 했고, 막히는 부분이 생길때 처음엔 한시간이도 두시간이고 많으면 4시간 동안 하나에 대해 고민했었는데, 그런 고민 끝에 해결이 안날때가 너무 많았고, 그런과정이 지속되다 보니, 이젠 그냥 고민을 하지않는경지에 이르러 버렸었다. 그냥 바로 멘토님들에게 질문해서 답을 알려주길 원했고, 다행히도 답을 바로 알려주지 않는 멘토님들 덕분에 계속 고민하는 시간을 가질 수 있게 되었다. 쉽게 이루어 지는것은 하나도 없다. 내가 한달 공부하고 바로 프로젝트에 돌입하여 기존의 사이트를 비슷하게 만들어내는거?? 결코 쉬운일이 아님이 확실 하다. 그렇지만 2주동안 미흡하지만 결과물을 만들어 냈고, 그동안 나는 많이 성장했음을 믿어 의심치 않는다.

2차 프로젝트에서는 좀더 효율적으로 고민하는 방법을 연구해야겠다...

Ps.
운정님 애정합니다. 부족한 저를 앞으로도 신경써주세요ㅎ
❗️운정답지❗️

다른 모든멘토님들 한테 항상가서 모르겠다고 못하겠다고 징징 거렸는데 힘들어하는 기색하나 없이 도움 많이 주셔서 너무너무 감사합니다 ㅎㅎ 위코드 만만세

0개의 댓글