분류 전체보기
-
[vue]템플릿문법 (v-bind, class)react+vue 2022. 11. 9. 10:35
v-bind url을 변수로 바인딩 시켜주는 속성 naver export default { name: 'App', data: ()=>{ return { animal:"Monkey", alertMessage:"경고", imageSource:"", naverUlr:"" }; } } v-bind:을 쓰고 원래 태그의 속성인 src에 변수를 바인딩 시켜준다. v-bind를 생략하고 :콜론만 작성해도 무방하다 a태그의 href 속성에 변수를 대입하면 동적으로 href를 바인딩할 수 있다. 위의 예제에서는 naver주소를 바인딩 시켰다. 동적으로 class 부여하기 내가 제일 좋아하는 {{animal}} v-bind를 사용해 클래스를 동적으로 걸 수 있다. 객체로 클래스이름과 true/false여부를 지정해 주면 ..
-
[vue]템플릿 문법 (mustache, v-text, v-model, v-html)react+vue 2022. 11. 9. 10:10
mustache {{animal}} data속성에서 animal을 리턴 시켜준후 중괄호 두개로 감싸서 노출시킨다. v-text 태그안에 v-text라는 속성에 대입하여도 결과는 같다. 하지만 태그사이에 또다른 문자를 입력한다면 에러가 발생하여 mustache문법을 더 많이 사용한다. dfdfdf v-model {{animal}} input 태그에 값을 넘겨줄때 사용한다. 만약 사용자가 input태그의 값을 변경하면 animal의 값도 변경된다. v-html {{animal}} v-html속성으로 html을 작성할 수 있다.
-
[vue]뷰 개발환경 준비react+vue 2022. 11. 9. 09:25
Vue 설치 npm install -g @vue/cli 에러 npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/@vue npm ERR! errno -13 해결 sudo npm install -g @vue/cli 프로젝트 세팅 vue create [프로젝트명] vue3선택 cd [프로젝트명] npm run serve #프로젝트 실행 확장프로그램 vetur
-
[react][strokeDasharray][strokeDashoffset]도넛차트금융프로젝트 2022. 11. 7. 16:10
strokeDasharray setDasharray에는 배열이 들어간다. 첫번째 요소에는 원의 길이, 두번째 요소에는 비어있는 길이이다. strokeDashoffset setDashoffset에는 원이 시작되는 위치를 지정한다. 연두색이 시작되는 부분은 전체길이-빨간길이이다. 도넛차트 데이터 불러오기 const [inout,setInout] = useState(0.25); const [deposit,setDeposit] = useState(0.25); const [saving,setSaving] = useState(0.25); const [ensurance,setEnsurance] = useState(0.25); useEffect(()=>{ fetch("").then(res=>res.json()).the..
-
[react][setTimeout]슬라이드금융프로젝트 2022. 11. 4. 15:56
배경이미지 배열 const [bg,setBg] = useState( ["", "", "", "", "", "", "", ""]); 보여줄 데이터가 8개이므로 배경이미지도 8개로 맞춰준다. 배열 인덱스 상태 변수 const [index, setIndex] = useState(0); 초기 값을 0으로 맞춰준다. 로딩 상태변수 const [loading,setLoading] = useState(false); 데이터를 fetch로 받아온 후에 setTimeout을 실행할 것이므로 초기 값을 false로 설정한 후 fetch후 true로 변경해준다. 데이터 받아오기 useEffect ( () => { fetch("").then(res => res.json()).then(res => { setGoods(res); ..
-
[react][circle][svg]도넛차트 만들기금융프로젝트 2022. 10. 31. 16:11
svg태그와 circle태그로 원그리기 viewBox: svg 태그 내부의 좌표를 정의해준다 0 0 100 100이면 가로 0~100, 세로 0~100의 좌표를 정의한 것이다. cx: 원의 중심 x좌표 cy: 원의 중심 y좌표 r: 원의 지름 px단위다 fill: 원 내부 stroke: 원의 경계선 색 stroke-width: 원의 경계선 너비 stroke-dasharray: 얼마나 채울지, 얼마나 비울지 정의 stroke-dashoffset: 어디서부터 원을 시작할 것인지 정의 사분할 원 그리기 const Donut = ()=>{ const [inout,setInout] = useState(0.25); const [deposit,setDeposit] = useState(0.25); const [savi..
-
[mac][m2]스프링 설치하기잡동사니 2022. 10. 31. 14:55
실패한 방법 eclipse에 sts3 마켓플레이스에서 설치하기 eclipse에 sts4 + sts3 add on sts4 마켓플레이스에서 설치하기 sts4 응용 프로그램 설치하기 성공한 방법 sts3 응용 프로그램 설치하기https://spring.io/tools#suite-three Spring Tool Suite 3 wiki를 클릭한다. 원하는 버전을 다운로드 받는다. https://spring.io/tools#suite-three Spring Tool Suite 3 wiki를 클릭한다. 원하는 버전을 다운로드 받는다. 인텔용 jdk 다운받기 https://www.azul.com/downloads/?package=jdk 원하는 버전을 다운받는다. mac 환경변수 설정하기 터미널에서 ls -a 명령어로..