📘 프로젝트 소개

메이크업 브랜드 Hince 클론 프로젝트
프로젝트 구현 영상

🗓 프로젝트 기간

2020.08.17 - 2020.08.30

👥 프로젝트 참가자

프론트엔드 4명, 백엔드 2명

👩‍💻 내가 맡은 역할

로그인 페이지

회원가입 페이지

🛠 기술 스택

• React.js
• React Router
• Sass
• AWS
• Git, Github

💻 기억하고 싶은 코드

로그인

class Login extends Component {
  constructor() {
    super();

    this.state = {
      id: "",
      pw: "",
    };
  }

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleLogin = () => {
    const { id, pw } = this.state;
    if (!id && !pw) {
      alert("아이디 입력값은 필수입니다.");
    } else if (id.length >= 1 && !pw) {
      alert("패스워드 항목은 필수 입력값입니다.");
    } else if (pw.length >= 1 && !id) {
      alert("아이디 항목은 필수 입력값입니다.");
    } else if (pw.length < 4 && id) {
      alert("패스워드 항목이 4자(개) 이상으로 해주십시오.");
    } else {
      fetch(`${API}/users/signin`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          account: this.state.id,
          password: this.state.pw,
        }),
      })
        .then((response) => response.json())
        .then((response) => {
          if (response.ACCESS_TOKEN) {
            localStorage.setItem("ACCESS_TOKEN", response.ACCESS_TOKEN);
            this.props.history.push("/main");
          } else {
            alert("아이디 또는 비밀번호가 일치하지 않습니다.");
          }
        });
    }
  };

회원가입

  componentDidUpdate(prevProps, prevState) {
    const { account } = this.state;
    if (prevState.account !== this.state.account) {
      this.setState({
        isIdValid: account === "" ? false : true,
      });
    }
  }

  handleSignUp = () => {
    fetch(`${API}/users/signup`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        account: this.state.account,
        password: this.state.password,
        name: this.state.name,
        phone: this.state.phone.map((el) => el).join(""),
        email: this.state.email,
        birthday: this.state.birthday.join("-"),
        sms_marketing_agree: false,
        email_marketing_agree: false,
      }),
    })
      .then((res) => res.json())
      .then((res) => {
        if (res.MESSAGE === "SUCCESS") {
          alert("회원가입이 완료되었습니다.");
          this.props.history.push("/login");
          window.location.reload();
        } else {
          alert("회원가입에 실패하였습니다.");
        }
      });
  };

느낀점

좋았던 점

처음으로 백엔드와 직접 소통하며 화면에서 id/pw를 입력하여 로그인을 성공시켰다. 조건을 걸어서 로그인 페이지의 아이디/비밀번호 input 값에 따른 alert창을 띄웠고 로그인 성공시 메인 페이지로 이동하도록 구현 하는데 너무 즐거움이 있었다. 백엔드와 소통 하며 소통이 원할하지 않고 서로의 구현 방식을 이해하지 못하면 api 통신이 어려울 수 있다는 것을 느꼈다. 커뮤니케이션이 개발자에게 있어 얼마나 중요한지 다시 한번 깨닫는다!

아쉬운 점

회원가입 페이지의 이용약관 체크박스 기능을 끝내 구현하지 못하여 아쉬움이 크다. '모두 동의합니다' 클릭 시 전체 선택이 되게 하고, 전체중에 하나만 해제하면 모두 동의 체크박스가 풀리게 하는 기능이 생각했던 것보다 어렵게 느껴졌다😢. 시간상 끝내 구현하지 못해서 아쉬움이 크다. 이 부분은 나중에 꼭 다시 공부해서 적용 해봐야지

마치며

처음으로 프로젝트를 하면서 너무 너무 설레고 재밌었다. 팀원들과 밤을 새워가며 체력적으로 힘들기도 했지만 서로 으쌰으쌰하며 즐겁게 코딩했다. 팀원들과 매일 아침 스탠드업 미팅을 하면서 어제 한 일, 오늘 할 일에 대하여 공유하면서 각자의 진행상황을 알렸다. 협업 중에 git conflict도 많이 났지만 오히려 이런 경험을 통해 더 배우고 깃 사용법도 이해할 수 있었던 것 같다! 이제 2차 프로젝트도 앞두고 있는데 더 욕심나고 더 성장하고 싶다!! 화이팅 💪