YumeHANA YUME'S DEV

채팅 기능을 구현하기 위해 무료로 사용할 수 있는 소켓을 찾아서 이걸 활용하고자 했다. https://ably.com Login to your Ably dashboardAbly provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime. Organizations like Toyota, Bloomberg, HubSpot, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime dataably.com 우선 ably에서 회원 가입을 한 후 새로운 프로젝트를 생성ably에서 발급..

electron + vue를 활용하여 만든 Desktop App이다. YumeNote는 메모와 일정관리를 할 수 있는 Desktop App이며,실제 서버를 사용하지 않고 만들었고, 사용자의 local에 데이터를 저장한다. 윈도우의 스티커메모를 쓰다가 관리가 불편해서 좀 더 상위호환 느낌을 살렸다. 주로 개인 노트북 혹은 회사에서 보안이 중요한 상황에 메모를 좀 더 쉽게 관리할 수 있도록 개발을 진행했다.현재도 지속적으로 계속해서 업데이트를 진행할 예정이며, 버전이 올라가면 왼쪽 하단에 New 표시가 나오며 원하면 업데이트 할 수 있도록 했다. 아직 Desktop App은 처음 만들어봐서 서버를 사용하지 않고 자동업데이트를 하는 방법을 찾지 못해서 electron-update로 재설치하는 방식으로 구현하였..

next js 에서 svg icon사용할때는 SVG 아이콘을 컴포넌트로 직접 만들어서 사용하는 방법과 webpack을 이용해서그냥 사용하는 방법이 있는데svg를 추가할때마다 계속 컴포넌트로 만들어주는게 귀찮을 것같고,vue처럼 svg icon컴포넌트를 만들까 하다가 지금 진행하는 프로젝트에서는 svg icon을 많이 쓰지는 않을 것같아서 그냥 진행하기로 했다. Installment우선 webpack을 설치npm install --save-dev @svgr/webpack 이후 next.config.ts 파일에서 turbopack에 아래 규칙을 넣어준다.turbopack을 사용하면 turbopack에 규칙을 넣어줘야하고, turbopack을 사용하지 않으면 webpack에 규칙을 넣어주면 된다.import ..

로딩하는 과정을 표현하기 위해서 spinner를 이용spinner component는 이렇게 만들어서 사용 그럼 이런 식의 모양의 spinner 가 나오며 border는 스피너의 크기이며, border-top-color는 spinner의 로딩바 색상을 나타낸다.그럼 spinner는 기본적으로 로딩 시작 전후로 나뉘어서 나타났다가 사라져야하므로 이 기능을 구현 하기 위해 true false변수를 사용store를 사용하여 spinner의 렌더링 여부를 결정const loadingSpinner = ref(false); 사용시에는 이 loadingSpinner의 값만 타이밍에 맞춰서 바꿔주기만 하면 된다.하지만 단순히 이렇게 설정한 경우에는 바로 요청시 spinner가 돌면 결과가 엄청 빨리 return되는 ..

electron app을 만들고 난 후 다운로드 사이트를 만들어야하므로exe 파일이나 dmg파일을 그냥 프로젝트에 넣고 다운로드 하는 방법으로 하면 좀 편할 것 같아서 git에 올리는데 계속 100MB이상의 파일은 push를 할 수 없다고 에러가 발생 이는 Git LFS를 이용하여 해결할 수 있다.더보기Git LFS의 작동 방식Git LFS는 대용량 파일을 Git 저장소에 직접 저장하는 대신, 파일의 "포인터"만 저장소에 커밋실제 파일은 깃허브의 LFS 서버에 별도로 저장 Git LSF우선 사용하기위해 git lfs를 설치git lfs install 이후 lfs를 활용하여 100MB이상의 파일을 추적 하고 해당 파일을 git add로 추가git lfs track "public/resource/projec..

실제 다른 사용자들이 사용할 수 있게 하기 위해서 만든 electron app을 build 작업을 진행우선 electron을 빌드를 하기 위한 순서는 Vite + Vue를 사용하고 있기때문에Vite Build 후 build된 vue를 포함해서 다시 electron을 build한다.Vite Build우선 vite프로젝트를 build하기 위해서 build option을 설정js와 css파일은 하나로 만들어서 사용base는 './'으로 설정해야 build후 index.html에서 js와 css파일을 상대경로로 정상적으로 가져온다.base: './', build: { sourcemap: 'inline', cssCodeSplit: false, rollupOptions: { output:..

데스크톱 앱을 만들면서 서버를 안쓰고 만들다보니 버전 관리 및 정보를 어디선가 가져와야 할 것같아구글 시트를 이용해서 가져오는 방식을 사용 이 방식은 구글 시트의 접근이 누구나 가능하게 만들어서 공유하는 방식이기 때문에보안이 중요한 데이터는 사용을 안하는 것이 좋다.Google Drive우선 구글 시트로 버전과 업데이트 날짜 업데이트 내용만을 사용 우선 해당 시트를 공유해야하는데 데이터를 가져오기 위해서는 단순 링크 공유 방식이 아니라 web에 올려서 크롤링을 하는 방식으로 데이터를 가져오기 때문에 publish to Web으로 해당 시트를 공유해준다. .tsv 파일로 만들어 해당 내용에 쉼표나 데이터 구조를 안정적으로 가져와서 사용할 수 있도록 한다.이제 publish를 누르면 해당 공유 링크가 생성되..

input태그를 사용하다가 입력한 크기만큼 자동으로 조절이 안돼서직접 함수를 만들어서 처리하고 이것저것 해보았지만 원하는 느낌이 안나오다 찾아보니 간단하게 해결할 수 있었다. field-sizing: content 를 활용하면 input의 width값이 자동으로 조절이 된다.input { field-sizing: content; min-width: 50px; } 이처럼 해당 css만 넣어주면 알아서 input의 width값이 자동으로 적용된다.추가적으로 min-width값으로 placeholder의 크기를 고려해서 설정해준다. field-sizing 속성은 사용자가 직접 데이터를 입력하는 요소에만 적용이 되며, div나 span 같은 이런 요소에는 적용이 되지 않는다.따라서 UI컴..