초보 Java 웹 개발자들을 위한 학습 로드맵

개발 노트 2008. 6. 30. 11:11 posted by 무병장수권력자


출처 : http://kwon37xi.egloos.com/tag/spring/page/1

초보 Java 웹 개발자들을 위한 학습 로드맵

OKJSP에 자주 가서 요즘 자바 개발자들이 어떻게 살아가나를 보는 편인데, 아주 많이 반복적으로 올라오는 질문이 "대체 뭘 공부해야 하나요? 프레임워크는 Spring을 해야 할까요? iBATIS를 해야 할까요?" 하는 식의 질문들이다(이 질문은 사실 말이 안된다. 왜 그런지 읽다보면 나온다).

Java는 웹 관련 프레임워크들이 너무 다양하고, Ruby나 Python 같은 경우에는
RubyOnRailsDjanog 처럼 하나의 프레임워크 안에 기능별 프레임워크들도 모두 다 All in one 형태로 들어 있어서 혼란을 주지 않는 반면, Java는 각 영역별로 프레임워크가 모두 다르고, 또한 각 영역별로 존재하는 프레임워크들의 종류도 많아서 초보 개발자들에게 극심한 혼란을 주고 있다.

그래서 나름대로 Java Web 개발자들을 위한 학습 로드맵을 정리해 보았다.

1. Java 그 자체
많은 웹 개발자들이 마치 JSP 코드를 짤 줄 알면 그걸로 Java 웹 개발을 할 줄아는 것이라 생각하고 Java 그 자체를 소홀히 하는 것을 본다.
말도 안되는 소리이다. Java를 모르고서 Java 웹 개발을 제대로 한다는 것은 어불 성설이다. Java 그 자체를 먼저 공부하라.

특히 Java 5 문법을 숙지하길 권한다. 이제 우리나라도 점차 Java 5가 대세가 되어 가고 있다. 대부분의 프레임워크들과 WAS(JSP와 서블릿을 구동하는 서버)도 모두 Java 5를 기준으로 바뀌었으며, JVM 자체도 버전이 높을 수록 성능이 더 좋다.

2. JSP와 Servlet 그리고 Model 1
모델 1은, JSP 하나에 DB에 접속해서 쿼리를 날리는 등의 모든 업무적인 기능(Business Logic)을 넣고, 그 아래에 HTML 코드를 박아 넣는 식으로 개발하는 것을 의미한다.
아직도 많은 개발자들이 여기에 길들여져 있는데, 일단 JSP 자체에 대한 기본기를 익힌 뒤로는 재빨리 버려야 할 습관이다.

그리고 많은 개발자들이 Servlet을 무시하고 JSP만 하는 것을 보곤 하는데, Servlet에 대한 학습이 제대로 이뤄지지 않으면 더 나은 웹 개발이 곤란하다. Servlet에 대한 기초 개념을 확실히 잡길 권한다.

3. Model 2 - 프레임워크의 등장
JSP로 열심히 개발을 하다보니 프로젝트 규모도 커지기 시작하고, JSP 파일 크기도 수천줄에 달하는등 엄청나게 커진다.
그런데 이 JSP에다 두서없이 모든 기능을 다 때려 넣다보니 JSP마다 똑같은 기능들이 Copy&Paste로 들어가고, JSP 안에 들어 있는 Java 코드들에서 에러가 발생하면 찾아내서 디버깅 하는 일이 지옥같이 느껴지기 시작한다.

여기서 Model 2가 구원자로 등장한다.

Model 2는 말만 멋드러졌지 실제로는 간단한 개념이다.

JSP에서 수행하던 DB 쿼리 등의 작업을 Servlet에게 넘겨주고 JSP에서는 오로지 화면 출력만 담당하는 것이다.

Servlet에서 DB 쿼리등 화면 출력과는 상관없는 비지니스 로직을 일단 먼저 모두 수행하고, 그 결과를 request.setAttribute("key",결과객체);로 담은 다음 JSP 페이지로 포워딩(forward)을 하면 JSP에서는 request.getAttribute("key")로 그 객체를 받아서 화면에 뿌려주기만 한다.
이런 업무 수행단/화면 출력단의 철저한 역할 분리가 Model 2이다.

여기서 이러한 각 역할을 "MVC - Model View Controller" 라고 한다. 그래서 Model 2는 MVC와 동일한 의미로 사용하기 도 한다. MVC의 의미는 공부하면서 찾아보라.

이게 뭐가 좋냐고? 개발 기간이 좀 길어지고 프로젝트 규모가 쬐끔 커지고, 기존 프로젝트를 유지보수를 해보면 얼마나 좋은지 몸소 뼈져리게 느끼게 된다.

Model 2의 기능을 정형화해서 쉽게 구현하게 해주는 것이 MVC Framework들의 역할이다.
가장 유명한 Model 2 웹 프레임워크들은 다음과 같은 것들이 있다.

*
스트럿츠 1 - Struts 1
* 스트럿츠 2 - Struts 2
* 스프링 MVC - Spring MVC
* 기타 덜 유명한 Wicket, Stripes, JSF, Tapestry 등.

Struts 1은 MVC의 효시라고 할 수 있다. 우리에게 MVC라는 축복을 주기는하였으나, 나온지 오래된 만큼 낡은 개념들이 많이 녹아있고 쓸데 없이 복잡하고 배우기도 어려운 편이다.

오히려 Struts 2와 Spring MVC가 더 배우기 쉬울 것이며, 개발도 더 쉽다. 현재 추세는 Struts 2와 Spring MVC이다. 대형 포탈이나 SI 업체들도 Spring/Struts 2를 주로 채택하는 추세로 가고 있는 것으로 알고 있다.

둘 중 하나의 개념만 확실히 이해해도 다른 것을 배우는데 어려움이 별로 없으므로 그냥 둘중에 골라서 배우길 권한다. 나는 Spring을 선호한다.

그리고 MVC 프레임워크를 사용하기 시작하면서 View를 만드는 JSP에 대해서도 재조명이 시작된다. 기존에 Java 코드를 JSP에 직접 넣던 관행을 버리고 JSTL과 태그 라이브러리를 사용하거나 아예 JSP를 버리고 다른 템플릿 엔진으로 만들기도 한다. 이에 관해서는 맨 마지막에.

4. 퍼시스턴스 프레임워크 : JDBC 반복 작업에 짜증이 나기 시작하다.
현대 웹 개발에서 가장 큰 역할을 차지하는 것은 뭐니뭐니해도 단연 Database 작업이다.
지금까지는 아마도 JDBC에서 DB 커넥션을 맺고, 쿼리를 날리고 그 결과 ResultSet을 JSP로 넘겨주어서 출력하는 식으로 했을 것이다.
이미 다들 알고 있겠지만 JDBC를 사용하면 똑같은 코드가 굉장히 많이 반복해서 나온다. 한마디로 "삽질"의 전형이 JDBC 작업이다.
이것을 깨달은 많은 개발자들이 조금 어정짱하게 반복작업을 해결해주는 Util 클래스들을 프로젝트별로 만들어서 사용하곤 한다.
하지만, 물론 이에 대해 정형화하고 깔끔하고 훨씬 더 사용하기 쉬게 만들려는 노력이 이미 수년에 걸쳐 이루어졌다.

