눈으로 개발하는 블로그

이전에 Node.js 레스트 API에 카테고리, 베스트 탑을 추가하였습니다. 이번에는 Node.js 레스트 API 서버로부터 주제별 베스트 탑을 가져와 부트스크랩 카드 UI를 사용하여 리스트 위에 추가하겠습니다. 주제별 베스트 탑 가져오기 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 주제별 베스트 탑 리스트를 저장하기 위해 data에 주제별 베스트 탑 리스트(bestTopList)를 추가합니다. data : function() { return { boardList : [], boardPagination : {}, categoryList : [], category : 0, bestTopList : [] }; } 2. 의 getBest..

게시물의 작성 날짜를 SNS처럼 현재 날짜를 기준으로 작성 날짜를 지난 시간으로 계산하여 표시되도록 해보겠습니다. 작성 날짜에 대한 지난 시간 계산을 Vue 컴포넌트의 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 DateFormat 스크립트 파일을 import로 가져와 적용하겠습니다. 작성 날짜 SNS처럼 표시하기 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 에 dateformat.js 파일을 import로 가져옵니다. // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue'; import * as bootstrap..

Vue에서 스크립트 파일을 생성하고 컴포넌트에서 가져와 사용하는 방법을 알아보도록 하겠습니다. Script Export & Import Vue에서 스크립트 파일(js)을 생성하고 다른 컴포넌트에서 가져가서 사용할 수 있도록 하기 위해서는 export로 내보내야 합니다. 스크립트 파일에서 원시 값, 함수, 객체를 생성하여 export로 내보낼 수 있습니다. 간단하게 원시 값으로 설명드리겠습니다. 함수, 객체 모두 동일합니다. 하나의 원시 값을 export로 내보냅니다. // test.js 파일 // PI 값 export const PI = 3.14; Vue 컴포넌트의 만약, 원시 값 명과 동일하지 않으면 "not found" 경고(warning)가 발생합니다. WARNING Compiled with 1 w..

이전 내비게이션 바(NavBar)를 통해 내비게이션을 다루어 보았습니다. 내비게이션(Navs) 컴포넌트의 기본적인 작동 원리는 내비게이션 바(NavBar)와 동일합니다. Bootstrap - Navs Bootstrap의 Navs(내비게이션)은 내비게이션(.nav)과 항목(.nav-item), 링크(.nav-link)로 구성되어 있습니다. 그래서 태그와 태그, 태그에 class를 적용하여 많이 사용합니다. 항목의 순서가 중요하다면 태그와 태그, 태그를 사용하시면 됩니다. frist item second item third item 링크(.nav-link)가 있는 태그에 .active가 있으면 내비게이션에서 선택된 항목이 되고 .disabled이 있으면 내비게이션 항목이 비활성화됩니다. 태그에 .nav를 적..

메인 페이지의 본문 영역을 Bootstrap의 List Group(리스트 그룹)을 사용하여 콘텐츠(게시물)가 나타나게 구성하겠습니다. 이전 Card(카드) UI에서 사용하던 메서드들은 그대로 사용하고 Card(카드) UI 대신 List Group(리스트 그룹) UI로 변경하겠습니다. Bootstrap - List Group Bootstrap의 List Group(리스트 그룹)은 리스트 그룹(.list-group)과 리스트 항목(.list-group-item)으로 구성되어 있습니다. 그래서 태그와 태그 또는 태그와 태그 또는 태그와 태그에 class를 적용하여 많이 사용합니다. frist item second item third item 리스트 그룹(.list-group)이 있는 태그에 .list-grou..

