Toy Projet를 만들면서 발생하는 일들을 기록 해 본다.

2022-02-03

목요일.

Toy Projet를 만들면서 발생하는 일들을 기록 해 본다.

2022-01-24
Toy Project를 하나 만들기로 하고 Front Template을 하나 정해서 GitHub에 커밋을 한다. 이것을 만들게 된 계기를 적어보면, 오라클 무료 인스턴스에 개인적으로 사용할 페이지를 올려 사용할 요량이었는데, 아무래도 인증이 필요해서 이것저것 Template을 찾아보는데, 영 마음에 드는것이 없다.
거기다 그 즈음 보기시작한 Facebook의 개발자 커뮤니티에 올라오는 질문글들을 보면서, 내가 경험한 것들을 조금은 가다듬어 세상에 넘겨줘야 겠다는 생각을 하게 된다. 누군가에게는 도움이 되기를 바라면서 말이다.

2022-02-01
구글에서 도메인을 하나 구입했다. 목적은 https를 적용하려면 도메인이 필요했기 때문이기는 한데.
도메인을 구입하고, 오라클 무료 인스턴스를 2개로 늘려서 작업 구성을 하면서 즐거워 하는 나를 발견한다. - halfenif.github.io: GitHub Page를 블로그로 사용하는건 계속 될 것이다. - filemover.enif.page: 주력으로 사용 할 개인적인 것들을 모아두는 인스턴스이다. - livedemo.enif.page: 인터넷상에 공개 할 목적으로 만든 데모 사이트이다. - demo.vvtui5.enif.page : Vite + Vue3 + Tailwind + SAP UI5로 만들어진 Demo 사이트이다.

2022-02-03 10:03:45
어제 밤까지 작업은 내용을 클라우드에 올리고 확인을 해보는데.. 뭔가 FastAPI 호출형식이 맞지 않는 오류가 발생한다. 뭐 그러려니 하는데.. 로그 보는 것이 영 불편하다. FastAPI 로그는 아니 정확하게는 Uviconr에서 로그를 생성하는 부분을 살펴보는데, 로깅에 대한 dict항목만 찾아지는 것이 이게 뭔가 싶다. Stack Overflow에서 config file(아니 dict) sample을 구해서 넣어보니 동작은 하는데, 에러는 출력되지 않는다. log level이 debug가 아니고 trace로 바꾸자 좀 더 나오는데.. 뭔가 마음에 들지는 않는다. FaceBook Python 사용자 그룹에 도움을 요청 해 보고 딴 짓을 한 참 하다가 다시 보는데. 내가 수정한 Header 값으로 요청을 하고 있지 않다. Vite에서 Build오류가 발생하고있어서, dist의 내용물들이 갱신이 안되고 있는 현상이 있다. IMG 항목중 URL이 Local인데 실제 파일이 없는 경우… 뭐 그럴수있지.

2022-02-03 23:04:26
로그를 보다가 보다가.. 결국 Nginx Log를 포맷을 수정했고, FileBeat로 Nginx Log를 긁어다가 MySQL로 넣기 위해 JOSN형태의 File로 떨어뜨렸었다가.. 아닌거 같아 Redis에 넣는 것 까지는 되었는데.
이 녀석을 다시 MySql로 넣기 위해서 Python AppScheduler를 보기 시작했고.
개발을 위해 WSL에 Redis를 설치하고 한참을 해 보는데.. 단순하게 생각해서 서버에서 긁어온(=화면에 출력된) 문자열을 WSL에 설치된 레디스에 넣었더니 Type Error가 나온다.
WSL에 Filebeat를 설치해서 Redis에 데이터를 생성하고 테스트해야 정확하다고 본다.

2022-02-09

DemoSite의 Logo를 변경했다.
뭔가를 만들려면 상하좌우 모두 두루 살펴서 받아들이는 사람이 이질감 없이 수용 할 수 있도록 준비 해 주는 것이 좋다는 생각이다.
로고는 favicon.io라는 곳을 이용했다.

2022-02-11 13:46:53
그 사이 많은 일들이 있었다.
우선 ESLint를 적용하는 과정에서 처음 사용했던 Template을 버리고, ESLint를 적용한 Template로 갈아탔다. 이것은 시간이 매우 많이 소요되는 작업이었지만, 어설프게 웹 개발을 경험하는 것에서 이제 좀 본격적으로 개발 해 본다는 느낌을 가지게 해 주었다.
ESLint를 적용하는 과정에서 이것 저것 프로젝트를 만들다보니 GitHub의 레파지토리가 너무 중구난방이라는 생각이 들어서 전체에 대한 명명규칙을 만들고, 사용하지 않는것들은 삭제했다 - dev** : 개발중인 레파지토리이다. 나중에 demo*_로 Branch될 후보군이다. - demo__ : 인터넷상에 공개한 레파지토리이다. - test** : 테스트를 위해서 만들어본 레파지토리들이다. - toy** : 취미로 만들어보는 것들을 모아두었다.

2022-02-11 14:26:04
Vue에서 SVG를 설정하는 것에 대해 알게되었다.
이것의 시작은 ESLint 문법오류를 전부 잡고 Build를 시도하는 작업이었는데, 얼마전에 집어넣은 log.svg에 대한 경로를 찾지 못하는 오류가 나오면서 시작되었다.
어떤 문제를 직면했을 때 인간은 본능적으로 자신이 경험해 온 것을 기반으로 추론하고 행동하게 되었다.(당연한거다.)
이번에는 운이좋았던 것인지, 2시간만에 vite.config.js에서 svgLoader라는 단어를 발견하고, 오류가 나던 logo.svg대신 logo.png를 적용해 봄으로써 그 전까지 세웠던 가설과 추론이 모두 헛된것이었음을 증명하고 문제를 종료시킨다. 참.. 배울게 많다.

2022-02-12 14:48:44
Vue를 계속 적용 해 보면서 느끼는 생각은. Vue라는 것이 마치 거대한 무더기인데 거의 정리가 안 된 카오스같은. 그러다 보니 뭔가를 하나 하려면, 이것이 올바른 방법인지 아닌지 검토하고 판단하기 위해 오피셜 레퍼런스를 보지만, (사실 거기에 기술된 것이 정답이겠지만) 조금만 옆으로 응용하거나 더 나가려고 하면 걸리는 것들이 있다. 오늘은 이제까지 계속 생각하고 있던 main.js가 아닌 다른 곳에서 app instance에 접근하는 방법에 대해 검토를 해보니. appContext라는 단어를 찾기까지 시간이 그래도 많이 소요되었다. 이것은 결국 아직 (내가) JavaScript라는 것과 Vue가 프레임워크로서의 구성을 어떻게 해 놨는지에 대한 이해가 부족하다는 것을 반증한다는 생각이다. 한 2시간을 들여서 검토해보고 해결은 했다.

2022-02-15 09:21:29 CSS File을 삭제했다. 정확하게는 CSS가 필요한 부분의 Scope를 정하고, 해당 파일 내부의 Style로 설정하는 것으로 변경한 것이다.
이 Toy Project가 지향하는 바가 디지이너 없이 웹 개발경험이 없는 개발자가 간단한 사이트를 만드는 것인것 만큼, 디자인에 들어갈 Effort를 배제하라는 의미이기도 하다.

2022-02-15 23:12:58
Facebook 인증을 개발환경에서 만든 것을 운영으로 올리려다 보니, 개인정보 처리방안과 서비스 약관이 마음에 걸려.
인터넷을 찾아봤으나 마음에 드는 것이 없어 직접 작성했다.