이렇게 DB관련된 작업을 정형화한 것들을 Persistence Framework 라고 한다.

* 아이바티스 - iBATIS : SQL Mapper - JDBC보다 더 쉽게 배우고, 더 편하게 사용한다.
*
하이버네이트 - Hibernate : 객체지향을 객체지향답게, 개발 기간을 엄청나게 단축시켜주다.

퍼시스턴스 프레임워크의 양대 산맥은 iBATIS와 Hibernate이다. 이 둘 모두 우리나라에 책이 나와 있다.
iBATIS는 SQL Mapper의 한 종류이고, Hibernate는 ORM의 한 종류이다.

이 둘의 차이는 iBATIS는 개발자가 SQL 쿼리를 직접 작성한 것을 객체에 매핑시켜주는 것이고, ORM은 DB 스키마와 객체간의 관계를 설정파일로 만들면 자동으로 쿼리를 만들어주는 것이다.

자, 이 둘을 보면 미국에서는 Hibernate가 인기가 좋고, 우리나라에서는 iBATIS가 사실상 SI 업계를 평정했다.
그러니까, 일단은 우리나라에서는 iBATIS를 공부하면 된다고 보면 된다.

이렇게 말하니까 마치 이 둘이 경쟁자 같은데, 사실 이 둘은 경쟁 상대라기 보다는 보완해주는 역할을 한다. SI에서 처럼 DB 테이블이 정규화 되어 있지 않은 경우에는 Hibernate같은 ORM을 사용하면 프로젝트를 말아먹을 수 있다.

iBATIS는 테이블 정규화에 무관하게, 개발자가 작성한 SQL을 객체로 매핑하기 때문에 DB 스키마가 마구 꼬여 있는 상황에서도 유연하게 작동하고, 개발자가 직접 SQL 튜닝을 할 수 있다는 장점이다.

그리고 Hibernate는 배우기가 굉장히 어려운 프레임워크이고 튜닝이 매우 어렵다. Hibernate책을 보면 캐싱을 통해 성능을 향상시키라고 하지만 캐싱은 iBATIS도 못지않게 잘 지원한다. 하지만 일단 배우면, 그로인한 코딩 생산성이 iBATIS가 감히 넘볼 수 없을 정도록 급격히 향상된다.

Hibernate는 DB 정규화가 잘되어 있는 웹 포탈 업체나 패키지 소프트웨어 제작시에 강력히 권장할만 하다.

5. IoC와 DI - 객체의 생성주기와 의존성을 관리하고 싶어지다
사실 내가 경험한 SI를 보면 4단계 까지만 가도 막장은 아닌 프로젝트라고 본다. 아직도 신규 프로젝트를 하면서도 Model 1에 JDBC로 코딩하는 것을 많이 보았기 때문이다.

앞서, MVC라는 형태로 웹 애플리케이션의 역할을 철저하게 분할해서 처리하라고 했었다.

이제 여기서 좀 더 역할을 분할하기 시작한다.

Database를 관장하는 코드(DAO)와 Database 처리 결과를 가지고 그외 비지니스 로직을 추가로 수행하는 코드(Service), 그리고 웹으로 들어온 요청을 받아서 비지니스 로직을 호출하고, 그 결과를 다시 웹(HTML 등)으로 내보내는 코드(Controller)로 분할을 하면 유지보수가 더 쉽고, DB가 Oracle에서 DB2 로 변경되는 식의 중대 변화가 있을 때도 DAO만 바꾸면 되는 식으로 변화에 대한 대처가 유연해 진다는 것을 깨닫기 시작한다.

이제는 각 역할별로 클래스를 분할하고 컨트롤러 객체는 서비스 객체에 서비스 객체는 DAO 객체에 의존해서 작동하도록 코드를 바꾸기 시작한다. 그리고 객체의 생성과 파괴 주기도 관리해야만 하게 된다. 객체를 하나만 생성하면 되는데 불필요하게 매번 new를 할 필요는 없으니까.

이렇게 객체의 생성/파괴 주기를 관리하고 객체간의 의존성을 관리해주는 프레임워크를 IoC 컨테이너라고 부른다.

1. Spring Framework
2. EJB 3.0

사실상 대세는 Spring Framework로 굳어졌다. EJB 3.0은 내가 안써봐서 뭐라 말은 못하겠다.

Spring MVC는 이 Spring Framework의 일부분이다.

Spring은 또한 AOP도 지원한다.

AOP 의 개념이 상당히 어려운 편이라서 개념 자체를 확실히 한마디로는 표현하지 못하겠다. 어쨌든 개발자들에게 가장 쉽게 다가오는 표현으로 하자면, AOP는 동일한 패턴으로 반복적으로 해야하는 일을 설정을 통해 자동으로 해주는 것이다.
이에 관한 가장 보편적인 예가 바로 트랜잭션이다.
지금까지는 아마도 비지니스 로직이 시작될 때 트랜잭션이 시작되고, 비지니스 로직이 끝날 때 트랜잭션을 종료하는 코드를 매번 작성해서 넣었을 것이다.
AOP를 사용하면, 비지니스 로직의 역할을 하는 메소드가 무엇인지 설정파일에 넣어주기만 하면 자동으로 메소드가 시작될 때 트랜잭션을 시작시키고, 메소드가 끝날 때 트랜잭션을 종료시켜준다. 물론 예외가 발생하면 트랜잭션을 rollback도 해준다. 따라서 Spring을 사용한 프로젝트에서는 트랜잭션 관련 코드를 볼 수 없을 것이다.

Spring 프레임워크는 기본적으로 IoC 컨테이너 역할을 하는 것이 핵심이다. 따라서 Spring을 사용한다고 해서 꼭 Spring MVC를 사용할 필요는 없다. Struts 2 + Spring + iBATIS 나 SpringMVC + Spring + Hibernate 등... 어떠한 조합이라도 가능하다.

6. 그 외
◈ Template Engine : JSP 보다 더 간결하면서 강력한게 필요해!
   * JSP + JSTL : Sun이 지정한 산업표준이다. JSTL은 당연히 쓰고 있으리라 믿는다.
   *
Freemarker : 가장 권장할 만하다.
   *
Velocity : 굉장히 배우기 쉽다. JSTL보다 더 빨리 배워서 쓸 수 있다. 가독성도 좋다. 그러나 Freemarker 만큼 편하고 강력하지는 못하다.
많은 사람들이 Java 웹 개발을 그냥 "JSP 개발"이라고도 부르는데, MVC가 도입되고, Freemarker 같은 다른 템플릿 엔진을 사용하게 되면 더이상 JSP는 코빼기도 안보이게 된다. 그러므로.. JSP 개발이라는 말은 쓰지 않았으면 좋겠다.

