6

보다 나은 코딩스타일을 위해..

두 달 안에 이 두 책을 마스터하리라 결심해봅니다.

codecompleterefactoring

뭔가 정형화된 코딩스타일이 필요하다고 느껴서, 사놓고 못보고 있던 이 책들을 다시 꺼내보기로 했어요.

디자인을 전공하고 프로그래밍을 하고 있는 사람으로써, 항상 이렇게 코딩하는게 과연 맞는 것인가라는 의문을 갖고 있습니다.

플래시 초창기부터 ActionScript를 다루던 분들 중에는 그저 플래시가 좋아서, 시작한 분들이 많을 겁니다.

저도 그 중 한 명이고, 2004년부터 지금까지 항상 이렇게 코딩하는 것이 과연 옳은 것일까라는 의문은 없어지지 않았습니다.

그간 다른 언어들(C++/Java/Objective-C)를 공부를 해온 이유도 어쩌면, 코딩스타일의 답을 찾고자 하는 이유가 큰것 같습니다. 혼자 작업을 해도 되는 규모의 프로젝트의 경우에는 코딩스타일이 사실 문제가 되지 않습니다.

자신만 알아 볼수 있어도, 버그가 생기면 직접 수정하면 되고, 대응이 가능하기 때문이죠.(전혀 문제가 아닐수는 없죠^^ 1달만 지나도 이게 뭔 코드인지 알아볼 수가 없는 경우도 있으니..)

최소 2명 이상이 같이 협업을 할 경우!! 이때 바로 이것이 문제입니다.

기본적인 OOP의 개념조차 지키지 않으며, 개발이 된 코드들을 볼 때면, 한숨부터 나옵니다.

개발하는 시간보다 소스를 분석하는 시간이 더 오래 걸리는 경우가 태반이죠.

강제로라도 스타일을 맞출 수 있을까 해서 MVC패턴도 적용해보고, 디자인패턴들도 이래저래 적용해보고…

사실 플래시작업에서 MVC패턴을 적용할 만큼 규모가 있는 프로젝트가 많지 않은 것도 한몫을 하는 것 같으나, 가장 큰 이유는 작업스펙에 비해 항상 확보할수 있는 작업기간이 부족하여, 막코딩을 자꾸 하게되는 것이 문제죠

아예 정형화된 코딩스타일이 몸에 베어버리면 이런 막코딩 조차도 어느정도 형식을 취할수 있겠다라는 생각에서 “CodeComplete 2/E” 와 “Refactoring” 이 두 권의 책을 열시미 마스터해보고자 합니다.

이들을 마스터 한 후에는..  소프트웨어공학 관련 서적을 좀 봐야겠습니다.

제가 짠 코드가 협업하는 동료에게 득이 되지 못할 망정, 해가 되는 일이 생기는 일은 절대로 생기지 않기를 바랍니다.

요즘 들어서는 ActionScript 자체에 대한 고민보다, 다른 언어를 학습하고 그의 장점을 취하고, 개발론 혹은 방법론에 대해 다시 돌아보고 있습니다.

HTML5의 등장과 Adobe의 대처방안에도 관심이 있으나, 저는 그저 상황에 적응해가며 새로운걸 해보는게 아직은 좋네요 ^^ (사실 지금까지 해논 것이 위협받는 건 짜증나는 일이지만요 ㅎ)

ActionScript IDE ( for MS VisualStudio 2008 ) 소개

Flash IDE, Flex Builder, Flash Develop, SEPY, FDT… 등 많은 IDE툴을 만져보고, 항상 IDE에 대한 불만을 갖고있었습니다. 모 나름 eclipse기반의 Flex Builder나 FDT등은 Flash내장 에디터에 비하면 정말 훌륭하지만 말이죠.

오늘은 Eclipse기반이 아닌 MS社의 Visual Studio 2008 의 Addon으로 사용가능한 IDE를 소개하고자 합니다.
Flash Develop을 쓰다보니, 닷넷 Framework을 쓰는것이 의심스러워, 구글링을 한지 1분도 안되서 찾은걸로 보아, 저만 모르고 있던거 같네요…

소개할 툴은 2가지 입니다.

1. Ensemble tofino

Ensemble Tofino for Visual Studio is a plugin that enables .NET developers to create Flex front ends for their applications in the same IDE that they normally use. Instead of using a separate text or XML editor and manually invoking the compiler, they can move smoothly between MXML and .NET file types within Visual Studio, and invoke Flex build and run commands from Visual Studio menus.

