[프로젝트] Cha.Dam.Hwa [ADIOS]

프로젝트 1차 표지

---

< 차담화 프로젝트 - 직접 구현한 페이지 영상 >

nav, footer,회원가입 및 로그인, 메인페이지

nav, footer, 카트, 이벤트 페이지

---

1차 프로젝트 진행과정

벌써 2주라는 시간이 흘러, 1차 프로젝트가 끝이 났다. '술담화' 공식 홈페이지는 심플한 ui 구성을 가지고 있었다. 그래서 2주라는 시간 내에 충분히 원하는 기능들 (추가 기능 포함)을 모두 구현할 수 있을거라 생각했다.

하지만, 막상 직접 만드니, 그 안의 기능들, 특히 필터 기능이 만만치 않았고, 필터 기능을 제외하고도, 슬라이드 구현 및 이중 map을 사용한 컴포넌트 모음을 만드는 것이 생각만큼 호락호락하지 않았다.

처음 해본 프로젝트라서 단순히 프론트와 백엔드 각자의 일만 잘하고 나중에 합쳐보면 될거라는 무지한 생각을 했다. 또한, 기능이 크게 어렵지 않다는 오판 아래, 완벽하고 깔끔한 똑닮은 ui 를 구성해보자고 얘기를 나눴다.

Html과 Scss에 자신있었기에 최대한 빠르고 유사하게 차담화 사이트의 레이아웃을 만들어 나갔다. 내가 맡은 페이지는 nav, footer, login , signup, main, event, cart 페이지였고, 철진님과 윤지님이 각각 제품 페이지와 제품 상세 페이지를 맡아주셨다.

그래서 nav , footer , log-in page , sign-up page , main page , event page , cart page를 순서대로 만들어 나갔다.

① nav바는 fixed로 고정해서 스크롤바를 내려도 메뉴가 항상 같은 위치에 있어서 다른 페이지로 이동하기 쉽게 구현했다. 왜냐하면,공식 술담화 홈페이지 nav바는 위치가 위에 고정되어있어서 스크롤바를 내린 후에 다른 페이지로 이동하려면 다시 맨위로 올려야하는 불편함이 있어서 이 부분을 꼭 보완해보고 싶었다.

② footer는 술담화 공식홈페이지와 똑같이 만들었다. 불편함이 없었기에 수정사항이 없다고 판단되었기 때문이다.

③ 로그인 페이지와 ④ 회원가입 페이지의 경우에는 아이디와 비밀번호에 조건을 주어서 그 조건을 만족했을 경우에만, 로그인버튼과 회원가입버튼이 활성화될 수 있도록 만들었다.

⑤ 메인 페이지는 상단에 자동 슬라이드 기능을 주어 이벤트 페이지의 배너가 자동으로 슬라이드 되도록 구현했다. css의 기능을 사용해서 translate-x를 사용해서 구현했다. 처음 슬라이드 기능을 사용해본데다, 메인페이지의 가장 눈에 띄는 부분이라 꼭 구현하고 싶었는데 구현해내서 너무 신기했다. 이번 프로젝트에서 내가 맡은 가장 어려웠던 부분은 메인페이지의 테마별 상품리스트를 보여주는 부분이였다. 상품 총 4개가 한 묶음으로 묶여있는데, 이를 이중 map을 이용해서 props를 만들어줘야해서 좀 나에게는 많이 어려웠던 부분이였다. 이 작업을 하는데 4일의 시간이 걸렸던 것 같다.

⑥ 이벤트 페이지는 내가 만든 배너들을 올려둔 페이지라서 시간이 조금 걸렸을 뿐, 사실 어려울게 없는 페이지였다.

마지막, ⑦ cart page는 정말 아쉽게도 시간 관계상, 기능을 구현하진 못했고 html과 css로 만든 페이지다. 수료 후에 이 부분은 꼭 구현을 해보고 싶다.

---

※ 기억에 남는 코드 1 (자동 슬라이드)

function Figure() { //슬라이드 총 4개 => li x 4개 
  return (
    <figure className="figure">
      <input className="btn" type="radio" name="slide" id="slide01" checked />
      <input className="btn" type="radio" name="slide" id="slide02" checked />
      <input className="btn" type="radio" name="slide" id="slide03" checked />
      <input className="btn" type="radio" name="slide" id="slide04" checked />
      <ul className="slide-list">
        <li className="slide-item">
          <a href="/">
            <label htmlFor="slide04" className="prev" />
            <img src="/images/banner4.png" alt="event banner" />
            <label htmlFor="slide02" className="next" />
          </a>
        </li>
      </ul>
    </figure>
  );
}

처음 사용해본 슬라이드 기능, 열심히 검색해서 공부한 후 직접 적용해보았다. keyframe을 사용한 것도 처음이여서 생소했고 어려운 부분은 아니였지만 처음보는 기능들이여서 많이 생소했다. 그래서 더 기억에 남는 것 같다.

---

