목록프론트/Vue.js (6)
윤개발
이번에 진행하는 프로젝트의 요구사항이 다음과 같습니다. gitlab에 public으로 Markdown(이하 md) 업로드 - 로그인 없이 볼 수 있는 페이지여야함 Vue에서 gitlab markdown을 로딩하여 보여줌 - gitlab 페이지 호출 이렇게 진행하면 다음과 같은 장단점이 있습니다. 장점 html을 수정할 필요 없이 바라보는 gitlab md 파일만 수정하여도 운영환경에 반영(재배포가 필요없음) 프로젝트 초기 자주 수정될 수 있는 Guide, Faq등은 md로 간단하게 표현 가능 단점 gitlab(또는 github) 에서 md를 가져오므로 정적파일을 로딩하는 것보다는 시간이 조금 더 걸림 md를 이용하다 보니 style 적용은 힘듬 Vue에서 Markdown을 불러오며 단점을 극복하기 위해 ..
필자의 경우 Axios를 이용해 서버에서 데이터를 변수에 넣고 그 데이터를 테이블로 보여주는 경우였다. # 이름 직책 팀 응답상태 {{ question }} 응답날짜 수정날짜 응답 수정 메일 전송 {{ index + 1 }} {{ line.name }} {{ line.position }} {{ line.teamName }} Loading... {{ text }} {{ line.responseDate != null ? line.responseDate.split('T').join(' ') : '' }} {{ line.modifiedDate != null ? line.modifiedDate.split('T').join(' ') : '' }} Edit 수정 요청 재전송
1. 하나의 클래스를 boolean 으로 적용하기 ... data() { return { previewFlag: false }; }, previewFlag가 true 값일때 hide 클래스가 적용된다. 2. 두개 이상의 클래스를 boolean으로 적용하기 previewFlag에 따라 어떤 클래스가 적용될지 다음과 같이 할 수 있다.
사용자가 email을 입력하는 input에서 벗어나면 자동으로 이메일 중복체크를 하도록 구현할 것이다. 1. View Email 이미 사용중인 이메일입니다. 이메일 형식이 다릅니다. @blur="함수명" 을 사용 : 포커스를 벗어나면(사용자가 input을 이탈하면) 자동으로 method가 실행된다. 2.Method async checkDuplicate() { //일단은 사용가능한 이메일로 true로 초기화 한다. this.availableEmail = true; //이메일 유효성을 검사한다. if (!validateEmail(this.email)) { //유효성이 틀리다면 data 값을 false로 한다. this.availableEmailForm = false; return; } else { this...
1.Axois 설치 백엔드의 api 호출을 위해 axios호출을 사용한다. npm i axios 2. API 폴더 & index.js 생성 api 구조화를 위해 methods에서 작성하지 않고 src 폴더 밑에 api 폴더를 만들고 index.js 에서 api 호출을 하게한다. index.js를 export 하는 구조로 사용하도록 한다. import axios from 'axios'; const instance = axios.create({ baseURL: 'http://localhost:8080', }); function registerUser(userData) { return instance.post('signup', userData); } export { registerUser }; axios ur..
email 성함 비밀번호 비밀번호 확인 직책 팀 이름 회원가입 1. View @ 는 v-on 과 같은 표현식이다. 폼 내부에서 버튼을 누르면 submit 이벤트가 form 으로 전송되고 v-on:submit이 실행된다. 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 2. Methods 이때 페이지가 새로고침되므로 .prevent를 통해 새로고침을 막고 methods의 함수롤 호출하게 한다. 함수를 구현하여 backend로 Axios 호출을 보내는 부분을 작성하면 된다.