◈ Layout Engine
   *
Sitemesh : 헤더 푸터 처럼 동일 패턴이 반복되는 레이아웃을 관리해준다.

◈ XML 도우미 : W3C DOM은 너무 어렵고 난잡하다. 좀 더 편한 XML관련 개발을 원한다면..
   *
JDOM : Java 표준으로 지정됐다고 한다.
   *
DOM4J
둘 다 비슷하게 편한거 같다. 예전엔 JDOM을 썼었는데, 나 같은 경우 현재 프로젝트에서는 DOM4J를 사용한다. Hibernate가 DOM4J를 사용하기 때문에, 별도의 라이브러리 더 넣는게 귀찮아서.

◈ 단위 테스트
   *
jUnit : 코드를 철저하게 테스트하자.

◈ 소스코드 버전관리
   *
CVS
   * Subversion : 현재 대세는 Subversion
내가 최고 막장으로 꼽는 프로젝트는 아직도 FTP로 소스 관리하는 프로젝트이다. 이런 프로젝트에는 절대로 참여하지 않을 것이라고 굳게 맹세하고 또 맹세했다. --;
소스 코드 버전관리는 여러 개발자들이 동시에 개발할 때 소스코드를 저장하고 충돌을 관리해주며, 소스 변경 내역을 계속해서 추적해서 과거 소스로 언제든지 돌아갈 수 있도록 도와준다.
현재 대세는 Subversion이지만 CVS로도 버전관리의 이점을 충분히 만끽할 수 있다. 그리고.. 사실 CVS가 사용법을 익히기는 더 쉽다.

◈ 자동 빌드
   *
Ant : Ant 면 만사 Ok!
   *
Maven
아직도 javac 로 컴파일하고 있고, FTP로 파일 올려서 복사하고 있다면.. 이 모든일을 자동으로 명령 한방에 처리하도록 해야 실수도 적고, 퇴근도 일찍한다.
Ant로 빌드와 배포를 자동화 하자.

결론

내가 권하는 조합은
* SI 업체에서 일하는 경우 : Struts 2 혹은 SpringMVC + iBATIS + JSP/JSTL + 가능하다면 Spring Framework
* 웹 포털등과 같은 업계, 패키지 소프트웨어 제작 업체 : Struts 2 혹은 Spring MVC + Hibernate + Spring Framework + Freemarker + Sitemesh

'개발 노트' 카테고리의 다른 글

CPPTooltip 사용 예제  (0) 2008.07.01
X11에서 Pointer를 이동하는 예제  (0) 2008.07.01
HTML TABLE 태그 총정리  (1) 2008.06.25
[Spring Framework ①] 개요  (1) 2008.06.25
XP와 VISTA간의 파일 공유  (0) 2008.06.20


HTML TABLE 태그 총정리

개발 노트 2008. 6. 25. 12:17 posted by 무병장수권력자


출처 : http://kin.naver.com/detail/detail.php?d1id=1&dir_id=109&eid=AflE1+jL2y9YvOZQ6wm7ukI48DEQncLq&qb=dGFibGUgYm9yZGVy&pid=fbb3lsoQsCdsscDF4sdsss--439291&sid=SGGzQJN8YUgAAGCWO5Y

원어 : TABLE / 시작태그:필요 함 / 종료태그:필요 함
본문 내에 표를 만드는 태그입니다.
가장 많이 쓰이는 태그 이며, 홈페이지 내에서 많은 응용력을 필요로 합니다. 이 태그만 잘 사용해도 홈페이지 분위기가 확~~아주 중요한 태그입니다.

속성
align="값" (값 = left / center / right)
-----표의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
backgroungd="이미지 파일 경로"
-----배경이 될 이미지 파일의 경로를 지정해 줍니다. 3.0, 4.0 이상
bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0, 3.0 이상
border="픽셀"
-----표의 외곽선의 두께를 설정하며, 값이 "0"이면 외곽선이 보이지 않습니다.
bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
cellpadding="픽셀"
-----셀 경계와 셀 안의 내용과의 간격을 지정 3.0, 3.0 이상
cellspacing="픽셀"
-----셀과 셀 사이의 간격을 지정 3.0, 3.0 이상
cols="숫자"
-----표에 들어갈 열의 개수를 지정 4.0, 4.0 이상
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
frame="값" (값 = above / below / border / hsides / Lhs / rhs / vside / void)
-----표 외곽선의 형태를 지정 border="1" 이상일 때 사용할 수 있습니다. 3.0 이상

above 바깥쪽 경계선 중 윗쪽만 나타남
below 바깥쪽 경계선 중 아래쪽만 나타남
border 기본적인 외곽선
hsides 바깥쪽 경계선 중 위아래만 나타남
Lhs 바깥쪽 경계선 중 왼쪽만 나타남
rhs 바깥쪽 경계선 중 오른쪽만 나타남
vside 바깥쪽 경계선 중 좌우만 나타남
void 외곽선이 나타 나지 않습니다.

height="픽셀"
-----표의 높이를 설정
hspace="픽셀"
-----표 위아래로 표 외곽 내용들과의 간격을 설정합니다. 3.0 이상
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
rules="값" (값 = cols / rows / none / all / group)
-----표에서 셀 사이에 경계선을 설정합니다. 3.0 이상

cols 열 사이의 경계선만 그린다.
rows 행들 사이의 경계선만 그린다.
none 표 외곽선을 제외한 내부 셀 경계를 모두 지운다.
all 표 외곽선을 포함한 내부 셀 경계를 모두 그린다.
group <TBODY>, <TFOOT>등 그룹들 안의 경계선을설정

style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
width="픽셀/(%)"
-----표의 너비를 설정 하며, 브라우저를 대비한 비율을 퍼센트로 사용 하기도 합니다.

예제:

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table style="border: #000000 1px solid">
<caption align="TOP">style="border: #000000 1px solid"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="0">
<caption align="TOP">BORDER="0"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1">
<caption align="TOP">BORDER="1"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="4">
<caption align="TOP">BORDER="4"</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:

style="border: #000000 1px solid"
a b c
x y z

BORDER="0"
a b c
x y z

BORDER="1"
a b c
x y z

BORDER="4"
a b c
x y z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width="500" bgcolor="#999999">
<caption align="TOP">WIDTH="500" bgcolor="#999999"</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
<p>
<table border="1" width=80%>
<caption align="TOP">WIDTH=80% (500px의 80%)</caption>
<tr><td>a</td><td>b</td><td>c</td></tr>
<tr><td>x</td><td>y</td><td>z</td></tr>
</table>
</body>
</html>

결과:

WIDTH="500" BGCOLOR="#999999"
a b c
x y z

WIDTH=80% (500px의 80%)
a b c
x y z


