전체 글89 [JavaScript] 디바운스 구현하기 (feat. 더블 클릭 이슈 해결하기) 1. 계기유지보수 진행 중인 프로젝트에서 캘린더를 조작하면 API를 바로 요청하여 테이블을 조회하는 기능이 있었다. 이 경우, 캘린더를 키보드나 마우스로 빠르게 조작할 시, 변경되는 날짜마다 API가 요청되어 서버 쪽 부하가 생길 것 같아 로직 수정이 필요해 보였다. 추가로 최근 더블 클릭 이슈가 발생하여, 해당 문제를 해결하고자 다양한 방법을 시도하였다. 그 중 채택된 방법이 현재 작성할 디바운스를 활용한 방법이다.현재 프로젝트의 규모와 이후 작업을 고려해봤을 때, 해당 방법이 가장 최선이라 선택하게 되었다.앞서 말한 디바운스 구현 시에는 딱 한 군데에서만 필요했고, 코드 양이 적어 코드를 분리하지 않았는데, 이번 디바운스 적용으로 코드를 모듈화 하였다.라이브러리를 사용하지 않고 직접 구현한 이유는, .. 2024. 8. 31. [Node.js] Excel 파일 업로드 및 다운로드 하기 (feat. Multer) 1. 계기 회사에서 진행 중인 프로젝트에서 여러 명의 사용자를 추가할 때, 엑셀 파일을 업로드한 후, 해당 파일 데이터를 파싱하여 사용하려고 하는 로직이 추가되었다. 프론트에서도 추가적으로 양식을 다운로드한 후, 작성된 파일을 다시 업로드하는 컴포넌트를 만들게 되었다. 로직은 크게 1. 서버로부터 받은 파일 다운로드 2. 파일 서버로 업로드 두 가지다. 아직 서버쪽 API 개발이 완성되지 않았다고 하여, 임시로 express.js로 node.js 서버를 구현해 테스트해보았다. 2. 개발 환경 테스트용 서버로 express를 사용하였고, FormData 형식의 데이터를 읽기 위해 Multer를 사용할 예정이다. 기본적인 서버는 아래와 같이 세팅하였다. // server.js import cors from .. 2024. 2. 21. [Vue.js] Excel 파일 업로드 및 다운로드 하기 (feat. 다른 이름으로 저장하기) 1. 계기 회사에서 진행 중인 프로젝트에서 여러 명의 사용자를 추가할 때, 엑셀 파일을 업로드한 후, 해당 파일 데이터를 파싱하여 사용하려고 하는 로직이 추가되었다. 프론트에서도 추가적으로 양식을 다운로드한 후, 작성된 파일을 다시 업로드하는 컴포넌트를 만들게 되었다. 프론트 쪽 로직은 크게 1. 서버로부터 받은 파일 다운로드 2. 파일 서버로 업로드 두 가지다. 아직 서버 쪽 API 개발이 완성되지 않았다고 하여, 임시로 express.js로 node.js 서버를 구현해 테스트해보았다. 2. 개발 환경 현재 vue2를 사용 중이며 서버로 파일을 전송할 때에는 axios로 FormData를 사용하여 파일을 전송할 예정이다. 기본적인 UI는 아래와 같이 세팅하였다. // App.vue 양식 다운로드 파일 .. 2024. 2. 21. [Vue.js] Vue2 IE 지원하기 (3) Vue2에서 IE(2024년 1월 기준 IE9까지) 지원하는 방법은 이전 포스팅들을 참고해 주세요. 2024.01.30 - [Study] - [Vue.js] Vue2 IE 지원하기 (1) [Vue.js] Vue2 IE 지원하기 (1) IE 지원 계기 및 지원 현업에서 개발 중인 프로젝트가 IE 대응이 필요해져 현재 프로젝트를 IE에 호환할 수 있는 방법에 대해 조사하게 되었다. IE 9까지만 지원한 궁극적인 이유는, Vue가 IE8 이하를 ktmihs.tistory.com 2024.01.31 - [Study] - [Vue.js] Vue2 IE 지원하기 (2) [Vue.js] Vue2 IE 지원하기 (2) 🔍 IE 지원 동기 및 시작 방법은 이전 글을 참고해 주세요 2024.01.30 - [Study] -.. 2024. 2. 11. [Vue.js] Vue2 IE 지원하기 (2) 🔍 IE 지원 동기 및 시작 방법은 이전 글을 참고해 주세요 2024.01.30 - [Study] - [Vue.js] Vue2 IE 지원하기 (1) [Vue.js] Vue2 IE 지원하기 (1) IE 지원 계기 및 지원 현업에서 개발 중인 프로젝트가 IE 대응이 필요해져 현재 프로젝트를 IE에 호환할 수 있는 방법에 대해 조사하게 되었다. IE 9까지만 지원한 궁극적인 이유는, Vue가 IE8 이하를 ktmihs.tistory.com IE 버전 바꾸기 지난번 IE11에서 여는 것까지는 성공 이제 IE10과 IE9 모드로 변경하여 확인하기 위해 모드 설정 방법 찾아보았다. 개발자 도구를 통해 변경하여 거의 동일하지만 두 가지 방법으로 변경할 수 있다. 1. 노랗게 칠한 부분에서 문서모드를 변경하기 우측 상.. 2024. 1. 31. [Vue.js] Vue2 IE 지원하기 (1) IE 지원 계기 및 지원 현업에서 개발 중인 프로젝트가 IE 대응이 필요해져 현재 프로젝트를 IE에 호환할 수 있는 방법에 대해 조사하게 되었다. IE 9까지만 지원한 궁극적인 이유는, Vue가 IE8 이하를 지원하지 않기 때문이다. Vue does not support IE8 and below, because it uses ECMAScript 5 features that are un-shimmable in IE8. However it supports all ECMAScript 5 compliant browsers. Vue 공식 문서 호환성 팀 내부적으로 이미 프로젝트가 거의 완성된 상태에서, 거의 사용되지 않는 IE8 이하를 위해 새로운 프레임워크를 사용하여 마이그레이션 하기에는 오버 스택이라 판단되었.. 2024. 1. 30. 이전 1 2 3 4 ··· 15 다음