download : http://www.ensemble.com/products/tofino.shtml


2. Amethyst

Amethyst is SapphireSteel’s IDE for programming rich web-based and desktop applications using Adobe Flex and AIR [1]. This page includes a link to download Amethyst (beta), plus information on its installation and use. Please be sure to read the installation advice before installing Amethyst.

[#M_ more.. | less.. |
사용자 삽입 이미지
사용자 삽입 이미지
사용자 삽입 이미지
_M#]download : http://www.sapphiresteel.com/Download-Amethyst-Adobe-Flex-IDE


둘다 어제 찾다보니, 자세한 사용법은 추후에 포스팅 하겠습니다.

TraceMonitor 0.1 Release





사용자 삽입 이미지


TraceMonitor 란?
TraceMonitor는 플래시의 trace 기능을 확장하여 모니터 해 줍니다. 브라우저나 플래시 플레이어로 SWF를 볼 경우 trace 가 되지 않아 값을 볼 수 없어 매우 불편한데 이를 해결 하기 위한 솔루션입니다. FLEX 나 FlashDeveop 과 같은 개발툴에도 이와 유사한 Output 이 있으나 이를 설치하기 어려운 환경이나 간단히 trace 값만을 보고자 할 때 유용하게 사용 할 수 있습니다. 예를 들어 프로그래머와 협업시 프로그래머의 PC에 설치하여 값을 trace 해 볼 수 있습니다.



TraceMonitor 사용법
TraceMonitor 를 사용하기 위해서는 함께 들어있는 TraceMonitor.as 의 trace를 이용해야 합니다. TraceMonitor 를 실행 시킨 후 아래 코드를 삽입하여 trace 할 수 있습니다.





  1. import TraceMonitor;  
  2.  
  3. TraceMonitor.trace(“Hello~ World!”);  

TraceMonitor.trace(“Hello~ World!”);






주의사항

TraceMonitor 는 JRE 1.5 이상을 필요로 합니다. 만약 설치 되어 있지 않다면 TraceMonitor 설치 시 함께 설치 하시기 바랍니다.


Download






다른 솔루션





TraceMonitor 를 개발하고 몇일 뒤에 알게 된 디버거 툴이다. TraceMonitor의 경우 xmlSocket 을 이용해서 단순한 문자열 밖에 전달 할 수 없지만 이 Arthropod의 경우 localConnection 을 이용해서 문자열 뿐만아니라 오브젝트, 스냅샷 등을 전달 할 수 있고 저장까지 가능하다.


How to use



Arthropod is really easy to use. Basically the only thing you need to do is import the Debug class, write a log message with the log function, start Arthropod and publish your site / AIR application.


To hide the Bitmap window, Array window and clear the output field, just click on the main area and press Backspace (<–).


Step-by-step:



  1. Download Arthropod

  2. Install Arthropod

  3. Add the Debug.as file to your Actionscript 3 library under com/carlcalderon/arthropod/

  4. Import the Debug class by inserting import com.carlcalderon.arthropod.Debug;

  5. Place a Debug.log method execution where ever you want to make a trace, like this; Debug.log(“my message”);

  6. Start Arthropod

  7. Publish your site/ AIR application.

  8. The message “my message” will be displayed in Arthropod.

Available methods:
Check out the “Documentation” section for further explanation.



  • log

  • warning

  • error

  • object

  • memory

  • array

  • bitmap

  • snapshot

  • clear

Support:
Arthropod currently supports the following.



  • All characters (should include asian characters, not tested)

  • OSX and Windows (Tested on some Linux dists.)

  • AIR Runtime 1.0 and above

  • All major browsers (Internet Explorer, Firefox 2.0 and above, Safari)

  • SWFObject 1.5 and above

  • Optional ProFont

FlashDevelop 단축키 모음


* Escape: Close the completion list and method call-tip (or press Ctrl key to hide them).


* F1: when you see “…” in a (yellow) tip, you can press F1 to see a more detailed tip.



* F4: go to declaration of element at cursor location.


-커서가 위치하고 있는 곳의 오브젝트나 이벤트,명령어에 접근합니다.
* Shift+F4: jump back after F4 or code generation.


-이전 문서로 돌아가거나 코드의 생성부분으로 접근합니다.

* Ctrl+Space: contextual completion list – also, press Tab to expand snippets like ‘for’, ‘while’, etc.
-해당 코드의 상속되는 메소드나 속성을 나열하여줍니다.

* Ctrl+Shift+Space: method call-tip (the yellow window with current method’s signature)
* Ctrl+Alt+Space: list all project classes (as after ‘:’ or keywords like “new”)

* Ctrl+Shift+1: contextual code generation 
– 이벤트나 명령어를 자동으로 생성해 줍니다.


Ctrl + Space 코드 완성 창 호출



Ctrl + Alt + Space 사용 가능한 클래스 목록 호출

Ctrl + Shift + F 코드 블록 축소 배포



Ctrl + Shift + A 코드의 모든 축소



Ctrl + Shift + E 축소 코드의 모든 확장

Ctrl + Shift + 1 코드 자동 생성 (로컬 변수를 클래스 변수에 상승, 클래스 변수의 setter / getter 메소드 발생 클래스 가져오기). 

Ctrl + Shift + Space 메서드 호출 팁 호출

F4 마우스커서 위치에있는 요소 (클래스와 변수, 메서드) 정의 업체에 점프



Shift + F4 “F4″의 반대로 원래 위치로 이전 

Ctrl + B 스니펫의 호출


F1 코드 힌트 단순 세부 내용 전환 (코드 힌트가 나타날 때 F1) Esc 호출 팁 취소 및 숨기기

Ctrl + Shift + K 색상 입력 보조



Ctrl + Q 일행 또는 선택된 행 코멘토아웃/ 취소 (/ / 형식)



Ctrl + Shift + Q 선택된 행 (복수) 코멘토아웃 취소 (/ / 형식)



Ctrl + Shitf + B 선택된 행 (복수) 코멘토아웃(/ * 형식 * /)


F5 무비 테스트 (실행)



F6 무비 테스트 (Flash IDE)



F8 프로젝트 빌드



Ctrl + F8 현재 파일 빌드



Ctrl + C 선택 사본



Ctrl + X 선택 사항 스크랩



Ctrl + V 선택 항목 붙여넣기



Ctrl + Z 직전 작업 취소

Ctrl + Shift + C 행 복사



Ctrl + Shift + X 라인 스크랩



Ctrl + D 행 복사 다음 행 (신규)에 붙여넣기



Ctrl + Shift + D 행 삭제

Ctrl + T 라인으로 교체



F3/Shift + F3 선택한 단어와 일치하는 후보 간 이동


Ctrl + F 문자열 검색


Ctrl + H 바꾸기


Ctrl + I 파일 대상 바꾸기


Ctrl + G 줄 자리에 점프


Ctrl + S 파일 저장


Ctrl + O 파일 열기


Ctrl + N 새 파일 만들기


Ctrl + F9 Global Classpath (전역 클래스 경로) 설정


F10 Program Settings (프로그램 관련 설정)


Alt + Shift + Enter 전체 화면보기 / 이전  


StartUML 클래스 다이어그램 -> AS3 소스코드 변환 템플릿



(펌)원글 : http://www.apollo9.net/blog/?p=318



Freeware UML 툴로 유명한 StartUML의 클래스 다이어그램을 Actionscript3.0코드로 생성해주는 템플릿이 있네요 ) (우왕ㅋ굳ㅋ)
간단한 클래스 다이어그램은 어느정도 되는것 같지만 복잡도가 높아질때는 제대로 나와줄지 모르겠네요.