<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" >
<caption align="TOP">FRAME 속성을 사용하지 않을 때 </caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VOID>
<caption align="TOP">FRAME=VOID</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BORDER>
<caption align="TOP">FRAME=BORDER</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=ABOVE>
<caption align="TOP">FRAME=ABOVE</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=BELOW>
<caption align="TOP">FRAME=BELOW</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
</body>
</html>

결과:

FRAME 속성을 사용하지 않을 때
a b c
x y z

FRAME=VOID
a b c
x y z

FRAME=BORDER
a b c
x y z

FRAME=ABOVE
a b c
x y z

FRAME=BELOW
a b c
x y z

<html>
<head>
<title>TABLE 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" frame=HSIDES>
<caption align="TOP">FRAME=HSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=LHS>
<caption align="TOP">FRAME=LHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=RHS>
<caption align="TOP">FRAME=RHS</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" frame=VSIDES>
<caption align="TOP">FRAME=VSIDES</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td></tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td></tr>
</table>
<p>
<table border="1" BOX>
<caption align="TOP">FRAME=BOX</caption>
<tr><td width="150">a</td><td width="150">b</td><td width="150">c</td> </tr>
<tr><td width="150">x</td><td width="150">y</td><td width="150">z</td> </tr>
</table>
</body>
</html>

결과:

FRAME=HSIDES
a b c
x y z

FRAME=LHS
a b c
x y z

FRAME=RHS
a b c
x y z

FRAME=VSIDES
a b c
x y z

FRAME=BOX
a b c
x y z


원어 : Table Row / 시작태그:필요 함 / 종료태그:필요 없음
표의 행을 만드는 태그 입니다.
<TABLE>안에 들어가며 <TR>태그가 들어갈 때 마다 행이 바뀌고 이 태그 안에는 <TD>가 들어가 셀을 만들어 줍니다.

속성
align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
bgcolor="값" (값 = 색이름 / SRGB)
-----배경 색상을 지정해 줍니다. 3.0, 3.0 이상
bordercolor="값" (값 = 색이름 / SRGB)
-----표의 외곽선의 색상을 지정해 줍니다. 3.0 이상
bordercolordark="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
bordercolorlight="값" (값 = 색이름 / SRGB)
-----표의 외곽선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
nowrap
-----한 행의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>TR 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
표에 행을 삽입한다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀐다.<p>
<table border="1">
<caption align="TOP">TR 태그의 정렬방식</caption>
<tr align="left" valign="top">
<th colspan="3" align="CENTER">정렬방식</th>
</tr>
<tr align="left" valign="top">
<td width="200" height="50">LEFT, TOP</td>
<td width="200" height="50" valign="middle">LEFT, MIDDLE</td>
<td width="200" height="50" valign="bottom">LEFT, BOTTOM</td>
</tr>
<tr align="center" valign="middle">
<td width="200" height="50" valign="top">CENTER, TOP</td>
<td width="200" height="50">CENTER, MIDDLE</td>
<td width="200" height="50" valign="bottom">CENTER, BOTTOM</td>
</tr>
<tr align="right" valign="bottom">
<td width="200" height="50" valign="top">RIGHT, TOP</td>
<td width="200" height="50" valign="middle">RIGHT, MIDDLE</td>
<td width="200" height="50">RIGHT, BOTTOM</td>
</tr>
</table>
</body>
</html>

결과:

표에 행을 삽입 합니다. 즉 TR 태그가 삽입이 될 때마다 행이 바뀝니다.

TR 태그의 정렬방식
정렬방식
LEFT, TOP LEFT, MIDDLE LEFT, BOTTOM
CENTER, TOP CENTER, MIDDLE CENTER, BOTTOM
RIGHT, TOP RIGHT, MIDDLE RIGHT, BOTTOM


원어 : Table Data cell / 시작태그:필요 함 / 종료태그:필요 없음
표 내에 셀을 삽입 하며, <TD> 태그는 반드시 <TR> 태그 안에 들어가야 합니다.

속성
align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
rowspan="숫자"
----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용. 3.0, 3.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>TD 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP">셀의 배경으로 그림</caption>
<tr>
<td width="170" align="left" valign="top">a </td>
<td width="170" align="center" valign="middle">b </td>
<td width="170" align="right" valign="bottom">c </td>
</tr>
<tr>
<td width="170" height="50" background="image1.gif"> </td>
<td width="170" height="50" background="image2.gif"> </td>
<td width="170" height="50" background="image3.gif" > </td>
</tr>
</table>
<p>
<table border="1">
<caption align="TOP">셀의 배경으로 색 </caption>
<tr>
<td width="170" height="50" align="left" valign="top">왼쪽 위 정렬</td>
<td width="170" height="50" align="center" valign="middle">가운데 정렬</td>
<td width="170" height="50" align="right" valign="bottom">오른쪽 아래 정렬</td>
</tr>
<tr>
<td width="170" height="50" bgcolor="#CCCCCC" align="left" valign="top">a</td>
<td width="170" height="50" bgcolor="#66CCFF" align="center" valign="center">b</td>
<td width="170" height="50" bgcolor="#FFCCCC" align="right" valign="bottom">c</td>
</tr>
</table>
</body>
</html>

결과:

셀의 배경으로 그림
a b c
     

셀의 배경으로 색
왼쪽 위 정렬 가운데 정렬 오른쪽 아래 정렬
a b c


원어 : Table BODY / 시작태그:필요 없음 / 종료태그:필요 없음
           Table FOOTer / 시작태그:필요 함 / 종료태그:필요 없음
           Table HEADer / 시작태그:필요 함 / 종료태그:필요 없음

테이블을 머리말, 본문, 꼬리말로 나누었을 때 <THEAD>는 머리말, <TBODY>는 본문에 해당하며 그리고 <TFOOT>는 꼬리말에 해당 합니다. 이 태그는 시작 태그만 사용해도 무방합니다.

속성
align="값" (값 = left / center / right / justify / char)
-----들어갈 내용의 정렬 상태를 설정 합니다. 3.0 이상
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0 이상

예제:

<html>
<head>
<title>T(HEAD, BODY, FOOT)태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1" width=500>
<caption>TBODY 태그</caption>
<thead>
<tr bgcolor="#FF9999"><td>THEAD<td>THEAD<td>THEAD</tr>
<tfoot>
<tr bgcolor="#99CCFF"><td>TFOOT<td>TFOOT<td>TFOOT</tr>
<tbody>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
</tbody>
<tbody>
<tr bgcolor="#0099CC"><td colspan="3">TBODY</tr>
<tr bgcolor="#0099CC"><td>TBODY<td>TBODY<td>TBODY</tr>
</tbody>
</table>
</body>
</html>

결과를 보면 TFOOT은 먼저 기술 하여도 제일 마지막에 나타나고 TBODY는 본문에 해당하는 중간에 나타납니다.

TBODY 태그
THEAD THEAD THEAD
TFOOT TFOOT TFOOT
TBODY TBODY TBODY
TBODY
TBODY
TBODY TBODY TBODY


