VUE18 Vue로 kakao map API 사용하기 회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다. 지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만 어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다 카카오 주소 https://apis.map.kakao.com/ https://apis.map.kakao.com/web/sample/ 밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다. vue에 카카오맵 설치 및 확인 여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다. (만약 찾으신분이 있다면 알려주시길..👀 ) 그래서 지도를 사.. 2023. 8. 3. Vue : npm run serve 오류 vue-cli-service: command not found Vue : npm run serve 오류 vue-cli-service: command not found git clone을 받고 실행했는데 아래와 같은 오류가 났다. npm run serve sh: vue-cli-service: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! chart@0.1.0 serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the chart@0.1.0 serve script. npm ERR! This is probably not a p.. 2023. 8. 3. 눈이 즐거운 UI Design 오픈소스 라이브러리 추천 1. Ant Design 깔끔하고 단정한 느낌의 UI Design 프레임워크 워낙 유명해서 대부분의 개발자분들은 알 거라 생각합니다. 최근 1년동안 굉장이 애정했던 디자인 오픈소스로 업데이트도 빠르고, 호환성에서도 우수해서 사용하기 좋습니다. 다만 빌드 시, 너무 무거운게 단점(대부분의 프레임워크가 그렇듯..) vue2는 버전2를 끝으로 지원이 끝났다는것이 단점...(혹시 되나요?) Ant Design - The world's second most popular React UI framework An enterprise-class UI design language and React UI library with a set of high-quality React components, one of best R.. 2023. 6. 24. 요즘 인기있는 npm 패키지/라이브러리를 비교할 수 있는 사이트, npm trends npm trends: Compare NPM package downloads Which NPM package should you use? Compare packages download stats, bundle sizes, github stars and more. Spot trends, pick the winner. npmtrends.com 개발자의 길로 접어들면서 사수에게 가장 많이 들었던 말이, 트렌드를 알아야된다는 말이였다. 개발의 세계는 무궁무진하고 업데이트속도가 빨라서 고작 1년만 지났음에도 불구하고 신기한 라이브러리,,AI 등등 신기술들이 등장하게 된다. 그 몇년의 세월을 견디고도 살아남은 라이브러리나 프레임워크도 많지만, 결국 JQuery 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들.. 2023. 6. 24. [Vue Error] npm run serve 오류 vue-cli-service: command not found git clone 을 실행하고 npm run serve 를 실행했는데 해당 오류가 발생했다. sh: vue-cli-service: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ERR! chart@0.1.0 serve: `vue-cli-service serve` npm ERR! spawn ENOENT npm ERR! npm ERR! Failed at the chart@0.1.0 serve script. npm ERR! This is probably not a problem with npm. There is likely additional logging out.. 2023. 6. 24. [Vue] firebase logEvent 연동하기 + Realtime 최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다. 사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다) 추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다. 해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다. 👉 firebase 설치 npm install firebase 👉 main.js const app = initializeApp(firebaseConfig(/* firebaseConfig key */)); const analytics = getAnalytics(app); const AnalyLog = (value) => { logEvent(an.. 2023. 2. 12. masonry / infinite scroll / imagesLoaded 활용하여 핀터레스트 | 네이버 이미지 리스트화면 구현하기 벽돌처럼 차곡차곡쌓아진 디자인을 masonry 라고 이야기한다. 이번엔 사이즈가 제각각 다른 이미지를 활용해 이런 피드리스트를 구현해보았다. 추가로 스크롤링시 다음 페이지를 호출하는 방식을 사용했다. (infinite scroll) masonry 만 사용한 경우 발생되는 문제점이 애초에 해당 프로젝트는 pull-refresh 를 사용하고 있어서 제대로 영역을 감지 못하는 상태였다. 게다가 데이터 내부에 이미지를 받아오자마자 뿌려주다보니 이미지가 완전히 load 되기 전에 레이아웃이 실행되어 높이 영역이 계속해서 겹치는 현상이 발생했다. 그럼 어떻게 해결할 수 있을까? 라는 생각을 이것저것 해보다가 이미지가 완전히 load 되어 높이가 지정되었을 때, 적용하면 문제없이 구현이 가능할것이라고 생각했다. 사용.. 2022. 12. 9. [axios] 이미지 POST 기능이 제대로 동작하지 않을때 확인사항 이슈 상황 이미지를 다른 객체들과 같이 post 요청을 보내려고 하는데 이미지 post 기능이 정상작동되지 않고 null 값을 찍힌다 1. header 에 Content-Type을 multipart/form-data 로 지정했는지 확인한다 //이미지를 넣는 axios 호출 부분 SetImg(params) { return axiosService.post("v1/files", params, { header: { "Content-Type": "multipart/form-data", }, }); }, 2. FormData로 요청하는지 확인한다. let fd = new FormData(); fd.append("key", img소스 ); //axios 호출 let val = await axiosService.Set.. 2022. 12. 2. [javascript | Vue] 이미지 다운로드 기능 만들기 (canvas/url활용) get으로 받은 소스를 화면에 뿌리고> 그 이미지를 다운로드 받으려면 canvas를 활용해 가능하다. 👉 template (표현되어질 부분) 👉 template (다운로드 버튼) 다운받기mdi-arrow-down-bold-circle 👉 methods a 태그를 임의로 생성해 canvas 속성을 대입해 다운로드 기능을 동작하게 해준다 download() { var a = document.createElement("a"); // a.setAttribute("download", "파일이름" + ".png"); a.setAttribute( "href", document .getElementById("canvas") .toDataURL("image/png") .replace("image/png", "image/.. 2022. 12. 2. [javascript] 문자 /n 줄바꿈 변환작업 백에서 전달받는 데이터중에는 문단의 특성을 전달받지 못한 경우가 많다 그래서 replace로 /n 를 변환해준다 //cardData /n이 포함된 문자열을 포함한 배열 cardData.forEach((el, index) => { cardData[index].cont = el.contents.replace(/\n/g, " "); }); vue 환경이라 v-html를 활용했지만 p태그 안에 적용해줘도된다 2022. 12. 2. 이전 1 2 다음 반응형
