방법 event.target.getAttribute(속성명); 사용 클릭 methods: { getAttribute(e) { console.log(e.target.getAttribute('data')); } }
분류 전체보기
Personal access tokens 생성 토큰 인증방식으로 변경하기 위해서는 토큰을 먼저 생성을 해야합니다. github.com 에서 setting 메뉴 선택 Developer settings 선택 Personal access tokens 선택 Note -> 토큰의 이름 설정 Expiration -> 만료기간 설정 Select scopes -> 적용시킬 범위 설정 (repo 선택) 위 세개의 항목을 설정한 뒤에 아래 생성을 누른다. 그러면, 토큰 암호 값이 생성이 된다. 그것을 잘 저장시켜 둡니다! Windows 자격 관리자 설정 제어판 자격 증명 관리자 선택 Windows 자격증명 클릭을 하면, 아래에 일반 자격 증명에 github.com 을 클릭 편집 클릭 암호 입력란에, 아까 생성한 토큰 암호..
Jetstream 설치하기 composer require laravel/jetstream php artisan jetstream:install inertia inertia라는 stack을 사용하겠다. 서버를 동작시키고 웹페이지로 확인해 보면, 우측상단에 Login과 Register가 생긴 것을 확인할 수 있다. Jetstream을 설치하면, 자동적으로 tailwind까지 설치되어 적용되는 것을 확인 할 수 있다. Email인증 회원가입 회원가입을 할 경우, Email을 인증해야지만 가입이 가능하도록 하기 위해서는 Jetstream의 기능을 사용하면, 쉽게 구현 할 수 있다. User.php class User extends Authenticatable implements MustVerifyEmail 우선..
detail components 게시글 클릭했을 때, 상세 페이지 만들기 Read.vue 기존 Read 컴포넌트에서 onClick 이벤트를 이용해서 detail 컴포넌트로 이동하는 함수를 실행시킨다. detail(i){ this.$router.push({ //params를 넘겨줄때에는 push할때 path보단 name을 사용 name: 'Detail', params: { contentId: i } }) } route.js import Detail from "./components/Detail"; const router = new VueRouter({ mode: "history", routes: [ { path: "/detail/:contentId", name: "Detail", component: Det..
데이터 준비 data/index.js export default [ { writer: '카리나', title: '에스파', content: '존예' }, { writer: '윈터', title: '에스파', content: '졸귀' } ] 원래는 DB에서 데이터를 받아와야하지만, 간단하게 데이터를 만들어놓고 import하는 방식으로 구현 READ components/Read.vue {{ value.writer }} {{ value.title }} {{ value.content }} script에서 import를 통해, data/index.js파일의 데이터를 가져오는 것을 볼 수 있다. 받아온 데이터를 변수로 지정해서 template에서 v-for을 이용해 테이블로 나열 router.js import Re..
Vue CLI 설치 npm install -g @vue/cli vue cli란, vue 프로젝트를 쉽게 만들어줌으로써, 빌드나 배포하기 쉽도록 도와준다. Vue 프로젝트 생성 vue create 프로젝트명 프로젝트가 생성이 되면, 위와같은 파일들이 생긴다 여기서 중요한 파일/폴더 Node_modules 프로젝트에 필요한 라이브러리등이 모여있는 곳 public html파일이나 기타 파일을 보관하는 곳 src 모든 소스코드들이 담기는 곳 package.json 라이브러리 버전, 프로젝트 설정을 기록하는 곳 프로젝트 서버 실행 npm run serve 위의 명령어를 실행하면 주소가 나온다. 그 주소를 URL에 넣으면 위의 사진처럼 정상적으로 화면이 나오면, 성공한 것이다. 프로젝트에 사용될 라우터와 boots..