원어 : Table Header cell / 시작태그:필요 함 / 종료태그:필요 없음
보통은 표에 가장 윗 줄에 위치하며 각 열의 제목을 나타낼 때 쓰며, 태그자 적용되면 글꼴이 굵게 되고 가운데 정렬이 됩니다.

속성
align="값" (값 = left / center / right / justify / char)
-----행에 들어갈 내용의 정렬 상태를 설정 합니다. 3.0, 3.0 이상
axis="셀 이름"
-----셀의 이름을 설정합니다. IE40, 4.0 이상
axes="관련 내용"
-----셀의 내용과 부합하는 이름을 나열합니다. IE40, 4.0 이상
backgroungd="이미지 파일 경로"
-----셀 안에 배경이 될 이미지 파일의 경로를 지정 3.0, 4.0 이상
bgcolor="값" (값 = 색이름 / SRGB)
-----셀의 배경 색상을 지정 3.0, 3.0 이상
bordercolor="값" (값 = 색이름 / SRGB)
-----셀 경계선에 색상을 지정 3.0 이상
bordercolordark="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들때 사용되는 어두운 색을 지정 3.0 이상
bordercolorlight="값" (값 = 색이름 / SRGB)
-----셀 경계선을 3차원으로 만들 때 사용되는 밝은 색을 지정 3.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
colspan="숫자"
-----두개 이상의 열의 공간을 하나의 열로 만들 때 사용 3.0, 3.0 이상
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
rowspan="숫자"
-----두개 이상의 행의 공간을 하나의 행으로 만들 때 사용 3.0, 3.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상
nowrap
-----셀 안의 줄바꿈 기능을 해제합니다. 3.0, 3.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----행에 들어가는 내용의 정렬 방식을 위아래를 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>TH 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP">TH 태그와 TD 태그 비교</caption>
<tr>
<th>TH</th>
<th>TH</th>
<th>TH</th>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
<tr>
<td width="150">TD</td>
<td width="150">TD</td>
<td width="150">TD</td>
</tr>
</table>
</body>
</html>

결과를 보면 TH 태그는 진하고 굵게 표시되며 가운데 정렬이 되고, TD 태그는 디폴트를 형성합니다.

TH 태그와 TD 태그 비교
TH TH TH
TD TD TD
TD TD TD
TD TD TD


원어 : table CAPTION / 시작태그:필요 함 / 종료태그:필요 함
이 태그는 <TABLE>태그 내에서만 사용 되며, 테이블에 대한 제목이나 설명을 기재 할 때 사용합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

속성
align="값" (값 = top / bottom / left / right)
-----caption 태그의 내용의 정렬 방식을 지정 3.0
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
class="클래스 이름"
-----스타일 시트의 서식을 적용 4.0, 4.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
title="제목"
-----해당 문자에 부여할 텍스트를 입력. 브라우저에서는 풍선 도움말로 표시 4.0, 4.0 이상

예제:

<html>
<head>
<title>CAPTION 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="top">CAPTION</caption>
<tr>
<td width="150">TOP</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="bottom">CAPTION</caption>
<tr>
<td width="150">BOTTOM</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="left">CAPTION</caption>
<tr>
<td width="150">LEFT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table><p>
<table border="1">
<caption align="right">CAPTION</caption>
<tr>
<td width="150">RIGHT</td>
<td width="150">caption 정렬 방식</td>
</tr>
</table>
</body>
</html>

결과는 caption 태그의 정렬 방식입니다.

CAPTION
TOP caption 정렬 방식

CAPTION
BOTTOM caption 정렬 방식

CAPTION
LEFT caption 정렬 방식

CAPTION
RIGHT caption 정렬 방식


원어 : table COLumn GROUP / 시작태그:필요 함 / 종료태그:필요 없음
테이블의 그룹에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

속성
align="값" (값 = top / bottom / left / right)
-----colgroup태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>COLGROUP 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border="1">
<caption align="TOP"> COLGROUP 태그 </caption>
<colgroup>
<col align="left">
<col align="center">
<colgroup span="2" align="right">
<tr>
<td width="200">Align="Left"</td>
<td width="200">Align="Center"</td>
<td width="200">Align="Right"</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
<tr>
<td width="200">a</td>
<td width="200">b</td>
<td width="200">c</td>
</tr>
</table>
</body>
</html>

결과:

COLGROUP 태그
Align="Left" Align="Center" Align="Right"
a b c
a b c
a b c


원어 : table COLumn / 시작태그:필요 함 / 종료태그:사용 금지
각 열에 대한 속성을 설정 하며, 시작 태그만 사용 합니다. HTML 3.2 표준이지만 Netscape에서는 Align 속성이 적용되지 않습니다.

속성
align="값" (값 = top / bottom / left / right)
-----col태그의 내용이 어느 쪽에 정렬할 것인지를 지정 3.0
id="id 이름"
-----class와 동일한 기능. 다만 홈페이지 내에서 한번만 명시 할 수 있습니다. 4.0, 4.0 이상
char="기준 알파벳"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
charoff="문자 개수"
-----align 속성값을 "char"로 했을 때 정렬을 기준으로 할 문자를 지정 HTML 4.0 표준
span="열 개수"
-----열의 개수를 지정 3.0, 4.0 이상
style="스타일 시트 입력"
-----적용될 스타일 시트를 지정 4.0, 4.0 이상
width="픽셀"
-----열의 셀 너비를 설정 4.0, 4.0 이상
valign="값" (값 = top / bottom / center / baseline)
-----열에 들어가는 내용들의 정렬 방식을 위아래 기준으로 설정 4.0, 4.0 이상

예제:

<html>
<head>
<title>COL 태그</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
</head>
<body bgcolor="white">
<table border=1>
<caption align="top">COL 태그</caption>
<colgroup>
<col align="right">
<col align="center">

<tr>
<td width="300">ALIGN="RIGHT"</td>
<td width="300">ALIGN="CENTER"</td>
</tr>
</table>
</body>
</html>

결과를 보면 다음과 같습니다...^^

COL 태그
ALIGN="RIGHT" ALIGN="CENTER"

'개발 노트' 카테고리의 다른 글

X11에서 Pointer를 이동하는 예제  (0) 2008.07.01
초보 Java 웹 개발자들을 위한 학습 로드맵  (0) 2008.06.30
[Spring Framework ①] 개요  (1) 2008.06.25
XP와 VISTA간의 파일 공유  (0) 2008.06.20
Orb.com Overview  (0) 2008.06.19


[Spring Framework ①] 개요

개발 노트 2008. 6. 25. 09:34 posted by 무병장수권력자


사용자 삽입 이미지
Spring Framework 개요


작성자 : 김문규
최초 작성일 : 2008. 6.25


1. 한마디로
엔터프라이즈 급의 웹 애플리케이션 개발을 위한 여러 기능(라이브러리)을 제공하는 프레임워크입니다.


