HoneyPot 프로젝트에서 구독목록 리스트를 보여줘야 하는 과정이 있었는데 처음으로 해본 페이지네이션 구현하기를 남겨보려고 한다. 우선 완성본 근데 이제 미완성을 곁들인 .. [HTML 코드] //여기에는 카드에 들어갈 내용들을 작성 //pagination 버튼 생성 이전 {{ currentPage }} 다음 [script 코드] 1. 우선 data의 return 에 현재 페이지 수와 페이지 당 보여줄 카드 개수를 적어 준다. 2. computed에 현재 페이지에 표시할 카드 목록을 추출할 계산 된 속성을 입력 해준다. startIndex 변수에는 현재 페이지의 첫 번째 카드의 인덱스를 계산하고, endIndex 변수에는 현재 페이지의 마지막 카드 다음 카드의 인덱스를 계산한다. 즉, startInde..

vue에 폰트를 적용하기 위해서 CDN 방식을 이용하는 가장 간편한 방식이 있다. 근데 만약에 CND 을 찾지 못한다면 ? 어떻게 해야 할까 ㅠㅠ 프로젝트를 하는데 글씨체가 ttf 형식만 있어서 vue에 적용 해보려고 한다. [ TTF 파일 넣기 ] 우선 src -> assets -> fonts (폴더생성) 후 그 안에 ttf 폰트 파일을 넣어준다. [ App.vue ] 그 후 App.vue 로 가서 아래와 같이 적어준다. 이렇게 하면 전역적으로 사용할 수 있는 font를 생성해 준 것이다. 대신 단점.. 모든 ttf 파일을 하나씩 아래와 같이 쳐주어야한다... 내가 지금 가진 글씨체가 무려 9개니까 그걸 다 적어줘야한다는건 저 세상 귀찮은 일이다... (아직도 못했음) @font-face { font-..

[최종 완성본] [진행 순서] 네이버 아이콘 클릭 -> 네이버 로그인 창 -> 로그인하는 순간 -> 요청 값들을 가지고 -> redirect 페이지로 이동 -> Access Token 발급 -> 토큰을 이용해서 사용자 정보 가져오기 -> 사용자 정보가 DB에 있는지 확인 -> 없다면 회원가입 -> 있다면 자동 로그인 [네이버 아이콘 클릭] @click 이벤트를 만들어 놓고 아래의 method 실행 @click="naverlogin" 메서드 naverlogin() { let client_id = "본인 client_id" let redirect_uri = encodeURIComponent("redirct_url", "UTF-8") const state = this.generateRandomState() c..

3탄에서 응답으로 아래와 같은 토큰 값을 받았다. 이번에는 이 토큰을 이용해서 로그인 한 사용자의 정보를 가져오는 것을 진행해 보려고 한다. 2탄에서 언급한 vue 의 getToken() 메서드를 통해 진행되는 것이며 여러 번 나눠서 포스팅했지만 사실은 이게 모두 한 개의 요청으로 이루어진다는 사실... 아직 이 메서드 진행이 끝나지 않았다... 백앤드에서 받은 @GetMapping("/kakaologin/{code}") 중 '토큰을 요청하여 얻음' 까지 진행이 완료되었고 얻은 토큰으로 사용자 정보를 요청하려고 한다. // 코드를 빼와서 access token 을 얻어다 줄 것임 @GetMapping("/kakaologin/{code}") public HashMap kakaoLogin(@PathVaria..