White Life Story

전문적으로 Html, Css, Javascript 를 다루는 직종이 아닌, 디자이너, 개발자 에게 조금더 유용하지 않을까 생각 된다. Bootstrap 에서 제공해주는 Components 를 일부 제공 한다.

Components (http://getbootstrap.com/components/)

설치를 해보자. Download now 하여 OS 에 많은 파일을 다운로드 한다.

pingendo (http://www.pingendo.com/)

완료 되었다면 아래와 같은 화면을 볼 수 있다.

Bootstrap basic page 로 이동 해 보자.

좌측에는 Components, 우측에는 HTML 정보, 상단에는 화면, 하단에는 Html 이 위치 하고 있다. 간단한 화면이나, 일부분을 작성 하는대에는 편리하게 사용 할 수 있을 것 같다.

Java Application 개발을 하면서 처음부터 완벽하게 만든 다는 것은 능력자 가 아닌 이상 흔하지 않다. 잠재적인 결함이 있을 수 있고, 필수 값 체크를 못했다면 친숙한 Exception 인 NullPointerException 을 만나게 된다. 최근에 경험했던 일 이다.

Java String.split(String regex) 사용 시 '|' 파싱 이 안되는 경우 (http://blog.whitelife.co.kr/222)

배열에서 파싱 할때 split("|") 라고 작성 했을 때 Escape 처리를 해줘야 동작 한다. FindBugs 는 기본적으로 발생 하는 결함을 확인하고 Report 해준다. 이외에 분석 도구는 Checkstyle, cobertura, PMD 등 이 있다.

Eclipse 도 Problems Report 를 해준다. 무심결에 지나치기 보다 잠깐 이라도 보고 넘어가자.

FindBugs: http://findbugs.sourceforge.net/

Maven, Eclipse Plugin 형태로 제공 된다. Eclipse 기준으로 진행 하겠다.

Help > Eclipse Marketplace 클릭 한후 Find 에 FindBugs 라고 검색 한다. Install 버튼을 클릭 하자.

친절하게 가이드를 해준다. Next 를 계속 하자. 설치 도중 Security Warning 가 나오면 OK 하자.

완료 되었다면 재 시작 한다. Window > Show View 에 FindBugs 폴더가 추가 되는대 Bug Explorer 를 클릭 한다.

하단에 출력 창이 추가 됬을 것 이다.

Project Explorer 에서 마우스 오른쪽 클릭을 하면 FindBugs 라는 메뉴가 있다. 하위 메뉴도 FindBugs 를 클릭 한다.

결함이 있다면 Report 된다. 자세한 내용을 알고 싶다면 + 아이콘 클릭 후 하위 에 있는 값을 클릭 해보거나, 마우스 오른쪽 클릭 Show Bug Info 화면으로 이동하여 참고 하자.

FindBugs 는 강제적으로 해야 하는 것이 아닌, 선택 적이다. 프로그래밍도 습관이 중요 하다고 생각 한다. 당장 +1분, +5분, +10분 투자 하는게 아깝다고 하는 것 보다, 조금씩 투자 하다 보면, -60분, -120분, -180분 보상 받을 것 이다. 치명적인 결함이 줄어드므로...

Tomcat 이 사용 하는 JRE 설정이 초기화 되어 있기 때문에 발생 한다. Window > Preferences 를 보자. 

Server > Runtime Environments 에 접근하여 JRE 설정을 하자.

정상적으로 동작 할 것이다.

Markdown 소개

Markdown 은 Markup 언어의 일종으로 메타 정보 (tag, role) 기반 으로 여러가지 형태로 표현 된다. 대표적인 Markup 언어에 대한 예시 이다.

• Markup 언어
  • HTML
  • XML
  • JSON

위 3가지 언어와 비슷하다. 기본적인 문법을 숙지 하고 있는 경우 편리한 점이 많다.

1. Editor 에서 제공해주는 HTML 변환 기능을 이용하여 편하게 글을 작성
2. MS Word 로 이전이 편리함
3. Github README.md 파일도 같은 문법 작성이 편리함

Editor 소개

1. WEB Editor

Dillinger 는 WEB 환경에서 제공 하는 Editor 이다. 기본적으로 HTML 변환 기능, Github 하고도 연동이 되고, 실시간으로 작성되는 화면을 볼 수 있어 편리하다.

2. Haroopad Editor

Haroopad 는 Windows, Linux, OSX 를 지원한다. 위에서 설명과 같이 HTML 변환 기능은 기본적으로 탑재 하고 있다. 다른 부가적인 기능에 대해서는 공식 홈페이지를 참고 하자.

참고 사이트

• haroopad: http://pad.haroopress.com
• dillinger: http://dillinger.io/
• 마크다운(Markdown)으로 글을 써보자: http://blog.kalkin7.com/2014/02/10/lets-write-using-markdown/

위는 가입 화면이다. 오래전에 가입 했을 때에 비해 화면이 심플하게 바뀌어 있다. 정보를 입력하고 가입해 보자.

오른쪽 Switch to a Premium account? 프리미엄 버전은 좀더 활용도가 높다. 취향에 따라 선택 하도록 한다.

가입이 완료 되었다면, SIGN IN 버튼을 클릭 하여 로그인 하자.

로그인 성공 시 기본적으로 제공 하는 화면이다. Dashboard 비슷한 느낌이다. 필요에 따라 Github, Bitbucket 연계가 가능하니 필요 하다면 사용하자.

샘플 프로젝트를 만들어 보자. CREATE NEW WORKSPACE 초록색 버튼을 클릭 하자. 

기본적으로 10가지 언어 환경을 제공 한다. HTML5 를 선택 > CREATE

sample 프로젝트가 생성 되었다. START EDITING 초록색 버튼을 클릭 하자.

여기 까지 왔다면, HTML5 를 개발할수 있는 통합 IDE 개발 환경이 완료 되었다. 

왼쪽은 파일들을 볼수 있는 네비게이션, 오른쪽 하단은 우분투 작업 공간, 오른쪽 상단은 코드 편집기 기능이 되겠다. 

hello-world.html 페이지를 구경 하자. Run 버튼을 클릭하여 서버 On

오른쪽 하단에 테스트 할수 있는 주소 https://sample-c9-whitelife.c9.io/hello-world.html 와 함께 서버가 시작 되었다. 이제 테스트 페이지를 확인하자.

드디어 hello, world! 와 만났다. 기본적인 환경은 갖추었다.

간단하게 Study 하는 용도나, Group Study 시에도 간편하게 사용할 수 있다는 생각이 든다. 

장소에 제약 없이, 기본적으로 코드 편집기 기능 이외에 우분투 작업공간도 제공되기 때문이다. 

이제부터 친해지는 시간을 자주 가져봐야 겠다.