하수도키의 성장일기

개발일기/Vue.js

[Vue.js] Vue에서 SVG 사용하는 방법(How to use svg in vue app)

Vue에서 .png,.jpg 등의 이미지 파일 대신 svg를 사용하는 방법을 살펴보자. medium.com/javascript-in-plain-english/how-to-use-svg-icons-in-your-vue-app-6e2c30865d7c 이 포스팅을 보고 의역을 하면서 여러 가지 참고 자료를 정리한 포스팅이다. 예전에는(그리고 현재까지) 웹사이트에 아이콘(이미지)를 삽입하려면 .png, .jpg 파일들을 저장해서 불러오는 방식이다. 만약 보여줘야 되는 아이콘들이 많아 질수록 많은 .png,.jpg 파일들이 필요하고 이걸 다 불러와야 된다. 운이 나쁘면, 즉 네트워크가 갑자기 느려질 경우 웹사이트에서 아이콘을 부분적으로 불러오면서 정상적으로 작동되지 않는 느낌을 받을 수 있다. 시간이 지나면서 이..

개발일기/Vue.js

[Vue.js] 모달 컴포넌트(Modal Component) 만들기

이번에는 Vue.js에서 모달 컴포넌트를 만드는 방법을 살펴보겠다. 항상 궁금했다. 모달 팝업, 모달 컴포넌트 등등 모달을 부르는 말을 듣고 대충 어떤건지 감이 오는데 정확히 어떤건지 몰라서 찾아봤다. 모달(Modal)이란? 간단하게 설명하면, 자식 윈도우에서 부모 윈도우로 돌아기전에 뜨는 창을 말한다. 예를 들면, '정말 종료하시겠습니다?','뒤로 가시겠습니까?' 이런 대화의 종류이다. 웹에서는 어떤 액션을 취한 뒤 알려주는 용도나, 긴급상황을 알려주는 용도 등으로 많이 사용 된다. 개요 App, Content, ModalView 컴포넌트를 생성하기 버튼 누르면 모달이 보여지고 컨텐츠 밖을 클릭하면 사라진다. App 컴포넌트 만들기 Content, ModalView 컴포넌트..

먹는일기

[내돈내산] 셀렉스 웨이 프로틴 파우더 후기

머슬팜 컴뱃 웨이 프로틴 초콜렛을 드디어 다 먹어서 다음 보충제인 셀렉스 웨이 프로틴 파우더 섭취 후 후기를 남기겠습니다. 머슬팜에 대한 후기는 아래 링크를 참고해주세요! 머슬팜 컴뱃 100% 웨이 프로틴 초콜렛(단백질 보충제) 2020년 되면서 새해 다짐으로 건강하게 살기라고 개인프로젝트를 진행중에 있습니다 현재 프로젝트는 실패할 확률이 크네요ㅠㅠ 프로젝트는 운동과 식단 위주로 계획을 세웠습니다 이 포스팅은 hasudoki.tistory.com 셀렉스란? 매일유업에서 제조하고 셀렉스라는 이름으로 건강 보조 식품 등을 판매하는 것 같네요. 광고 모델을 요즘 티브이에서 자주 보이는 전 골프선수 박세리네요 : ) 아는 사람이라 더 반갑네요. 셀렉스 셀렉스 웨이 프로틴 파우더 구매 인증 2020년 8월 2일에..

개발일기/Javascript

디버깅에 유용한 콘솔(Console) 사용법 알아보기

개발도중 브라우저에서 디버깅으로 주로 사용하는 명령어는 consoel.log이다.(데이터 값을 확인할때 주로 사용한다.) 브라우저에서는 console.log 말고 다른 명령어를 사용하여 더 효율적인 디버깅을 알아보자. console.dir() 이 명령어를 사용하기 위한 객체를 만들어 보자. const infomation = { name : 'doki', phone : 010-0000-1111, location : 'Seoul' } console.log(infomation) console.dir(infomation) Object 라고 명시적으로 표시를 해줘서 정확한 타입을 알 수 있다. console.table() 이 명령어는 서버 응답으로 받은 긴 데이터를 확인할때 유용하다. const infomatio..

책일기

[북리뷰] 빌 캠벨 실리콘밸리의 위대한 코치 - 에릭 슈미트

출퇴근하면서 틈틈이 봤던 책이다. 역시 초반에는 어떤 책인지 궁금해서 흥미로워 책 읽는 속도가 빨랐다. 언제나 그렇듯 딱 거기까지다. 초반부 흥미롭게 보고 중반부에는 흥미가 떨어지면서 지하철, 버스에서 핸드폰을 만지작 거리는 일이 많아진다. 예외도 있다. 추리소설, 에세이, 일반적인 소설 같은 경우에는 금방금방 읽힌다. 이제 잡소리는 그만하고 리뷰를 시작해보겠다. 빌 캠벨 실리콘밸리의 위대한 코치 실리콘밸리!! 이 단어 하나보고 이 책을 구매하게 되었다. 책을 보통 yes24, gmarket을 통해 구매하고 있다. 개발 서적 고르고 요새 베스트셀러를 한 번씩 들어가 트렌드에 맞춰서 1권씩 구매하고 있다. 베스트셀러였는지 경제서적이었는지 정확히 생각나진 않는다. 파란색 배경에 파란 야구 모자를 쓴 중년과 ..