계박사의 코딩교실

html table 에서 CSS로 아래와같이 표현을 하려고하였지만 굉장히 힘들었습니다.

그래서 결국 이미지로 만들어서(아시는 디자이너분께 도움을 받았습니다. ㅋㅋ)

아래와 같이 image 태그에 넣어서 해결했습니다.

[Table A] 에 있는 데이터를 SELECT 하여 [Table B]의 데이터를 UPDATE 하는 경우가 있습니다.

그럴경우 간단하게 아래와같이 쿼리를 작성하여 처리하면 됩니다.

MySQL 에서 기본적으로 제공하는 MySQL Workbench 를 설치하여 이용할 경우에 update 시에 아래와 같은 오류가 날 수 있습니다.

Error Code: 1175. You are using safe update mode and you tried to update a table without a WHERE that uses a KEY column To disable safe mode, toggle the option in Preferences -> SQL Editor and reconnect.

이러한 오류가 났을 경우 UPDATE 를 하려면 2가지 방법이 있습니다.

1. SAFE MODE 끄기

옵션을 바꿔주시면 됩니다.

2. MySQL Workbench 옵션 변경

상단 메뉴의 Edit -> Preferences 메뉴 이동

SQL Editor 메뉴에 있는 "Safe Updates" 를 체크하여 옵션을 꺼줍니다.

MySQL 에서 테이블을 복사를 할 경우가 있습니다.

데이터 dump 를 위하여 테이블을 복사하거나 비슷한 테이블을 생성해야 할 때 등등 자주 사용됩니다.

1. 테이블이 없을 경우 복사

빈 테이블이 없어서 똑같이 테이블을 생성하면서 복사를 합니다.

2. 테이블이 있을 경우 복사

테이블이 있어서 데이터만 복사 할 때 사용합니다.

Bootstrap 의 Button CSS 입니다.

CSS 몇개의 추가로 버튼을 디자인 할 수 있습니다.

<a> , <input> , <button> 해당 태그에 버튼 CSS를 사용 할 수 있습니다.

색상도 기본 제공되는 class 로 바꿀 수 있습니다.

사이즈도 class 를 추가해주면 원하는 크기로 바꿀 수 있습니다.

버튼도 다양하게 변경이 가능하며 자세한 예제는 아래의 URL에서 확인이 가능합니다.

http://getbootstrap.com/css/#buttons

Bootstrap 에서 제공하는 Table CSS 입니다.

데이터 리스트를 보통 테이블 태그를 이용하여 구성을 할 때 디자인적으로 깔끔하게 class 를 추가하여 바꿀 수 있습니다.

보통 일반적인 html 코드로 table 을 구성하면 이러한 화면으로 보입니다. 기본 html 코드입니다.

하지만 테이블에 몇개의 class 만 넣어주어도 디자인이 이쁘게 바뀝니다.

class 에 넣은 값이 몇개 없지만 처음 테이블과 다르게 변한 것을 볼 수 있습니다.

테이블 class 속성에 stripe, hover, border 등 몇개만 주었을 뿐인데 느낌이 확 다릅니다.

자세한 예제는 아래의 URL에서 확인 하시면 됩니다.

http://getbootstrap.com/css/#tables

Bootstrap 에서 제공하는 Grid System (그리드 시스템) 활용 방법입니다.

그리드를 가지고 반응형 화면을 구성 가능합니다. 

화면을 가로 12개의 사이즈로 나누어 화면 해상도에 따라서 자동으로 맞추어 줍니다.

프로그램 개발자 입장에서 간략히 어떻게 작동되는지 알아두면 간단하게 추가나 수정이 가능합니다.

간단하게 기본 Grid 를 그려봤습니다.

소스를 웹화면에서 보면 이렇게 나옵니다.

총 12개의 칸을 가지고 숫자값을 가지고 나누어서 쓸 수 있습니다.

또한 화면 해상도의 변화에 따라 Grid 위치가 자동적으로 바뀌게 됩니다.

스마트폰, PC, 태블릿 등 각각의 화면에 맞추어 자동으로 바뀌기 때문에 반응형 웹으로 구성하기 좋습니다.

다양한 Grid System 의 옵션들입니다.

다양한 class 옵션들로 화면 구성이 가능합니다.

Offset 옵션으로 중간에 빈칸을 만들 수도 있습니다.

사이즈를4 주었지만 offset 4의 값을 주면서 중간에 4 사이즈 만큼 빈칸이 생기게 됩니다.

이번에 소개하려는 UI Framework 는 Bootstrap 입니다.

HTML, CSS, Javascript 로 이루어진 정형화되어있는 Web UI Framework 입니다.

Boostrap 같은 오픈 소스가 필요한 이유는 여러 개발자가 동시에 각각 맡은 화면을 개발 할 때 좋습니다.

