눈으로 개발하는 블로그

Spring Framework(스프링 프레임워크)를 기반으로 개발하면 MVC로 개발할 수 있다고 했는데 MVC가 어떻게 Spring Framework에 적용되어 있는지 간단하게 알아보겠습니다. 우선, Framework(프레임워크)부터 알아보겠습니다. Framework 란Frame(프레임 - 틀, 구조, 규칙) + work(워크 - 일)로 일(여기서는 애플리케이션 개발)을 하는 데 있어 효과적인 틀(여기서는 애플리케이션 개발에 필요한 프로세스 및 라이브러리)을 정의하고 제공합니다. 즉, 애플리케이션을 개발할 때 공통적으로 사용될 표준 프로세스, 구현에 필요한 클래스, 공통 라이브러리(화면 처리, DB 연동 처리) 들을 제공하여 동일한 개발 환경으로 개발을 할 수 있게 합니다. 그래서 프레임워크를 사용하면 ..

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

MVC(Model - 모델, View - 뷰, Controller - 컨트롤러) 패턴은 사용자 인터페이스(UI)와 Business Logic(비즈니스 로직)을 분리하여 사용자 인터페이스, 데이터, 제어를 분리하여 구현할 수 있게 해주는 Software Design Pattern(소프트웨어 디자인 패턴)입니다. Software Design Pattern(소프트웨어 디자인 패턴)은 과거 개발 과정에서 공통적으로 발생한 문제점들을 정리하고 해결해서 최적의 방법(해결책, 노하우)을 유형별로 분류한 것입니다. 그래서 응용프로그램의 개발 시 디자인 패턴을 적용하면 효율적이고 재사용 가능한 응용프로그램을 개발할 수 있습니다. MVC 패턴은 세 가지 구성 요소로 구성되고 구성 요소마다 독립적인 역할을 합니다. 세 가지..

Application(응용프로그램) 설계와 개발에 있어서 가장 대표적인 아키텍처 패턴은 n-tier 아키텍처 패턴으로 알려진 Layered Architecture Pattern(계층화된 아키텍처 패턴)입니다. 이 패턴을 표준으로 많이 사용되고 있습니다. (tier(티어)는 "층" 또는 "단"을 의미합니다.) 계층화된 아키텍처 패턴은 계층(Layer - 레이어)으로 분리하여 계층마다 특정 역할을 하게 합니다. 계층은 논리적, 물리적으로 분리되어 구성됩니다. 계층(Layer)의 수와 역할은 지정된 게 아니지만 응용프로그램의 설계와 개발에 있어 대부분 3-tier(3 계층) 또는 4-tier(4 계층)으로 계층을 구성합니다. 3-tier (3계층) Presentation Layer(프리젠테이션 레이어), Ap..

Project의 maven-war-plugin의 버전이 너무 낮으면 pom.xml에서 오류가 발생합니다. Could not initialize class org.apache.maven.plugin.war.util.WebappStructureSerializer pom.xml에서 "org.apache.maven.plugin.war.util.WebappStructureSerializer 클래스를 초기화할 수 없다"라는 오류가 발생하면 pom.xml의 의 에 maven-war-plugin을 추가하면 됩니다. org.apache.maven.plugins maven-war-plugin 3.2.2 만약, pom.xml의 가 없으면 와 를 먼전 추가하시면 됩니다.

게시물의 작성 날짜를 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..

말줄임(...)을 HTML 요소(element)의 크기에 맞게 지정된 줄 수로 나오게 하고 마지막 줄의 문자열 끝에 말줄임(...) 표시를 추가합니다. 다음처럼 5줄로 나오는 것을 지정된 줄 수로 말줄임(...)을 처리해 보겠습니다. 봄맞이 나들이 겸 댕댕이 퍼피와 함께 아침고요수목원 근처에 있는 애견펜션에 놀러 갔습니다. 아침고요수목원 근처라 찾아가기 쉽고 사장님도 친절하십니다. 여러 줄 말줄임(...) 표시하기 1. 이전 한 줄 말줄임(...) 처럼 .box에 overflow 속성 값을 hidden으로 하여 HTML 요소(element)의 크기를 넘어갈 경우 보이지 않게 하고 text-overflow 속성 값을 ellipsis으로 하여 문자열을 생략 처리합니다. 여러 줄을 처리하기 위해서는 white..