Vue에서 jQuery 없이 만들려고 하였으나 DOM(Document Object Model - 문서 객체 모델) 인터페이스를 사용하면 코딩도 길어져서 jQuery를 사용하도록 하겠습니다. jQuery jQuery는 빠르고 파일 사이즈가 작고 기능이 많은 자바스크립트 라이브러리입니다. 여러 브라우저에서 동일하게 동작되고 쉬운 API를 사용하여 HTML의 Document 탐색과 조작(생성/편집), 이벤트 처리, 애니메이션, Ajax와 같은 작업들을 쉽고 간단하게 할 수 있습니다. 즉, 브라우저에서 쉽게 HTML를 조작할 수 있게 설계된 크로스 플랫폼의 자바스크립트 라이브러리입니다. 자세한 내용은 jQuery 사이트(https://jquery.com)에서 확인하세요. "Download"를 클릭하면 npm으로..

Bootstrap의 Card(카드)에 페이지네이션 처리를 하도록 하겠습니다. 현재 Card(카드)는 Node.js 레스트 API 서버로부터 게시판 리스트를 가져옵니다. 이전 Node.js 레스트 API 데이터 업데이트를 통해 게시판 전체 리스트가 아닌 1 페이지(게시물에서 맨 앞부터 10개 - 조회, 정렬 조건이 없어 등록 순서로 가져옵니다.)의 게시물 리스트만 가져오게 변경되었습니다. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 " data-ke-type="html"> HTML 삽입 미리보기할 수 없는 소스 더 보기 버튼 UI 적용 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오..

Bootstrap의 Card(카드)에 이미지와 게시물 내용 말줄임 처리로 UI를 변경하도록 하겠습니다. 이전 Node.js 레스트 API 서버에는 초기 데이터를 블로그처럼 수정하였습니다. 그리고 게시물에 대표 이미지와 카테고리, 조회 수가 추가되었습니다. 현재 Card(카드) UI에 대표 이미지와 게시물 내용을 추가하겠습니다. 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈하여 Card(카드)에 카드 이미지(card-img-top)를 추가합니다. 카드 이미지는 카드 보디(card-body) 위에 추가합니다. {{boardItem.subject}} {{boardItem.writer}} 보기 {{boardItem.writedate}} 카드 이미지..

메인 페이지의 본문 영역을 Bootstrap의 Card(카드)를 사용하여 콘텐츠(게시물)가 나타나게 구성하겠습니다. ​ 먼저 Bootstrap의 Grid System(그리드 시스템)을 사용하여 Row columns(행(row)에 대한 열(col))을 설정합니다. ​ 1. C:\workspaces\nodeserver\testvue\src\views\Home.vue 파일을 오픈합니다. 태그에서 메인 페이지 상단 영역 다음에 콘텐츠를 표시하기 위한 영역으로 태그를 추가합니다. Bootstrap의 Grid System(그리드 시스템)을 사용하여 반응형으로 웹 브라우저의 가로 화면의 크기에 따라 행(row)에 몇 개의 콘텐츠가 나타나게 할지 설정합니다. col1 col2 col3 화면에 영역을 보이기 위해서는 에..

이어서 Carousel(캐러셀)의 설정을 변경하고 컨트롤 기능을 추가하여 커스터마이징을 하겠습니다. ​ ​ 슬라이드 페이드(fade) 처리 ​ Carousel(캐러셀)는 오른쪽에서 왼쪽으로 슬라이드가 됩니다. 슬라이드 대신에 페이드(fade)로 처리되길 원하신다면 class에 .carousel-fade를 추가하면 슬라이드가 페이드(fade)로 처리됩니다. 슬라이드 연속 진행 설정 ​ Carousel(캐러셀) 안으로 마우스를 들어오면(mouseenter) 슬라이드가 멈추(pause sliding)고 Carousel(캐러셀) 밖으로 마우스 나가면(mouseleave) 슬라이드가 다시 슬라이드가 진행(resume sliding) 됩니다. ​ 마우스의 이벤트(mouseenter, mouseleave)와 상관없이..

메인 페이지의 상단 영역을 Bootstrap의 Carousel(캐러셀)을 사용하여 가로로 슬라이드 시켜 여러 개의 상단 영역이 반복해서 나타나게 구성하겠습니다. ​ Bootstrap의 Carousel(캐러셀)은 CSS3과 JavaScript로 이미지나 텍스트 또는 콘텐츠 영역을 슬라이드 시키고 이전과 다음으로 이동시키기 위한 컨트롤과 위치를 표시하기 위해 Indicator(인디게이터)를 지원합니다. ​ Bootstrap의 Carousel(캐러셀) 구성은 다음과 같습니다. First Slide Second Slide .carousel class와 .slide class가 적용된 태그는 Carousel(캐러셀)의 전체 영역입니다. 그리고 data-bs-ride 속성을 통해 Bootstrap에 포함된 Java..

이어서 메인 페이지 기본 상단 영역에 비디오를 추가해 보겠습니다. 우선 비디오를 추가하기 위해 사이트에서 무료 비디오를 다운로드합니다. ​ ​ 무료 비디오 다운로드 받기 ​ 저는 비디오를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다. 이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요. ​ 다운로드한 비디오는 MOV 파일입니다. 태그에서 실행되게 하기 위해 MOV 파일을 MP4 파일로 변환해야 합니다. ​ ​ 비디오 MOV 파일을 MP4 파일로 변환 ​ 저는 다운로드한 비디오 파일을 어도비 크리에이티브 클라우드 익스프레스(Adobe Creative Cloud Express)를 사용하여 무료로 MP4 파일로 변환하였습니다. ​ ..

이어서 메인 페이지 기본 상단 영역의 오른쪽에 이미지를 추가해 보겠습니다. 우선 이미지를 추가하기 위해 사이트에서 무료 이미지를 다운로드하고 이미지의 배경을 제거합니다. ​ ​ 무료 이미지 다운로드 받기 ​ 저는 이미지를 어도비 스톡(Adobe Stock)에서 무료 라이선스로 다운로드했습니다. 이미지/비디오 무료 다운로드(https://carrotweb.tistory.com/150)를 참고하세요. 다운로드한 이미지는 JPG 파일입니다. JPG 파일은 이미지의 배경을 제거할 수 없습니다. 그래서 이미지 배경을 제거하고 JPG 파일을 PNG 파일로 변환해야 합니다. ​ ​ 이미지 배경 제거 ​ 저는 이미지 배경을 제거하고 PNG 파일로 변환하여 다운로드할 수 있는 Remove.bg를 사용하였습니다. 이미지 ..

메인 페이지 확인 ​ Vue 라우터인 C:\workspaces\nodeserver\testvue\src\router\index.js 파일을 오픈하여 기본 웹 경로('/')를 보면 Home 컴포넌트와 연결되어 있습니다. Vue Router 설치 시 기본으로 설치되는 컴포넌트입니다. import Home from '../views/Home.vue' const routes = [ { path: '/', name: 'Home', component: Home } ] Home 컴포넌트를 수정하여 메인 페이지 화면을 만들도록 하겠습니다. ​ 먼저 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다. n..

Bootstrap(부트스크랩)을 사용하여 웹 페이지에 내비게이션 바(메뉴 바)를 생성하겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 먼저 Semantic(시맨틱) HTML의 문서 구조가 되도록 기존 소스에 , , 태그를 추가하겠습니다. 기존 소스는 태그 안에 넣습니다. 이전 Bootstrap(부트스크랩)이 적용되었는지 확인하기 위해 추가한 버튼은 삭제하였습니다. {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 Home | About | Board | Score 2. 태그 안에 내비게이션 바를 생성하기 위해 태그를 추가합니다. 내비게이션 바를 생성하기 위해서는 태그의 clas..

Semantic(시맨틱)이란 "의미론적"이란 뜻으로 특정한 것에 의미를 부여하는 겁니다. 그래서 HTML에서 Semantic(시맨틱)이란 태그에 의미를 부여한 것입니다. ​ HTML에서 Semantic Element(시맨틱 요소)는 웹 브라우저와 개발자 모두에게 의미를 명확하게 설명해 주는 요소를 말합니다. 즉 태그에 의미를 부여하여 웹 페이지의 가독성을 높여줍니다. ​ HTML에서 태그나 태그는 내용에 대해 아무것도 알려주지 않는 의미 없는 요소입니다. 그러나 ~ 태그는 heading(제목, 표제)이란 의미로 사용되는 태그이고 태그는 연락처 정보의 의미로 사용되는 태그로 의미 있는 요소입니다. ​ 이처럼 HTML5에서는 웹 페이지의 문서 구조를 정의하는 의미 있는 태그들이 있습니다. 예제들은 태그를 설..

웹 사이트를 보다 보면 다양한 아이콘들이 버튼이나 메뉴, 폼에 적용되는 것을 보았을 겁니다. ​ Bootstrap(부트스크랩)에서는 무료로 고품질의 오픈 소스 아이콘 라이브러리로 1,500개 이상의 아이콘들을 제공하고 있습니다. ​ 자세한 내용은 Bootstrap Icons 사이트(https://icons.getbootstrap.com)에서 확인하세요. 검색하여 적용하는 방법 ​ 1. 검색란에서 사용할 아이콘을 검색합니다. 그리고 검색된 아이콘을 클릭합니다. 2. 아이콘은 SVG 파일로 다운로드하거나 태그의 class 속성(아이콘 폰트를 이용 )으로 적용하거나 SVG 태그를 복사하여 적용할 수 있습니다. 태그의 class 속성으로 사용하려면 뷰 프로젝트에 설치가 되어 있어야 합니다. ​ 설치 없이 CDN..

Bootstrap(부트스크랩)은 웹 사이트를 빠르고 쉽게 반응형으로 만들 수 있게 도와주는 HTML, CSS, JS 프레임워크입니다. ​ 자세한 내용은 Bootstrap 사이트(https://getbootstrap.com)에서 확인하세요. Bootstrap 5 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 Bootstrap를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save bootstrap 또는 버전 적용 npm install --save bootstrap@5.1.3 npm install에 옵션으로 --save를 추가하면 자동으로 package.json..

이번에는 axios(액시오스)의 인터셉터(interceptor) 중 응답(response)으로 처리해 보겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start axios(액시오스)의 인터셉터(interceptor) 응답(response) 추가하기 ​ 1. C:\workspaces\nodeserver\testvue\src\axios\index.js 파일에서 기존 axios.interceptors의 request로 처리한 부분을 주석 처리하거나 삭제합니다. 그리고 axios.i..

레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되면 재발급되도록 처리가 되었습니다. 그런데 모든 Vue의 메서드에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인해야 할까요? 그렇지 않습니다. ​ axios(액시오스)의 인터셉터(interceptor)를 이용하면 레스트 API 서버로 요청(request)을 보내기 전과 응답(response) 받고 처리 전에 공통으로 처리할 수 있습니다. ​ 다음은 axios(액시오스)의 인터셉터(interceptor) 기본 구조입니다. // Add a request interceptor // 요청 인터셉터 추가 axios.interceptors.request.use(function (config) { // Do..

이전 Node.js 레스트 API 서버에서 Refresh-Token으로 Access-Token이 재발급되게 처리하였습니다. ​ 이번에는 Vue에서 레스트 API 서버로 요청을 보내기 전에 Access-Token이 만료되었는지 확인을 하여 Access-Token이 만료되었다면 레스트 API 서버로 "/refresh"를 요청하여 Access-Token이 재발급되도록 처리하겠습니다. ​ Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start Login Store 모듈에 토큰 재발급 추가하기 ​..

Vue Router는 Vue.js의 공식 라우터입니다. Vue에서 Router는 Vue 컴포넌트와 웹 경로를 연결해 줍니다. ​ Vue Router(https://router.vuejs.org/)에 대한 자세한 정보를 참고하기 바랍니다. Vue 프로젝트에 Vue Router를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vue-router 그리고 Vue Router를 연동하기 위한 웹 경로와 Vue 컴포넌트를 연결하여 생성(createRouter() 메서드)하고 App.vue에서 사용(use() 메서드)하게 설정해야 합니다. ​ Vue에는 Vue Router에 대해 이런 일련의 작업들을 자동으로 처리해 Plugin을 제공합니다. Plugin을 설치하..