'ajax' 태그의 글 목록

'ajax'에 해당되는 글 10건

2015.02.10 Microsoft Ajax Minifier, 비쥬얼스튜디오(Visual Studio) 통합 빌드
2010.04.14 [HOONS 닷넷 정기 23회] 엣지있는 웹 애플리케이션 만들기 with AJAX
2008.10.17 [Tip] TabContainer 스타일 지정 3

Microsoft Ajax Minifier, 비쥬얼스튜디오(Visual Studio) 통합 빌드

프로그래밍/03.ASP.NET / 2015. 2. 10. 12:05

웹개발을 하다 보면 .js 파일 또는 .css파일들의 크기를 줄이기 위해 여러가지 툴을 이용해서 경량화를 할 것이다. 나와 같이 비쥬얼 스튜디오(Visual Studio)를 이용하여 개발하고 있는 개발자들이라면 좀더 편하고 쉽게 경량화를 할 수 있는 방법에 대해 알아 보도록 하겠다.

비쥬얼스튜디오와 잘 통합되어 .js, .css파일들의 min파일로 만들어 주는 "Microsoft Ajax Minifier" 있다. 이는 비쥬얼스튜디오 빌드 작업과의 통합을 시킬수 있으며, 콘솔 커맨드 기능, DLL참조를 통한 프로그래밍이 가능하다.

ㅁ 사용 방법

