[project] MECOOK

MECOOK team project

이마트 PEACOCK 사이트 모티브하여 제품 소개 판매 사이트를 개발 한 팀 프로젝트

githup repo➡

시연영상 YouTube ➡

✅ 프로젝트 기간

• 2021년 10월 5일 ~ 2021년 10월 15일

⭐팀원 소개

front-end

• 용현님 : Nav, Footer 및 메인 페이지, 상품 리뷰 추가 기능 구현
• 민지님 : 카테고리별 상품 리스트, 마이페이지, 이달의 베스트 메뉴 구현
• 호영님 : 상품 상세 설명 페이지 및 상품 검색 페이지 구현
• 고운(본인): 로그인, 회원가입 구현

Back-end
민찬님, 도훈님

---

Tech Stack

📌 Front-end : React,sass
📌 Back-end : Django, Python,MySQL,AWS EC2, RDS

협업 도구

🔨 Trello : 전체적인 일정 관리와 팀원들의 작업 과정, API 주소 , 회의록을 공유했습니다.

🔨 Slack : 작업중 필요하거나 궁금한 부분, 작업 과정을 소통할때 사용했습니다.
🔨Git & Github
🔨 zoom : 휴일이나 귀가후 실시간으로 피드백이 필요할때 사용했습니다.

---

구현했던 부분 story & code

로그인

회원 가입

기억의 남는 코드

background: radial-gradient(
        circle at 0 100%,
        rgba(204, 0, 0, 0) 19px,
        white 20px
      ),
      radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 19px, white 20px),
      radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 19px, white 20px),
      radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 19px, white 20px);
    background-position: bottom left, bottom right, top right, top left;
    background-size: 51% 51%;
    padding: 32px 0 20px;
    background-repeat: no-repeat;
    box-sizing: border-box;
    position: relative;

  clickLogin = () => {
    fetch('http://10.58.2.115:8000/user/login', {
      method: 'POST',
      body: JSON.stringify({
        account: this.state.account,
        password: this.state.password,
      }),
    })
      .then(response => response.json())
      .then(response => {
        if (response.TOKEN) {
          alert('로그인 성공');
          localStorage.setItem('token', response.TOKEN);
          this.props.history.push('/');
        } else {
          alert('아이디 또는 비밀번호가 다릅니다.');
        }
      });
  };

✔️ 로그인과 회원가입 공통된 디자인 모달창 테두리 scss로 레이아웃 구현 한 부분과
이번에 api 연동 하는 부분이 있어서 fetch() 함수를 응용했던 점이 인상깊었습니다.

❗ git 기능별로 branch 여러개로 생성해야 될때 master로 위치를 옮겨서 새로 생성해야
됨을 알게 되었습니다.
로그인 branch 안에 회원가입 branch가 생성되어서 git branch를 다시 만드는 상황이 발생했었습니다.

---

좋았던 점

• 처음 프로젝트 하면서 이전에는 혼자 아니면 front-end 팀원끼리 작업을 했었기 때문에
  back-end 영역에 대해서 잘모르고 체감하지 못했습니다.
  이번에 프로젝트 하면서 back-end 분들과 의사 소통 하면서 back-end 역할에
  대해 조금 알게 되었고, 협업의 방법과 중요성을 알게 되었습니다.
• 프로젝트 2주동안 팀원들과 함께 하는 시간을 가지면서
  심력을 기르게 되었습니다.

깨달은 점

• 개인적으로 front-end , back-end 모두 이루어진 프로젝트는 처음이라서 ,
  어떤 방식으로 이루어지는지 모른채로 시작해서 원활한 의사소통 방법과
  작업의 키포인트를 뒤늦게 알았습니다.
  다음 2차 프로젝트 때는 더 적극적으로 의사소통하고
  프로젝트 분석을 먼저 하려고 합니다.