November 9, 2022
컴포넌트 리스트 그리는 방법 # 아래와 같은 데이터와
(def book-list {:section "Today" :list [{:id "0" :name "book1" :author "doong" :description "rorlame edalkwdqd qwlmdkwmd ql"} {:id "1" :name "book2" :author "ojo" :description "heleld qwdmlkqwd awlkda wk"}]} {:section "Weekly" :list [{:id "4" :name "book5" :author "asdw" :description "asdawd"} {:id "6" :name "book7" :author "qw w w" :description "wqlwd qwldkm qwlkdasd asd"}]}) 아래와 같은 컴포넌트가 있을 때
(defc book-card [{:keys [name author description]}] (render (<< [:a {:class (css :relative :block :h-96)} [:span {:class (css :absolute :inset-0 :border-2 :border-dashed :border-black)}] [:div {:class (css :relative :flex :h-full :items-end :border-2 :border-black :bg-white :transition-transform [:hover {:transform "translate(-0.
...
November 7, 2022
익숙해지는 중 # shadow-css에는 tailwind 방식의 별칭을 사용해 스타일링 할 수 있다. 다른 점은, tailwind가 별칭마다 클래스를 부여하고 그 클래스들은 다 이미 정의되어 있는데 반해, shadow-css는 styled-component처럼 컴포넌트마다 하나의 클래스를 배정한다. tailwind는 프로덕션 빌드 때 사용되지 않는 클래스들을 날린(purge)한 css파일을 얻을 수 있다. shadow-css는 개발 중 저장할 때마다 수정된 부분이 있으면 css를 새로 만들어 준다.
빠르게 개발하고 싶어서 클로저를 선택했지만 빨라지기까지 엄청 오랜 시간이 걸릴 것 같다. 개발 속도가 빠르다는 것은 개발 중 고려해야할 세부적인 부분들을 다 알고 있기 때문이고 클로저를 해보며 느끼는 점은 그 세부적인 부분들을 알아야 다음으로 넘어갈 수 있다는 것이다.
...
November 1, 2022
다시 shadow-grove로 # 레퍼런스가 없어서 힘들었었는데 다시 해보니 뭔가 알 것 같다. shadow-cljs를 개발한 thheller가 만들고 있는 cljs 프레임워크인데 하나 하나 설명을 읽어가면서 개척해나가는 재미가 나름 있다. 당연하게 여겼던 hot-reload도 여기서는 직접 구현해야 했다. 다행히 thheller 이 분이 Hot Reload in ClojureScript 라는 아티클을 남겨두셔서 조금 이해할 수 있었다. 나중에 꼭 번역을 해둬야겠다.
Css 관련 배운 것 # css는 가능한 static하게 서빙하는 게 좋다고 한다. 동적으로 런타임에 css를 빌드하게 되면 그만큼 사용자에게 그 비용을 전가하게 된다.
...
October 26, 2022
결과 # css 라이브러리로 garden -> herb -> tachyon 을 사용하기로 정했다. 레퍼런스 삼을만한 사이트들을 찾아봐야겠다.
잡담 # 이맥스와 리습은 좋은 짝꿍이 맞는 것 같다. 어제 라이브 코딩으로 연주하는 영상들을 봤는데 내가 정말 하고 싶은 건 이런 쪽인 것 같다. 열심히 웹 개발 하다가 하루 정도는 supercollider, overtone, shadertone 이런 애들 써봐야겠다. 신기했던 게 supercollider를 common-lisp으로 작성할 수 있게 해주는 라이브러리를 한국 분이 작성하셨던데 엄청 멋있었다. https://www.youtube.com/watch?v=xzTH_ZqaFKI&t=682s
October 25, 2022
목표 # 타 연재 플랫폼 웹 클라이언트에서 서버 데이터 어떤 형식으로 가져오는지 확인할 것 그 형식에 맞춰 API 변경하기 lispy 사용해서 repl 연결하기, repl 활용하는 방법들 익숙해지기 garden으로 css 적용하기 i18n 한국어 영어까지 하기, 접속자 ip 위치에 따라 다른 언어 제공하기 과정 # 후기 # 이 날은 기록을 안했다. 반성. 하루 목표를 투두 리스트로 작성한 것은 잘했다. 다시 시도해보자.
October 24, 2022
목표 # 연재 플랫폼 기능 정의하기 realworld앱 분석해서 불필요한 부분 제거하기 과정 # 소설 연재 플랫폼 개발 일지 001에서 찾은 리얼월드 앱 서버, 클라이언트가 서로 호환되는 것을 확인하고 로컬에서 돌려보았다. 너무 잘 된다. 다만 polylith와 edn 파일로 클로저 프로젝트를 어떻게 시작하고 repl 연결을 이맥스에서 어떻게 하는건지 잘 모르겠어서 좀 헤멨다. CIDER만으로 하면 잘 되는데 lispy 플러그인으로 연결하니 잘 안된다. e 를 눌렀을 때 jack-in이 아니라 connect로 연결하는 방법은 없을까
...
October 23, 2022
목표 # shadow-cljs, shadow-grove 사용해서 dummy data 메인 페이지 띄우기. 과정 # shadow-grove는 어떻게 써야하는지 이해가 안된다. 예제 앱에서 모델을 참고하고 있는데 그 모델이 어디에 정의되어 있는지 찾을 수가 없었다. realworld 앱 예제들 중에서 re-frame을 사용한 프로젝트를 발견했다. 서버 또한 클로저로 작성된 것을 찾을 수 있었다. re-frame이 SPA 프레임워크라 둘이 같이 쓰일 수 있을지는 모르겠지만 좋은 레퍼런스를 찾아 기분이 좋다.
결론 # rum을 사용해보고 싶었지만 자유도는 아직 독인 것 같다.
...