20230126목-최종14, 프론트 본격

이렇게 대놓고 늦잠을 잔 건 또 처음이다. 데일리 스크럼도 무단결석. 미안해서라도 나중에 내가 밥을 한번 쏴야겠다. 
어제 저녁부터 머리가 계속 이상한 게 일찍 자야겠다고 생각해서 평소보다 이르게 잠자리에 들었는데도 늦잠을 자버린 것이다. 5시간 짜리 강의를 틀어놓고 자서 혹시 수면에 방해를 받은 건가? 뭐가 됐든, 이런 상태가 지속되는 것은 절대 용납 못한다. 잘 때는 확실하게 자야 한다. 그만큼 에너지를 회복해야 하니까.

데이터 형식 정의

이렇게 들어오면 그림을 그릴 때 확실히 수월할 것 같다. 유저 사이드 정보와 정답은 유저마다 고정될 것이고, 나머지는 실험에 따라 유동적으로 들어올 텐데 들어왔을 때 결국은 이런식으로 전부 합친 형식으로 사용하게 되지 않을까 한다.
이렇게 큰 틀이 있으면 이제 특정 유저 리스트를 여 기준에 맞춰서 선택하면 된다. 아예 유저 id로 선택하는 것 역시 유효하다.
그러고보니 각 유저에 대한 정성, 정량지표 값도 가지고 있어야 좋을 것 같기도.

간단하게는 이런 식으로 보일 수 있다는 것이다.

지표들까지 전부 포함시켰다.

아이템은 이정도로 충분하지 않을까?

아이템 프로필을 넣을 때 내가 의도하는 아이템에 해당 프로필이 잘 매칭되었는지도 혹시 몰라 확인해봤다.

저장하는 건 이렇게. 피클로 저장할까 하다가 그래도 보기에 더 깔끔하다 생각해서 이렇게 했다. 어차피 나중에는 서버에서 어떤 형식으로 들어오는지 다시 보고 이 형식으로 만드는 과정이 필요할 것으로 생각된다.

본격적으로 아이디어 구현해보기

얼추 준비는 끝난 것 같으니, 직접 웹페이지에 그래프를 띄워가면서 어떻게 상호작용을 하고 그러부터 데이터를 뽑아낼 수 있는지 알아내보자.

어제의 예시에서 스타일시트를 없애고 내 데이터를 넣어서 잠시 시각화해봤는데, 생각보다 페이지가 많이 안 예쁘다;;

위처럼 스타일을 써넣어주면 그때부터 창이 구분이 되고 스크롤이 가능해진다. 어제 듣기로는 저게 바로 css 문법이라던데, 확실히 팀 내에서 css 문법을 아는 사람이 필요할 것으로 보인다.

외부 스타일시트를 적용해야만 이렇게 형식이 바뀌는구나.

안 속에 몇 묶음을 지워봤는데,  틀은 이 모양으로 고정이 돼버린 듯하다.

그러고보니 각 값에 className이라는 것이 있던데 그것과 연관이 있는 것일까? 현재 페이지에 적용된 css 스타일시트가 uri로 되어있길래 바로 들어가봐서 찾은 부분이다.

two columns로 했더니 더 좁아졌다. 이것으로 영향이 가는 것은 아무래도 확실한 것 같다. 아마 화면의 가로를 12등분하는 듯?

한 놈은 10 컬럼, 다른 놈은 12 컬럼으로 두었다. 가로(12 컬럼이 100퍼센트)를 초과하는 정도로 한 가로를 채울 수는 없도록 되어있다.

클릭했을 때 plotly의 그래프가 내가 주는 데이터. 기본적으로는 dict이고, points 안속은 리스트로 묶여있는데 또 그 속에 dict가 있다. 리스트로 되어있는 것은 클릭으로 인해 그래프 상의 특정 범위가 클릭되는 케이스일 때를 감안하여 만들어져 있는 모양. selection 쪽을 살펴보니 그게 맞는 것 같다.

간단하게 이렇게 하면 내가 클릭했을 때 클릭한 데이터들을 볼 수 있다는 것이다. 아마 인덱스가 반환되고 있는 것이겠지? 내 경우에는 item_id가 인덱스이니까 여기에서 받은 데이터로 바로 보일 수 있는 게 있을 것이다.

피어세션

