stein.log

Canvas? 필자는 유튜브에서 Interactive Developer로 활동하시는 김종민님의 작품을 보면서 프론트의 canvas 기능의 존재를 처음 알게되었다. 그리고 프론트의 매력을 느껴 지금까지 프론트개발을 쭉 해오고있는데, 아이러니하게도 정작 canvas는 자주 다룰 일이 없었다. 프론트를 시작한지 1년이 다 되어가는 최근에야 다시 vanilla js를 사용하면서 canvas를 만져보는 중이다. 하지만 언제까지 vanilla에서만 놀것인가. 현재 진행중인 [개인 블로그 제작] 프로젝트를 하는 김에 canvas를 vue에서 편하게 사용하는 틀을 만들기로 했다. 자, 이제 내가 구현한 코드들을 살펴보자. Nuxt.js / Vue2 Composition-api를 사용했다. (🚶‍♀️ 아직 canvas에..

음악 작업(연습)은 계속하고 있는데, 머리속에만 담아두니 휘발되는 것 같아 앞으로 기록을 하려한다. 첫 번째로 게시할 곡은 아따맘마 오프닝인 "잘있어요".(원곡 saraba-kinmokusei) 안녕하세요! 감사해요! 잘 있어요! 다시 만나요! 아따맘마를 많이 보진 못했지만, 오프닝 곡만큼은 어렸을적 부터 좋아했다. 무엇보다 멋지게 번안된 한국어 가사가 그 이유가 아닐까. 일본곡을 듣는게 부담스럽지 않다면 원곡도 한 번 들어보길 권한다! 한국곡은 디지털 풍화가(...) 있기도 하고, 같은 곡의 다른 버전을 들으면 또 다른 재미가 있으니 말이다. 그래서 어떻게 작업했는데? 우선 이번에 작업하면서 목표했던건, 밴드 사운드이지만 synth와 같은 electric 계열 악기를 섞어 보는 것이었다. 내가 직접 다..

https://stein-log.tistory.com/27 Django foreign key를 사용했을 때 역참조(DRF) 결론부터 말하자면 참조하는 모델(ohlcv)과 참조되는 모델(share_announce)가 있을 때, 참조되는 모델.참조하는모델_set으로 접근가능하다. 이때, 참조하는 모델 foreign key 설정시 related_name을 설정해주 stein-log.tistory.com 지난 게시글에서는 1뎁스 역참조 필드를 어떻게 가져오는지 알아보았다. 이번에 만난 문제는 부모 모델을 참조하는 자식 모델을 참조하는 손자 모델을 부모 모델의 serializer에서 참조하는 방법이다. (복잡도 하다...) 아마 이렇게 까지 뎁스가 있는걸 굳이 serializer에서 해야하나 싶지만, 해당 ser..

※ gunicorn을 쓰지 않더라도 적용가능하니, 읽은 후 게시글 하단을 참고 What I want. django 작업을 하다보면 당연히 에러가 생기고, 어떤 변수에 어떤 값이 들어있는지 확인하는 경우가 많다. 현재 필자는 django가 docker container 내부에 있기 때문에 다음과 같은 일련의 과정을 거친다. 1. 해당 컨테이너의 로그를 띄워놓음(또는 docker-compose log) 2. 에러가 발생하는 지점 근처에 "감으로" 변수를 출력하는 print문을 출력 3. 코드를 저장 -> 코드를 실행 -> 코드를 저장(저장을 해야 로그가 다시 뜬다) 4. 변수 확인후 "아 이게 아니구나" 후 다른 변수 출력하는 print 추가 5. 2~5무한반복 꽤나 귀찮고 은근히 시간이 많이 드는 일이다...

vue 관련 라이브러리들을 사용하다보면 변수.sync 로 작성된 코드들을 자주 만난다. 그냥 라이브러리 문법인가 보다 했는데 vue2->vue3 Migration Guide를 확인하는데 첫 번째 breaking change가 다음과 같다. v-model usage on components has been reworked, replacing v-bind.sync v-bind.sync를 v-model이 대신한다고 한다. 내용을 읽어보아도 잘 이해가 되지 않아서 다음 stackoverflow를 참고하였다. What is the difference between v-model and .sync when used on a custom component I don't understand the difference ..

, 사용법 select는 drop down menu가 나오면서 해당 항목을 선택할 수 있는 html tag이다. 이 때, 선택지들은 select tag 내부에 option tag로 작성한다. Volvo Saab Opel Audi 출처(테스트가능) vue를 사용한다면 다음과 같이 작성할 수 있다. ... {{car}} ... ... option에서 선택한 항목이 car라는 변수와 v-model로 동기화되어 변경된다. 그래서 style은 어떻게 변경? 위의 사진에서 볼 수 있듯이, select의 기본 디자인은 완전히 '기본'이다. 시스템에 따라 변경되지만 우리가 원하는건 현재 디자인에 자연스럽게 녹아드는 select이기 때문에 style 변경이 필요하다. ※ 참고 본격적으로 글에 들어가기 전에 vue를 사용..

javascript에는 그래프를 위한 여러가지 라이브러리들이 존재한다. 오늘은 그 중 echarts를 소개한다. Examples - Apache ECharts echarts.apache.org 상당히 많은 양의 그래프가 존재하고, 디자인/애니메이션이 나름 트렌디하다고 생각한다. 물론 마음에 들지 않는 부분들도 있지만, 많은 요소들이 커스텀이 가능하기 때문에 사용성이 좋다. 위 예제들을 참고하자. vue-echart, nuxt-echart를 검색하면 다음과 같은 페이지를 찾을 수 있다. Vue-ECharts Apache ECharts component for Vue.js. ecomfe.github.io 아래로 스크롤을 내리다보면 nuxt.js의 setup이 나와있다. ... 자주 그러하듯, 작동하지 않는다..

drf에서 api를 구현할 때, 필자는 get_queryset을 메인으로 하여 api를 구성하였다. get_queryset을 사용하는건 아래의 docs를 참고하고 진행하였다. https://www.django-rest-framework.org/#quickstart Home - Django REST framework www.django-rest-framework.org https://www.django-rest-framework.org/api-guide/filtering/ Filtering - Django REST framework www.django-rest-framework.org 다만 이렇게 get_queryset만 사용하면 결론적으로 [sql로 할 수 있는것 + serializer의 보조] 만을 사..

결론부터 말하자면 참조하는 모델(ohlcv)과 참조되는 모델(share_announce)가 있을 때, 참조되는 모델.참조하는모델_set으로 접근가능하다. 이때, 참조하는 모델 foreign key 설정시 related_name을 설정해주면 해당 이름으로 접근할 수 있다.(필자는 ohlcv로 설정) 그러니까.. django가 알아서 해준다. 구글링을 했을 때, 정참조를 할 때는 select_related를 역참조를 할 때는 prefetch_related를 쓰라는 얘기를 보았다. 하지만 두 방식 모두 cache에 미리 담아둬서, db에 한 번 더 쿼리를 보내지 않게 해주도록 support하는 역할이지, 해당 function을 쓴다고 해서 return되는 query_set에 해당 내용이 담겨져있는게 아니다. ..

{{ item }}% // 이렇게 하면 헤더1,2,3 전부 object형식으로 나온다 {{ value }}% // 이렇게 하면 헤더2의 값만 나온다 headers: 컬럼명과, 그에 대응되는 object member name을 넣어준다 items: headers와 맞춰서 각 row에 들어갈 데이터를 object로, 그리고 각 obejct를 list로 묶어준다 그리고 템플릿을 작성할 때 주의 해야하는 것은 vuetify document에는 다음과 같이 적혀져있다 v-slot:item.헤더1="{ item }" // v-slot:item.calories="{ item } 하지만 위와 같이 작성하면 다음의 eslint에서 다음과 같은 에러를 보인다. error 'v-slot' directive doesn't s..