[Dev Log] 20210928 / 유다희

브랜치: mypageDetail,

## **오늘 TODO**

- [x] 로그인 버그 : 계속 유지되는 이유, 로컬에서는 해결 벗 배포에서 안되는 문제 미팅(순려님)
3일만에 드디어 잡았다.....!!!! 며칠을 정말!!
- [x] mypage - 내 전시회 : 데이터가 없는 경우 map펑션 에러 뜨는 버그...!!!! 후.....
- [x] mypage - 작가인경우에만, sub바에 '내 전시' 탭이 뜨고, info에 '작가소개' 란이 보여야함
- [x] mypage 레이아웃 깔끔하게 변경 필요. 반응형 320까지 줄였을때 깨지지 않도록 조정
- [x] mypage 프로필이미지 백그라운드 수정
- [x] join/signin 페이지 버튼 버그
- [x] join/signin 페이지 레이아웃 깔끔하게 변경 및 반응형 수정
- [x] 로그인 관련 페이지에서 마이페이지 클릭시 이상한 파라미터로 이동하는 버그
- [ ] setErrormessage 기본은 막아둠 → 수정필요

## New thing!

리액트-슬릭
```jsx
npm install react-slick --save
npm install slick-carousel
npm install react-bootstrap@next bootstrap@5.1.1
npm uninstall react-bootstrap@next bootstrap@5.1.1
npm uninstall react-slick --save
npm uninstall slick-carousel

import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import styles from "./AboutSlider2.module.css";
import { Card, Button } from "react-bootstrap";
```
css를 깔아서 원하는 곳에 완성된 컴포넌트를 적용하면 css 충돌이 일어나서
페이지 height가 무한으로 길어짐///.

## **ERROR노트**

## 1. 또 만난 map function에러 (받아온 데이터 형태)

문제

- [ ] map function 에러

해결

- [ ] 받아온 데이터의 null값이 어떤 형태로 들어있는지 확인필요

유사한 형태의 데이터와 같은 로직으로 렌더링 되어야 하는 컴포넌트 중, 하나만 맵핑에러가 뜨는것을 발견.

내전시와 내가찜한 전시 이 두 컴포넌트 렌더링에서 버그를 발견했다.

api통신 시도했을때는 데이터 렌더링을 위해 두개의 통신 모두 존재하는 데이터를 배열의 형태로 받아왔다

따라서 , [{}.{},{};;;] 이러한 형태로 데이터가 들어있기 때문에 상위 컴포넌트에서 axios요청을 보내서 맵핑→ 객체 요소를 하위 컴포넌트로 보내주는 로직 !

근데 미스테리하게 하나만 매핑에러가 뜨는 거임..

1. 처음 생각한건 이전에 겪었던, 프롭스 전달하는데 소요되는 시간보다 컴포넌트 전환이 빠른 문제

→ 이미 겪었던 문제라서 이미 setTimeOut을 걸어뒀기 때문에 의문! 그래서 아닌것 같긴 하지만 상태값이 충돌해서 그런가 하고 새롭게 상태를 지정해서 렌더해봤지만 해결되지 않음

1. map에러가 뜨는 또 하나의 이유 데이터가 없는경우 ! 이것도 이미 조건문으로 데이터가 있는경우에만 매핑을 하도록 만들어 둠 !!

## map function에러를 구글링하면 많은 게시물들이 배열데이터가 아니라고 하고 있다. 정답!


### 그치만, 데이터가 있는 경우 두 값 모두 배열의 형태로 **[{}.{},{};;;] 데이터를 가져오고 있음**

초기상태도 애초에 배열의 형태로 담아뒀다.... 위에서도 언급한것 처럼 너무나도 같은 로직

[데이터 통신]

axios요청시 → res.data.data.length를 콘솔에 찍으면 있는 데이터의 개수를 가져온다.

하지만 동시에 콘솔에 length가 작동하지 않는다고 떴다. 이건 또 왜그러는지 궁금하다

정답은 3번 배열이 아닌 데이터 였다.