혼자서 개발할 때는 개인의 소스 코딩 스타일이 있어서 바로바로 알아보기 쉽고 편하지만 자신이 개발한 코드가 아니면 사실 리딩이 힘듭니다.

그래서 UI Framework 를 쓰면 코딩이 규칙이 있기 때문에 유지보수나 인수인계 시에 효과적입니다.

http://getbootstrap.com/getting-started/#download

URL 로 들어가서 Boostrap을 다운로드 받아서 JS, CSS 등 import 하는 것과 똑같이 하면 됩니다.

Bootstrap 의 경우 jQuery 기반에서 작동하므로 jQuery 를 Import 한 아래쪽에 javascript를 추가해줍니다.

직접 예제를 보면서 Bootstrap 이 어떻게 작동하고 어떻게 활용되는지 직접 확인을 해보시면 금방 익히실수 있습니다.

http://getbootstrap.com/getting-started/#examples-framework

Web 을 개발하다보면 웹페이지 Loading 이 느린 경우가 있습니다.

특히 무거운 Plugin 이 있다거나 로직이 복잡한 부분에서 프로세스가 오래 걸리는 경우가 있는죠.

HttpWatch 프로그램으로 어느 부분에서 지연이 되는지 확인이 가능합니다.

https://www.httpwatch.com/

사이트에서 Basic Edition (Free) 버전을 받아서 설치하면 간단하게 Http 모니터링은 준비 끝.

설치가 끝났으면 Internet Explorer 를 실행해 봅니다.

그리고 [ 도구 ] 메뉴에 들어가면 HttpWatch Basic 이라고 메뉴가 추가된 것을 실행합니다.

실행하면 F12 키를 눌렀을 때 나오는 개발자 도구와 같은 창이 뜹니다.

이 화면에서 웹페이지가 로딩될 때 걸리는 시간과 함께 요청된 http url 주소가 표시가 됩니다.

Record 버튼을 눌러서 웹페이지를 이동하거나 F5 키를 눌러주면 아래와 같은 화면을 볼 수 있을 것입니다.

이번에 소개하는 jQuery Plugin 은 Dynatree.js 입니다.

트리 구조로 표현할 때 직접 구현하기 보다는 데이터만 트리구조로 해놓은 뒤 Plugin 을 이용하여 데이터 트리를 표현하는게 일반적입니다.

오픈 소스가 정말 많아서 이런저런 Tree Plugin 을 사용해봤지만 가장 좋았던 것은 Dynatree.js plugin 였습니다.

대부분의 트리 구조는 비슷하다. Json 데이터 또는 html 의 <li> 태그 등을 이용하여 트리 구조를 그리는게 대부분의 방식입니다.

Dynatree 도 마찬가지로 다양한 방법을 제공합니다.

Sample 들은 아래의 사이트에서 확인 가능합니다.

http://wwwendt.de/tech/dynatree/doc/samples.html

Dynatree 가 좋았던 점은 다양한 방법으로 Tree 를 그리기가 쉽습니다.

Sample 중 몇 개의 소스를 소개하도록 하겠습니다.

1. <li> 태그를 이용하여 트리구조 그리기 

아래와 같이 Server Side 에서 Json 데이터를 구현만 해주면됩니다.

처음 Tree 가 호출되었을 때 Ajax 로 호출하여 그리는 방식입니다.

Server Side 에서 트리구조 Json 데이터 리스트를 가져올 수 있도록 구현을 하면 됩니다.

보통 이런 경우 Server Side 에서 쿼리로 재귀쿼리로 Tree 구조를 가져온뒤 Dynatree Json 타입에 맞게 만들어 넘기면 됩니다.

3. lazy loading 방식으로 그리기

lazy loading 방식은 간단히 모든 Tree 구조데이터를 한번에 가져오는게 아니라 Tree 의 Children 을 실시간으로 가져오는 방식입니다.

2번째 방식인 ajax로 json 데이터를 가져오는 것은 같지만 처음에 전체 데이터가 아닌 큰 구조의 데이터라던지 부모 데이터만 가져온 뒤에 살을 붙입니다.

Ajax 로 실시간으로 해당 Node 의 Children 만가져오도록 구현을 하면 되기 때문에 

재귀쿼리로 Tree 전체를 만들어야되는 복잡도가 줄어들기때문에 괜찮은 방법입니다.

이번 프로젝트에서도 2번째 방법으로 개발을 하다가 3번째 방법인 lazy Loading 방식으로 변경하였더니 소스가 간결해 져서 좋았습니다.

실제로 부모 Node를 가져온 뒤 클릭할때마다 Node 의 Children 만 가져와서 붙이기때문에 쿼리도 더 간단해졌습니다.

3번째 방법이 가장 좋은 것은 아니다. 상황에 따라 필요한 방식으로 개발을 하는게 제일 좋습니다.