나만의 무기 : HIGHLIGHTING/개발 일지

Day 32 (3) : 스프라이트 이미지 서버 배포

정글러 2022. 3. 7. 11:41

https://uneducatedjungler.tistory.com/181

 

Day 30 (2) : 컷 썸네일용 스프라이트 이미지 생성 로직

일렉트론으로 한참 삽질을 반복하던 중 뭔가 만들어달라는 요청이 왔다 지난 발표 시연에서는 구현하지 못해 그냥 유튜브 로고가 있는 이미지로 대체했던 부분인데, 북마크한 컷 각각에 어떤

uneducatedjungler.tistory.com

며칠전 이런걸 만들었는데,

 

이 로직으로 만든 이미지파일 하나를 샘플로 써서

프론트에서 스프라이트 이미지의 픽셀을 잘 포인팅해서 필요한 부분만 갖다쓰는 로직을 완성했다

 

실제 클라이언트에서는 서버에서 정적 파일 형태로 오픈해두면 읽어다가 쓴다고 한다

그래서 이제 분석 요청이 올때마다 서버의 static 경로에 이미지파일을 올려주는걸 구현할 차례

 

우리 서버는 flask

이미지를 정적 경로에 갖다두는건 정글 입학과제에서도 해본 쉬운 일

 

이어야 하는데...?

 

PIL의 아웃풋 이미지가 static 폴더에 쌓이도록 분명 로직을 짰고,

분석요청이 오는 순간 실행돼서 파일이 폴더에 잘 담기는것도 확인했는데

브라우저에서 읽질 못한다

 

리액트는 뭔가 다른가 싶어서 또다시 검색찬스

요며칠은 계속 검색만 하는것같다...

 

flask 기초예제에서도 발생할법한 에러다보니 검색결과는 정말 많았는데,

해결방법도 다 당연한 것들이라 도움이 안됨...

 

그래서 한참을 고민하다보니

static 경로가 /static폴더가 아니네...

백이랑 프론트 레포지토리를 분리하기 전의 흔적이 이런데에 남아있었다

 

아무튼 /static으로 바꿔주니 잘 읽힌다

 

프론트가 받아서 쓰는걸 보니 진짜 멋짐

내 로컬 프론트 레포지토리가 electron용으로 개조돼서 merge는 못했는데,

대충 이런 미니컷이 우리 데이터 차트 위에서 보인다ㄷㄷ

북마킹한 각각의 컷도 해당 장면의 썸네일을 보여줌

 

딱 한번 App이 props로 받아오고 그걸 자식에게 배포하는 구조라,

서버에 있는 파일이지만 딜레이도 없이 부드럽게 넘어간다

유튜브랑 진짜 똑같음

 

UI 퀄리티 떡상 굿