dcc.store
like session_state - 이걸로 페이지 넘길 때 데이터를 넘기고 받을 수가 있다. 
아마 페이지를 남겨놓는 방식도 이것으로 가능할 것이다.

현재 데이터 받는 방식

파일 전송할 때는 딕트 타입으로. 그래프 그릴 때는 알아서 그냥 시리즈로 바꾸던가 하라.

현재 페이지 구성방식 설명

지표계산은 라이브러리에서. 매트릭스도 알아서 필요하게 된다. 
어차피 라랭킹은 서버에서 한다면 결국 필요한 행렬들을 가지고 있기는 해야 한다. 

데이터를 다른 페이지에 넘기기

어제까지 배운 내용을 토대로 plotly와의 상호작용을 통해 데이터를 빼는 것을 해보았고, 이제는 그것을 토대로 바로 다른 페이지로 넘어가는 것을 구현해보고 싶다. 수헌이 형의 말로 바로 그냥 다음 튜토리얼 페이지 공부하면 된다기에 봤는데 확실히 관련한 이야기가 나오는 듯하다. 페이지에서 데이터를 어떻게 다뤄야 하는지에 대한 부분에 치중하는 것 같지만, 따지자면 나는 그것의 응용을 하고 있는 것이니까.

dcc.Store에서 나오는 예시. 각 명칭이 정확하게 뭐라고 나는 말하기가 힘들다. 다만 메모리는 페이지를 새로고침하면 사라진다. 세션은 페이지를 끄면 사라지고, 로컬은 컴퓨터를 끄면 사라지는 듯(컴퓨터를 끄지는 않았기에 정말로 꺼야지만 사라지는지는 모르겠다).

f12를 켜보니 브라우저에 로컬과 세션에 대해서 값이 저장되고 있는 것이 보인다. 키와 값으로 구분되는데, 여기에 원하는 값을 저장하여 페이지마다 옮겨다닐 수 있다는 뜻이렷다.
스토리지 제한은 대충 2메가 정도가 안전하고 데스크톱 최적화 환경에서는 10메가 정도까지도 가능하다고 한다. 데이터프레임 통째로 옮겨다니는 것은 무리가 있다. 어차피 그렇게까지는 생각하지 않았기에 상관은 없다고 생각한다.

인자는 이렇게 있다고 한다.

무슨 에러인걸까?

어느 정도는 방식에 대한 이해가 됐다고 생각하고 이제 실제 우리의 페이지에서 실험을 해보고 싶었다. 근데 계속 이 에러가 뜬다. 이건 dash로 넘어오기 이전 streamlit에서도 계속 발생하던 이슈였는데, 그때는 그냥 뭔가 아직 깃헙에 빼먹고 올라간 무언가 있겠거니 하고 넘어갔다. 그러나 지금도 이런 문제가 생기고 있는 것은 확실히 이야기가 다르다. 장차 테스트를 해나가려면 어떻게든 들어갈 수 있어야 한다.

문제는 이곳에서 발생한다. 겟 요청을 날리는 부분이 문제라는 건데, 결국 여기에서 connectionrefused 문제가 터지고 있는 모양. 111 에러가 뭔가 했는데 잘은 이해는 못했지만 계속 소켓 에러라는 말이 나왔다.

어떻게 해결하라는 건지 잘 모르겠다. 일단 포트를 갈아끼우기도 해봤는데, 소용이 없었다.

정상적으로 dash가 실행될 때, 저렇게 해당 포트가 갑자기 추가가 된다. 이번에 추가된 포트는 10450인데 여태까지는 이렇게 잘만 연결이 되었단 말이지.

처음 서버를 돌릴 때에 포트 수정이 필요한가 싶어서 해봤더니 이것도 아니고.

문득 드는 생각에 겟 요청을 어디로 날리고 있는 것일까 고민해봤더니 결국 백엔드 서버를 켜놓은 상태에서 되는 게 아닌가 싶었다.

현재 프론트에서는 127.0.0.1:8000에 모든 요청을 날리고 있으니, 백엔드 서버에서 열어두는 포트가 8000이 되어야 한다고 생각했고 이를 고쳤다.

그리고, 드디어 된다. 정말 별 것 아닌 문제였다. 그런데 이것 때문에 제법 시간을 날려먹었네.. 아무렴 해결했으면 됐다. streamlit에서 겪었던 문제 자체도 결국 이것에서 비롯됐으리라. 지금이라도 알아서 다행이다.