다운로드
템플릿 다운로드(start_uml_actionscript30.zip)
예제에서 사용된 UML프로젝트(as3_uml_example.uml)
StartUML 다운로드(freeware)


다운로드 받은 템플릿 파일을 StarUML이 설치된 다음 디렉토리에 복사한다.
“modules\staruml-generator\templates”


StartUML을 실행후 Default Approach를 선택하어 프로젝트를 생성한다,.


다음과 같이 간단한 클래스 다이어그램을 작성한다.


Tools > StartUML Generator 을 선택한다,.


목록에서 ActionScript 3.0을 선택한다.


클래스 다이어그램에 의한 AS 파일이 생성되어질 디렉토리를 지정한다.


Generate 버튼을 클릭하면 AS파일이 클래스 다이어그램에 맞춰서 생성된다.


생성완료(굳ㅋ)

FlashDevelop 3.0.0 RC2 released

사용자 삽입 이미지
Post FlashDevelop 3.0.0 RC2 released
This release took long because we wanted to implement all features that might effect the user files and therefore once again, previous FlashDevelop versions are incompatible with this one. Sorry for the trouble. As we are now approaching the final release of FlashDevelop 3, this release is the last feature release. We will now focus only to make FlashDevelop rock solid. We also try to write some documentation about FD basics and all contributors are welcome to join us.