2. 특징, 장점
 - Lightweight Container
 - Dependency Injection Pattern 지원
 - AOP(Aspect Oriented Programming) 지원
 - POJO(Plain Old Java Object) 지원
 - 일관된 Transaction 처리 방법 제공
 - 다양한 Persistance 관련 API 제공 (JDBC, iBATIS, Hibernate, JPA, JDO...)
 - Restlet과 연동 가능 (요고는 내 입장에서 특징임)


3. 관련 Web Site
http://springframework.org/


4. 맺음말
Spring 프레임워크는 최근 가장 많이 사용되고 있는 웹 프레임워크 입니다. 제공하는 기능이 방대하면서도 그 사용은 용이하기 때문입니다. Spring이 제공하는 기능 중에 가장 강력한 기능은 물론 IoC(DI)와 AOP 입니다. 이는 이어지는 포스트에서 아주 자세하게 다루어질 예정입니다.

그리고 최근 주목받고 있는 REST 아키텍쳐의 자바 구현체인 Restlet과 같이 사용할 수 있기도 합니다. Restlet 만으로는 모든 웹서비스를 구현하기에는 불편한 것이 사실입니다. 하지만 다행이도 Spring과 결합 모델로 구현이 가능하다고 합니다. (이 부분은 관련 포스트에서 다룰 수 있을지 잘 모르겠습니다.)

프레임워크라는 것은 일종의 트렌드입니다. 최근에 가장 인기 있는 프레임워크에 대해서 공부해 두는 것 쯤은 개발자에게 도움이 되지 않을 까 생각됩니다. 이후의 포스트들이 지적 호기심 충족에 도움이 되길 바랍니다.

그럼 이만! 쓩!

'개발 노트' 카테고리의 다른 글

초보 Java 웹 개발자들을 위한 학습 로드맵  (0) 2008.06.30
HTML TABLE 태그 총정리  (1) 2008.06.25
XP와 VISTA간의 파일 공유  (0) 2008.06.20
Orb.com Overview  (0) 2008.06.19
Windows Vista 탐색기 시작위치 변경  (0) 2008.06.19


XP와 VISTA간의 파일 공유

개발 노트 2008. 6. 20. 09:32 posted by 무병장수권력자


모르면 어렵고 알면 쉽다.

VISTA 에서 XP의 파일에 접근하는 것은 예전에 하던데로 하면 잘 된다.

문제는 XP에서 VISTA의 파일에 접근하는 것인데.... 숨겨진 설정이 하나 더 있었기 때문에 잘 안되었다.
Control Panel(제어판) -> Network and Sharing Center(네트워크와 공유센터)에서 File Sharing(파일 공유) 부분을 On으로 변경

근데, 이 설정으로도 안되는 경우가 있다. 이 때는 방화벽이 문제이기 때문에 방화벽을 해제해야 한다. (보안상의 문제가 있지만 아직 다른 방법을 모르겠다.)

사용자 삽입 이미지

'개발 노트' 카테고리의 다른 글

HTML TABLE 태그 총정리  (1) 2008.06.25
[Spring Framework ①] 개요  (1) 2008.06.25
Orb.com Overview  (0) 2008.06.19
Windows Vista 탐색기 시작위치 변경  (0) 2008.06.19
기본적인 Java 개발 환경 설정하기  (0) 2008.06.18


Orb.com Overview

개발 노트 2008. 6. 19. 17:09 posted by 무병장수권력자


Orb.com Overview

작성자 : 김문규
최초 작성일 : 2008. 6.19

 orb.com을 처음 접한것은 한 3년전 쯤이었다. 그 당시 멀티미디어 공유와 관련된 프로젝트를 진행하고 있었기 때문에 관심의 대상이었다. 그 당시에는 웹상에서 구현한 것이 특징일 뿐이지 장점이라는 생각은 하지 못했었다. 하지만, 웹의 세상이 와버린 지금 orb.com은 다시 보아야 할 주제라고 생각된다.

 무선 인터넷 접속이 조만간 저렴해 진다고 가정할 때(또는 견딜만한 정액 요금제가 출시된다고 할때) ORB는 IT friendly user들을 중심으로 급속하게 퍼져나갈 가능성이 있다고 생각된다. 이는 ORB가 사용자가 데이터 공유 기능이 있기 때문이다. CP들에게는 달갑지 않겠지만 냅스터가 유선인터넷의 가치를 크게 끌어 올렸던것처럼 이제는 ORB가 무선 인터넷의 가치를 크게 끌어 올리지 않을까 조심스럽게 추측해 본다.

그런 의미에서 orb.com에 대해 간략한 정리해 보았다. 진짜 간략하니 많은 기대는 금물!

주요 서비스

  • 자신의 PC에 저장된 동영상, 이미지, 오디오 등을 인터넷을 이용해서 스트리밍으로 공유하고 재생할 수 있는 서비스
  • 인터넷에 업로드가 필요 없음! 내 PC가 멀티미디어 트랜스코딩&스트리밍 서버로 동작
  • 자신의 PC에 ORB 프로그램을 PC에 설치 -> 백그라운드 실행 -> 외부에서 PC에 접속 -> 컨텐츠 리스트에서 선택해서 컨텐츠 감상
  • PC에서 재생가능한 모든 멀티미디어 컨텐츠를 휴대폰, STB, 다른 PC 브라우져를 통해 볼수 있게 함
  • 휴대폰, STB, 다른 PC에서 감상하기 위해서는 asx(window media), ram(real media), sdp(3GP media) 형식을 지원하는 스트리밍 플레이어가 탑재되어 있어야 함
  • 현재 지원 가능 클라이언트 : PC, 핸드폰(iPhone, Nokia N Series), PS3, Wii, xBox360, iPod

시스템 개요

  • 중앙 서버, PC, Client(휴대폰, STB, TV)로 구성됨
  • PC와 Client는 중앙 서버에 접속하여 컨텐츠 목록을 공유함 (Napster와 유사한 구조)
  • 일반적인 트랜스 코딩 관련 계산 부하가 없이 redirection만 하기 때문에 시스템 부하는 크지 않음
  • PC와 클라이언트간의 연결 관리는 중앙 서버가 담당함


협력사

  • Service Provide : 3 Group, BOLDstreeet, EMBARG Corporation, Vodafone D2 GmbH (German subsidiary), BESTA (Asian), DMUZE (Korea)
  • Device Manufacturer : AMD, CREATIVE, Hauppauge, Nokia Nseries, Amino communications
  • Service and Content : WINAMP, AOL, audible.com

Handheld Device 응용 사례

  • 해외 : iPodTouch를 이용해서 Wifi로 접속한 후 Live TV를 스트리밍으로 감상할 수 있다.
  • 해외 : iPhone을 이용해서 3G무선망에 접속한 후 PC 동영상 컨텐츠를 스트리밍으로 감상할 수 있다.
  • 국내 : Blackjack을 이용해서 3G 무선망(혹은 Wifi)에 접속한 후, 집에 설치한 라이브 캠코더 영상을 스트리밍으로 감상할 수 있다.