※ 기억에 남는 코드 2 (이중 map)

{teaData.length > 0 &&
        teaData.map(data => {
          return (
            <Section
              key={data.id}
              list={data.list}
              img={data.img}
              span={data.span}
              p={data.p}
            />
          );
        })}

{productList.map ((card, idx) => {
   return (
    <div className="product-box" key={idx}>
        {card.drinks.map((ele, idx) => {
        return (
          <Wrap
            key={ele.id}
            className="wrap"
            img={ele.image}
            name={ele.name}
            price={Math.round(ele.price) + ' 원'}
            rate={ele.average_rating}
            review={ele.review_count}
            />
	);
})};

props 안에 또 props가 있어서 이중 map으로 만들어줘야했다. 이 작업이 생각보다 많이 복잡했고, 그래서 아직까지도 기억에 남는다.

---

1차 프로젝트 후기

2주 간에 걸친 팀 프로젝트가 이렇게 끝이 났다. 이번 "차담화" 팀의 프론트엔드 개발을 맡았고 또한 P.M(project manager)이였다. 팀장이라는 자리가 무조건 개발을 잘하는 사람이 되야한다고 생각한 적이 있다. 물론, 실력도 어느 정도는 있어야 한다고 생각되지만, 실력보다 더 중요한 것은 팀 분위기를 이끌어가는 것이라고 생각한다.

개발을 하다보면, 잘 풀릴 때가 있고, 그렇지 못할 때가 있다. 그럴 때, 다같이 축쳐진 분위기가 아닌 으쌰으쌰 힘을 북돋아줄 수 있는, 팀의 분위기를 살릴 수 있는 사람이 팀장의 자리에 적합한 것 같다. 나 또한, 그런 팀장이 되고 싶었고 팀원들의 의견을 최대한 수용해서 모두가 존중받고 있다는 생각이 들게 의견수용에 있어서 모두의 의견들을 최대한 수용하려고 노력했던 것 같다. 그렇게 되면, 다들 각자의 자리에서 존중받는다는 생각으로 더 열심히 프로젝트에 참여할 수 있게 되는 것 같다.

이번 팀 프로젝트에서 내 목표는 우리 팀이 1등을 하는게 아니라, 팀원 모두 프로젝트를 통해 조금이라도 발전하는 것, 프로젝트를 통해 즐거웠다는 생각을 가질 수 있도록 하는게 목표였다.

팀원 각자의 실력이 아닌, 협력을 통해 더 좋은 성과를 내도록 서로가 상부상조하는 것을 배운 것 같다. 정말 프로젝트 하는 동안, 팀원 모두에게 만족했고, 그들과 함께 할 수 있어서 행복했다. 서로가 서로를 존중할 때, 더 큰 빛을 보게 되는 것 같다.

---

프로젝트를 하며 알게 된 나의 장점은 ?

프로젝트 기간 동안 잘되든 안되든 긍정적으로 생각하고 임했다는 점에서 긍정적인게 나의 장점같다.

그리고 사람들과의 의사소통과정에 있어서도 내 주장을 관철시키기 보다, 다른 사람들의 입장에서 먼저 생각하고 배려하는 편이다. 그래서 이번 프로젝트 때, 팀원들과의 소통에서 빛을 발했던 것 같다.

또한, 밝은 에너지로 지친 팀원들에게 힘을 실어줘서 프로젝트기간 동안 다같이 웃으면서 잘 마칠 수 있었던 것 같다.

---

이번 프로젝트를 통해 보완해야 할 점 ?

꼼꼼하게 미리미리 체크하지 못했었던 점이 조금 아쉽다. 예를 들자면, 이번 프로젝트를 진행하면서 초반에 미리, 백엔드와의 통신을 대비해서 어떤 데이터를 서로 주고 받을 것인지에 대해 얘기하는 시간을 가졌어야 했던 것 같다.

물론, 어떤 데이터가 필요한지에 대해서 중간 중간 얘기하긴 했었지만, 나중에 통신할 때 서로가 생각했던 데이터가 달라서 당황했었던 기억이 난다. 조금 더 늦었더라면, 많이 힘들었을 것 같다.

다행스럽게도, 너무 늦지 않은 시기에 발견하게 되서 급하게 처리해서 해결했었다. 이렇게 후반부에 조급해지지 않으려면, 초반에 자세한 회의를 통해 미리미리 체크하고 꼼꼼하게 대비하면 좋을 것 같다는 생각이 든다.

---

프로젝트 기간 동안, 잘했다 싶은 부분은 ?

우선, 프로젝트 결과물에 있어서 잘했다 생각이 드는 부분은 공식홈페이지와 헷갈릴정도로 완벽하게 만들고 싶어서 html,scss에 초반에 많이 신경썼던 것이 잘했다는 생각이 든다.

초반에 정성들여 만들어서 나중가서는 거의 고칠 점이 없었고, 또한 빠르게 만들어 나갔어서 나중에는 페이지의 기능 구현에만 더 집중을 할 수 있는 시간이 있어서 잘했다고 생각한다. 만약, 기능이 중요하다는 생각에 기능에만 몰두했다면 후반부에 가서 많이 힘들었을 것 같다.

프로젝트 결과물을 떠나서 잘했다 생각이 드는 부분은 팀원들끼리 항상 모여서 같이 밥먹고, 힘들 때 서로 으쌰으쌰하는 분위기로 진행된 부분이 정말 잘한 것 같다.

사실 결과물은 수료 후에 얼마든지 수정해서 발전시킬 수 있지만, 팀분위기는 나중에 수정하는 건 쉽지 않은 부분이고, 1차 프로젝트때 팀 분위기가 좋아서 프로젝트에 대한 거부감도 없다는 점이 가장 좋은 것 같다. 프로젝트 기간동안 가장 잘한게 무엇이냐 묻는다면, 주저없이 서로에 대해 배려한 점이라고 말하고 싶다.

---

어느 부분에서 실력이 늘었다는 생각이 드는지 ?

정말 신기한 건 리액트 공부를 짧은 시간 동안 깊이있게 하지 못 했는데도 불구하고, 직접 코딩을 하면서 이해도가 높아지는 것이다. 프로젝트에 들어가기 전, 막연하게 잘할 수 있을 것 같다는 마음과 조금의 불안함이 공존했었다.  

그런데, 막상 프로젝트에 들어가서 직접 무언가를 만들어보니 props에 대한 이해도가 조금 더 깊어졌다는 생각이 들었다. 또한, 컴포넌트를 쪼개는 것에 막연한 두려움이 있었던 것 같다. 그런데 컴포넌트를 잘게 쪼개서 쓰는 것도 직접 여러번 하니까 익숙해져서 예전과 같은 두려움도 사라졌다.  

map을 사용하는 것도 어느정도 자연스러워진 것 같고 특히 프로젝트 통해 초기셋팅하는 법과 git사용이 정말 많이 좋아졌다. git은 항상 어렵다는 생각이 강했었는데 그런것에 대해 많이 극복하게 된 것 같다. 지금은 git 사용도 굉장히 수월해졌다.  

프로젝트를 통해 전반적으로 많은 부분들이 나아졌는데 그 중 가장 다행이란 생각이 드는 것은 프로젝트 전에 비해 리액트에 대한 이해가 조금 더 선명해진 것 같다는 것이다.

---

만약 프로젝트 첫 날로 돌아갈 수 있다면 ?

다시 프로젝트 첫 날로 돌아갈 수 있다면, 백엔드와 더 많은 소통과 통신을 할 것 같다.
무언가 제대로 갖춰지고 난 후, 통신을 해도 충분하다고 생각했었는데, 그 막연한 생각때문에 2주차 때 통신을 하면서 너무 정신없이 바빴었다.

그동안 조금씩이라도 통신을 했었다면, 좀 더 백엔드와 더 많은 소통을 했었다면, 백엔드와 프론트간의 필요한 데이터가 무엇인지에 대해 더 얘길 했더라면 프로젝트 막바지까지 우왕좌왕하진 않았을 것 같다.

또한, 초반에 웹페이지의 레이아웃 구성이 빠르게 진행되어 조금 여유를 갖고 프로젝트에 임한 부분이 아쉽다. 계속 긴장의 끈을 놓지않고 했더라면 더 많은 기능을 구현해보지 않았을까 하는 아쉬움이 든다.

---

팀원들에게 하고 싶은 말이 있다면 ?

팀원들 모두 첫 프로젝트라서 걱정되는 마음과 불안한 마음을 안고 나아갔을텐데, 자신의 입장만 생각하지 않고 상대방 입장부터 생각해주며 진행해서 즐겁게 프로젝트를 마무리 한 것 같습니다.

처음이라 모든게 어색했던 팀장이였는데, 그런 절 믿고 잘 따라와줘서 너무 고맙고, 코딩이 생각대로 잘 풀리지 않아도 함께 웃으면서 완주한 것에 더할 나위 없이 감사합니다.

1차 프로젝트 이후, 다시 같은 팀으로 만날 수 없음에 너무도 아쉽고 또 아쉽지만, 수료 이후, 꼭 지금의 차담화 웹페이지를 더 멋있는 차담화 웹페이지로 함께 만들어보아요 !!

프론트 에이스 철진님, 차담화 서기이자 프론트 막내 윤지님, 백엔드 기둥 성준님, 차담화 든든한 맏형 정찬님, 차담화 웃음꾼 영서님 모두 정말 수고하셨습니다. 2주간의 여정을 다함께 잘 마무리할 수 있어 행복합니다.

이번 1차 프로젝트 잘 마친만큼, 2차 프로젝트 또한 함께 잘 마쳐보아요!! 앞으로 우리 🌼🌼꽃길🌼🌼만 걷길 바라겠습니다.

---

최고의 팀웍 차담화 멤버들