ZOO CAN DO IT

자, 나는 길게 쓰는 걸 안좋아하니 짧고 간단하게 요약할 것이다. figma에서 component가 뭘까요?우선 그대로 해석하면 *component = 요소네, 말 그대로 요소임 ㅇㅇ.   ctrl+alt+K (혹은 우클릭 후 -> create component)로 컴포넌트를 만들어줍시다.보라색이 됐다면? 컴포넌트 된거임.  좌측에 'Assets'에서도 확인할 수 있다.그리고 해당 도형을 원하는 곳에 드래그 하면 옮겨와짐!효율만렙 good goooooooood  그렇다면, instance는 뭐임?그니까. 야매로 대충 설명해보자면..그림자 같은 역할이라 생각하면 됨~본체 팔을들면 그림자도 팔을 들잖슴?그런느낌 ^^  component된 것을 복사해서 붙여넣으면 instance가 됨.instance 구별법을..

오늘의 스터디! builder.io 사용기를 적어보겠다! 디자인한 것을 코드로 변환해주는 플러그인을 찾다가 builder.io를 찾게 되었는데, 이게 완전 사기다. 코드로 잘 바꿔주는 사이트 찾느라 시행착오가 꽤 있었지만ㅠ0ㅠ builder 짱짱맨... 어쨌든 builder.io는.. 한마디로 표현하자면! 디자인을 하면!!!!! 퍼블을 해준다고!!!다. 퍼블셔틀 builder.io를 만들어주신 분들께 감사인사를 전하며.. 사용기 작성 시작!~ 희희 https://www.figma.com/community/plugin/747985167520967365 Builder.io - AI-Powered Figma to Code (React, Vue, Tailwind, & more) | Figma Community ..

(주관적인 생각이 많습니다 🤔) 잘 알고 지내는 개발자에게 아래와 같은 말을 들은 적이 있다. 개발자 입문자는 '코딩'을 배운다고 하지만 디자인 입문자는 왜 '디자인'이 아닌 '피그마' 사용법을 배운다고 할까? 이 말을 듣고 나는 뒤통수를 한대 얻어맞은 것 같았다. 생각해보면, 'vs code' 사용법을 배운다고 하는 개발자는 본적이 없는 것 같다. vs code도 여러 기능이 있는 것으로 알고 있다. 피그마는 물론 기능이 매우 많아서 배워야 하는 건 맞지만, 툴의 사용법보다 사용자 경험, 레이아웃, 그리드 등의 스터디를 먼저 진행하는 사람은 많이 못본 것 같다. 나는 현재 UI/UX디자이너지만, 사실 사용자를 이해하는 '디자이너'보다 '툴 사용자'에 더 가까웠다. 사용자를 모르는 디자이너는 디자이너가 ..

컴퓨터를 포맷해버려서 모든게 날라간 나.... VUE개발환경 셋팅을 하고 이제 TERMINAL 세팅을 바꾸려 한다! 나중에 또 포맷될 수 있으니까 ★ 블로그에 혹시 모르니 적어두기 >_ Preferences > Settings 방법 ① shell window라고 검색 Powershell을 Comman Prompt로 바꿔주깅 그리고 나서 VSCode 끄고 다시 실행시키면 된다! 꼭 파란네모부분 눌러서 split Terminal을 누르고 powershell은 휴지통 버튼을 누르면 된다! 방법 ② User > Features > Terminal 누르고 좀 내리다보면 Integrated > Default Profile : Windows가 있는데 Powershell로 되있는걸 'Command Prompt'로 바꿔..

javascript 문법도 잘 모르고.. 공부를 안하다보니 까먹어서 javascript를 공부하고 있었다. 근데 응?? textContent? innerText과의 차이점이뭐지? 나도몰랑ㅋ 그래서 구글링을 해보다 알게되었다. 쉽게 설명하자면.. textContent와 innerText는 element.textContent < 이런식으로 쓰인다. ok? -------------------------------------------------------- 소스 나는 개똥 벌레 ① var example = document.querySelector('p').innerText; ② var example2 = document.querySelector('p').textContent; ------------------..

routes:[ {path:"/", component:ABC} ] 의 component:ABC 뒤에 meta:{title: '페이지이름'}} 을 넣고 router.beforeEach((to, from, next) => { if (to.meta.title) {document.title = to.meta.title} next( ) }) 를 넣으면! 와~~~~~~~~완벽해 ..! 끝. 출처 및 참고 😍 https://krcoder.com/p/121903

평소 깡html로만 코딩을 해왔던 나.. 그래서인지 이거만 치면 끝이었다. 하지만 나는 이제 vue를 쓰는 h.u.m.a.n.... fontawesome을 어떻게 사용하는지 알아보았다!! 그렇게 구글링을 해보던 도중..! 간단명료 깔끔하게 사용법이 정리된 블로그 발견! https://velog.io/@inryu/Vue.js%EC%97%90%EC%84%9C-fontAwesome-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 Vue.js에서 fontAwesome 사용하기 documentmain.js.vueFont Awesome무료로 사용할 수 있는 아이콘 타입은 대다수가solid - 속 꽉 찬 것regular - 속이 빈 것아이콘을 태그로 작성할 때, 아이콘의 타입에 따라solid 는 f..

👇👇👇 (이 분 블로그 설명이 잘 나와있는 것 같아 참고하였다) 👇👇👇 https://kdinner.tistory.com/77 Vue 관련 잘 몰랐던 개념 정리 1. CSS scope 2. vue custom event CSS scope Vue에서 css범위 설정에는 global, scope로 하는 방식 두 가지 있습니다. global로 설정하면 부모, 자식뿐만 아니라 모오오오든 파일에 적용되기 때문에 보통 가장 최.. kdinner.tistory.com VUE CSS 범위 설정 방식은 두가지가 있다고 한다. 'Global', 'Scope'. Global은 부모, 자식 말고 모-든 파일에 적용돼서 최상위에서 reset.css 등을 넣는다고 한다. 내가 딱 원하던 글이었다!!! 😋😋 css 넣는걸 터득해도..

나는.. 지금까지 깡 HTML만 썼던 밥오... 그래서 VUE를 써보자고 다짐했는데!!!!!!!!!!!!! CSS 어케써용? 나는 깡html로 코딩만 했을때.. css를

처음에 VUE를 봤을때, 너란 아이. 생소하기만 했다. 프레임워크? 라우터? 뭔소리여... 이런 생각 뿐... 절대 친해지지 못할.. 그런 아이. 마치.. 외국어 1도 모르는데 외국에 홀로 남겨진 느낌이었다.. (?) 하지만.. VUE에 관한 유튜브도 보고, 블로그도 보고, 구글링도 하면서... 이제 조금은 VUE에 대해 이해가 가기 시작했다. 아 근데.. 갑자기 쓰다보니 일기가 되버렸다 ;; 오늘 공부한 거 써야지... (잉여잉여) 🙄 ★ cli, router 설치법 ★ 그냥 이거 쓰셈 npm install -g @vue/cli npm install vue-router --save 하하 완벽해! 그리고 폴더를 만들어주자. vue create lalalalala 보라색부분 lalalala저거는 다른거로 ..