[미니프로젝트] 3일차
본문 바로가기
항해 중/6주차 미니 프로젝트

[미니프로젝트] 3일차

by 은돌1113 2021. 12. 8.

오늘 한 일

1. 회원가입 정규식 검사, 서버와 연결(axios) 팀원분이 만들어 주셔서 오류 해결 함.

2. 로그인, 회원가입 서버와 연결(axios)

3. 로그인 시 서버에서는 토큰이 생성 되고, 네트워크 -> Header -> Authorization에 들어가는 데 프론트에서는 토큰을 받아 올 수 없는 문제가 발생

4. Feed.js flexbox 수정 (팀원 분이 해주심)

5. localStorage에 token 저장해서 Header, Index에서 토큰 유무에 따라 다르게 처리

6. 로그아웃 처리 : localStorage에 담긴 토큰 정보를 localStorage.remove('토큰 이름')을 사용

(아직 서버에서 기능이 안만들어 져서 연결을 안해봄)

7. 5번에서 새로고침을 하지 않으면 반영이 안됨 (dispatch로 로그인 요청 후 localStorage.setItem 하고 함수로 돌아오면 localStorage.getItem으로 토큰 읽어 오려고 했는 데 null이 뜸)

8. 로그인 여부 확인 관련 modules 수정, App.js 수정, Permit 수정함

9. 랜덤 게시물 보여주는 Route, 내가 작성한 게시물 보기 Route 분리함

10. 댓글 작성, 댓글 목록 보기 기능 구현

11. Feed.js(/feed)에서 게시물 클릭 시 해당 게시물로 이동하기

12. 서버에 axios로 요청 후 redux에 dispatch 할 때 아래와 같은 오류 발생

(payload에 falsy한 값 없고, reducer에서 payload 값 잘 넘어와서 draft에 들어가는 것까지 확인 했는 데 저런 오류가 계속 발생 중이다.)

더보기

 Error: When called with an action of type "GET_FEED", the slice reducer for key "feed" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.

 

내일 할 일

내일은 Feed.js에서 게시물 눌렀을 때 댓글 오류나는 문제랑, Feed.js에서 댓글 눌렀을 때 해당 게시물로 이동하는 거 서버랑 연동 되는 지 확인 해보면 될 것 같다. 그 후 게시물 작성, 수정, 삭제(다른 팀원분이 맡으심) 완성 되면 CSS 손보면 될 것 같다.

 

문제 해결

 

1) 프론트에서 Authorization을 받아 올 수 없는 문제 해결

: 알아보니 cors 보안상 서버에서 처리를 해줘야 한다는 것 같음

https://kingchan223.tistory.com/230

 

react - header의 Authorization받기

프론트에서 fetch로 서버에 로그인 요청을 하면 서버에서 jwt토큰을 만들어 header에 심어 응답을 해주는데, 자꾸 프론트에서 "Authorization"으로 응답을 받지 못해 이것저것 다하다가 많은 시간을 날

kingchan223.tistory.com

http://daplus.net/javascript-axios%EC%97%90%EC%84%9C-%ED%97%A4%EB%8D%94%EC%99%80-%EC%98%B5%EC%85%98%EC%9D%84-%EC%84%A4%EC%A0%95%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9E%85%EB%8B%88/

 

[javascript] Axios에서 헤더와 옵션을 설정하는 방법은 무엇입니까? - 리뷰나라

Axios를 사용하여 다음과 같은 HTTP 게시물을 수행합니다. import axios from 'axios' params = {'HTTP_CONTENT_LANGUAGE': self.language} headers = {'header1': value} axios.post(url, params, headers) 이 올바른지? 아니면 내가해야합

daplus.net

 

2) 서버에 axios로 요청 후 redux에 dispatch 할 때 아래와 같은 오류 해결

: 몇시간동안 고민하고, 찾아 보다가 다른 팀에 잘하시는 분이 도와주셔서 해결 할 수 있었다.

immer 패키지에서 기존에는 produce를 사용해서 불변성 관리를 하면 return을 안적어 줘도 되는 데 왜 오류가 났는 지는 모르겠지만 가설을 몇가지 세워 보자면

 

1) 자바스크립트 문법에서 화살표 함수를 사용 할 때 {}를 안에는 return을 적어 줘야 하기 때문에 오류가 발생했다.

-> 다른 분들은 produce에서 {}를 안쓰셨다고 하심.

2) return을 원래 적어줘야 하는 데 그동안 나를 봐줬던 건 아닐까

-> 솔직히 이건 말도 안되는 건데 제정신 아니라서 적어봄.

헤결 전
해결 후

댓글