• 05월 19일 노동의 흔적.

1. 트레일러 페이지 API
2. profile_imge 필드 수정
3. MovieReview API

• CRUD, 좋아요

4. 영화 추천 API

• 최근 개봉 영화 (1달이내 개봉, 인기도)
• 요즘 제일 관심 받는 영화 (댓글, 좋아요)
• 계절 추천 영화

[Front: 초기세팅완료] 1. 디자인 시스템을 CSS로 구현 2. API URL 3. View Componen | 드디어 백엔드에서 탈출한다.. 내일부터 Vue할 생각에 신이 나지만 걱정이 앞서는 것은 사실이다. 아직 Vue를 프로젝트에서 활용할 만큼 숙련도가 높지 않다고 생각하기 때문에 내가 상상해왔던 웹사이트 로직으로 구현을 할 수 있을지 모르겠다.

그리고, URL 순서.. 확인하자…꼭… 특히나 <str>을 쓸 때….😥

와이어프레임을 만들 때까지만 해도 그정도 웹사이트는 구현을 할 수 있을 거라 생각했는데,,, 아몰라~! 🙄 | [Back]

1. DJango ORM은 신이다. 링크 __ : 역참조 모델의 필드에 접근할 수 있다. ~Q : not Q order_by(?) : 랜덤으로 정렬한다. 추천 및 정렬 기능을 구현하면서 annotate와 filter를 적극 활용하게 되었고 자연스럽게 Django ORM 문법에 대해 배울 수 있었다.

2. dj_rest_auth로 커스텀 회원가입을 구현 참고자료 커스텀 회원가입 때문에 회원가입이 되지 않는 오류가 있었는데 스터디원들의 도움을 받아 바로 해결할 수 있었다. | | 🕊둘기 | [Back]

3. ****영화 데이터 구축 로직 수정

4. 영화 검색 API 보강

5. 게시판 검색 API 추가

6. 영화 추천 API 추가 | 백엔드를 마무리 지었다. 강의로만 듣던 내용을 시행착오를 격어보면서 진행 해보니까 교수님이 강조했던 중요하다 했던 부분들에 대해서 몸으로 체감 할 수 있었다. 특히 검색 로직과 추천 로직을 구현해 보면서 ORM의 위대함과 쿼리스트링 URL의 유용성에 대하여 깨달았다. ORM은 신이야!🙊👍 | [Back]

7. 기존에 깡으로 json을 구현하는 방식은 데이터 형식도 안 맞을 수도 있고, 중간에 오류가 나면 처음부터 다시 받아야 되는 문제점 때문에 장고에서 데이터에 바로 저장 하는 방식으로 수정 했다.

직접 데이터에 저장하기 때문에 함수를 실행하는 서순을 잘 맞춰야 된다.

2. Django ORM __ : 역참조 모델의 필드에 접근할 수 있다. q |= Q() |= 과 &= 은 파이썬의 += 과 같이 사용 가능하다

3. 쿼리스트링 URL **path 방식에 비해 더 많은 정보를 받는게 가능 query = request.GET.get('query') |

**[Front]

1. navbar component 생성**

• navbar에 연결되는 url을 라우터로 연결
• 로그인 유저의 navbar의 경우 프로필 이미지가 보인다.
• 비로그인 유저의 navBar는 회원가입, 로그인 버튼이 보인다.

2. account 관련 기능 구현

• 회원가입과 로그인
• 회원 가입, 로그인 시 유저의 프로필 정보를 localStorage에 저장한다.
• 회원가입, 로그인 진행 도중 오류가 발생했을 시 모달 알림을 보낸다. | 생각보다 힘들었던 프론트.. 내가 원하는 것처럼 디자인이 되지 않아서 아쉬웠지만, 하나하나씩 완성하는 재미가 있다.

Vue에 미숙하다보니 작업하는데 시간이 오래걸렸다. 그래서 능률이 안 좋았다. 목표했던 것을 다 진행하지 못해서 아쉬웠지만, 내일을 위해 그만하는 걸로! 벌써 새벽 6시다 🥺 | [Front] 1. 로그인, 회원가입 로직

• 로그인: 유저가 기입한 정보를 토큰을 담아서 api를 보낸다. ⇒ 올바른 응답이 오면 발근된 토큰을 로컬에 저장한 뒤, 토큰을 이용하여 유저 데이터를 저장한다.

• 회원가입: 유저가 기입한 정보를 담아서 api를 보낸다. ⇒ 올바른 응답이 오면 서버에 데이터를 저장하고 토큰을 생성하여 발급한다.⇒ 토큰을 localStorage에 저장한 뒤 이를 활용하여 유저데이터를 추가로 저장한다.

2. 오류가 발생한 원인을 데이터에서 뽑아내서 원인을 알려주는 알림을 보낸다. 알림 메시지를 도출하기 위해 error.request.response를 객체로 변환한뒤 객체의 값을 배열로 저장했다. sweetalert2를 이용하여 오류결과를 유저에게 알려주었다. | | 🕊둘기 | [Front + Back]

1. Front Back API 링크 연결 작업

[Front]

1. ****card component
2. card list component | | |

1. 유저 profile modal 완성**

2. account관련 기능 구현

• 로그아웃
• 유저 정보 수정
• 유저 프로필 이미지 저장

3. 유저 profile 페이지 구현 | 아 힘들다. | 1. form data를 활용하여 이미지 데이터를 서버에 저장한다.

2. 유저 정보 수정 시, 기존 데이터를 form에 반영하기 위해 vuex에 있는 데이터를 미리 data에 저장해준다. | | 🕊둘기 | [Front]
3. ****card component
4. card list component
5. search component 제작 | | |

