VUE/ [Vue.js] 로그인 상태에 따른 이동 링크처리 & 로그아웃
로그인 상태에 따른 이동 링크처리 & 로그아웃
로그인 상태에 따른 이동 링크 처리 AppHeader에 로고를 누르면 ‘/’로 가게 설정이 되어있는데, /는 로그인페이지를 가르키고있다. 로그인 전에는 로그인페이지로 가고, 로그인 후에는 메인페이지로 넘어가게 바꿀 예정이다. components/common/AppHeader.vue에서 로고에 있는 to를...
VUE/ [Vue.js] 프론트엔드 테스트 Jest
프론트엔드 테스트 Jest
프론트엔드 테스트가 필요한 이유 예로 로그인페이지만 하더라도 일일히 화면에서 치고 확인하며 테스트를 해야한다. 그 수고를 덜기위해 테스팅을 활용하는 것이다. * id input 박스에 이메일을 입력했을 때 이메일이 맞는지 확인 *...
VUE/ [Vue.js] vue filters 적용
vue filters 적용
vue filters vue filter 공식문서 Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원한다. mustache 문법이나 v-bind때 쓸 수 있다. <!-- in mustaches --> {{ message | capitalize }} <!-- in...
VUE/ [Vue.js] router navigation guard 적용
router navigation guard 적용
router navigation guard router naviagion guard 공식 문서 vue-router가 제공하는 navigation guards는 주로 리디렉션하거나 취소하여 네비게이션을 보호하는 데 사용한다. 흔히 login 후 접속할 수 있는 페이지를 주소만으로 접속할 때 막아줄때...
VUE/ [Vue.js] Post Edit function 추가
Post Edit function 추가
게시글 수정 기능 추가 1. 게시물들 밑에 각각 수정버튼 생성 2. 수정버튼에 routeEditPage methods 정의, 연결 3. routeEditPage에서 postItem id를 인자담어 postsEditPage로 넘기기 4. PostEditPage.vue 생성, PostEditForm 생성해서 components로 연결...
VUE/ [Vue.js] Post delete 기능 추가
Post delete 기능 추가
Post delete 버튼 생성 components/posts/PostListItem.vue에 시간표시해주는 div안 밑에 삭제 icon을 추가한다. 삭제 icon을 클릭했을 때 실행되는 deleteItem함수를 생성해서 v-on click으로 연결한다 components/posts/PostListItem.vue <template> <li> <div class="post-title"> </div> <div class="post-contents"> </div>...
VUE/ [Vue.js] Post Add Page and function 추가
Post Add Page and function 추가
Post Add Page 이동 버튼 생성 MainPage.vue에 router-link를 추가 후 to는 “/add”로 바꿔준다. MainPage.vue <router-link to="/add" class="create-button"> <i class="ion-md-add"></i> </router-link> 아이콘은 아이오닉 아이콘으로 설정한다. pubilc/index.html에서 헤드에 링크를 추가해놨다. public/index.html <link...
VUE/ [Vue.js] 중간 정리
중간 정리
중간 정리 지금까지 진행한 내용 정리 1. 개발환경 설정 개발 툴 및 필요 프로그램 설치 API 서버 프로젝트 클론 2. Vue CLI 프로젝트 생성 Prettier ESLint jsconfig 3. 뷰 라우터...
VUE/ [Vue.js] API 분할
API 분할
api 함수들이 대부분 api/index.js에 들어있는 관계로 기능에 따라 분리하려 한다. instance 분리 지금의 로그인, 회원가입, 게시글 조회와 게시글 추가 함수들이 create instance 할 때 모두 인증값을 interceptor에 저장해 보낸다. 그런데...
VUE/ [Vue.js] Post Item 모듈화
Post Item 모듈화
가져온 노트 데이터의 부분을 컴포넌트로 나누려고 한다. components/안에 posts/폴더 생성 후 PostListItem.vue를 만든다. <li>부분을 가져온 후 <template></template>안에 넣는다. <li v-for="postItem in postItems" :key="postItem._id">여기서 postItems data와 data가져오는 함수는 없으므로 일단 지워주고...
VUE/ [Vue.js] Swagger API로 노트 데이터 생성과 조회
Swagger API로 노트 데이터 생성과 조회
Swagger Api 문서 Swagger Api (서버 localhost:3000포트에서 실행중)에서 노트 데이터 조회테스트를 위한 임시 노트 데이터를 만든다. 테스트할 ID의 인증 토큰을 Authorize버튼을 눌러 인증을 해준다. 해줘야 해당 테스트할 유저에게 노트 데이터를...
VUE/ [Vue.js] 쿠키 사용
쿠키 사용
쿠키 생성 화면을 새로고침 했을 때 Vuex의 state는 비워지게 되고 Token의 정보도 없어지게되서 게시판을 계속 볼 수 없는 인증상태가 되지 않으므로 그 정보를 cookie에 저장해야한다. cookie를 이용해 브라우저 저장소에 저장하면...
VUE/ [Vue.js] Loading Spinner 등록
Loading Spinner 등록
LoadingSpinner.vue 생성 현재는 로컬서버에서 데이터를 불러와 시간이 짧게 걸린다. 하지만 사이트가 구현이 되면 서버에서 데이터를 불러오는 시간이 걸릴 수도 있다. 그래서 데이터 로딩 될 때 로딩상태를 나타내는 로딩스피너를 추가한다. componets/common/에...
VUE/ [Vue.js] 로그인 인증 토큰, HTTP헤더에 토큰삽입
로그인 인증 토큰, HTTP헤더에 토큰삽입
인증 토큰 메인페이지에서 할 일 리스트를 조회하려면 유저의 권한이 필요하기 떄문에 로그인 토큰이 필요하다. 로그인 인증 토큰은 로그인 성공시 반환하는 promise의 data안에 들어서 반환 된다. 그 token을 받아서 할 일...
VUE/ [Vue.js] Axios Interceptor
Axios Interceptor
axios interceptor 서버에서 요청이나 받는 응답을 처리하기 전에 추가 로직을 넣을 수 있는 것이 axios interceptor다. Axios Interceptor 공식 문서 서버 요청에 로직 추가 axios.interceptors.request.use와 서버 응답에 로직 추가 axios.interceptors.response.use...
VUE/ [Vue.js] template, v-if 와 v-else
template, v-if 와 v-else
v-if 디렉티브는 조건에 따라 블록을 렌더링하기 위해 사용된다. 블록은 디렉티브의 표현식이 true 값을 반환할 때만 렌더링됩니다. v-else-if는 이름에서 알 수 있듯, v-if에 대한 “else if 블록” 역할을 합니다. 또한 여러...
VUE/ [Vue.js] router-link 셋팅, vuex 설치 및 셋팅
router-link 셋팅, vuex 설치 및 셋팅
1. router-link 2. vuex 사용 이유 3. vuex 설명 4. vuex 설치 및 연결 5. vuex store에 저장 (mutations) 6. vuex store값 접근 ($store.state.) 7. getters 선언 8. getters 이용...
VUE/ [Vue.js] axios 설정 및 설치
axios 설정 및 설치
axios 설명 axios는 HTTP 클라이언트 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 실행한다. 내부적으로 AXIOS는 직접적으로 XMLHttpRequest 를 다루지 않고 “AJAX 호출”을 할 수 있다. ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기...
VUE/ [Vue.js] api통해 axios 데이터처리, email validation
api통해 axios 데이터처리, email validation
SignupForm.vue 수정 api/index.js로 지정해놓은 api를 써서 signupform에서 입력한 userData를 보낼 예정이다. <template> <div class="contents"> <div class="form-wrapper form-wrapper-sm"> <!-- v-on directive를 이용해 폼의 submit 이벤트를 바인딩 submit시 페이지 갱신을 막는 prevent...
VUE/ [Vue.js] login, signup page 만들기
login, signup page 만들기
common component header 생성 page마다 동일한 component들은 공통의 component로 만든 후 page마다 components로 등록해서 쓰는 것이 코드가 간결하다. src/components폴더 안에 common폴더를 만든 뒤 AppHeader.vue를 넣는다. AppHeader.vue안 에는 page로 이동해주는 link를...
VUE/ [Vue.js] vue-router 설치 및 연결
vue-router 설치 및 연결
1. vue-router 설치 2. vue-router 등록 3. routes 생성 4. router-link, router-view 추가 5. 코드 분할 (code splitting) 6. 초기 진입 페이지 설정 (routing redirect 설정) 7. 없는 페이지로 접근할...
VUE/ [Vue.js] 파일을 절대 경로로 찾기 설정(jsconfig.json 설정)
[Vue.js] vscode내 jsconfig.json설정
jsconfig.json 설정 vscode에서만 지정 할 수 있는 절대경로 설정이다. 절대경로를 설정하지 않으면 매번 ../, ../../이렇게 상단에 올라가서 파일을 상대경로를 통해 찾아야 한다. 프로젝트 최상단 폴더에 jsconfig.json파일을 생성한다. 아래와 같은 코드를...
VUE/ [Vue.js] npm install 명령어 정리
[Vue.js] npm install 명령어 정리
NPM(Node Package Manager) NPM(Node Package Manager)은 명령어로 javascript 라이브러리를 설치하고 관리할 수 있는 Package Mangaer다. 참고로 NPM은 Node.js 설치될 때 같이 설치 된다. npm install명령어에는 지역(local) 설치와 전역(global) 설치 옵션이...
VUE/ [Vue.js] vue Project 생성 (vue CLI)
[Vue.js] vue Project 생성 (vue CLI)
Vue CLI Vue CLI는 Vue 프로젝트를 만들어주는 도구다. 아래주소는 Vue CLI 공식 페이지 주소다. 참고하면 좋다. https://cli.vuejs.org/guide/installation.html 아래 명령어로 설치한다. npm install -g @vue/cli 설치가 완료되면 vue라는 명령어가 인식이 된다....
VUE/ [Vue.js] ESLint, Prettier 설정
[Vue.js] ESLint, Prettier 설정
ESLint Overlay 끄기 (vue.config.js) Vue Cli 3.x 이후로는 ESLint에러가 화면에 overlay로 뒤덮이는 현상이 발생한다. 에러를 해결하지 않으면 아무것도 할 수 없으므로 생산성을 위해 옵션을 꺼준다. 프로젝트 최상단에서 vue.config.js라는 파일을 생성한다....
VUE/ [Vue.js] vue project intro
[Vue.js] vue New Project intro
vue Project TIL ‘Today I Learned’라는 오늘 배운 것을 기록하는 학습노트 웹 애플리케이션을 제작 할 예정이다. Vue 강의를 5번째 듣고 있다보니 기록하면 복습도 하고 나중에 기억이 안 나면 볼 수...
VUE/ [Vue.js] vue NodeJS setting (NVM)
[Vue.js] vue NodeJS setting (NVM)
NVM (Node Version Manager) 이 프로젝트에 쓰일 서버를 실행하려면 Node.js 버전을 10.16번대로 맞춰야 하므로, NVM (Node Version Manager)를 설치해서 사용하려고 한다. NVM은 프로젝트마다 Node.js버전이 다양할 때, Node.js 버전을 쉽게 바꿀...
VUE/ [Vue.js] vue MongoDB Cloud setting
[Vue.js] vue MongoDB Cloud setting
MongoDB Cloud 회원의 정보를 저장할 데이터베이스로 MongoDB를 사용한다. MongoDB를 직접설치 하는 대신 MongoDB Cloud를 이용한다. https://www.mongodb.com/cloud 회원가입 후 무료로 제공해주는 500MB만 사용한다. Network Access MongoDB Cloud랑 통신을 할 수 있게...