비쥬얼스튜디오 2010이상 설치되어 있다면, 기본적으로 설치가 되어 있을 것이다. 만약 2010이하 버전을 사용하고 있다면 따로 설치 파일을 다운로드 받아 설치해야 한다. (다운로드 주소 : http://ajaxmin.codeplex.com/) 그럼 이제 순서대로 어떻게 적용 할 수 있는지 알아 보자.

1. 프로젝트 구성 확인

[그림 1 - 프로젝트 구성 화면]

[그림 1]은 프로젝트 구성 내용을 보여준다. 그림에 보면 .js파일들이 Scripts폴더와 Res 폴더 밑에 js폴더에 있는 것이 확인 되며, .css파일들은 Content폴더와 Res폴더 밑에 css폴더에 있다.

2. 프로젝트 언로드

[그림 2 - 프로젝트 언로드]

프로젝트 파일에서 우클릭을 해서 [그림2]와 같이 메뉴가 나타나게 한다. 그리고 "프로젝트 언로드" 메뉴을 클릭한다. 그럼 해당 솔루션 파일에서 프로젝트가 비활성화된 상태로 변할 것이다.

3. 프로젝트 구성 편집

[그림 3 - 프로젝트 구성 편집]

비활성화되어 있는 프로젝트를 우클릭해서 "편집 [프로젝트이름].csproj"를 클릭해서 편집 창이 열리도록 한다.

편집창이 열리면 프로젝트를 구성하는 엘리먼트들이 나타날 것 이다. 그럼 마우스를 쭈욱 내려서 <project>엘리먼트가 끝나는 바로 앞에 아래 설정을 정의 하자.

<UsingTask TaskName="AjaxMin" AssemblyFile="$(SolutionDir)_Lib\MicrosoftAjax\AjaxMinTask.dll" />

<Target Name="AfterBuild">

<ItemGroup>

<JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" />

<CSS Include="**\*.css" Exclude="**\*.min.css;Content\*.css" />

</ItemGroup>

<AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />

</Target>

[코드 1]

- UsingTask : UsingTask 엘리먼트는 해당 프로젝트에서 AjaxMinTask.dll을 사용 할 것을 나타낸다. UsingTask 말고 Import 엘리먼트를 사용할 수도 있다. AssemblyFile는 현재 솔류선위치에서 AjaxMinTask.dll의 위치까지 경로를 지정해 준다.

- Target : 빌드 타켓을 나타낸다. 이름에서 AfterBuild는 빌드이후에 수행할 것을 의미한다.

- ItemGroup : ItemGroup 엘리먼트는 JS, CSS 엘리먼트를 하위에 두어 작업을 정의한다.

- JS : Include는 작업을 수행할 파일들을 정의 한다. "**\*.js"는 모든 파일을 지정함을 뜻한다. Exclude는 작업에서 제외될 사항을 정의하며, "**\*.min.js;Scripts\*.js"는 .min.js 파일로 되어 있는 것과 Scripts폴더 하위 .js파일은 제외 한다는 뜻이다.

- CSS : JS 설정과 동일하다.

- AjaxMin : 실행을 위한 속성 타켓들을 지정해 준다.

4. 프로젝트 로드

[그림 5 - 프로젝트 다시 로드]

모든 설정이 끝났다면 프로젝트 파일에서 우클릭, 프로젝트 다시 로드 메뉴를 클리해서 프로젝트를 활성화 시킨다.

5. 프로젝트 빌드

[그림 6 - 프로젝트 빌드]

프로젝트를 빌드를 진행하다. 빌드가 끝나면 아래 그림과 같이 프로젝트에 포함되지 않은 모든 파일 표시를 해본다.

[그림 7 - 모든 파일 표시]

[그림 7]과 같이 모든 파일 표시를 클릭하게되면 프로젝트에 포함되지 못한 파일들이 보일 것이다. 정상적으로 빌드가 되어 AjaxMin이 이루어 졌다면 아래 그림과 같이 Res폴더의 css폴더와 js폴더에 .min파일이 생겼을 것이다.

[그림 8 - min파일 생성]

해당 min파일들을 우클릭해서 프로젝트에 포함시키도록 한다.

[그림 9 - 프로젝트 포함]

이상 "Microsoft Ajax Minifier"에 대한 사용 방법에 대해 간단하게 알아 보았다.

ㅁ 참고 자료

https://thefrontend.wordpress.com/2012/02/02/minify-javascript-and-css-files-when-publishing-web-applications/

https://msdn.microsoft.com/en-us/library/t4w159bs.aspx

저작자표시 비영리 변경금지

Posted by happydong

, |

[HOONS 닷넷 정기 23회] 엣지있는 웹 애플리케이션 만들기 with AJAX

세미나 소식&내용 / 2010. 4. 14. 02:39

- 일시 : 2010년 04월 15일(목) 19시 00분
- 장소 : 포스코센터 5층 (한국마이크로소프트)
- 참가비 : 삼천원+α (수익금 전액은 후원처 요셉의원에 기부됩니다.)
- 세미나 신청: http://www.hoons.kr/Seminar/Join.aspx

세미나 Agenda

19:00~19:30	등 록
19:30-20:40	Ajax 성능 튜닝과 커뮤니케이션의 이해 /서동진
20:40~20:55	휴식
20:55-21:30	jQuery Ajax /한지수
21:30-22:10	리버스 Ajax의 소개와 구현 전략 /박경훈
22:10~	Q&A / 경품추첨

발표 내용 소개

Ajax 성능 튜닝과 커뮤니케이션의 이해 (With Ajax tuning up, Advance your web site) / 서동진
Web Browser & Web Server 간 커뮤니케이션의 특성에 대해 이해하고, 많은 웹 애플리케이션이 가지고 있는 성능 저하 사례와 그 원인에 대해 알아본다. 웹 애플리케이션이 좀 더 빠르고 안정적으로 만들기 위한 (성능 저하를 극복할 수 있는 기반 기술로서의) Ajax에 대해 파악하고 이를 적용하는 방법에 대해 살펴본다. Ur web application, Our passion : D
jQuery Ajax / 한진수
jQuery 라이브러리는 강력한 DOM Control 기능과 더불어 아주 쉽게 Ajax 구현이 가능한 기능 세트를 제공해 주고 있다. jQuery 라이브러리에서 제공하는 Ajax 관련 메서드들의 역할과 기능을 살펴보고 이를 적용하는 방법들을 알아본다.
리버스 Ajax의 소개와 구현 전략 / 박경훈
코멧(Comet)으로 알려진 리버스 Ajax 기술은 Ajax 성능을 보다 최적화할 수 있는 방법으로 구글토크와 페이스북의 채팅등과 같은 다양한 SNS 서비스에서 널리 사용되고 있다. 이번 세션에서는 리버스 Ajax의 개념과 코멧의 패턴들을 소개할 것이며 또한 구글토크에서 이용하고 있는 웹채팅 데모를 통해서 코멧을 구현할 때 인지해야 되는 필수적인 이슈와 전략들을 살펴보도록 하겠다.

진행자 소개

	서동진 / HOONS닷넷 ASP.NET 시삽 Geopia, ESTsoft, 그리고 MySpace를 거쳐 현재 Nexon에서 개발하고 있다. 또한 Microsoft ASP.Net MVP, MCAD, MCSD, PMP, 정보처리기사, 워드1급, 운전면허증, 커플등록증 등 여러 자격 및 인증을 보유하고 있으며, 기술 서적을 집필하거나 기술 내용을 여러 방면에 기고하거나 새로운 서비스, 시스템을 구상하고 만드는 것이 취미이다. 그리고 SuperNatural의 Sam처럼 악마의 힘으로 악마를 처리할 수 있게 되는 것이 장래 희망이다.
	한진수 / HOONS닷넷 C#.NET 시삽 HOONS닷넷 커뮤니티에서 Visual C# 시삽으로 활동중이며, Microsoft Visual C# MVP 로 활동하고 있다. .Net Framework와 C# Language 자체를 깊이 이해하기 위해 많은 시간을 투자하고 있으며, 처음 C#을 접하는 분들에게 도움이 되고자 항상 노력한다. '지식공유'야 말로 최고의 자기계발이라 생각하며, 나눔의 기술에 대해 연구하고 있다.
	박경훈 / HOONS닷넷 운영자 HOONS닷넷 사이트를 8년째 장수시켜왔으며 크고 작은 여러 세미나들을 기획하고 진행해 오면서 IT 행사 제조기로 활동하고 있다. 여러 기술 도서를 집필하고 번역하였으며 그 중 몇 권의 UI단 최적화 도서를 번역한 후 UI 최적화 지침들을 국내에 알리는데 힘써왔다. 지금은 닷넷 프리랜서로 또 라디오방송(극동방송)의 테마CCM 진행자로 활동하고 있다.

세미나 장소

한국 마이크로소프트 - 포스코 센터 5층

경품안내

확정 후 업데이트 예정

(세미나 신청은 훈스닷넷에서 하시면 됩니다.!! 위 링크 참고.)

Posted by happydong

, |

[Tip] TabContainer 스타일 지정

프로그래밍/03.ASP.NET / 2008. 10. 17. 17:33

invalid-file

전에 제가 올린 글 중에 “[AJAX Control] TabContainer Control 써보기~!”라는 강좌가 있었는데요. 이번에는 그 TabContainer Control에 Style을 넣어 보도록 하겠습니다.

먼저 CSS Class를 지정해 주기에 몇 가지 규칙을 알아야 해요. 아래 그림과 표를 보시면 이해가 빠르실 것 같네요.

CSS Class Names	설명
ajax__tab_header	Tab 영역 전체 스타일 지정.
ajax__tab_body	Content 영역 스타일 지정.
ajax__tab_active	현재 선택된 Tab의 스타일 지정.
ajax__tab_tab	Tab의 텍스트 관련 스타일 지정.
ajax__tab_inner	Tab의 왼쪽 영역 스타일 지정.
ajax__tab_outer	Tab의 오른쪽 모서리 영역 스타일 지정.
ajax__tab_hover	마우스 Over시 스타일 지정.

자 그럼 이제 아래 style을 지정한 코드를 보도록 하겠습니다.

CSS Code

.ajax__myTab .ajax__tab_header

{

font-family: verdana, tahoma, helvetica;

font-size: 11px;

border-bottom: solid 1px #999999;

}

.ajax__myTab .ajax__tab_outer

{

padding-right: 4px;

height: 21px;

background-color: #C0C0C0;

margin-right: 2px;

border-right: solid 1px #666666;

border-top: solid 1px #aaaaaa;

}

.ajax__myTab .ajax__tab_inner

{

padding-left: 3px;

background-color: #C0C0C0;

}

.ajax__myTab .ajax__tab_tab

{

height: 13px;

padding: 4px;

margin: 0;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_outer

{

background-color: #cccccc;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_inner

{

background-color: #cccccc;

}

.ajax__myTab .ajax__tab_hover .ajax__tab_tab

{

}

.ajax__myTab .ajax__tab_active .ajax__tab_outer

{

background-color: #fff;

border-left: solid 1px #999999;

}

.ajax__myTab .ajax__tab_active .ajax__tab_inner

{

background-color: #fff;

}

.ajax__myTab .ajax__tab_active .ajax__tab_tab

{

}

.ajax__myTab .ajax__tab_body

{

font-family: verdana, tahoma, helvetica;

font-size: 10pt;

border: 1px solid #999999;

border-top: 0;

padding: 8px;

background-color: #ffffff;

}

</style>

위에 정리한 표와 함께 보시면 코드 이해하시는데 무난할 거라 생각이 드네요! 이제 Class Name을 지정해 주어야 지요. 역시 말보다는 코드로 보시는게 빠르실 듯 하네요.

HTML Code

<AjaxControl:TabContainer ID="TabContainer1" runat="server" Width="500" Height="170"

ActiveTabIndex="0" CssClass="ajax__myTab">

<%-- 연애 뉴스 --%>

<AjaxControl:TabPanel ID="TabPanel01" runat="server" HeaderText="연애인">

ㅁ '뉴하트' 조재현, 순수하고 정의로운 의사 조금 거칠면 안되나요

<br />

... 내용 생략 ...

</ContentTemplate>

</AjaxControl:TabPanel>
</AjaxControl:TabContainer>

위 코드에서 보시면 TabContainer 에 CssClass 속성에 "ajax__myTab"이라고 지정해 준것을 보실수 있을 거예요. 정말 사용하기 간단하지요. 아래 그림은 제가 간단하게 만들어본 예제 예요. 소스도 같이 올려 놓을 게요.

Reference : http://programming.top54u.com/post/ASP-Net-AJAX-Tab-Extender-CSS-Class-Styles.aspx

Posted by happydong

, |

«이전 1 2 3 4 다음»

최고보다,최선을...

카테고리

달력

공지사항

태그목록

최근에 올라온 글

'ajax'에 해당되는 글 10건

Microsoft Ajax Minifier, 비쥬얼스튜디오(Visual Studio) 통합 빌드

[HOONS 닷넷 정기 23회] 엣지있는 웹 애플리케이션 만들기 with AJAX

[Tip] TabContainer 스타일 지정

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

링크

티스토리툴바