분류 전체보기

반응형
FrontEnd/Vue3

Vue3 To do list 만들기 (2)

이전 포스트에서 만든 todolist 객체에 테스트용 더미 데이터를 넣는다 let todolist = ref([ {id:1,sbj:'정보1'}, {id:2,sbj:'정보2'}, {id:3,sbj:'정보3'}, ]); 출력하고자 하는 위치에 테스트를 해본다 {{todolist[0].sbj}} {{todolist[1].sbj}} 이대로는 정적인 정보밖에 출력이 안되는 for문을 사용해보자 Vue3 (3만 되는지는 모르겠다 2는 안해봐서..) 에는 v-for 이 가능하다 이떄 v-bind:key 값이 필요한데 key는 중복되는지 아닌지를 식별하기 위함이다. sql로 치면 PK값 같은 느낌일지도? {{i.sbj}} 아무튼 ul 안에 for문과 key값을 적용해주면 li안에서는 객체 하나하나 i에 저장된다고 보면..

FrontEnd/Vue3

Vue3 To do list 만들기 (1)

TodoList 추가 기본 설정 bootstrap 을 사용하여 이쁘게 만들었다 todolist 배열에 넣기 위해서 이전 포스트에서 공부한 v-model을 활용하여 push 를 사용할것 var arr = ['a', 'b', 'c']; arr = ['a', 'b', 'c', 'd'] arr.push('d'); (push 예시) var Submit = ()=>{ todolist.value.push({ id: Date.now(), sbj:todo.value }); 를 사용하면 v-model로 받아온 todo 값을 객체내 sbj로 넣을 수 있다 하지만 이대로는 금방금방 리프레쉬 되는데 이를 방지하기위해 var Submit = (e)=>{ e.preventDefault(); todolist.value.push({ ..

카테고리 없음

Visual Studio Code 콘솔창 띄우는 방법

생각보다 콘솔창 여는방법을 모르시는분이 많길래 코드에서 ctrl + shift + ` (~키) 를 누르면 짜잔 코드에서 콘솔창이 열린답니다 :)

FrontEnd/Vue3

Vue3 데이터바인딩(양방) v-on:input 사용 예제

let updateName =(e)=>{//event 객체를 받아올때 console.log(e.target.value) } updateName이라는 함수를 생성하여 input박스에 v-on:input의 함수로 사용하였다 함수에 콘솔로 이벤트 객체의 타겟 밸류를 로그로 확인이 가능한데 이렇게 무언가 칠때마다 로그가 갱신되는것으르 볼 수 있다 그렇다면 이전 포스트에서 못다한 인풋상자와 텍스트박스의 값을 동일하게 연계시킬 수 있다 let updateName =(e)=>{//evebt 객체를 받아올때 name.value=e.target.value; } 콘솔로만 찍던 값을 name.value (ref값을 바꿀때는 .value가 필수이다)로 저장해주면 완성이다 하지만 단순히 Vue에는 이 기능을 자체적으로 지원하는..

FrontEnd/Vue3

Vue3 데이터 바인딩 사용예제

데이터 바인딩은 v-bind:ㅇㅇ (이때 ㅇㅇ에는 id, name, value 등과 같은 엘리먼트가 들어간다) 로 사용이 가능하다 {{name}} 버튼 위 코드에서는 input 안의 value값이 name과 연계되는건데 와 같이 name변수에 따라 value값이 바뀌는것을 볼 수 있다 V-bind:type 예제 {{name}} 버튼 type = number로 ref변수를 지정해주고 input안에 type ="text" 를 type="type"으로 변경한뒤 실행해보면 이렇게 넘버 input 형식으로 바뀌는것을 볼 수 있다. var updateName = ()=>{ name.value= "빡상" type.value="text" } 클릭시 type.value를 text로 바꾸고 클릭해보면 number -> t..

FrontEnd/Vue3

Vue3 ref&reactive 사용법 화면에 요소 변환하여 출력하기

{{name}} 버튼 이 코드로는 name변수에 BbakSsang이 저장되어있고, 버튼이 클릭되면 빡상 으로 바뀌어야 하지만 클릭을 한다고 화면에 출력이 바뀌지 않는다 하지만 콘솔로 확인해보면 name이 바뀐모습을 확인 할 수 있다. Vue 에서 화면까지 변환을 하려면 Ref 또는 Reactive를 사용해야한다. Ref 사용법 ref 를 vue로부터 가져온다 let name= ref('BbakSsang'); var updateName = ()=>{ name.value= "빡상" console.log(name) } 변수를 ref()로 묶어주고, 업데이트 하고자 하는 부분에서 변수.value로 사용해야한다. Reactive 사용법 reactive는 배열 또는 객체에 사용하기 좋은 방식인것 같다 import ..

FrontEnd/Vue3

VUE3 프로젝트 시작 방법

VUE3가 업데이트 되었습니다!! (뒷북) Vue를 설치하기 위해선 npm이 필요하죠?? NodeJs부터 깔아줍시다 노드 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org LTS버전으로 설치 ㄱㄱ! Vue 설치 Quick Start | Vue.js vuejs.org 1. 프로젝트명 2.TypeScript 사용 유무 3.JSX?? ... 모르는건 NO로 때리고 보자..! 앞서 만든 프로젝트 폴더로 이동하고 따라 입력하면

Unreal Engine

[이득우의 언리얼 C++] Chap.03 움직이는 액터의 제작

이득우의 언리얼 C++ 게임 개발의 정석 언리얼 엔진 학습에 목말라하는 게임 개발자에게 단비 같은 언리얼 엔진 프로그래밍 책이다. www.acornpub.co.kr

아크라시아 세카이

인파이터 1490 달성 ! 짱빌헌터 무기20 달성!

이렇게 보니까 품질 진짜 처참하다... 빨리 1500만 찍어놓고 아브1-4 본1부1로 계승 시키고 향후 방안을 몰색하던지 해야지... 인파이터가 참... 정흡을 가서 딜이 잘 안나와서 그런가 재미가 없다 쌓여있던 귀속명돌 명파 녹이면서 올리다보니 인파이터를 올리게 되었는데 애정이 안가서 고오오급 배럭 느낌으로다가 파괴강선 파밍이나 하라고 올려뒀다 내 짱빌헌터도 무기20 꾸역꾸역 피토하며 올려줬다.. 명파도 위명돌도 없이 너무 급하게 올리다보니 뭔가 이렇게 보니 썩 급하게 올린거 같지는 않지만.. 아무튼 인파 90찍어준다고 너무 못써주긴 했다. 본캐로 키우려는 욕심에 악세 품질은 이미 졸업이지만, 다시 상위유물무기 20강 해줄 생각하니까 벌써 머리가 아프네... 돈이 얼마여.... 아무튼 쿤켈에서 아파 죽..

Unreal Engine

회전과 이동, 다양한 수학 함수를 포함한 FMath

AddForce xyz축의 방향으로 force 힘을 주는것 움직이는데 사용 AddTorqueInDegress xyz축을 기준으로 회전에 힘을 주는것 FMath::[함수] 를 활용한 랜덤값 만들기 하지만 FRand 함수는 0~1 (양수) 이기 때문에 음수의 랜덤값을 출력해주지는 않는다 음수를 위해서는 FrandRange(-500,500) 으로 Range를 붙여준다면 두 숫자 사이의 값을 출력해준다

반응형
빡상이
'분류 전체보기' 카테고리의 글 목록 (6 Page)