22/05/20/금 1학기 마지막 프로젝트- NavBar, 로그인, 회원가입 구현

220520 Today I learned!

• 1학기 마지막 프로젝트

---

1. Fact

(1) 1학기 마지막 프로젝트

• GitHub와 GitLab을 연동
• navBar :로그인 유무에따라 유저에게 보이는 화면이 다르다.
  • 로그인 유저: 프로필 이미지
  • 비로그인 유저: 회원 가입 및 로그인 버튼
• 회원 가입
  • 유저가 회원가입 버튼을 누르면 모달창이 켜진다. (모달창 외부를 누르면 종료된다.)
  • 버튼을 누르면 유저가 기입한 정보를 서버로 보낸다.
  • 정보가 유효하면 서버에 저장되고 토큰을 발급한다.
  • 발급된 토큰을 localStorage에 저장하고 토큰을 활용하여 추가적으로 유저 프로필을 localStorage에 저장한다.
  • 만약 정보가 유효하지 않았다면, 오류가 발생한다.
  • 오류가 발생한 원인을 유저에게 알려준다.
• 로그인
  • 유저가 로그인 버튼을 누르면 모달창이 켜진다. (모달창 외부를 누르면 종료된다.)
  • 버튼을 누르면 유저가 기입한 정보를 서버로 보낸다.
  • 정보가 유효하면 토큰을 발급한다.
  • 발급된 토큰을 localStorage에 저장하고 토큰을 활용하여 추가적으로 유저 프로필을 localStorage에 저장한다.
  • 만약 로그인 실패가 되었다면 유저에게 알림을 보낸다.
• 프로젝트 깃허브
• 프로젝트 노션

2. Feeling

피곤…..🙄.. 오늘 목표로한 기능을 전부 구현하지 않았다. 하지만, 혼자 console.log도 찍어보면서 account관련 로직에 대해 많이 배운 것 같다.

오늘은 팀원이 꽤나 힘들어했다. 그런데 내 코가 석자여서 팀원을 잘 챙기지 못한느낌이다. 내일부터는 정말 같이 힘내면서 프로젝트를 진행해야겠다.

CSS도 기능도 내가 원하는 데로 진행되지 않는 느낌이지만 내가 계획했던 것을 하나 둘 완성해나가는 기분이 너무 좋다!

3. Finding

Token 활용법

• username(id)를 가져와서 해당 유저모델 세부 데이터에 접근한다.

dispatch()로 발생하는 axios는 비동기적으로 진행되기 때문에, api 통신이 끝난 후에 확인해야 한다.

// src/store/modules/account.js 

// 토큰과 맞는 username을 가져온다. 
    fetchCurrentUser({ dispatch, getters, commit, state }) {
        if (getters.isLoggedIn) {
            axios({
                url: drf.accounts.currentUserInfo(),
                method: "get",
                headers: getters.authHeader,
            })
                .then((response) => {
                commit("SET_CURRENT_USER", response.data);
                dispatch("fetchProfile", state.currentUser);
            })
                .catch((error) => {
                if (error.response.status === 401) {
                    dispatch("removeToken");
                    dispatch("removeProfile");
                    router.push({ name: "login" });
                }
            });
        }
    },

//username과 맞는 유저의 상세 profile을 가져온다. 
    fetchProfile({ getters, commit }, { username }) {
        axios({
            url: drf.accounts.profile(username),
            method: "get",
            header: getters.authHeader,
        }).then((response) => {
            const profileDict = {
                username: response.data.username,
                nickname: response.data.nickname,
                age: response.data.age,
                region: response.data.region,
                image: response.data.profile_image,
            };
            const JsonProfileDict = JSON.stringify(profileDict);
            console.log(profileDict);
            commit("SET_PROFILE", profileDict);
            localStorage.setItem("userProfile", JsonProfileDict);
        });
    },

• Token을 localStorage에 저장하여 로그인한 유저인지 확인한다.

isLoggedIn: (state) => !!state.token,

별첨

*오류내용을 뽑아서 오류가 발생한 원인을 유저에게 알려준다. (알림)

// 회원가입
    signUp({ dispatch }, credential) {
      axios({
        url: drf.accounts.signup(),
        method: "post",
        data: credential,
      })
        .then((response) => {
          const token = response.data.key;
          dispatch("saveToken", token);
          dispatch("fetchCurrentUser");
        })
        .catch((error) => {
          // 오류 내용을 뽑는다.
          const err = JSON.parse(error.request.response);
          const errMessage = Object.values(err)[0][0];
          // 오류 알럿!
          Swal.fire({
            title: errMessage,
            icon: "error",
            toast: true,
            width: "25%",
            confirmButtonColor: "#5865f2",
          });
        });
    },

4. Future Action & Feedback

Future Action	진행 상황	Feedback
DOM을 깨우치다	pause 🤦‍♀️	잠시 중단!
why 리액트?	Not Start🌙