최고보다,최선을...

 웹개발을 하다 보면 .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 : 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

커멘드라인(Command Line)을 이용한 IIS7 어플리케이션 설정 방법에 대해 알아 본다. 

ㅁ. 사이트 시작 & 종료

ㅁ. 사이트 파일경로 지정

ㅁ 사이트 Configurations 리포트(Report) 보기

기타 커멘드를 이용한 II7 설정관련해서는 아래 참고 링크에서 확인해 보면 좋을 것 같다. 

참고 링크 : 
http://www.windowsnetworking.com/articles-tutorials/windows-server-2008/Configuring-IIS-7-command-line-Appcmdexe-Part1.html

ASP.NET MVC로 개발하다보면 RenderBody라는 녀석을 많이 봤을 것이다. 이와 비슷한게 RenderSection과 RenderPage가 있다. 이녀석들은 WebPageBase 클래스에 포함된 메소드들 이다. 

그럼 RenderBody는 MVC템플릿으로 프로젝트를 생성하면 자동으로 _layout.chhtml 파일에 body태그에 들어가 있는 것을 봣을 것이다. 이는 많이 봤을 테니 따로 설명은 하지 않겠다. 그리고 RenderPage라는 녀석은 Html.RenderPartial과 같은 역활을 한다. 다만 다른건 RenderPage은 페이지가 있는 경로로 파일을 부르고, Html.RenderPartial은 파일이름으로 찾아 뿌려준다. 아래 예제를 보면 감이 올 것이다. 

[소스 1 - RenderPage와 Html.RenderPartial 사용법]

(** Html.RenderPartial에 대한 내용 설명은 MSDN을 참고 하길 바란다.)

자 그럼 RenderSection은 어떻게 사용하는가? 어떻게 사용할까에 대해서 생각해 보자. 일단 저 이렇게 사용 할 수 있을 것같다. 우리가 웹페이지들을 개발하다 보면, 어쩔수 없이 body태그 안에 스크립트문을 넣어야 하는 일이 많이 생길 것이다. 누가 그랬는가...body 태그 중간에 스크립트가 들어가있으면 페이지 렌더링 되는데 시간이 걸린다고.... 그럼 RenderSection녀석을 이용해서 해결해 보자!!

[그림 1]

위 [그림 1]과 같이 어쩔수 없이 body태그 중간에 스크립트가 들어가 있는 모습이다.

[그림 2]

 위 [그림 2]는 ASP.NET MVC로 개발해 봤던 분이라면 금방 이해할 수 있을 것이다.
일단 _Layout.cshtml 부분에 @RenderSection 선언해주고, 이름과 필수 요소를 할지를 정의 한다. 첫번째 파라미터가 이름이고, 두번째 파라미터가 필수 요소이다. 필수 요소를 true로 지정하면, Layout을 참조하는 페이지는 모두 RenderSection 선언한 section 블록을 만들어야한다(안그러면 에러난다.). false로 하면 있으나, 없으나 상관없다.

[그림 3]

[그림 3]은 [그림2]를 실행 시켜 소스보기를 해서 본 화면이다.

사용이 아주 간단해서 더이상 말할게 없다. 

스크립트 블록을 나누는거 외에도 이를 이용하면 좀더 View를 세부적으로 나누기가 편할것 같다.