To Do 생성 가장 중요한 핵심 기능인 To Do를 생성하는 기능 Text Form 사용자의 Text를 받아서, To Do를 제작해야하니 Text Form을 이용한다. input태그안에 사용된 Vue 문법 정리 v-model v-model은 input태그에서 사용하며, 실시간으로 양방향 바인딩이 가능하도록 해준다. 이게 무슨말이냐면, data()에서는 template에서 사용될 변수를 선언해주는 부분인데, 여기서 title이라는 변수를 v-model로 바인딩하게 되면, text form에서 글을 작성하는 동시에 그 내용을 title에 넣어주는 것이다. text form에 "안녕"이라고 적으면, title은 ''로 초기화되어있지만 양방향 바인딩으로 "안녕"이라는 값이 title에 들어간다. data() ..
분류 전체보기
Vue 설치 Laravel 에서 Vue를 사용하기 위해서는 우선 npm을 이용해 설치를 해야합니다. npm install --save vue@next && npm install --save-dev vue-loader@next webpack.mix.js mix.js('resources/js/app.js', 'public/js') .vue() .postCss('resources/css/app.css', 'public/css', [ // ]); resources/js/components/ToDoList.vue // app.js import { createApp } from 'vue' import ToDoList from './components/ToDoList.vue'; const app = createApp..
전체적인 화면 간단하게 화면 구성은 상단의 Header 부분 카테고리를 변경할 수 있는 좌측의 Navbar 부분 메인 컨텐츠를 보여주는 중앙 Contents 부분 실제 Vue Components는 더욱 세부적으로 나뉘어져 있음 중요 기능 To Do 작성 새롭게 To Do를 추가할 수있는 기능 중요 관리 List 옆에 별모양을 클릭함으로써 중요 / 중요 x 처리를 할 수 있다. 그리고, 중요표시 한 것은 자동으로 List에서 자동적으로 맨위로 위치를 변경 시켜준다 . 또한, 중요 카테고리를 통해서 중요처리한 To Do만을 확인하고 관리하는 것도 가능 그룹 관리 Nav에서 그룹을 선택할 수 있음 그룹 생성이라는 버튼을 누르게 되면 Modal창이 나오게되어, 그룹을 생성할 수 있다. 상세설정 디테일 화면에서는..
EC2 인스턴스 생성 인스턴스 생성을 누르면 AMI 선택하는 곳이 나온다. AMI란, AWS 마켓플레이스에서 제공하는 것으로 이것을 다운 받는 것만으로도 주요 환경을 간편히 구축할 수 있다. Docker에서 이미지를 가지고 컨테이너를 제작하는 것과 동일한 것 같다. Bitnami의 LAMP를 선택 -> 프리티어도 무료로 사용 가능 인스턴스 유형 선택에서는 t2.micro를 사용 -> 프리티어 무료 인스턴스 세부 정보 구성에서는 인스턴스의 개수를 정할 수 있고 네트워크나 서브넷도 설정가능하고, 특정 AWS 정책을 사용하고 싶은 경우에는 IAM 역할을 설정할 수도 있음 스토리지는 기본 설정 보안 그룹 구성에서는 SSH는 관리자만이 원격으로 접속하게 할 수 있도록 자신의 IP로 설정을하고 나머지 HTTP나 H..
eval() eval 함수를 사용하면, 문자열을 넣어도 코드로 인식하게된다. eval("6 + 2") //8 문자열으로 넣게되어도, 코드로 인식하여 두 수를 더한 결과인 8이 출력된다. console.log(this.$refs.getData.innerHTML); 내가 eval을 활용한 것은 innerHTML 을 이용해서 ref속성의 값이 getData인 div태그의 값을 console,log에 출력하는 코드를 만들고 싶은데, 이때 getData 부분을 변수처리를 하고싶었습니당. const aa = `this.$refs.${this.getData}.innerHTML`; console.log(aa); 그래서 ` `와 ${ }를 통해서 처리를 할려했는데, 위의 코드대로하면 ` ` 안에 있는 것을 모두 stri..
Click me div를 클릭하면 aaa 함수를 실행 methods: { aaa() { console.log(this.$refs.getData); } } ref 속성으로 작성한 것은 vue 인스턴스의 $refs 속성을 이용해서 가져올 수 있습니다. vue에 내장된 속성은 앞에 "$"를 붙혀서 가져오게 됩니다. $refs 다음에는 가져오고자 하는 ref 속성의 값을 넣어주면 해당 ref 속성 값을 가지고 있는 태그값을 가져올 수 있습니다.