1. 유저 프로필 이미지를 수정 모달에서 등록한 이미지가 보여주기 위해 모델, 시리얼라이즈 추가

2. 회원 탈퇴 기능 구현**

3. 유저 profile image 컴포넌트 수정 - 재사용성 높이기

• 너비, 높이, 이미지 링크를 props로 보내서 사용한다.

4**. MovieDetail 페이지 구현**

• 영화 상세 정보 제공 | 기분이 좋다 ㅎㅎ 프로필 이미지 너무 이쁘다 ㅎㅎ 진짜루~~~

근데 내다 버린 효율… 이미지를 유저 프로필 수정에 추가할 때마다 서버에 이미지가 저장된다. 서버에 있는 이미지를 삭제하려면 코드를 수정해야 하는데 나중에 … 🥺 | 비동기적으로 받는 데이터를 활용하여 페이지를 구성하면 랜더될 때 오류가 발생한다. 이에 대한 처리가 필요하다. ⇒ ? 를 사용하자!

관련해서 내일 추가 학습할 내용 | | 🕊둘기 | [Front]

1. 게시글 리스트 제작
2. 게시글 상세정보 제작 | 게시판을 이쁘게 만들었다. 기분이 좋다. | 장고에서 얻은 date time을 뷰에서 new Date(장고 date time)로 뷰에 맞는 형식으로 바꿔줄 수 잇다 |

1. 영화 상세 페이지 구현**

• 영화 상세 정보 제공
• 영화 좋아요
• 영화 한줄 평 작성
• 영화 한줄 평 수정
• 영화 한줄 평 좋아요
• 스포일러 댓글 기능
• 로그인 안한 유저에게 한줄평 페이지를 흐릿하게 보염줌으로서 회원가입 유도 | 플렉스의 플렉스의 플렉스의 플렉스의 플렉스의……….내 코드가 너무 더럽다…

CSS를 깔끔하게 적용하고 싶은데, 참 어려운 것 같다. 또한 api요청을 효율적이게 코드를 구현하는 지 스스로에 대한 의문이 든다. 매번 웹페이지에서 어떤 활동이 이루어질 때마다, 데이터의 변화를 페이지에 반영한다. 어떻게 코딩을 해야 클-린하게 만들 수 있는가.

지금 상태로는 어제의 내 코드가 내 적이다. 어제의 나 뭐한거야! | CSS 짤팁 (블러 처리, 행 수 제한 등)

| | 🕊둘기 | [Front]

1. 게시글 페이지 완성!!!!

• 댓글 작성
• 댓글 수정
• 댓글 삭제 | 기능보다 css에 집중을 해서 기능 구현이 늦어지고 있다. 하지만 댓글이 예쁘게 잘 만들어져서 만족스럽다. | vue 모달의 작동 원리를 이해 했고 flex 사용법이 익숙해졌다. 댓글 작성이 바로바로 반영되기 위해서는 created 때 정보를 저장하는 state와 post 했을 때 정보를 저장하는 state를 같은 곳으로 지정해야 된다. |

1. 영화 상세 페이지** 영화 한줄 평 필터와 페이지네이션

2. 유저 프로필 페이지

• 찜한 영화
• 작성한 게시글
• 리뷰작성 | 이제 프로젝트 막바지이다. 트레일러와 조금 남은 일들만 처리하면 끝!!!

만약, 시간 여유가 있다면 더 하고 싶은 기능들이 있긴 하다. 하지만, 그럴 일은 없겠지…😚

1. 욕설 필터링
2. 유저프로필 정보 노출 선택
3. 로그인 조건 구체화하기 | 1. 페이지네이션 vue로 페이지네이션을 구현하기
4. 데이터를 나눈다.
5. 보여줄 범위를 정한다.
6. 보여주는 범위가 변하는 요소를 만든다. (페이지네이션 이동 버튼 )

2. 동적 컴포넌트 동적 컴포넌트에 대해 배웠다. 동적 컴포넌트를 이동하여 추가 라우터 구성 없이도 하위 컴포넌트를 동적으로 변경시킬 수 있다.

3. ref | | 🕊둘기 | [Front]

1. 게시글 페이지 완성!!!!!

• 상세 정보 완성
• 글 작성 완성!!!

2. 게시글 검색, 필터 완성! | 프로젝트의 기능 구현이 거의 끝나간다. 메인 페이지와 상단 검색 바를 완성 하는 것만 남았다.

시간이 남는다면 라우터 설정을 손보고 싶다. | 1. 게시 글 검색과 필터를 따로 만들어 놓으니까 검색과 필터링이 둘 중 나중에 적용한 속성이 적용된다는 사실을 알게 되어서 백엔드 단에서 params로 검색 여부와 게시판의 타입을 설정할 수 있게 로직을 다시 짰다. 필터와 검색의 상관 관계에 대하여 배웠다. 2. 토스트 ui를 사용하는 법에 대하여 배웠다. |

1. 영화 상세 페이지 -** 비슷한 영화

2. 유저 프로필 페이지

• 내가 작성한 댓글
• 프로필 페이지 제한 (한줄 평은 본인만 볼 수 있다. )
• 내용이 비었을 때 처리

**3. 오류 알럿 추가

4. 트레일러 페이지 -** 무한스크롤 | 😪,,.,,,,(기절) | ****무한스크롤을 직접 구현할 수 있다.

| | 🕊둘기 | [Front] 1.검색창 개선 2.메인페이지 완성 | 메인페이지를 다 만들고 지쳐서 검색창 개선을 못했다. 대신 다른곳에 필을 받아서 카톡 공유 기능과 스크롤 프로그래스바 그리고 게시판 새로고침을 개선하였다 | 카톡 공유 API 사용법을 배웠다. |