About FlashDevelop:

Features
Screenshots

Changes:

* New events and comments added for plugin developers.
* New installable filetype (*.fdz) to deploy files in FD world.
* Slightly revised snippet editor and now it’s directly included in FD.
* New FlashLogViewer plugin which basicly is an extended version of Andrew Lucking’s FDTracer plugin.
* New dynamic arguments and a dialog to fill them just prior to template creation (was Enhanced Arguments plugin by Mike McMullin).
* Added an option to save UTF-8 files without BOM. To get this fully working like FB set the callback encoding to UTF-8.
* Many new options to the UI and processes in FlashDevelop.
* Newly generated fixed completion intrisic files.
* Updated AIR 1.5 templates.

+ Lots of bug fixes and other small improvements. :)

Future plans:

* Finish the AS3 debugger, investigate profiling.
* Implement class imports reorganisation and packages refactoring.
* Evaluate the possible cross-platform implementation.
* Add HTML/JS projects, investigate Jangaroo AS to JS compilation.
* Make the MXML completion actually smart.
* Integrate properly with Haxe compiler.

Important:

* Those who have customized their menus or syntax files previously need to review the customization notes from the wiki. View the documentation.
Backup your user files and uninstall FlashDevelop with setting files. From this point on we’ll preserve the user files so please customize the files again based on this release.
Get Adobe Flex 3 SDK. The free Flex SDK (2 or 3) is required for ActionScript 3 development if you don’t use Flash CS3.
Get the debug Flash Player (You need: Projector and ActiveX)
* Java 1.6+ is required for the Flex compiler (ActionScript 3).

:!: If you think the program is good, please donate some money for this project. :!:

Download:

Built from rev. 398
Download FlashDevelop 3.0.0 RC2

Subversion Client 설치 및 사용법 (for Windows)

규모가 있는 프로젝트를 진행할때나, 여러 작업자간의 co-work이 이루어 지는 개발 프로젝트의 경우에는 프로그램 Source Code에 대한 관리가 필요하다. 이때 많이 사용 되는 프로그램으로 CVS / Subversion이 있다.

Subversion을 사용하여 SourceCode관리를 하기 위한 SVN Client설치,사용법을 설명한다.





– Subversion Client Program Download



클라이언트 다운로드URL : http://tortoisesvn.tigris.org/



사용자 삽입 이미지



(현재 설치되어있는 OS환경에 맞추어 32Bit / 64Bit 중에 선택하여 설치하면 됨.)

위에서 TortoiseSVN-1.6.0.15855-win32-svn-1.6.0.msi 파일을 다운받아 설치했음.



또한, 서버에서 서브버젼기능 사용을 위해 Repository를 설정하고, 프로젝트를 생성한다.





– TortoiseSVN의 사용법



사용자 삽입 이미지



아무것도 세팅하지않은 상태에서 우클릭을 하면 이런 화면이 나온다.



새로운 폴더를 생성한후 create repository here를 눌러서 repository를 생성한후,

check Out을 눌러서 “http://papervision3d.googlecode.com/svn/trunk/“같은 SVN repository를 설정해준다.



사용자 삽입 이미지



정상적으로 세팅했을경우 이처럼 Add하는 과정이 진행된다.



사용자 삽입 이미지



우클릭후 Add 했을경우에는 Meta정보만 반영된 것이기 때문에, Commit을 수행해주어야 정확히

서버에 반영됨.




StarUML (무료 UML 프로그램)

starUML이란? 공짜로 UML 그리는 프로그램



Screenshot: Pattern – EJB Support












Pattern – EJB Support

Profile Extension-Customize stereotype

Notation Extension – ER Diagram

Component Diagram

Class Diagram

Usecase Diagram

이렇게나 기능이 마나요~


그럼 이제 다운로드 받으러 갑시다


http://sourceforge.net/project/showfiles.php?group_id=152825&package_id=169190&release_id=437438




클릭하면 아래와 같은 화면이 뜬다
빨간색 상자 클릭!



다운받아서 실행하고 난뒤(계속 next해주심 되요~간편한 설치~)
설치 마지막에 바탕화면에 아이콘 설치할껀지 체크박스로 물어보는데 체크해주시고
설치 완료후 실행시키면 아래와 같이 뜹니다.



이제부터 사용법 참고하시라고 보너스~


