생각이 끊어지지 않도록 (생각 상태관리)

[Aiden-Kwak]

1021 0511pm
서버 url을 :pk로 변경하였다. 클라이언트에서도 myspace/:pk가 될수있도록하자
이 상태에서 유저네임을 어떻게 가져와야할까 응답관리에 대한 답은 시리얼라이저에 있다. 고민하자

[Aiden-Kwak]

1021 0803pm
Link의 state로 id를 보내주는 방식으로 로직은 동일하되 id 출처를 분리시켰다. 제대로 데이터를 받고 있으나 url에 pk를 포함시키고 있지 못하다.

[Aiden-Kwak]

1021 0837pm
결국 이전에 해결하려다 미룬 cra에서의 webpack 설정문제에 도달했다. eject없이 설정하기 위해 오버라이딩을 해야하는데 개념이 부족해서 지금 건들기 뭐하다. 우선 작동은 하니 한번 더 미루고 팔로우기능을 완성하자. id는 전달할 수 있게되었으니 테스트할 수 있다.

[Aiden-Kwak]

1022 0246pm
팔로우 구현 완료했다. 작동 확인됨. 팔로우 완성을 위해 해야할 작업 기록
(1) 팔로우버튼 클릭시 following으로 글씨변경. hover하면 unfollow(빨강) 뜨도록
(profileCard에서 따로 user profile을 받아 following 목록에 존재하는 유저는 following 표시)
(2) 누리 리스트에 팔로우 안된 유저만 뜨도록. 누리 리스트는 재활용할거라서 비로그인유저사용시에는 모두 뜨로록 구분
(3) 언팔로우 구현필요
(4) 누리리스트에 자신은 제외하는 것도 만들어야함. 클라이언트가 아니라 서버에서 처리하자. 비로그인 유저 고려할것

[Aiden-Kwak]

1022 0840pm
개꼬였다 미리 커밋해둘걸 꼬이기전 구현목록(복원할것)

1. username은 model에 @Property를 이용하여 만들어줬다.
2. 검색기능은 우선 nickname에 대해서만 구현했다. @Property로 만들어진 필드를 쿼리가 이해하지 못한다.
3. 자동 반영을 위해서 dispatch에 넣으려했지만 과정에서 해당 에러발생
   A non-serializable value was detected in the state" when using redux toolkit - but NOT with normal redux

직렬화할수 없는 값을 state, action에 넣지 말아야한다는거다.
4. 갑자기 프로필이 id를 받아오지 않는다 뭘한걸까.
5. 서버 하나 더 파서 작동확인하고 구현 했던 목록만 다시 옮기자.

[Aiden-Kwak]

1023 1124am
위 3. dispatch반영시 에러 optional chaining, nullish coalescing 연산자로 해결할 수 있지 않을까?
user?.age
1023 0115am
=> res를 dispatch에 직접넣으면서 발생한 에러였는데 res.data를 받아야했다. res는 당연히 직렬화할 수 없다

[Aiden-Kwak]

1023 0115am

프로필 검색을 구현완료했다. 타이핑시 onChange를 작동시켜 값을 state에 담아 axios요청을 하는데 이때 상태유지를 지켜주고 있지 않기때문에 값을 모두 지웠을때 ''값이 최종 상태로 남아 리스트엔 아무것도 뜨지 않게된다. 원본을 유지시키고, onChange로 들어온 e.target.value의 길이가 0일때 원본의 값을 dispatch에 넣어주자. 그럼 해결될거라 예상

[Aiden-Kwak]

1023 0304am

프로필 검색은 완전히 완성되었다. 프로필디자인은 내부 컨테이너를 더 만들어 중앙정렬시켰다. 프로필 이미지가 위로튀어나가게 하고싶은데 밑으로 튀어나간다. 감도안온다
우선 디자인 제끼고 팔로우/팔로잉 유저를 리스트해서 전송하는 로직을 작성시작했다. 대가리 터질거같다
프로필 수정로직도 작성하고 일기작성도 완성시켜야한다. 일기 리스팅 디자인은 빠르게 끝낼수 있을것같다
이미지 로드에 대한게 어려울수있을것같다. useRef hook 고민할 것.
오늘목표: 팔로우/팔로잉 리스팅 완료하기, 일기 작성 클라이언트와 연결만, 작성된 일기 아 디테일뷰도 만들어야한다 세상에나
추천일기장 리스팅뷰도 만들자. 추천일기영역에는 그냥 모든 일기장을 리스팅 시킨다. 디자인은 모르겠다 이거 끝낼수 있나

[Aiden-Kwak]

1023 0337pm

1. 지금 생각해보니까 팔로워리스팅로직을 request.user로 줬는데 그러면 다른 프로필에서 팔로워목록을 확인했을때도 인증유저의 목록만 나타남. isAuthenticated 제한 풀고, id받아서 그걸로 사용자 확인하고 그에 대한 팔로워를 제공해야한다.
2. 프론트 파일 연결은 완료, id 전송 state도 작성완료, 받은 id 를 axios params로 보내고 서버에서는 그걸로 유저를 특정하여 리스트를 제공한다.

