Programming 59

[IoT] 이사, 그리고 IoT

이사 이제 1년간 휴학을 마친 나는 다시 학교로 돌아간다. 그리고 (아마) 남은 2년간 한 집에서 자취를 할 예정이다. 이사갈 집은 매우 마음에 든다. 7평정도로 자취방 치고는 꽤 큰 집을 싼가격에 얻었다. 그리고 나는 지금 그 집을 어떻게 꾸밀지 매일 고민중이다. 물론 공학적으로 😛 📡 일단 서버를 둘 예정이다. 지금 사는 집은 건물자체에 라우터가 2번 걸려있어서(...) 외부에서 내부로 들어올 때 포트포워딩이 필요하다. 이 건물 세대수도 많기도 하고 딱히 관리인이 해줄것 같지 않아서 포기하고 있는 상황이었다. 하지만! 이번에는 다르다. 이사갈 집은 단일 회선으로 들어오는걸 확인했고(내 돈..) 그 말인 즉슨, 내 맘대로 할 수 있다는 것. 그래서 도커도 이제 어느정도 쓰겠다, 쿠버네티스까지 구축 가능..

Programming 2022.01.16

[Vuetify, Nuxt] Vuetify의 custom variable 변경하기

vuetify의 디자인들이 대부분 훌륭하지만 마음에 들지 않는 것들이 있다. 예를들면 table에서 너무 과하게 들어가있는 box-shadow와 같은 요소들. 이런 점을 vuetify도 잘 알고 있는지, vuetify의 api 문서 하단에 보면 다음과 같은 것들이 적혀져있다. 미리 변수들을 선언했으니 default 값에서 바꿔서 사용해라는 것 같으니, 한 번 시도해보면..? 사라지지 않는다. 그러면 document를 한 번 찾아보자. https://vuetifyjs.com/en/features/sass-variables/ SASS variables Customize Vuetify's internal styles by modifying SASS variables. vuetifyjs.com treeShake..

Programming/Vue.js 2021.12.28

[DRF] 귀찮은건 싫어! ViewSet 사용해보기

지금까지는 필자는 처음 백엔드를 구현할 때, nodejs + express + MariaDB(MySQL)로 시작했었다. 그걸 하면서 느낀건... 귀찮다. 너무. 진짜 너무 단순한 로직들인데 그걸 일일이 post, get, patch 나누어서 검증하고, 반복되는 코드를 적는게 정말이지 싫었다. 그런데 django의 존재를 알게 되었고, 귀찮은 작업을 하지 않고 필요한 로직과 모델만 짜면 api가 생긴다고 생각해서 환상을 가지고 왔으나, 그냥 똑같았다. 모델을 만들어서 db를 파이썬으로 작업한다는것 정도 말고는 이게 정말 더 좋은가... 생각했지만, 그건 DRF를 잘 몰라서 그랬던 것이었다. [Django] APIView, Mixins, generics APIView, ViewSet을 알아보자 django ..

Programming/Django 2021.11.21

[Vue.js, tiptap] Editor에서 tab을 들여쓰기로 사용하기

필자는 Vue에서 tiptap Editor를 사용하는데, 한가지 불편한 점이 있다. 바로 코드를 작성하다 무의식적으로 tab을 입력하는데, 그러면 focus가 이동해버리는 현상이다. IDE들 처럼 들여쓰기(indentation)이 된다면 얼마나 좋을까... 해결해봅시다. 1. focus 막고 tab을 띄워쓰기로 교체하기 먼저 html에서 어떻게 tab으로 focus 이동을 금지시키는지 찾아보았는데 두 가지 방법을 찾았다. 1. 이동하고 싶지 않은 곳에 tabindex=-1 속성 추가 2. keydown 이벤트를 찾아서 e.preventDefault() 걸기 첫 번째 방법은 우리가 원하는 것이 아니므로 패스(모든 elements에 걸수는 없으니). 꽤나 low한 방법이지만 2번으로 해결 가능해 보인다. h..

Programming/Vue.js 2021.11.11

[ESlint, VSCode] VSCode ESlint 설정

nuxt나 vue와 같은 곳에서 기본 세팅에 eslint를 넣어주는 경우가 많이 있는데, vscode와 동기화가 안되어서 저장만하면 에러가 날 때가 있다. 그런 상황에는 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, "editor.formatOnSave": true } 또는 formatOnSave를 지운 { "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true, } 를 현재 작업중인 .vscode/settings.json 에 입력해주면 된다. 만약 파일을 못찾겠다면 ..

Programming/Vue.js 2021.11.05

[Vue, canvas] Vue.js에서 Canvas 사용하기

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

Programming/Vue.js 2021.10.30

[DRF] Serializer로 역참조의 역참조 모델 가져오기

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..

Programming/Django 2021.10.22