Mon Groy 2024. 8. 19. 22:42

6시간쯤 자고 일어나니 두통이 생겼다

뭔가 갑자기 오래자니까 생긴 것 같다

 

도커 강의를 좀 듣다가 프론트를 마저 하기로 했다

아무래도 발표할 때 보여질 곳인지라 건들지 않을 수가 없었다


구독한 그룹 모아보는 곳의 이미지 띄우기를 다시 도전해 보았다

타입도 변경해 보고, 기본 배경 이미지 설정도 만져보고

다른 페이지에 있는 그룹이미지는 어떻게 가지고 왔는지 보기도 하고

이미지 띄우는 방법을 검색해 보기도 했는데

검색한 건 최고로 도움이 되지 않았다

무슨 전부 다 public에 넣어서 화면에 띄우는 것들 뿐이었다

아니면 게시글에 이미지 올리는 법 같은 것들 뿐이었다

api 두 개를 통과시켜서 받은 url을 이미지로 띄우는 게 아니었다

 

구독 리스트에서 가져오기 때문에 그룹도 리스트로 가지고 온다

그걸 받아서 요소를 하나씩 다음 api 에 대입하며 사진을 가지고 오도록 되어 있다

그 과정에서 사용되는 data 라는 용어의 의미를 정확히 모르겠지만,

api 를 호출하고 받은 응답값을 담은 것의 데이터를 꺼낼 때 쓴다는 것은 알겠다

그런데 그 자체의 데이터를 받을 때 data 라고 하는 건지

다음 세분화된 데이터를 받기 위해서 data를 사용하는 건지 잘 모르겠다

 

에쨌든 data를 삭제해봐도 먹히지 않아서

고칠 수 없을 것 같아서 팀원에게 도움을 요청하기로 했다

 

일단 쪽지를 보내놓고 기다리면서 다른 곳을 손보기로 했다


https://fontawesome.com/

 

Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fontawesome.com

이곳에서 여러 아이콘을 골라서 각 버튼에 적용했다


다음으로

프로필 편집 아이콘인게 티가 나지 않아서 헤맸다는 설문 결과가 있어서 그 부분을 수정하기로 했다

그래서 기존 아이콘을 프로필 편집 버튼으로 바꿨다

그리고 프로필 편집을 닉네임, 이메일, 비밀번호 변경 세 가지로 각각 나누기로 했다

모두 한 편집페이지에서 진행되도록 했는데, 뭔가 메서드가 복잡해져만 갔다

그래서 분할하기로 마음 먹고 여태 편집한 것을 되돌렸다

프로필 편집 버튼을 눌렀을 때, 현재 비밀번호를 검증하는 절차를 만들었다

따라서 백엔드에도 검증절차를 위한 api 를 생성했다


그렇게 회원정보 수정 절차를 만들던 중

혹시나 zep에 들어가 봤더니 도움을 요청했던 팀원이 이미 일찍이 답장을 준 상태였다

아직 접속중이셔서 마저 도움을 받게 되었다

 

console메서드를 이용하여 데이터의 상태를 확인하더니 data를 한 번 더 써보라고 하였다

그렇게 하고나자 제대로 사진이 띄워졌다!

덕분에 간단히 해결하고 나서 회원정보 수정을 다시 손보게 되었다


프로필 편집 버튼을 누르면 일단 비밀번호 검증을 한다

그 검증이 통과되면 닉네임, 이메일, 비밀번호 변경이 가능한 것

 

그리고 프로필 편집 버튼을 누른 후 편집모드가 되면

그 편집 버튼은 취소 버튼이 되도록 만들었다

 

api가 적용되는지 확인해야 하는데 이미 돌아가고 있는 백은 머지가 끝난 것이었다

그래서 내가 현재 수정한 백은 어떻게 확인하나 고민하다가 아까 그 팀원에게 또 도움을 받았다

프론트의 apiClient 에 Basic_Url 을 설정해 두었는데

그 부분만 localhost:8080 으로 변경하면 되는 간단한 것이었다

 

덕분에 메서드가 잘 작동하는 것을 확인했고

정보수정시 alert 창이라던가가 제대로 작동하는지 확인도 마저 끝냈다

 

이제 닉네임, 이메일, 비밀번호 각각을 수정할 수 있게 되었다


마지막까지 도움을 주는 팀원에게 감사하다


그렇게 작업하고 나서 생각해보니

구독한 아티스트 그룹을 모아놓는 곳에서

구독취소나 해당 그룹의 커뮤니티로 바로 이동할 수 있도록 처리해 둔 것과 같이

구독그룹의 소속사에서 올리는 공지사항등도 바로 볼 수 있도록 만들면 편할 것 같다는 생각을 하게 되었다

그래서 또 알맞은 아이콘을 찾아보았고

Bell을 선택해서 배치시켰다

 

그다음엔 마이페이지에 있는 공지사항 리스트를 보는 곳을 손보기로 했다

현재 우리가 만들어둔 공지사항 리스트는 중복으로 불러오는 상황이다

그래서 중복을 업애고 싶었다

 

구독한 그룹의 소속사에서 올라오는 글은 모두 불러오도록 설정이 되어있기 때문에

만약 한 소속사의 A그룹과 B그룹을 구독하는 경우에는

그 소속사의 C라는 공지사항이 두 번 로드되는 상황이다

 

따라서 중복을 없애는 방법을 찾아봤더니

백에서 메서드 사용하는 것과 비슷하게 작성하면 되는 것이었다

따라서 작성을 했다

 

생각해보면 한개만 올라오는데, 그룹이름은 한 군데만 뜰 것이기 때문에

아예 소속사 이름이 뜨도록 설정하는게 낫겠다는 판단을 했다

그렇게 설정을 해 놓고 로드해보니 한결 깔끔해졌다