[미니프로젝트] 2일차

오늘 한 일

1. 로그인 redux 구현 (loginCheckFB -> 로그인 여부 확인, loginFB -> 로그인 요청) 

2. 프론트 팀원분이랑 로그인, 회원가입 기능 합치기 + 메인 페이지 구현 -> 다른 기능 분배해서 구현

3. scroll은 되지만 보이지는 않게 하고 싶은 데 적용이 안되는 중이다.. 더 찾아봐야 할 듯 

4. 피드, 게시물(상세, 작성), 댓글(작성, 목록) 틀 구현

5. 로그아웃 기능 구현

6. 서버와 연동 전에 session 확인 해보기 위해서 cookie 사용 (window.location.href('/') 사용)

7. 백엔드분들이 EC2에 파일 올려 주시고 프론트랑 연동 되는 지 확인 해봤는 데 안되서 회의 -> 회원가입 연동 성공

8. flexbox 사용해서 여러 방면으로 view 다시 잡음

9. axios 어떻게 사용하는 지 공부

10. 회원가입 정규식 검사 해결 안됨

 

문제 해결

 

1) 스크롤 기능은 되지만 스크롤은 보이지 않게 하는 기능 해결

2021.12.07 - [항해 중/6주차 미니 프로젝트] - 미니프로젝트 2일차 - 스크롤 기능은 살리고 스크롤바는 없애기

미니프로젝트 2일차 - 스크롤 기능은 살리고 스크롤바는 없애기

 

2) 서버와 연동하기 전에 임시로 cookie를 사용 했는 데 reload가 안되서 매번 새로고침을 해줘야 cookie를 확인 할 수 있었는 데 window.location.href="/"를 사용해서 로그인 또는 로그아웃 시에 렌더링 되도록 해줌

현재 구현 상황

 

axios 문법 2가지

    axios // 로그인 요청
      .post("http://3.37.36.119/api/login", { username: username, password: password })
      .then((response) => {
        axios.get("/api/isLogin").then((reponse) => { // 로그인 여부 확인
          dispatch(setUser({ username: username, is_login: true }));
          console.log("로그인 성공");
        }).catch((err) => {
            console.log("로그인 여부 실패", err)
        });
      })
      .catch((err) => {
        console.log("로그인 요청 실패", err);
      });

  const login = () => {
    axios({
      method: "post",
      url: "http://3.37.36.119/api/login",
      data: {
        username: "username",
        password: "password",
      }
    })
      .then((response) => {
        // 성공 일 때 200 뜸
        if (response.status === 200) {
          window.alert("로그인 성공");
          setModal(false);
          props.setIsLogin(true);
          history.push('/')
        }
      })
      .catch((err) => {
        console.log("회원가입 실패", err);
      });