오늘은 내키지가 않아서 낮에는 뿌요뿌요를 하고 밤에는 코딩을 해따 


젖같은 도커와 씨름하다가 만만한 프론트나 후려팼다


원래 좆커가 더 만만해야하는데 나는 이상하게 반대다 참 묘한일이다


------------------


오늘은 딲히 할걸 정해두지 않았다 대충 코드 잡히는대로 개선하고 리팩토링을 해따


암튼 이것저것 만지고 화면도 보고 그랬는데 먼가 맘에 안드는게 보여따


[데이터를 가져오면서 로딩화면을 보여줌] -> [데이터 전송 완료] -> [가져온 정보로 렌더링(이미지 포함)]


이 동작을 하는 코드였는데, 로딩은 데이터를 가져오는 것에 대한 로딩이기 때문에 이미지가 로드되기 전에 로딩화면이 끝나버린다


결과적으로 이미지의 로딩이 덜 끝난 상태로 뷰가 나타나는 것이다


작은 이미지를 여러장 뿌리는 사이트라 존나게 어색하게 보인다


암튼 이걸 개선하는 코드를 작성해따



컴포넌트를 작성한 다음



콘나 칸지데 불러와서 사용하면 된다


function as child component를 이용하면 이런 비동기 동작을 간단히 표현할 수 이따


어느 포럼에서는 이게 안티 패턴이고 대신 프로퍼티 이름으로 렌더링 로직을 넘기라는데


존나 그게 더 안티패턴 아닌가? 람다 거르고 Apply객체 쓰는 꼬라지랑 다를게 뭐가있는가 


외국땔깜수준 ㅉㅉ







아무튼 간단한 코드지만 가능성을 보아서 친히 추상화를 해주어따


여기서는 이미지를 미리 로드하는 동작을 컴포넌트에 하드코딩 했지만


이미지 로드의 동작을 스트림으로 추상화해서 일반화를 할 수 이따


땔깜들의 영원한 친구 Rx를 사용하면 이를 아주 간단하게 표현할 수 이따




아까와 비슷한 코드지만


로직을 stream 프로퍼티를 통해 파라미터로 넘길 수 이따


이 컴포넌트를 사용해서 Preloader를 재정의 해보자



아까보단 나은것 같다



호출부는 머 달라질게 업따 지금보니까 참 거짓이 반대다 1줄 고치고 커밋 개이득인 부분




이 Stream이라는 컴포넌트는 여러가지로 쓸모가 많을 것 같다


지금은 그냥 로딩을 표현하는데만 사용했지만, 스트림에 웹소켓을 물려서 스트리밍 데이터를 표현하거나, 애니메이션 정보를 넣어서 트랜지션을 표현하는등 스트림으로 해결할 수 있는 문제를 젖절히 컴포넌트로 표현할 수 있게해준다






한줄요약) 스트림을 이용한 추상화를 해보았다


코딩이야기) 야마노스스메 코코나