[Dev Log] 20210921/ 유다희

브랜치: feature/myinfo

## **오늘 TODO**

- [ ] 로컬에서 성공한 회원가입,로그인,로그아웃 배포환경에서 가능하도록 체킹
- [x] 마이페이지관련 api통신 플로우 체킹
- [ ] 마이페이지 api통신 시도
- [x] myinfo, mypick, mygallery 반응형
- [x] Modify페이지 레이아웃 및 반응형
- [x] Modify페이지 s3버켓연결하기 + 이미지수정 input추가
- [x] Modify페이지 비밀번호 암호화
- [x] Modify 유효성
- [x] Modify 진짜 수정시 모달
- [x] 새로고침시 프롭스 못받아오는 문제 원인 찾기.
- [ ] admin 체킹
- [ ] about페이지 문구, 이미지 고민.. 추가 및 수정할 것 고민 → 슬라이드?
- [x] 파이프라인 체킹 ! 배포

## **ERROR노트**

### 1. cypto-js 사용시. (Modify.jsx)


수정페이지에서 비밀번호 암호화 사용시, password에 빈 상태값이 되어 들어가버리는 상황이었음.

암호화하는 값이 null값인 경우 에러가 떠버린다. 따라서 버튼이벤트 클릭시 조건문을 사용하여 해결.

아마 api 통신할때 또 에러가 뜰것만 같은 예감이 들긴하다 ㅎ_ㅎ

### 2. **새로고침시 상태값 삭제되는 문제 ! (first때도 해결못했던 문제 ㅠㅠ )**


로그인하면 userinfo를 프롭스로 컴포넌트간 잘만 받아오는데 , 새로고침만 하면 상태값이 null이 되어버린다. 따라서 myinfo, modify 등등 줄줄이 새로고침시 에러가 떠버림

시도1.

localstorage에도 정보를 넣어봤다. 그런데 발견한점은 localstorage에 들어가도 새로고침을 하면 null값이 되어버린다는 점이다 ... ! getItem해오는 페이지에서만 null로 바뀌는 이유를 알 수 없음.

first때 엑세스토큰 잘만 들어가있었는데 왜...!! ㅠㅠ

```jsx
useEffect(() => {
setIsLogin(true);
setUserinfo({
userEmail: "kim@gmail.com",
nickname: "photographer kim2",
profileImg: "../images/author.webp",
authorDesc:
"무용가들의 우아한 동작과 섬세한 표정을 고스란히 담아내는 무용 사진가입니다. 무용가를 전문적으로 촬영한다는 점도 무척 신기한데, 마치 무대 위에서 함께 연기를 하기라도 한 듯 실감나게 표현한다는 점은 더욱 놀랍습니다. 그리고, 김윤식 작가가 체코국립발레단 소속의 현역 발레리노라는 사실까지 알게 되면 그에 대한 호기심은 더욱 커집니다.",
});

window.localStorage.setItem("userinfo", JSON.stringify(userinfo));
return () => {};
}, []);
```

빈배열이 아닌, [userinfo]를 넣어주면 값은 잘 들어가는데, 메모리누수발생 오지게 난다 ⇒ 사용불가.


시도2. useEffect로 상태값 새롭게 주기 (여기서도 서버에 요청을 보내볼까 했다)

info컴포넌트 내에서 useEffect를 사용해서 새롭게 상태값을 해주려고 시도했다.

useEffect가 안먹는다. 임시로 setUserinfo를 사용해서 값을 넣어봤는데 안되는거라면, useEffect안에서 axios요청을 해도 안될것이라 확신이 든다⇒ 사용불가

시도 3. 해결 완 ! 렌더링 시간문제!

방법을 찾음 !! 콘솔을 찍어보다가 console.log(userinfo) 했을때 2개의 값이 떴다. 뭐지?

미세한 시간차인가 싶어서, setTimeout을 걸어줬더니 속성 destructure없이 값을 잘 불러왔다.

나는 통신값만 렌더링에 시간이 걸리는줄 알았는데, Props값을 받아오는 경우에도 시간이 소요된다.


```jsx
const [infoRender, setInfoRender] = useState(false);

useEffect(() => {
//로딩창 띄워야함
setTimeout(() => {
setInfoRender(true);
}, 1000);
});

+++++
렌더링 부분에 infoRender 조건문으로 렌더를 시켜줬더니, 값을 잘 불러온다... 이렇게 간단한 문제를
```

**1. 하위컴포넌트로 프롭스를 받아야하는 경우 ⇒ 렌더링 해야하는 컴포넌트에서 setTtimeoute

2. 라우팅페이지로 프롭스를 받아야하는 경우 ⇒가장 상위 컴포 즉, App.js에서 렌더링 조절**

### 3. aws배포 build에러

저번에 3일동안 삽질한 이후 배포레포에 푸쉬할때마다 너무 떨린다 ㅠ

'**Error while executing command: npm run build. Reason: exit status 1'**


파일자체에 에러가 있어서 npm start가 안되는 상황에서는 build에러가 뜨는것을 확인할 수 있다.

매우 당연한 문제이지만 다음부터는 기억하고 괜히 무서워하지말자 ~