Vue

문뜩 Vue-cli 사이트에 들어갔다가 Vue CLI가 Maintenance 모드에 들어갔으며, 앞으로의 프로젝트들은 Vite기반으로 생성 하는 것을 권장한다는 것을 보게 되었다. 이번 포스트에서는 왜 vue-cli에서 Vite로 넘어가게 되었는지, 그리고 실질적인 migration 방법에 대해 정리 해보고자 한다. Why Vite? 기존의 웹팩과 같은 번들링 툴은 프론트엔드에서 ES Module을 사용할 수 있게 해 생태계를 확장시키는데 엄청난 기여를 했다. 하지만, 프로젝트가 커짐에 따라 데브 서버를 키는 속도가 점점 느려지는 문제가 있었다 Vite는 이 문제를 네이티브 ESM을 사용해 필요한 모듈을 그때그때 불러오도록 해 개발 서버의 시작시간을 프로젝트의 크기와 상관없이 빠르게 유지시켜준다. 이러한..

사내에서 차량의 위치 정보를 실시간으로 받아오는 기능 개발이 필요했다. 해당 기능을 구현하기 위해서는 어떤 방법들이 있는지, 그리고 실제로 어떤 방법으로 구현을 했는지 정리해보고자 한다. 구현 필요 기능 명세 다수의 차량 위치정보를 실시간으로 화면에 출력해주는 기능이 필요했습니다. 각 차량의 정보를 수신하는 주기는 500ms으로 생각하고 있었으며, 최대 차량의 개수는 100대 였습니다. 일반적인 HTTP 통신을 하게 되면 클라이언트 측 부담이 커지게 때문에, 서버쪽에서 바로 차량 위치 정보를 보낼 수 있는 방향으로 가닥을 잡았습니다. 서버가 클라이언트에게 데이터를 보내면 클라리언트가 이를 인지하고, 데이터 처리를 해주는 방법은 크게 WebSocket과 SSE 두 가지가 존재합니다. WebSocket vs..

개인 프로젝트를 하는 중 배경 이미지를 선택 할 수 있는 기능을 구현 했다. 문제는 이미지가 로드 되는 시간이 너무 오래 걸린다는 점이었다. 이 부분을 어떻게 개선 했는지 정리해보고자 한다. 먼저 최적화를 하기 이전에 상황을 보도록 하자. 그리고 개선 이후, 화면이다. 영상을 업로드하면서 조금 느려보이는 경향이 있긴하지만, 우선 로딩시간이 많이 개선되었고, 이미지가 로딩되기 이전에는 placeholder를 미리 두어 이미지가 나올 것이라는 것을 사용자가 알 수 있도록 만들었다. 이미지 용량 줄이기 나의 가장 큰 문제는 너무 큰 이미지 용량이었다. 배경 이미지 하나가 6MB, 큰 것은 10MB 짜리도 있었다. 나는 이미지 로딩 시간을 줄이기 위해 구글에서 출시한 파일 포맷인 webp 형식으로 이미지들을 모..

Vue3 CompositionApi 에서는 script setup 사용을 권장하고 있고, 더이상 defineProps를 import할 필요없게 되었다. 하지만 이상하게도 내가 import 없이 defineProps를 사용하려고 할 때, eslint에서는 계속 'defineProps' is not defined 라고 에러메시지를 출력한다. 어떻게 해결하는지 알아보자. 구글링을 해보니 이미 eslint에서 이슈가 되어 있던 문제였다. (참고링크) 뭐 App.vue에서 글로벌 import를 해라. 라는 말도 있었지만, 더 이상 import안해도 되는데 eslint를 위해 내가 따로 global import하기는 싫었다. eslint.vuejs에서 찾아보니, 아래처럼 설명되어 있었다. 결론은, 아래처럼 9.0...

파일타입의 Input은 Browser에서 정해놓은 defualt 스타일이 적용되어 있으며, 일반적으로 파일 선택 버튼이나, placeholder를 수정할 수가 없다. 이번 포스트에서는 내가 원하는대로 file type의 input의 스타일을 수정하고, 버튼과 placeholder 텍스트를 수정하는 방법에 대해 정리해보고자 한다. 완성 Input Component 위 사진은 커스텀해서 만들 Input의 모습이다. 드래그엔 드랍이 가능하며, 버튼 색, 버튼 Text, Placeholder 까지 모두 수정이 가능하다. (참고로 디자인은 tailwind의 input을 벤치마크했다.) 참고로, 이번 포스트에서 나는 편의상 vue3를 사용할 예정이지만 자신이 편한 프레임워크를 사용해도 상관없다. 전체 로직 전체로직..

atmoic design을 도입하면서, 공용으로 사용하고 있는 component들을 새롭게 디자인하고 있습니다. 여기에서는 vue3 + composition setup Api + typescript 로 toggle 컴포넌트를 간단히 만들어 보겠습니다. 완성된 모습은 아래와 같습니다. vue3에서 구현했으며, 구현 코드는 아래와 같습니다. 부모 컴포넌트에서 사용은 아래처럼 했습니다. {{ toggleValue }}