말줄임(...)은 여러 줄로 나오는 문자열을 HTML 요소(element)의 크기에 맞게 한 줄로 처리하고 문자열 끝에 말줄임(...) 표시를 추가합니다. 다음처럼 2줄로 나오는 것을 한 줄 말줄임(...)으로 처리해 보겠습니다. 봄맞이 나들이 겸 댕댕이 퍼피와 함께 아침고요수목원 근처에 있는 애견펜션에 놀러 갔습니다. 한 줄 말줄임(...) 표시하기 1. .box에 white-space 속성 값을 nowrap으로 하여 자동으로 줄 바꿈이 되지 않게 합니다. .box { white-space: nowrap; border: 1px solid black; width: 400px; padding: 10px 10px; } 2. .box에 overflow 속성 값을 hidden으로 하여 HTML 요소(elemen..

em를 쉽게 사용하기 위해서는 px(pixel - 픽셀)을 알아야 합니다. 그런데 폰트 크기(font-size) 속성 값을 px(pixel - 픽셀)이 아닌 pt(point - 포인트)로 사용할 경우가 많이 있습니다. 그래서 pt(point - 포인트)를 px(pixel - 픽셀)로 변환해 보겠습니다. W3C(World Wide Web Consortium - 월드 와이드 웹 컨소시엄)에서는 단위에 대한 크기를 지정해 두었습니다. 자세한 내용은 W3C 웹 사이트(https://www.w3.org/TR/css3-values)를 참조하세요. 위의 단위 테이블을 보면 pt(point - 포인트)와 px(pixel - 픽셀)이 in(inche - 인치)를 기준으로 크기가 지정되어 있는 것을 알 수 있습니다. in..

em em이란 HTML 요소(element)의 폰트 크기(font-size) 속성 값에 비례해서 결정되는 상대 단위입니다. HTML 요소(element)는 쉽게 HTML를 구성하는 태그(tag)라고 생각하시면 됩니다. HTML 요소(element)의 폰트 크기(font-size) 속성은 부모로부터 상속받을 수 있습니다. 1em은 HTML 요소(element)의 폰트 크기(font-size) 속성 값과 같습니다. 그래서 HTML 요소(element)의 폰트 크기(font-size) 속성 값이 16px이면 1em은 16px이 됩니다. (1em = 16px) 1em이 HTML 요소(element)의 폰트 크기(font-size) 속성 값과 같다고 했는데 그럼 container의 폰트 크기(font-size) ..

메인 페이지의 본문 영역을 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) + ..

이어서 연결 리스트에서 데이터로 노드를 찾고 찾은 노드에 데이터를 추가하는 함수를 추가하겠습니다. 연결 리스트에서 노드의 데이터를 찾기 위해서는 앞(front, HEAD와 연결된 노드(Node) 객체) 또는 뒤(rear, TAIL과 연결된 노드(Node) 객체)부터 노드의 데이터를 비교하여 노드(Node) 객체를 찾고 리턴합니다. // 연결 리스트에서 데이터를 찾는 함수 this.findNode = function(data, findDirection) { if (data == undefined || typeof data == "undefined " || data == null) { return null; } var node = null; // findDirection - front (default) if..

이중 연결(링크드) 리스트(Doubly Linked List) 이중 연결 리스트(Doubly Linked List)란, 데이터와 2개의 포인터로 구성된 노드(Node)들을 연결하는 구조입니다. 노드는 2개의 포인터(이전 포인터(prev), 다음 포인터(next))를 이용하여 이전 노드와 다음 노드와 연결됩니다. 첫 번째 노드(Node)에 이전 포인터(prev)는 HEAD가 아닌 NULL입니다. function()으로 Node 객체를 선언하겠습니다. Node 객체는 데이터와 이전 노드, 다음 노드로 구성합니다. 이전 노드와 다음 노드는 Node 객체를 참조하게 됩니다. // 노드 객체 var Node = function(data) { // 데이터 this.data = data; // 이전 노드 this.p..

이어서 연결 리스트의 맨 앞에 데이터를 추가하고 삭제하는 함수를 추가하겠습니다. 맨 앞에 노드를 추가하기 위해서는 HEAD와 연결된 노드(Node) 객체를 생성된 노드(Node) 객체의 다음 노드로 참조시킵니다. 그리고 HEAD에 생성된 노드(Node) 객체를 참조시킵니다. // 맨 앞에 데이터를 추가하는 함수 this.addFirstNode = function(data) { // 노드 객체 생성 var node = new Node(data); // HEAD가 NULL이면 연결된 노드(Node)가 없는 빈 상태(Empty)이므로 생성된 노드를 참조시킵니다. if (this.isEmpty()) { this.head = node; } else { // HEAD가 NULL이면 연결된 노드(Node)가 없는 빈..

연결(링크드) 리스트(Linked List) ​ 연결 리스트(Linked List)란, 데이터와 포인터로 구성된 노드(Node)들을 연결하는 구조입니다. 노드(Node)는 포인터를 이용하여 다음 노드(Node)와 연결됩니다. 스택(Stack), 큐(Queue), 덱/데크(Deque, Double-Ended Queue), 원형 큐/환상 큐(Circular Queue)는 버퍼(배열)를 사용하기 때문에 버퍼(배열)에서의 위치 값으로 데이터를 추가하고 가져갑니다. 버퍼(배열)가 아닌 포인터로 연결된 연결 리스트(Linked List)에서는 버퍼(배열)의 위치 값이 아닌 시작 포인터를 가지고 있습니다. 시작 포인터를 HEAD라고 합니다. 시작 포인트가 NULL이면 연결된 노드(Node)가 없는 빈 상태(Empty..

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

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 덱/데크(Deque - Double-Ended Queue)를 만들어 보겠습니다. ​ 덱/데크(Deque - Double-Ended Queue)는 양쪽 모두에서 데이터를 넣고 가져오는 구조입니다. ​ 프로그램에서는 버퍼를 사용하기 때문에 방향의 개념이 없습니다. 그래서 큐의 뒤에서 데이터를 넣거나 가져오기 위해서 rear의 위치를 계산하여 처리하고 큐의 앞에서 데이터를 넣거나 가져오기 위해서 front의 위치를 계산하여 처리해야 합니다. front와 rear의 위치를 사용하여 데이터를 넣거나 가져옵니다. [파란색 화살이 front, 주황색 화살이 rear] ​ 큐의 뒤에 데이터를 ..

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 스택(Stack)을 만들어 보겠습니다. ​ 스택(Stack)은 한쪽으로 데이터를 쌓아 올리는 구조입니다. 프로그램에서 데이터의 위치를 top이라고 합니다. ​[파란색 화살이 top] ​ 스택에 데이터를 추가하기 위해서 top의 위치에 1을 더한 후 데이터를 추가합니다. 그리고 스택에서 데이터를 가져오기 위해서는 top의 위치에 데이터를 가져오고 top에서 1을 뺍니다. top이 -1이면 스택에 데이터가 없는 상태이고 top의 위치가 스택의 마지막 위치와 같으면 더 이상 스택에 데이터를 넣을 수 없는 포화 상태입니다. ​ 스택(Stack) 객체 생성하기 ​ JavaScript에서 ..

이전 원형 큐(Circular Queue - 또는 환상 큐)처럼 JavaScript의 Array 객체의 메서드를 사용하지 않고 큐(Queue)를 만들어 보겠습니다. ​ 큐(Queue)는 한쪽으로 데이터를 넣고 다른 쪽으로 데이터를 가져오는 구조입니다. 그래서 데이터를 넣는 쪽을 rear라고 하고 데이터를 가져오는 쪽을 front라고 합니다. ​ 프로그램에서는 버퍼를 사용하기 때문에 방향의 개념이 없습니다. 그래서 데이터를 넣는 위치를 rear로 데이터를 가져오는 위치를 front로 사용합니다. 그리고 데이터를 넣는 것을 인큐(Enqueue), 데이터를 가져오는 것을 디큐(Dequeue)라고 합니다. [파란색 화살이 front, 주황색 화살이 rear] ​ 큐(Queue)가 생성되면 front와 rear의..

지금까지 만든 스택(Stack), 큐(Queue), 덱/데크(Deque) 객체를 보면 아시겠지만 Array 객체로 모두 구현이 가능합니다. JavaScript의 Array 객체는 덱/데크(Deque)라고 생각하시면 됩니다. 그리고 크기 제한을 하지 않으면 사용할 수 있는 메모리만큼 사용할 수 있습니다. ​ 만약 JavaScript의 Array 객체의 메서드를 사용하지 않고 직접 큐(Queue)를 만들어서 사용하면 무슨 문제가 생길까요? ​ 바로 데이터 Push와 Pop에 따른 큐(Queue)의 비효율적인 메모리 사용 문제입니다. ​ 큐(Queue) 데이터를 넣는 위치(rear)와 데이터를 가져오는 위치(front)가 다릅니다. 그래서 데이터를 넣고 가져오기를 반복하다 보면 더 이상 데이터를 넣을 수는 상..

JavaScript에서 Array 객체의 push() 메서드, pop() 메서드, shift() 메서드, unshift() 메서드를 사용하여 덱/데크(Deque - Double-Ended Queue)처럼 사용할 수 있습니다. ​ ​ 덱/데크(Deque - Double-Ended Queue) ​ 덱/데크(Deque - Double-Ended Queue)이란, 양쪽 모두에서 데이터를 넣고 가져오는 구조입니다. 덱의 모양은 큐의 모양과 동일합니다. 빨대나 호스를 생각하시면 됩니다. Array 객체의 push() 메서드, pop() 메서드, shift() 메서드, unshift() 메서드를 사용하여 ​덱/데크(Deque)에 데이터 넣고 가져오기 var deque = []; console.log(deque); -..