[Aiden-Kwak]

1023 0401pm
당장 내일이 끝이라 가정하면 뭐가 가장 급한가?
팔로잉 기능은 완성이 가능하다. 이후 일기작성은 없어선 안된다.
팔로잉 구현 완료후 일기작성, 일기 리스팅까지를 오늘목표로 한다. 이후엔 노트 카드를 프론트에서 구현할 필요가 있다. 추천 노트를 위해서

[Aiden-Kwak]

1023 0718pm
팔로우 기능은 우선 했다고 보여줄 수 있게 됐다. 일기작성부터 해결하자

[Aiden-Kwak]

1023 0801pm
Quil 데이터 넣어서 반환하고 프론트에 띄우는 것까지 성공.
HTMLTag가 제거되지 않음. 이미지 어떻게 처리할지 모르겠음. 일기장 영역보니까 글씨 길어지면 영역 벗어남.
=> HTMLTag제거 성공, 그대로 렌더링 > <div dangerouslySetInnerHTML={{ __html: props.diaryElement.content }}>

[Aiden-Kwak]

1023 0822pm
이제 해야할거: 카드 디자인 없이 그냥 데이터 쭉 박아뒀음. 이 데이터로 우선 디자인하고, 데이터를 다시 링크 스테이트로 넘길거임. 어디로 넘기냐 detail 페이지를 새로 만들어 연결할 것.
그리고 지금 작성자 받지 못함. 시리얼라이저에서 그냥 받아주면 됨. 이미지 받는 영역또 따로 생성. 일기 표지페이지로 쓸거임
예상 소요시간: 2시간, / 점심시간 작업

3시반 퇴근/ 4시부터 하면 5시반 국기수까지 노트 이미지 연동 고민가능?한가 접을까

[Aiden-Kwak]

1023 0845pm
일기 디테일 파일 만들어 연결 완료함
데이터 연결해서 html 구조 다 짜면 일기카드, 일기디테일 css 작업 시작할 것.
작성자 정보 가져올 구상필요 서버처리말고 프론트에서 역으로 데이터를 전송받는 방법도 괜찮을것같음. 깊게 생각은 안해봄 대가리 돌아갈때 생각해볼것

[Aiden-Kwak]

1023 1153pm
노트내부 일기개수를 받으려 manytomany 관계를 지정해 시리얼라이저에서 받으려 했다. 에러난다.
프론트에서 받으려니 undefined 가 선반영되어서 작동실패한다. (optional chaining 연산 활용하면 될거같기도한데? )
detail css 새로 생성한건 넣어두었다.

[Aiden-Kwak]

1024 1247pm
일기디테일 html skeleton 작성됨. 데이터를 Diary component에서 Link state로 props 통째로 전달받을 것.
=> 전달완료, css작업할것, 일기작성시 이미지 작업, 이미지 미리보기 작업 필요

[Aiden-Kwak]

1024 0453pm
일기카드를 구현중이다. 작성자 정보를 불러오기 위해 axios detail/:id 를 보내는데 id를 못받는다.
diaryserializer가 writer를 id가 아니라 이메일로 받아오고 있다 왜 이럴까
=> use_natural_foreign_keys=True 이용해보려한다 serializer로 foriegn key 관계의 원하는 값들을 가져올수 있는지 테스트
=> 저건 모르겠고 @Property로 그냥writer_pk따로 만들어주고 시리얼라이저에 박았다

[Aiden-Kwak]

1024 1159pm
일기장에 이미지 넣고 피그마디자인으로 빠르게 작성하자. 이미지입력공간 만들기

[Aiden-Kwak]

1025 0738pm
이미지 전송에 대하여.
정석은 form-data 형식으로 프론트에서 전송하고 백에서 request.POST 형식과 request.FILES형식으로 따로 받아 처리해야하는 것 같다.
귀찮다. base64로 컨버트하여 스트링으로 전송하고 서버에서 이미지로 다시 컨버트해서 저장해보려한다

[Aiden-Kwak]

시리얼라이저
image = Base64ImageField(
max_length=None, use_url=True,
)
뷰
image = base64.b64decode(str(request.data['image']))

    if serializer.is_valid():
        post = Diary.objects.create(
            writer=user,
            title=request.data['title'],
            content=request.data['content'],
            note=note,
            image=image,
            to_open=request.data['to_open']
        )
        return Response(serializer.data, status=status.HTTP_201_CREATED)
    return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)

에러
AttributeError: 'bytes' object has no attribute '_committed'

[Aiden-Kwak]

모르겠다. 우선 제끼고 이미지 다 들어간다고 가정하고 노트 디자인을 해야겠다

[Aiden-Kwak]

1026 0443pm
그리드로 설정해놓았던 일기장 리스트를 랜딩페이지에서는 flex로 바꾸려한다. 모든 css를 내가 부모까지 전부 관계형으로 표시했으니 관계를 랜딩페이지 부모부터 넣으면 새로 인식될거다.
노트 리렌더링 안되는 문제는 RTK추가하면 해결될거라 생각한다.
다되면 팔로잉기능 프론트 구성을 해야한다.

[Aiden-Kwak]