눈으로 개발하는 블로그

이전에 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를 적..

블로그처럼 게시물들을 카테고리 별로 구분하여 표시되게 하고 카테고리 별로 좋아요(추천) 또는 조회 수가 많은 게시물 리스트를 가져오도록 하겠습니다. 게시판 카테고리 가져오기 1. C:\workspaces\nodeserver\testrestapi\boardapi.js 파일을 오픈하여 게시판 카테고리 전체를 리턴하는 라우터를 추가합니다. HTTP GET 메서드로 요청(Request)이 들어오면 게시판 카테고리 배열 전체를 리턴합니다. router.get('/categorys', function(req, res, next) { console.log("REST API Get Method - Read categoryList"); res.json({success:true, data:categoryList}); })..

블로그처럼 회원의 프로필과 별명(애칭)을 사용하여 게시물을 표현하기 위해서 프로필 이미지와 별명(애칭)을 추가하도록 하겠습니다. 회원 데이터 업데이트 및 회원 정보 함수 추가 1. 회원 정보에 추가될 프로필 이미지들이 저장되는 폴더를 생성합니다. C:\workspaces\nodeserver\testrestapi\public\asset 폴더에 member 폴더와 member 폴더 안에 profile 폴더를 생성합니다. 생성된 폴더에 회원 정보에서 사용할 프로필 이미지를 추가합니다. 2. C:\workspaces\nodeserver\testrestapi\memberapi.js 파일을 오픈하여 회원 배열에 있는 초기 데이터에 정보와 회원을 추가합니다. 초기 데이터에 프로필 이미지를 profile로 추가하고 별..

boardapi에서 사용하는 정렬, 필터, 페이지네이션을 모듈화하여 별도의 js 파일로 분리하고 require() 메서드로 모듈을 불러와 사용하겠습니다. 레스트 API 테스트를 위해 Datebase 없이 배열 기반으로 데이터를 관리하기 때문에 API를 처리하기 위해서 정렬과 필터가 필요합니다. Datebase로 연동하여 사용하시는 분들에게는 필요 없는 부분입니다. Module(모듈) 구조에 대해서 간단하게 설명하겠습니다. Module(모듈) 구조 module.export로 내보내고 require() 메서드로 모듈을 불러와 사용합니다. module.export로 함수, 객체, 원시 값들을 묶어서 내보내거나 개별로 내보낼 수 있습니다. // test.js 파일 // 원의 넓이 구하기 함수 const getC..

메인 페이지의 본문 영역을 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}} 카드 이미지..

먼저 router.get('/') 라우터에서 페이지네이션 처리 코딩과 정렬 처리 코딩이 있어 복잡해 보입니다. 그래서 페이지네이션 처리 코딩과 정렬 코딩을 분리하여 함수로 생성하고 적용하겠습니다. C:\workspaces\nodeserver\testrestapi\boardapi.js 파일을 오픈하여 페이지네이션 처리 코딩을 분리하여 함수로 생성합니다. // 게시물 페이지네이션 function pagination(totalCount, countPerPage, pageSize, pageNo) { // 페이지네이션 정보 var paginationInfo = {}; // 마지막 페이지 번호(전체 페이지 크기) var lastPageNo = Math.floor(totalCount / countPerPage) + ..

Filtering(필터링) ​ Database(데이터베이스)에서 지정된 칼럼을 비교문으로 필터링(쿼리 구문에서 Where 절) 하여 데이터를 반환합니다. ​ 레스트 API에서 필터링(Filtering)을 비교문으로 처리하기 위해서 Query String(쿼리 스트링)으로 URL 주소 뒤에 붙여서 사용합니다. ​ ​ REST API Multi-Column Filter(레스트 API 멀티 칼럼 필터) ​ 지정된 칼럼을 비교 값으로 비교합니다. http://localhost:9000/boards?writer=eq:tester1 -> 작성자가 'tester1'인 게시물만 필터는 다음과 같이 비교 대상 칼럼명과 비교문, 비교 값으로 구성됩니다. 칼럼명=비교문:비교값 조건문은 다음과 같습니다. 숫자, 날짜 비교문 ..

Sorting(정렬) ​ Database(데이터베이스)에서 지정된 칼럼을 기준으로 오름차순이나 내림차순으로 정렬(쿼리 구문에서 Order By 절) 하여 데이터를 반환합니다. ​ 레스트 API에서 정렬(Sorting)을 처리하기 위해서 Query String(쿼리 스트링)으로 URL 주소 뒤에 붙여서 사용합니다. ​ ​ REST API Column Sort(레스트 API 칼럼 정렬) ​ 기준 칼럼(sortby) 기준 칼럼(sortby)은 정렬할 칼럼을 지정합니다. ​ 정렬 방법(orderby) 정렬 방법(orderby)은 기준 칼럼(sortby)을 오름차순이나 내림차순으로 정렬 방법을 설정합니다. http://localhost:9000/boards?sortby=writer&orderby=desc -> 작..

레스트 API 페이징(Paging) 처리 후 Vue나 JSP, ASP, PHP, Javascript에서 게시판의 페이지네이션(Pagination)을 구현하기 위해서는 전체 크기, 전체 페이지 크기, 페이지 사이즈 등 추가 정보들이 필요합니다. 그럼 페이지네이션(Pagination) 구현에 필요한 정보들을 계산하여 라우터(router)에서 데이터와 함께 리턴하도록 처리하겠습니다. ​ ​ 페이지네이션(Pagination) 정보 객체 추가 ​ 1. C:\workspaces\nodeserver\testrestapi\boardapi.js 파일을 오픈하여 게시판 배열 전체를 리턴하는 라우터(router)에 추가합니다. ​ 전체 페이지 크기(마지막 페이지 번호) 전체 페이지 크기는 전체 크기를 페이지 크기로 나누고 ..

Pagination(페이지네이션), Paging(페이징), Page(페이지) ​ Database(데이터베이스)에서 페이징(Paging) 없이 데이터를 가져오면 수십 건부터 수백만 건까지 데이터를 반환하여 문제(DB 부하, 서버 부하, 네트워크 트래픽 부하 등)가 발생합니다. 그래서 데이터를 가져오기 전에 한 번에 가져올 데이터의 크기를 정해서 나누어서 가져오게 해야 합니다. ​ 이렇게 일정한 크기로 데이터를 나누는 것을 페이징(Paging)이라고 하고 일정한 크기를 가진 데이터를 페이지(Page)라고 합니다. 그리고 나누어진 페이지를 이전 페이지나 다음 페이지 또는 특정 페이지로 이동할 수 있게 처리하는 것을 페이지네이션(Pagination)이라고 합니다. ​ 일반적인 게시판에서 페이지네이션(Pagina..

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

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