눈으로 개발하는 블로그

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

이전 내비게이션 바(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..

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

이어서 로그인 영역을 내비게이션 바로 이동시키겠습니다. ​ 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..

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