* starUML 한국 사이트
http://staruml.sourceforge.net/ko/


 



* StarUML 5.0 사용자 가이드(한글)
http://staruml.sourceforge.net/docs/user-guide(ko)/toc.html


* UML의 기초: 클래스 다이어그램 (한글)-> 그리는 방법http://www.ibm.com/developerworks/kr/library/sep04/bell/index.html



Free Builder in FlexSDK and EditPlus

<펌>http://blog.naver.com/nooreestyle/150007454836

이 자료는 힘톤닷컴(http://www.himton.com/)의 내용을 참조하였습니다.

Adobe FlexBuilder 2는 상용소프트웨어로서 돈을 주고 구매하여 사용해야 합니다. 물론 FlexBuilder는 각종 컴포넌트를 드래그하여 쉽게 MXML코드를 삽입할 수 있고, 다양한 Panel를 통하여 MXML의 화면을 마우스만으로 쉽게 편집할 수 있는 장점이 있지만 무료가 아니라는 점에서 Flex를 다뤄보고자 하는 분들에게 경제적인 부담이 매우 큽니다. 하지만 Adobe에서는 Compiler만큼은 무료로 배포하고 있고, 이 Compiler로 생성된 SWF파일은 배포하여도 법적으로 문제가 없으므로 천만다행이다 할 수 있습니다..

먼저 일반 Web개발자의 필수품인 Editplus를 이용하여 MXML코드를 작성하고, 이를 컴파일하여 SWF까지 자동으로 생성해주는 나만의 Flex Builder를 만들어 봅시다. 우선 Adobe에서 FlexSDK를 다운로드 합니다. (http://www.adobe.com/products/flex/sdk/)



그런 다음 하드디스크에 압축을 풀어줍니다. 이 폴더는 계속해서 사용할 Compiler가 있는 폴더이므로 자주사용하지 않는(혹시 모르고 지워버릴 수 있으므로) 곳에 풀어줍니다.

Editplus를 실행하여 [도구]-[사용자 도구구성]을 실행합니다.




그런 다음 추가를 눌러 FlexCompiler라 이름을 입력합니다.(자기만의 이름을 써도 무방합니다.)





메뉴제목 : FlexCompiler
명령 : 자신이 FlexSDK폴더의 경로\bin\mxmlc.exe
        (예: D:\FlexSDK\bin\mxmlc.exe)
인수 : -strict -optimize $(FileName)
디렉토리  : $(FileDir)
출력 내용 캡쳐  : 체크
열려진 파일 저장 : 체크

컴파일러를 지정하였으므로 이제 실행명령을 지정합니다. 기본설정창의 [도구]-[사용자도구]에서 “추가”를 눌러 다음과 같이 지정합니다.







메뉴제목 : FlexCompiler Run
명령 : 자신이 FlexSDK폴더의 경로\player\debug\SAFlashPlayer.exe
        (예: D:\FlexSDK\player\debug\SAFlashPlayer.exe)
인수 : $(FileDir)\$(FileNameNoExt).swf


디렉토리  :
출력 내용 캡쳐  : 체크
열려진 파일 저장 : 체크



이제 Editplus에서 새파일를 열고 아래의 샘플 MXML코드를 입력합니다.

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml“>  
<mx:Button label=”Click Me!” click=”mx.controls.Alert.show(‘Hello World’)”/>
</mx:Application>



그런 다음 이 파일을 저장합니다(확장자는 mxml). 저장위치는 임의대로 지정합니다. [도구]에서 아까 지정한 컴파일러 실행하고 결과창에 “출력완료 – 정상출력” 표시를 확인한 다음 다시 [도구]에서 실행명령을 실행하면 MXML파일이 저장된 곳에 SWF파일이 실행됩니다.(플래시 플레이어9가 설치되어 있어야 실행됩니다.)



이제, Flex Builder 2가 없어도 mxml로 쉽게 SWF를 컴파일하고 Flex Application을 개발할 수 있습니다. 물론, 디버그 기능은 Flash Player9에서 확인할 수 있지만 Flex Builder 2에서 처럼 컴파일전에 알아볼 수 있는 것은 아닙니다. 하지만 이 정도면 훌륭하다고 볼 수 있습니다. 꽁자니까요~

물론, 울트라에디트나, 국산 무료에디터인 아크로에디트에서도 위와 같은 사용자 도구 기능을 지원하므로 충분히 지정하여 사용할 수 있습니다. 컴파일러위치와 인수값만 제대로 입력하시면 됩니다.