기존 아이디들은 둘중 하나는 데이터가 있던지, 둘다 있던지 해서 아무 데이터도 없는 값을 axios로 받아왔더니,,,,

제대로 매핑이 되는 것은 데이터가 없는 경우 =⇒ [ ] 빈배열의 형태.

안되는 것은 ==⇒ undefined

이렇게 렌더해주었더니... 아주 무리없이 에러없이 잘 돌아감 .. ! ㅎ

기존 사용하던 아이디들이 둘 중 하나는 데이터를 가지고 있던지, 둘다 가지고 있던지해서 차이점 발견까지 너무 오래걸렸다. 후..

*첫번째: 전시회(undefined), 두번째: 라이크([ ])

## 2. 배포사이트 쿠키에 토큰이 저장되지 않는 문제

제일 큰 버그였던 로그인 버그를 잡았다.

문제 :

- [ ] 1 로그아웃을 해도 계속 로그인이 유지됨
- [ ] 2 로컬에는 local쿠키탭에 액세스 토큰이 잘 들어가 있는데, 배포에서는 보이지 않음 (setcookie는 잘 들어와 있음)
- [ ] 3 엑세스 토큰이 사라지지 않음!

해결 :

- [ ] 가장먼저 확인해야할 것은 로그인 로그아웃 등 필요한 통신 요청이 한곳으로 잘 가고 있는지
- [ ] 토큰에 expire 설정.
- [ ] 배포사이트의 쿠키탭에 엑세스토큰이 보이지 않아도 토큰 성능에는 이상이 없음
- [ ] 처음 받아온 쿠키가 트래킹 되는듯 ! 크롬에 있는 쿠키를 삭제하니, 원점으로 돌아가게 됨
- [ ] 쿠키가 삭제되지 않는 문제가 아니라 애초에 쿠키에 토큰이 저장되지 않았음 .
- [ ] 아마도 배포할때 뭔가 꼬인듯 함 쿠키 저장이 로컬로만 되도록 설정 되어있을 듯하다 → 다른 프로젝트들 참고해보면 옵션없이도 셋쿠키, 클리어쿠키 잘만한다.
- [ ] 쿠키를 보낼때 옵션으로 꼬인 문제를 제어할 수 있다.
- [ ] 필수적으로 도메일 설정을 해주어야 하는데 이때 도메인은 : 당연히 서버 도메인!!(쿠키 스코프지정)


```jsx
# 쿠키생성: 만료
return sign(data, process.env.ART_GROUND_ACCESS_SECRET, {
expiresIn: "1d",
});
```

```jsx
## res.cookie
지정된 곳 이외의 사이트에도 쿠키가 저장되도록 옵션설정함

sendAccessToken: (res, accessToken) => {
res
.cookie("accessToken", accessToken, {
httpOnly: true,
sameSite: "none",
secure: true,
maxAge: 60 * 60 * 24 * 1000,
domain: "art-ground.link",
path: "/",
ovewrite: true,
})
.status(200)
.send("AccessToken ready");
},
```

```jsx
# clearCookie
signOut: (req, res) => {
try {
res
.clearCookie("accessToken", {
httpOnly: true,
sameSite: "none",
secure: true,
path: "/",
domain: "art-ground.link",
})
.status(205)
.json({ message: "successfully signed out!" });
} catch (error) {
console.log(error);
res.status(500).json({ message: "server error" });
}
},
```
분명히 셋쿠키 들어가있고,


1. 쿠키로 토큰 보낼때 옵션을 httpOnly로 주면, client쪽에서 document.cookie로 받아오는 것 불가능함 → 클라이언트 문제일까 싶어서 ct에서 조작할 수 있는 방법을 찾아봤는데, 있기는 하다 하지만 보안상 원래 쿠키는 서버쪽에서만 다루는것이 맞기 때문에 document,cookie 혹은 react-cookie 등의 방법은 권장사항이 아님 . 아래 사진은 documet.cookie로 다른 이상한 쿠키값만 들고고는 이미지 .


[https://arjunphp.com/handle-cookies-express-js/](https://arjunphp.com/handle-cookies-express-js/)