gomstory

채팅시스템 구현중 마주친 이슈(삽질기간: 이틀) 기존 메시지들을 배열로 관리하고있다가 수정/삭제시 성능을 높이려고 Record 타입으로 바꿨다.const messages = ref([])const messageMap = ref>({})전: messages, 후: messageMap전반적인 구조는 페이지 진입 -> mount 시점에 구독 -> 비즈니스 로직 수행 -> unmount 시점에 구독 해제이렇게 되어있다.문제가 새로고침 이후에는 로직이 잘 타는데 뒤로가기 버튼을 눌러서 페이지에 진입했을때는 동작을 하지않았다. 리스트로 관리할때는 한번도 이런 문제가 없었는데... 처음에는 Record 타입의 key가 없다가 생겼을때만 문제인줄 알았으나 그냥 안되는거였다.1. ref를 reactive로 2. Re..

채팅 서비스를 개발하며 마주한 가장 큰 난관이미지가 많아도 너무 많다는 것이다게다가 nas 스펙까지 낮아지니 로딩이 귀신같이 느려지기 시작했다.이미지 로딩 최적화를 위해 1. 이미지 태그 lazy-loading 적용 (vue-lazyload)like Skeleton UI 처럼.. 채팅 영역도 하면 좋을텐데 우선 급한 불부터 2. 정적 이미지 파일 png, jpeg -> webp로 extension 변경반정도 줄었다 (13.92kB -> 7.45kB) 하지만 근본적인 문제는 해결되지 않았다.이미지 캐싱을 효과적으로 할 수 있는 방법에 대해 알아보았다.그러던중 pwa가 눈에 들어왔다. PWA란?PWA(Progressive Web App)는 웹 기술을 사용해 앱처럼 동작하는 웹 애플리케이션을 말한다. 즉,..

tiptap 에디터 사용중 콜론(:)을 입력해서 커스텀 이모지를 등록해야할 일이 생겼다공식문서의 Slash Commands를 참고했다 https://tiptap.dev/docs/examples/experiments/slash-commands Slash Commands Extension | Tiptap Editor DocsUse the Slash Commands extension in Tiptap to add a toolbar via / that pops up at the slash position. Learn more in our docs!tiptap.dev 사용하는 extension에 Commands 추가!CommangsSuggestion, Commands는 공식문서에 있는걸 우선 그대로 가져왔다.In..

web push를 구현하다가 store에서 router를 이동해야 할 일이 생겼다.평소처럼 import { useRouter } from 'vue-router'const router = useRouter()했는데왜..구글링 시작 https://stackoverflow.com/questions/70681667/cant-use-vue-router-and-pinia-inside-a-single-store Can't use vue-router and pinia inside a single storeI am using pinia and vue-router 4.x ,but i am having a problem using both of them in a store. each works independently ,b..

회사에서 하는 프로젝트 중 처음으로 프론트엔드만 맡게 되었다.항상 하나의 기능에 대해 둘 다 만들어서 Mocking 라이브러리에 대한 필요성을 크게 못느끼다가(늦어도 내탓, 오류나도 내탓)이번 기회에 효율적으로 개발을 하기위해 찾아보았다.  Mock Service WorkerAPI mocking library for browser and Node.jsmswjs.ioMSW 발견이미 여러회사(카카오, 올리브영, 현차 등) 테크블로그에 올라와있길래 바로 적용해봤다. npm install msw@latest --save-dev npm install 후 src└── mocks └── handlers └── index.js └── user.js └── browser.jssrc 밑에 파일을 추가한다. br..

- 한/영: option키- 마우스 우클릭: 트랙패드 두손 클릭

1. 설치 가능한 버전 확인하기sudo yum list | grep mariadb 2. 설치sudo yum install mariadb105-server 3. 자동 실행 설정sudo systemctl enable mariadb 4. db 실행 및 상태 확인sudo systemctl start mariadb sudo systemctl status mariadb 5. 비밀번호 설정mysql -u root -perror: 'Access denied for user 'root'@'localhost''비밀번호는 쿼리로 변경했다. USE mysqlALTER user 'root'@'localhost' identified by {password}; 6. db 외부 연결 허용 / 테스트GRANT ALL PRIVILEGE..

Local 브랜치 이름 변경로컬 브랜치 클릭 > 마우스 우클릭 > 이름 변경 Remote 브랜치 이름 변경 (*띄어쓰기 주의)git push origin :{old_branch} git push --set-upstream origin {new_branch}

@Scheduled그동안은 어노테이션 사용해서 cron표현식으로 작성하는 스케줄러만 만들어봤다.Task별로 시간이 다른 스케줄러를 구현할 일이 생겼는데, 그렇다고 1초에 한번씩 돌면서 체크할 일은 아닌거같고..이참에 REST API로 스케줄러를 동적으로 생성하는 기능에 대해 찾아보게되었다.  1. ThreadPoolTaskScheduler를 설정하는 @Configuration 클래스를 생성해준다.import org.springframework.context.annotation.Bean;import org.springframework.context.annotation.Configuration;import org.springframework.scheduling.TaskScheduler;import org.s..

작년 이맘때쯤 회사에서 사람을 모아 작은 사이드 프로젝트를 시작했다.서버 담당이 나 혼자라서 springboot, db, AWS 모두 경험하게 됐다. 결국 흐지부지 돼서 오픈은 못했지만🥹 그 과정을 남겨보려 한다.(프리티어 기간이 끝나서 매달 돈이 나가고있음. 이거 정리하고 아예 지울예정)  개발환경1. Spring boot 2.7.13(세월의 흔적이 느껴진다. 지금은 initializr에 3점대밖에 없다) 2. Java 11(세월의 흔적2 지금은 17이 최소다)3. Maria DB4. AWS EC2(Amazon Linux)  1. AWS EC2 콘솔 > 인스턴스 시작 클릭 2. 이름 설정플젝 이름으로 설정해줬다. 3. OS 선택고민없이 프리티어로 선택  4. 인스턴스 유형 선택고민없이 프리티어 선택 ..