눈으로 개발하는 블로그

이전에 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 화면에 영역을 보이기 위해서는 에..

메인 페이지의 상단 영역을 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를 사용하였습니다. 이미지 ..

Adobe Creative Cloud Express - mp4 / mov-to-mp4 ​ 어도비 크리에이티브 클라우드 익스프레스 - MP4로 변환 (https://www.adobe.com/kr/express/feature/video/convert/mp4)에서 무료로 다양한 비디오 파일을 MP4 파일로 변환하여 다운로드할 수 있습니다. 다운로드하기 위해서는 어도비 계정이 있어야 합니다. 기능 메뉴를 보면 "MOV를 MP4로 변환"이 있는데 "MP4로 변환"과 동일합니다. 다음은 "MOV를 MP4로 변환" 페이지입니다. 둘 다 기능은 동일합니다. ​ ​ MOV 파일을 MP4 파일로 변환하기 ​ 1. 변환 페이지에서 비디오 파일을 드래그 앤드 드롭(Drag-and-drop - 끌어서 놓기) 합니다. 또는 "내..

Remove.bg ​ Remove.bg (https://www.remove.bg/ko)에서 무료로 이미지 배경을 제거하여 배경이 투명한 PNG 파일로 다운로드할 수 있습니다. 사용자 등록 없이 무료로 사용할 수 있습니다. 이미지 배경 자동 제거 ​ 1. 메인 페이지에 있는 "이미지 업로드"를 클릭하여 배경을 제거할 이미지를 업로드합니다. 또는 이미지 파일을 드래그 앤드 드롭(Drag-and-drop - 끌어서 놓기) 합니다. 파일이 업로드된 후 자동으로 배경이 제거된 이미지가 나타납니다. 2. 자동으로 배경이 제거된 이미지는 "다운로드" 클릭이나 이미지를 클릭하면 배경이 투명한 PNG 파일로 다운로드할 수 있습니다. 이미지 배경 제거 편집 ​ 배경이 자동으로 제거되다 보니 잘 못 처리되거나 처리되지 않는..

어도비 스톡 (https://stock.adobe.com/kr/)에서 무료로 이미지나 비디오를 받을 수 있습니다. 다운로드하기 위해서는 어도비 스톡 계정이 있어야 합니다. 상단 메뉴에서 "무료"를 클릭합니다. 무료 이미지(사진, 일러스트레이션, 벡터), 비디오, 템플릿(Photoshop, Illustrator, InDesign, Premiere Pro, Premiere Rush), 3D(모델, 조명, 자료)를 키워드로 검색하거나 범주별로 검색할 수 있습니다. ​ ​ 무료 이미지(사진, 일러스트레이션, 벡터) 검색 및 다운로드 ​ 1. 무료 스톡 에셋에서 무료 사진이나 무료 벡터를 클릭합니다. 에셋(Asset)이란 자산, 자원이란 뜻으로 어도비 스톡에서 라이선스가 적용되어 관리되는 자산을 말합니다. ​ 2..

메인 페이지 확인 ​ 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..

이어서 로그인 영역을 내비게이션 바로 이동시키겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 태그 안에 있는 class가 .headmenu인 태그를 태그 안에 있는 class가 .navbar-collapse가 태그 안으로 이동시킵니다. 그리고 태그 안에 있는 태그를 삭제합니다. {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 다음처럼 변경됩니다. Home About Board Score {{this.$store.state.loginStore.memberId}}님, 안녕하세요. 로그아웃 로그인 2. 이동한 태그의 class를 .headmenu에서 .navbar-info으로 변경..

이어서 모바일에서는 내비게이션 바를 감추고 보여주는 Toggle(토글) 버튼(3개의 선으로 되어 있어 이미지로 햄버거 버튼이라고도 합니다.)을 생성하겠습니다. ​ 1. C:\workspaces\nodeserver\testvue\src\App.vue 파일을 오픈합니다. 내비게이션 바에 brand(브랜드)인 다음에 태그를 추가합니다. 태그의 class에 .navbar-toggler가 추가되어야 합니다. 태그의 class에 있는 navbar-expand{-sm|-md|-lg|-xl|-xxl}를 기준으로 웹 브라우저의 가로 화면 크기가 설정된 크기보다 작으면 태그가 노출되고 크면 태그가 비노출됩니다. 즉, 모바일 사이즈에서만 태그가 노출됩니다. ​ 태그의 class인 .navbar-toggler-icon은 SV..

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..

세 번째로 Vuex PersistedState를 사용하는 방법을 알아보도록 하겠습니다. ​ Vuex PersistedState는 Local Storage(로컬 스토리지)를 사용하여 state를 저장하고 유지합니다. ​ ​ Vuex PersistedState 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vuex-persistedstate를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vuex-persistedstate 또는 버전 적용 npm install --save vuex-persistedstate@4.1.0 npm install에 옵션으로 --..

두 번째로 Cookie(쿠키)를 사용하는 방법을 알아보도록 하겠습니다. ​ Cookie(쿠키)는 웹 브라우저에 데이터가 저장됩니다. ​ Vue 3에서 Cookie(쿠키)를 사용하기 위해서는 vue3-cookies 라이브러리를 설치해야 합니다. ​ ​ Vue Cookies 설치하기 ​ 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. Vue 프로젝트에 vue3-cookies를 설치하기 위해 콘솔에서 npm install 명령어를 실행합니다. npm install --save vue3-cookies 또는 버전 적용 npm install --save vue3-cookies@1.0.6 npm install에 옵션으로 --save를 추가하면 자동..

웹 브라우저에서 새로고침(F5)을 하면 Vue가 초기화되면서 Vuex store의 state가 초기화됩니다. ​ ​ 페이지 새로고침 후 Vuex store의 state 초기화 ​ 1. Node.js 레스트 API 서버를 먼저 실행시킵니다. 콘솔을 실행하고 Node.js 레스트 API 서버 프로젝트가 있는 C:\workspaces\nodeserver\testrestapi 폴더로 이동합니다. 그리고 npm run 명령어를 실행합니다. npm run start 2. Vue를 실행시킵니다. 콘솔을 실행하고 Vue 프로젝트가 있는 C:\workspaces\nodeserver\testvue 폴더로 이동합니다. 그리고 콘솔에서 npm run 명령어를 실행합니다. npm run serve 그리고 로그인을 합니다. 3...

이번에는 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 모듈에 토큰 재발급 추가하기 ​..

Login을 하면 인증처리를 위해 레스트 API에서 JWT(JSON Web Token)를 이용한 Access-Token를 생성하여 처리하였습니다. 그러나 네트워크 해킹을 통해 Access-Token를 탈취하거나 브라우저의 쿠키(cookie)를 통해 쉽게 Access-Token를 탈취할 수 있어 보안에 취약합니다. ​ ​ 브라우저를 통한 Access-Token 탈취 ​ 브라우저에서 개발도구(F12)를 이용하여 Network로 Response(응답) 되는 정보를 확인할 수 있습니다. login의 Response 내용을 통해 accessToken을 확인할 수 있습니다. {"success":true,"accessToken":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJtZW1iZXJ..

전역 엑시오시 기본값(Global Axios Defaults)에 공통(Commone) 헤더(Header) 추가 ​ C:\workspaces\nodeserver\testvue\src\store\modules 폴더에서 login.js 파일을 오픈합니다. ​actions의 doLogin() 메서드에서 axios의 모든 요청에 적용되게 전역 기본값으로 헤더를 추가합니다. 헤더의 키는 "Access-Token"이고 값은 Login 후 응답받은 "accessToken"입니다. // 로그인합니다. async doLogin({ commit }, memberInfo) { let result = false; let resultErr = null; try { let res = await axios.post("http://l..