고민 많이 했다. 

오늘부터 나도 프론트 개발자?

여기를 바꾸면

여기가 바뀐다. 오케이. 이제 본격적으로 내가 구상했던 페이지를 만들 차례이다. plotly 그림을 그려내는 것은 상준이가 하고 있으니 나는 해당 그림들이 들어올 수 있도록 페이지를 구성해두면 될 것 같다. 상호작용 요소를 고려할 수 있게 나도 어떻게 들어올지는 알아둬야 한다. 

쭈압. 원하는 페이지를 만들었다. 이제 이 속을 채워나가야만 한다.

쭈압. 뭔가 나오고 있다. 아까 실컷 실험해본 것들을 이제 여기에서 적용시켜보면 되겠다. 근데 페이지 뜨는 속도가 매우 느린데 이거 뭔가 문제 있는 것일까? 심지어 계속 페이지 로딩이 되고 있는 것처럼 아이콘이 돌아가고 있다. 왜 이렇게 되는 것일까? 
아직 이유는 잘 모르겠다. 그런데 무심코 두번 새로고침을 했더니 속도가 빠르게 잘 작동했다.

현재까지 만든 정도. 지금은 아직 틀을 만들고 있는 단계이다.  지금 당장 내가 해보고 싶은 것은 사이드바의 아이템 사이드 인포를 정해서 메인에 그래프를 바뀌게 만드는 것이다. 그러한 코드 동작이 구현되면 나머지는 상준이가 만든 코드들을 넣기만 하면 될 것이다. 

그 후에 그래프 상호작용을 본격적으로 만진다. 현재 구성 상에서는 페이지가 3개가 나오게 되는데, 이것에 대해서는 조금 이야기해볼 필요가 있겠다.

회고 및 다짐

내 마음 상태가 요즘 바뀌었음을 느낀다. 인간 관계에서 얻던 기쁨이 또 말소됐다. 요컨대 새로운 사람을 만나는 게 귀찮은 상태가 되어버린 것이다. 새로고침 데이 전후로 내 마음이 달라졌음을 어렴풋이 느낀다. 나는 내 스스로가 상처받지 않았다고 생각하지만, 또 어느 정도는 뭔가 바뀌어버린 것이다. 누군가와 친해져보려는, 최대한 밝게 있으려는 노력이 당장 부질없게 느껴지니 과연, 큰 일은 큰 일이다. 
아무렴 어떠랴. 또 어쩌다 마음은 변하는 것이다. 최소한 이번에는 열심히 살아보겠다는 마음을 저버리지 않았으니 그걸로 되었다. 최소한 이 마음가짐이 흔들리지는 말자고. 

이전에도 느꼈던 것이지만, 번아웃이 열심히 살기 싫다는 생각이 들어서 오는 것은 아니기는 하다. 어느 순간 망가져있었을 뿐이다. 그뒤에는 더 철저히 망가져야겠다는 마음이 들었던 건 두번째 문제라 치고 넘어가자.
지금의 나는 번아웃이 온 것일까? 음. 아닌 것 같다. 사실 회고를 쓰지 않는다면 와버렸을지도 모르겠다. 회고를 쓰려다보니 계속 나를 돌아보게 되고, 경각심이 든다. 지금은 그 덕에 조금 버티고 있는 것 같다는 느낌을 받는다. '왜 하필 나에게..'라는 생각이 들 때 내 마음은 침잠하기 시작한다. 이때는 내 통제에 놓이지 않은 현상을 절실히 자각하고 이미 무력감이 작용하고 있는 상황이라, 사실 마음을 혼자 다 잡는 것만으로는 조금 버거운 상태인 것 같다. 그래도 회고를 쓰려다보니 그날 그날 그냥 이렇게 무너지면 안 된다는 마음이 번뜩 드는 것이다. 
짜증난다. 왜 하필 지금인가? 음. 부정적이 마음이 나를 좀먹는 것 같다. 그것에 영향을 받는 게 느껴지는 게 정말 짜증난다. 

에휴. 일이 손에 잡히지 않는 상태가 아니란 것을 다행으로 여기자고. 해나가다 보면 또 바뀌어갈 거다. 지금은 해야 할 일이 있으니, 이 일을 끝마치는데 집중하자.