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 통신이 끝난 후에 확인해야 한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// 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에 저장하여 로그인한 유저인지 확인한다.
1
isLoggedIn: (state) => !!state.token,
별첨
*오류내용을 뽑아서 오류가 발생한 원인을 유저에게 알려준다. (알림)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 회원가입
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🌙 |