오늘의 트러블 슈팅!
instance.interceptors 로 인한 오류
사실 instance.interceptors 는 너무 어려워서 내가 구현한 기술이 아니다..
팀원 분께서 구현해 내셨는데, 여기서 계속 오류가 나는 부분이 있었다.
여기서 다음 버튼을 누르면 다른 컴포넌트로 이동을 해야하는데, 자꾸 페이지가 강제적으로 홈으로 이동되는 해프닝이 일어났다.
이동되기 전에 콘솔에 에러도 쫘르륵 찍혔는데, 순식간에 강제 이동처리 돼버려서 오류 확인도 하지 못했다..
이유가 무엇인고.. 하니~
shared.axios 의 instance.interceptors 쪽에서 설정한 값 때문이었다.
내가 지금 구현하고 있는 페이지는 회원가입 창으로, 토큰이 헤더에 없다.
그런데 토큰이 헤더에 없을 경우 402 에러가 나도록 설정했고,
402 에러가 나면 페이지를 강제적으로 "/"로 이동하게끔 팀원분이 짰기 때문에 발생하는 에러였다.
페이지를 강제 이동 처리 해주는 코드를 주석 처리 하니 페이지가 그 자리 그대로 있어서 다른 코드들 및 오류들을 자세히 살펴볼 수 있었다!
input 값이 다 채워져야 버튼 활성화시키기
input의 값이 공란일 때는 button - disabled true,
input의 값이 전부 채워졌을 때 button - disabled false
1. input 의 useState 값을 각각 다 만든다.
2. input 값의 onChange 함수에 setter 넣기
input 의 onChange 에 함수가 2개 이상이어서인지, event 값을 이미 다른 함수에게 전해줘서 인지 모르겠지만
if 값에 e.target.current.value 의 target 값을 못 가져오는 오류가 나와서
ref.current.value 값으로 대체해서 가져왔다 !
3. button에 disabled 속성 넣기
4. disabled 를 props로 받아와서 css 넣기
5. 완성 !
Recoil 에 파일 저장
다른 컴포넌트의 값을 불러서 버튼에 적용시켜야 하는 작업을 해야했다.(회원가입)
props 사용은 너무 번잡하고 어려우므로 저번에 사용했던 Recoil 에 한번 더 도전해보기로 했다 !
한 번 해봤다고 조금 더 수월했다..!!!
1. atom 에 atom 함수 설정
key, default 값을 줘서 atom 함수들을 설정한다.
2. 저장할 컴포넌트, 불러올 컴포넌트 두 곳 다 import 하기
3. 저장할 컴포넌트, 불러올 컴포넌트 두 곳 다 useRecoilState 사용하기
4. 저장할 컴포넌트의 가져올 값에 onChange 함수 넣기
- onChage 함수에 useRecoilState 의 setter 넣기
- e.target.value 를 보내는 이유 ?
- input 의 값(데이터) 를 저장시켜서 --> 아이디
- 회원가입 함수 실행시 받아서 적용시키기 위해
- e.target.value 를 보내는 이유 ?
5. 불러올 컴포넌트의 button 에 onClick 함수 만들기
6. 불러올 컴포넌트에서 recoil 데이터 적용시키기
고정된 이미지 보내기
프로필 사진을 선택하게 되면,
회원가입시 선택한 이미지를 보내야 한다. (마이페이지에서 확인 가능할 수 있게)
백엔드 분들로부터 요청한 img url 란이다.
이미지 호스팅 사이트에서 이미지 --> url로 바꾸기
브라우저에 "이미지 호스팅 사이트" 라고 치면 많은 사이트들이 나온다.
그 중 아무 곳에 들어가서 이미지를 업로드 하면 된다.
이미지를 업로드하면 이렇게 링크를 주는데,
그 중 '직접 링크' 에 들어가서 url 을 복사한다.
복사한 url --> 변수 선언해서 붙인 후 배열로 돌리기
profile1 을 profileZero 로 선언한 이유는,
그냥 배열의 첫 index 가 0으로 시작하기 때문에 편하게 하려고 붙인 이름이다.
초기값이 0인 useState를 만든다.
- 초기값이 0인 selectImg getter 가 있다.
onClick 용 함수를 만들어, index 값을 props로 보낸다.
- choiceImage 라는 함수에 index 값을 보냈다.
사진 onClick 시 나오는 함수를 만든다.
- onClick 하면 index 값을 받아오는 choiceImage 가 발동된다.
- selectImg(0) 을 바꾸는 setSelectImg(프로필 사진의 index) 가 실행된다.
완성 !
회원가입 때 선택한 사진이 제대로 잘 전송돼서,
마이페이지에서 사진을 잘 읽어오는 모습을 볼 수 있다.