Screen Shot



Windows Vista 탐색기 시작위치 변경

개발 노트 2008. 6. 19. 13:43 posted by 무병장수권력자


1. regedit 실행하여 다음의 위치로 이동
HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\User Shell Folders
2. 'Personal' key 값을 원하는 폴더명으로 변경하면 된다.
3. 변경 후 비스타 재시작

'개발 노트' 카테고리의 다른 글

XP와 VISTA간의 파일 공유  (0) 2008.06.20
Orb.com Overview  (0) 2008.06.19
기본적인 Java 개발 환경 설정하기  (0) 2008.06.18
General Purpose Hash Function for C, C++  (0) 2008.06.11
설치형 블로그 Text Cube 설치 하기  (0) 2008.06.10


기본적인 Java 개발 환경 설정하기

개발 노트 2008. 6. 18. 11:49 posted by 무병장수권력자


기본적인 Java 개발 환경 설정하기

출처 :
http://blog.naver.com/dlawnd5/120029099603, 내용 부분 수정

1. 자바 설치
  1) JDK 다운 받기
 
http://java.sun.com/javase/downloads/index.jsp

  2) 환경변수 등록
  내컴퓨터->등록정보->고급->환경변수->사용자변수/시스템변수  (추가 또는 편집)

  JAVA_HOME
             C:\Program Files\Java\jdk1.x.x_xx
  PATH   (시스템/사용자)
             %JAVA_HOME%\bin;%JAVA_HOME%\lib\tools.jar
  CLASSPATH
             C:\Program Files\Java\jdk1.x.x_xx\jre\lib;

  3) 확인
  시작->실행->cmd
             java -version
             javac  -version

2. Eclipse 설치
  1) Eclipse 다운 받기
  
http://www.eclipse.org/downloads/
   j2ee 버젼으로 그냥 다운! 웬만한 플러그인이 다 설치 되어 있어서 편함

  2) 압축을 풀고 eclipse.exe 실행하면 됨.

3. mySQL 설치
  1) 다운 받기
  
http://dev.mysql.com/downloads/
   MySQL community Edition : Current Release
   MySQL Tools : mySQL GUI Tools
   Drivers and Connectors  : mySQL connector/J (JDBC)

   2) 설치
   mySQL을 설치 => GUI tools 설치
   mySQL connector 압축 풀기

   3) 이클립스 연동
   프로젝트 Properties -> Java Build Path -> Libraries -> AddExternal JARs...
   mysql-connector-java 의 jar파일 추가.

   4) 연결 및 사용
    DriverManager.registerDriver(new org.gjt.mm.mysql.Driver());
    Connection conn = DriverManager.getConnection(url, id, psw);
    Statement stmt = conn.createStatement();
    (url - jdbc:mysql://localhost:3306/xxxx)
    // insert,update
    stmt.executeUpdate(query);
    // select
    ResultSet rs = stmt.executeQuery(query);
    conn.close();
    stmt.close();

4. tomcat 설치
  1) 다운받기
  톰켓 - 
http://tomcat.apache.org/
  플러그인 - http://www.eclipsetotale.com/tomcatPlugin.html

  2) 환경변수 등록
  내컴퓨터->등록정보->고급->환경변수->사용자변수/시스템변수  (추가 또는 편집)

  CATALINA_HOME
            (본인의 톰캣 설치 디렉토리로!)

  3) 설치    
  톰켓 - 압축 풀기.
         - bin/startup.bat 실행 후
         -
http://localhost:8080/   <== 되는지 확인
        - shutdown.bat 으로 종료.
  플러그인
         - eclipse\plugins에 복사  

  4) 이클립스 연동
         고양이 아이콘이 추가 되었는지 확인
         메뉴 Window -> Show View -> Other -> Server -> Servers
         아래쪽에 Servers 탭 확인
         아래쪽에서 마우스 오른쪽 버튼 -> New -> Server
         Server 선택(Next) -> tomcat 위치 지정
         아래쪽 Server 추가된 것 확인.



General Purpose Hash Function for C, C++

개발 노트 2008. 6. 11. 22:53 posted by 무병장수권력자


General Purpose Hash Function for C, C++

C나 C++로 Hash Function을 사용할 때 도움이 되길 바란다.
성능은 거의 차이가 없어 보인다. 이름이 맘에 드는 놈으로 잘 골라서 쓰길...

----------------------------------------------------------------------------------------------------------------
C Implementation
----------------------------------------------------------------------------------------------------------------


----------------------------------------------------------------------------------------------------------------
C++ Implementation
----------------------------------------------------------------------------------------------------------------



Google App Engine Overview

Google 2008. 6. 11. 15:24 posted by 무병장수권력자


Google App Engine Overview

작성자 : 김문규
최초 작성일 : 2008. 6.11

1. 무엇인가?
Google App Engine는 웹 상에서 응용 서비스를 제공하기 위한 개발/서비스 플랫폼이다.
기존에도 웹호스팅의 형태로 웹 서비스를 제공하기 위한 인프라를 구축하고 이를 임대하는 형태의 비지니스는 존재했다. 그럼 무엇이 다른건가?

다음의 예를 보자.
 1) Apache Web Server + Apache Tomcat + MySQL
 2) IIS + BEA Web logic + Oracle 10g
 3) Google Web Server+ Google DataStore(BigTable/GFS) + Google Image + GMail + Google Memcache + Google URL Fetch + Google Account

느낌이 오는가? 1), 2)는 현재 많이 사용하는 웹 서비스 플랫폼이다. 하지만, 이는 단지 기본 프레임워크일 뿐이고 인증, DB 최적화, 로드 발란싱 등등의 기능은 구입 또는 직접 구현하여 추가해 주어야 한다. 이 부분의 작업은 대부분 복잡하고 구현이 어려운 작업이 많이 존재한다.(최소한 나에게는 그렇다.) 또한 안정성을 요하는 부분이기 때문에 대부분 외부 솔루션을 도입하는 것이 현실이다. 그런데, 바로 이런 부분을 무료로 제공해 주겠다고 하는 것이 3) Google App Engine 이다.*1
Google이 말하길 'Google App Engine을 이용하면 웹 서비스를 만들기 쉽고 관리하기 쉽고 확장하기 쉽다'고 한다. 이 말이 사실이라면 *3은 웹 서비스를 기획하고 있는 누군가에게 아주 매력적이다. 아이디어가 있으면 바로 그 아이디어를 Python으로 구현하여 적용하면 끝이다. 나머지 복잡하고 골치아픈 부분과 심지어 운영까지 Google이 직접 본인들의 노하우를 이용해서 책임 진다. Google이라는 그 명성이 없다면 거의 불가능한 일이 아닐까 하는 생각이 든다.

