개발쬬

가장 많이 사용하는 아이콘 라이브러리 Heroicons프론트엔드 개발을 하면서 가장 많이 사용하는 라이브러리 중 하나이면서, 디자이너에게도 가장 많이 사랑받는 아이콘 시스템이 horoicons 이다. 간편하게 import 해서 사용하지만 이번에는유형별로 불러오는 법을 모르는 분들을 위해 간단하게 포스팅 해보려고 합니다. Heroicons 사이트 heroicons git GitHub - tailwindlabs/heroicons: A set of free MIT-licensed high-quality SVG icons for UI development.A set of free MIT-licensed high-quality SVG icons for UI development. - tailwindlabs/..

회사에서 좋은기회가 생겨 vue로 카카오맵 api 를 사용하게 되었다. 지도는 프론트엔드에게 꽃이나 다름없다고 하셨는데 ㅋㅋㅋ 맞는말인지 모르겠지만 어쨌든 1년차도 안된 내게는 좋은기회라고 생각했다 카카오 주소 https://apis.map.kakao.com/ https://apis.map.kakao.com/web/sample/ 밑에 주소는 샘플링 주소이다. 개발을 하면서 정말 많이 들어갔던.. 물론 문서도 중요하지만 샘플링을 통해 어떤식으로 구현되는지 한번 확인을 거친 뒤 문서를 읽으면 확실히 금방 습득이 가능했다. vue에 카카오맵 설치 및 확인 여러 시도를 거쳐봤는데 key값이 노출되지 않은 채로 전역으로 설치해주는것은 불가능해 보였다. (만약 찾으신분이 있다면 알려주시길..👀 ) 그래서 지도를 사..

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..

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..

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 가 옛날 언어가 되어버린 것처럼..(최근 부트캠프 학생들..

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..

최근 하이브리드 앱을 적용하면서 기존에 사용하던 firebase 에 web 이벤트도 트래킹을 적용해야 했다. 사실 겉만 보면 좀 어렵게만 느껴지겠지만 개념만 간단하게 생각하면 매우 간단하다. (그냥 로그 찍는거다) 추후 서비스 업데이트를 위해 사용자들이 어떤 이벤트, 어디로 검색했는지를 보는것이 가능하다. 해당 코드는 Vue 내에 적용하기 쉽게 작동하도록 만들었다. 👉 firebase 설치 npm install firebase 👉 main.js const app = initializeApp(firebaseConfig(/* firebaseConfig key */)); const analytics = getAnalytics(app); const AnalyLog = (value) => { logEvent(an..

벽돌처럼 차곡차곡쌓아진 디자인을 masonry 라고 이야기한다. 이번엔 사이즈가 제각각 다른 이미지를 활용해 이런 피드리스트를 구현해보았다. 추가로 스크롤링시 다음 페이지를 호출하는 방식을 사용했다. (infinite scroll) masonry 만 사용한 경우 발생되는 문제점이 애초에 해당 프로젝트는 pull-refresh 를 사용하고 있어서 제대로 영역을 감지 못하는 상태였다. 게다가 데이터 내부에 이미지를 받아오자마자 뿌려주다보니 이미지가 완전히 load 되기 전에 레이아웃이 실행되어 높이 영역이 계속해서 겹치는 현상이 발생했다. 그럼 어떻게 해결할 수 있을까? 라는 생각을 이것저것 해보다가 이미지가 완전히 load 되어 높이가 지정되었을 때, 적용하면 문제없이 구현이 가능할것이라고 생각했다. 사용..