팀프로젝트 반려동물 이야기 만들기

팀프로젝트 백엔드는 구현을 거의 마쳐서 보완하는 부분은 최종적으로 성민님이 맡아주셨고, 현규님도 좋아요부분을 더 보완해주신다고 하셔서 저와 주승님은 먼저 프론트엔드를 구현하기로 했습니다.

 

전 저번에 한 부분이 있어서 혹시 도움이 될까 주승님께 코드를 보내준뒤 아직 해결이 안된 userId값을 가져오는 방법을 구상중에 있었습니다.

 

api.js 파일에서 require을 사용해서 models의 User를 가져오려했는데 html과 같이 사용하는 자바스크립트 파일은 사용할 수 없다고 해서 막막하던 차 계속 수업때 본 spa_mall을 보며 확인해보고 있다가 

 

로그인 할때 OOO님 환영합니다 alret창이 떠야하는데 안떠서 뜨게하다 생각해낸게 백앤드에서 로그인을 할때 성공하면 message를 보내주는데 그것을 response할때 가져올 수있습니다. 여기서 user자체를 보내주면 되지않을까해서 시도해보니 user_id 값을 url에 넣을 수 있었습니다.

그래서 로그인하면 해당 id값을 받아올 수 있게 되었고, 이제 이 id값을 가지고 게시글 작성이나 회원정보 수정등을 만들어볼껍니다.

 

사용해보려 하는데 가져온건 user자체인데 url에 user_id값만 따로 넣을 순 있었으나 user자체를 localstorage에 넣어보고싶은데 object로만 떠서 변경 가능한지 확인해볼껍니다.

 

localstorage에선 문자열만 가능하다고 해서 아래와 같이 작성해서 넣어주니 값이 잘 들어가는 것을 확인했습니다.

const objString = JSON.stringify(response.userInfo);

                localStorage.setItem("response", objString);

그리고 localStorage안에 있는 값을 가져오는 거까지 했습니다.

const user_info = JSON.parse(localStorage.getItem('response'));

이제 이 가져온 값들을 회원정보 수정에 기본 값으로 넣어줄 겁니다.

input에 기본 value값 넣기

회원정보에 값이 잘 들어가는 것을 확인했고, 수정도 되는것을 확인했습니다.

회원 정보가 문제가 있습니다. 그건 한번 수정 뒤 다시 수정을 하려는데 되지 않고 있습니다.

확인해보니 url에 id값이 없어서 난 문제였습니다.

되짚어보니 로그아웃할때 로그인이 있는 메인페이지로 넘어갔어야 했는데 그러지 않아 생긴 문제였습니다.

그래서 로그아웃에 성공하면 메인페이지로 돌아가게 해주었고, 수정은 잘 되나 localstorage에서 수정을 하지 않아 수정부분을 넣어줘야 겠습니다.

 

localstorage에서 값을 지우고 다시 넣어주면 될거같았는데 되지 않고 있습니다.

다시 지우고 값을 넣을때 백엔드에서 회원정보 수정 성공시 로그인과 마찬가지로 userInfo를 보내주었습니다.

그값을 받아와서 다시 새로 localstorage에 값을 넣어주었습니다.

 

이제 대략 회원 로그인이나 회원가입, 수정, 로그아웃은 됬으나 아직 사진 넣는것과 현재 게시글들이 나오지 않습니다.

사진 url을 넣으면 사진이 나오기는 합니다.

하지만 성민님이 원했던것은 url이 아닌 파일을 업로드 하는 거라서 회원정보 수정과 회원가입에 따로 파일 업로드를 사용해야할거 같습니다.

 

일단 회원가입에서 먼저 파일 업로드를 사용해보았습니다.

혹시몰라 submit은 빼고 보내봤는데 로그인 후 확인해보니 image_url이 들어가지 않은것을 확인했습니다.

그래서 다시 회원가입을 해보려합니다.

submit 버튼을 다시 돌려놓고 사용해보니 바로 /posts 페이지로 넘어가는 것을 확인했습니다.

이제 form을 삭제하고 file만 보내보려 합니다.

 

아직도 image_url의 데이터 값이 null인것을 확인했습니다.

 

 

참고 자료

input value에 변수값 넣기

textarea에 변수 값 넣기

s3 이미지 업로드