2. 주요 서비스
다음과 같은 강력한 개발/운영 측면에서 지원을 제공한다.
- dynamic web serving, with full support for common web technologies
   (웹 호스팅 기능 지원)
- persistent storage with queries, sorting and transactions
   (안정적인 DB, Big Table/GFS에 대한 기능이 제공된다고 함)
- automatic scaling and load balancing
   (유연한 확장성, 로드 발란싱 기능 제공)
- APIs for authenticating users and sending email using Google Accounts
   (구글 인증, G메일 관련 API 제공)
- a fully featured local development environment that simulates Google App Engine on your computer
   (완벽한 로컬 개발 환경을 제공)

3. 시사하는 바
간단한 웹 서비스라 하더라도 기업용일 경우 수많은 잡것들이 붙어야 해서 'Hello World'를 브라우져에 표시하기 위해 많은 세팅과 솔루션 도입이 필요하다. Google은 이 작업을 자신들이 대행해 주겠다고 나섰다. 그 명성과 기술력이 있기에 가능했던 일이 아닌가 생각된다.
Web 서비스를 제공함에 있어 그 서비스 플랫폼은 너무나도 다양하고 게다가 대부분 짜집기 플랫폼이어서 대표 선수를 고르는 것 조차 힘들다. PC OS로 비유하면 마치 Linux와 같은 느낌이다. 수많은 오픈 소스 프로젝트가 모여서 하나로 패키징된 집합체라는 의미에서 그러하다. 하지만 Google App Engine은 MS Windows 같은 느낌이 든다.*2 본인들이 구성 요소를 직접 구현해서 유기적으로 잘 조합해 놓아서 잘 정돈된 느낌을 주기 때문이다.
나의 느낌이 잘못된 것일 수도 있지만 실제로 Google은 웹 상의 OS를 출시한 것이라는 생각이 든다. 만일 느낌이 맞다면 다른 인터넷 관련 기업들은 이런 행보에 긴장하고 빨리 대응하지 않을 수 없을 것이다. 이전 광고 시장과 마찬가지로 대기업이 아니라 중소기업, 소규모 그룹, 개인 사업자를 위한 웹 서비스 호스팅 시장에서의 테일 마켓을 노리고 있는 것일 지도 모르기 때문이다. 이를 기반으로 더 많은 인터넷 벤처가 생겨날 지도 모르는 일이다.

*1 물론 용량에 따라  과금 계획을 세우고 있긴 하다.
*2 Window의 성능이 좋음을 말하는 것이 아니다.오해 금지!

'Google' 카테고리의 다른 글

시덥잖은 Google App Engine 튜토리얼  (0) 2008.08.21
Google App Engine 계정을 드디어 받았습니다.  (2) 2008.08.20
Google's Master Plan  (0) 2008.07.24
Google Code Jam  (0) 2008.07.09
Google 사투리 번역 서비스 출시  (0) 2008.04.01


설치형 블로그 Text Cube 설치 하기

개발 노트 2008. 6. 10. 10:03 posted by 무병장수권력자


설치형 블로그 Text Cube 설치 하기

작성자 : 김문규
최초 작성일  : 2008. 6.10

언제부턴가 블로그는 이미 우리 주위에 깊숙히 자리잡은 하나의 트렌드처럼 보인다. 하지만 너무나 익숙해져버린 탓에 네XX, 티XXX, 다X에 하나씩 둥지를 틀고 모두가 비슷한 모양의 블로그에 서로 경쟁하듯이 퍼가기를 일삼고 있다. 그 결과 정보가 생산되는 참여의 공간이 아니라 단지 바이러스처럼 퍼지기만하는 해적판 CD 시장 같은 생각이 든다.

꼭있다!! 이런 군상에서 고고한 학처럼 살고자 하는 사람들... 그래서 적지 않게 설치형 개인 블로그를 운영하는 사람들이 늘고 있다. 프로그래밍 실력만 있다면 자유로운 스킨 변환, 업로드 공간의 자유로움, 특수 기능의 매쉬업 등이 기존의 대형 블로그들과는 차이점이 있기 때문이다.

그래서, 회사에서 확인해 볼 사항도 있고하여 설치형 블로그의 대표 선수인 TextCube를 설치해 보았다. 잘 아시겠지만 이전에는 Tatter Tools(태터툴즈)라는 이름으로 유명했던 웹 블로그 플랫폼이다. 또한 다음과 제휴하여 제공되고 있는 Tistory의 기반 플랫폼이기도 하다. (대단한 녀석이지만 Tistory에 적용되면서 설치형 블로그로서의 장점이 많이 사라지기도 했다.)

아마도 많은 분들이 비슷한 작업을 시도할 것으로 생각되기에 설치 시에 삽질을 줄이기 위해 성공한 방법을 정리해서 공유하고자 한다. 남는 역량을 대한민국 IT 발전을 위해 써주길 바란다. ^^

그럼 시작해 보겠다.

일단 TextCube의 수많은 장점은 아래의 링크를 통해 확인하길 바란다.
http://textcube.org/center/entry/textcube-1-7-sneak-peak

1. 웹 호스팅 서버에 설치하기
http://textcube.org/manual/entry/installing-textcube?category=5
참조 바람~

2. 본인의 PC에 설치하기
(1) APM_Setup을 설치한다.
http://www.apmsetup.com/
윈도우 경우에는 이것을 설치하면 아무런 문제가 되지 않는다.
리눅스의 경우에는 mod_rewrite를 활성화 시켜서 apache를 재컴파일 해야 한다. (필요시 해당 부분 검색!)

(2) 소스 설치
textcube-1.x.x-expansion의 압축을 풀어 tc 폴더 아래의 내용을 APMServer/htdocs 아래에 풉니다.
디렉토리를 구분해서 다중 설치할 수 있어 보입니다. 그런데 설정에 미숙해서 인지 비정상적으로 설치됩니다. 아래와 같이 설치 후 플랫폼 설정 시 다중 사용자가 지원되니 큰 문제가 되지 않습니다.
사용자 삽입 이미지

(3) TextCube 설정하기
 -
http://(ip_address)/setup.php 접속
 
 - (1단계) 한국어 선택
사용자 삽입 이미지

 - (2단계) '새로운 텍스트큐브 설정합니다' 선택
사용자 삽입 이미지
 
 - (3단계) phpMyAdmin을 이용해서 db생성 후, 그림과 같이 설정
사용자 삽입 이미지

사용자 삽입 이미지

 - (4단계) 아래와 같이 모두 OK가 떠야 함. 빨간색 글씨가 보이면 해결해야 함. (어려움 ^^)
사용자 삽입 이미지
 
 - (5단계) '하위 경로로 블로그 식별' 선택 (단일 사용자의 경우에도 여러개의 하위 주소로 운영할 수 있으면)
사용자 삽입 이미지
 
 - (6단계) 적절한 관리자 정보 입력
사용자 삽입 이미지
 
 - (7단계) 완료
사용자 삽입 이미지