언니의 파우치 사이트 클론

 

 

PROJECT

언니의 파우치 사이트 클론

포스트 에디터가 각자 피부 타입에 맞는 화장품 추천,

리뷰를 통한 제품 정보 공유를 중점적으로 한 서비스

https://github.com/wecode-bootcamp-korea/HyungPa-frontend

 

개발 인원 및 기간

• 기간 : 2주(4월20일~5월1일)
• 인원 : 프론트 3명(박재현) 백엔드 3명

 

프로젝트 주요 목적

• 실제 협업 시 사용하는 Scrum, Sprint Meeting, Stend Up Meeting 방식 경험.
• FrontEnd / BackEnd 협업을 통한 커뮤니케이션 및 협동 작업의 중요성 이해.
• 위 홈페이지에 대한 다양한 UI 및 디자인 요소, 애니메이션 등을 React/Sass 로 구현.
• 제작 과정에 있어 사용자 중심 구조에 대한 이해도 향상.

 

협업 툴로는 Trello 사용

 

 

언니의 파우치 회원가입 로그인 페이지 구현

 

 

 

CODE

class Signunpa extends React.Component {
  constructor() {
    super();

    this.state = {
      email: "",
      password: "",
    };
  }

  handleID = (event) => {
    // console.log(event.target.value)
    this.setState({
      email: event.target.value,
    });
  };

  handlePW = (event) => {
    console.log("pwvalue : ", event.target.value);
    this.setState({
      password: event.target.value,
    });
  };

  handleLogin = () => {
    console.log("this.state : ", this.state);
    fetch(`${API}/user/sign-up`, {
      method: "POST",
      // headers: {
      //   "token": localStorage.setItem("wtw-token")
      // },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
        birth_date: "1991-01-01",
        selected_agreement: "True",
      }),
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.message === "SUCCESS") {
          this.props.history.push("/Signin");
        }
        // if (response.token) {
        //   localStorage.setItem("token", response.token);
        //   alert("로그인에 성공하셨습니다.");
        //   this.props.history.push("/");
        // }

 

CODE

 

State에 초기값을 지정했다.

Setstate에 email,password를 담고,

handleID,handlePW를 입력할 때마다 콘솔로

e.target.value 값을 통하여 이벤트 객체에 담겨있는 현재의 텍스트 값을 읽어올 수 있었다.

Fetch 함수에 api 변수에 담아서 api를 연동했다.

Body 에 JSON.stringify 개체를 문자열화 해서 보냈다.

localStorage.setItem은 가입은 그냥 가입절차를 하고 끝이고, 로그인이 되는 건 아니므로 저장할 부분이 없기 때문에 주석처리했다. 처음 개념을 착각하여 입력했었다.

 

REVIEW

 

http는 stateless 상태이기 때문에 localStorage.setItem을  이용하는 걸 알았다.

Api 백엔드와의 HTTP통신으로 연동으로 처음 통신을 해보았다.

 

 

class Signin extends React.Component {
  constructor() {
    super();

    this.state = {
      email: "",
      password: "",
    };
  }

  handleID = (event) => {
    // console.log(event.target.value)
    this.setState({
      email: event.target.value,
    });
  };

  handlePW = (event) => {
    console.log("pwvalue : ", event.target.value);
    this.setState({
      password: event.target.value,
    });
  };

  handleLogin = () => {
    // console.log("this.state", this.state);
    fetch(`${Login}`, {
      method: "POST",
      // headers: {
      //   "token": localStorage.setItem("wtw-token")
      // },
      body: JSON.stringify({
        email: this.state.email,
        password: this.state.password,
      }),
    })
      .then((response) => response.json())
      .then((response) => {
        if (response.token) {
          localStorage.setItem("token", response.token);
          alert("로그인에 성공하셨습니다.");
          this.props.history.push("/");
        }
      });
  }

 

 

CODE

 

 access token을 local storage에 저장해보려했다.TW-TOKEN이라는 키를 저장 Setltem 메서드를 사용하면 되었다.

로그인에 성공하면

로그인후에 this.props.history.push(“/”)

페이지이동으로 입력을 해놓았다.

 

REVIEW

 

로그인 성공 시 jwt로 만든 access token을 받았다.

개발자도구 -> Application tab -> Local Storage 에서 wtw-token 이름으로 된 data가 저장되어 보여졌다.

Local Storage는 해당 도메인에 영구 저장하고 싶을 때 사용하는 것으로 개념을 잡았다.  

로그인하면 더 이상 안 해도 된다.

 

 

 

프로젝트를 끝내면서

 

처음으로 백엔드와 프론트엔드가 연동이 되어 데이터를 오고 받는 것이 너무 신기했다.

코드를 입력해서 통신이 된다는 개념 자체가 너무 새로웠고 흥미로 웠다.

이런 과정들이 신기해서 컴퓨터동작원리, 티비원리같은 것 들도 찾아보게 되었다.