White Life Story

OSX 는 Ubuntu, CentOS 처럼 패키지 관리 플러그인이 내장 되어 있지 않아 직접 찾아서 설치 해야 하는 불편함이 있다.

apt-get, yum 익숙하게 들어봤을 것 이다. 이와 같은 역할을 한다고 보면 되겠다.

✔︎ 공식 사이트: http://brew.sh/

Install

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/Library/...
/usr/local/share/man/man1/brew.1

Press RETURN to continue or any other key to abort
==> /usr/bin/sudo /bin/chmod g+rwx /Library/Caches/Homebrew
Password:
==> Downloading and installing Homebrew...
remote: Counting objects: 224297, done.
remote: Compressing objects: 100% (59033/59033), done.
remote: Total 224297 (delta 164035), reused 224274 (delta 164017)
Receiving objects: 100% (224297/224297), 50.98 MiB | 4.01 MiB/s, done.
Resolving deltas: 100% (164035/164035), done.
From https://github.com/Homebrew/homebrew
 * [new branch]      master     -> origin/master
HEAD is now at fb415b5 httpie: update 0.8.0 bottle.
==> Installation successful!
==> Next steps
Run `brew doctor` before you install anything
Run `brew help` to get started

한 줄이면 간단하게 설치가 마무리 된다.

javascript 기반으로 개발 할 때 시간을 많이 단축 시켜 주는 유용한 라이브러리 이다. 전역 변수로 같은 $ 를 사용하고 있기 때문에 곂쳐지게 되어 사용이 불가하게 된다.

해결 방법으로는 jQuery 를 먼저 선언 하고 전역 변수명을 바꾸어 주고, prototype 를 선언 한다. 아래 코드를 참고 하자.

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script type="text/javascript">
jQuery.noConflict();
var w$ = jQuery;
</script>
<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>

위와 같이 변경 하게 되면 라이브러리 선언에 대한 순서에 신경을 써야 한다. jQuery 기반의 라이브러리는 상단에 우선 시 하여 선언 한 후 제일 마지막에 전역 변수명을 변경 하도록 하자.

database 에 접속하여 아래 명령어를 입력 하면 접속 정보가 나열 된다.

show processlist;

Application 개발 당시 DB 연동 문제로 골머리가 썩을 때에 사용하면 유용 하다.

Windows 에서 개발환경을 구축 하는 경우 발생 할 수 있는대, 제조 업체에서 제공 하는 USB 드라이버를 별도로 설치 하지 않으면 인식 하지 못하는 경우가 있다.

• Samsung: http://local.sec.samsung.com/comLocal/support/down/kies_main.do?kind=usb

삼성 통합 USB 드라이버 다운로드 경로 이다. 다른 제조 업체인 경우 검색 하여 설치 하도록 한다.

설치 후에 Project Run 을 해보면 인식 하는 것을 볼 수 있다.

불과 몇 개월 사이에 Node 설치 방법이 참 편리해 졌다.

Nodejs 설치 하기 - http://blog.whitelife.co.kr/85

직접 의존성 라이브러리, Nodejs 를 수동으로 설치 했다. 자세한 글은 위 주소를 참고하자. 금주에 설치 할 일이 있어 조언도 받고, 검색도 해보았다.

Node Version Manager - https://github.com/creationix/nvm

• Install script (Linux 기준)

curl https://raw.githubusercontent.com/creationix/nvm/v0.19.0/install.sh | bash
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
source ~/.nvm/nvm.sh

• Usage

nvm install 0.10
nvm use 0.10

정말 간단하다. 위 명령어를 따라 실행 하기만 하면 된다.

설치 되어 있는 X-Window 시스템이 지원하지 않는 버전 이기 때문에 발생 한다.

sudo /opt/VBoxGuestAdditions-4.3.6/uninstall.sh
sudo apt-get install virtualbox-guest-additions-iso
sudo software-properties-gtk --open-tab=4

위 명령어를 사용하여 설치 하고, 사용 되지 않음으로 설정 되어 있 Guest 드라이버를 활성화 후 Reboot 하자

보통 Web 개발 하면 Spring 이 자연스럽게 떠오른다. 그 만큼 보편화 되어 있다. 개발 경험이 있다면 @ModelAttribute 라는 어노테이션이 친숙할 것 이다. 아래 그림을 보자.

Spring 을 사용하면 대표적으로 떠오르는 Servlet 이 있다. Servlet 를 직접 개발 하면 HttpServletRequest.getParameter(String name) 을 직접 사용하지만, DispatcherServlet 는 name 값과 Model Class 의 field 가 mapping 되어 값을 넣어준다. 그 시점은 Controller 호출 되기 직전 이라고 보면 된다. 참 편리한 기능 이다.

여기서 한번 더 생각 해보자. List 로 받을 수는 없을 까? 여러 번의 시도 끝에 방법을 찾았다.

@RequestMapping(value="/sample", method=RequestMethod.POST)
public ModelAndView sample(List<Sample> sampleList) throws Exception {
    try {
        ModelAndView mav = new ModelAndView();

        // Doing...

        return mav;
    } catch (Exception e) {
        throw e;
    }
}

Controller 소스 중 일부 이다. @ModelAttribute 는 생략이 가능 한 어노테이션 이다. 방금 설명 했던 mapping 작업은 Object 기준으로 이루어 진다. 결국 위 소스는 무용지물 이다. 다른 방법으로 접근 해 보자.

public class Sample {

    private String sample1;
    private String sample2;
    private String sample3;
    private String files;

    private List<Sample> sampleList;

    // Doing...

}

Model Class 에 List 로 선언 하면 mapping 이 가능하다.

<table class="sample_table" border="0" cellspacing="0" summary="">
    <tr>
        <th scope="row">Sample 1</th>
        <td class="long">
            <input type="text" name="sampleList[index].sample1" />
        </td>
    </tr>
    <tr>
        <th scope="row">Sample 2</th>
        <td class="long">
            <input type="text" name="sampleList[index].sample2" />
        </td>
    </tr>
    <tr>
        <th scope="row">Sample 3</th>
        <td>
            <input type="text" name="sampleList[index].sample3" />
        </td>
    </tr>
    <tr>
        <th scope="row">Sample File</th>
        <td class="long">
            <input type="file" name="sampleList[index].files" />
        </td>
    </tr>
</table>

값은 전달 하는 Html 이다. name 을 주시 하자. Model Class 에서 선언 했던 List 값과 동일 하다. 배열을 사용하듯 name 값을 작성 한다.

@RequestMapping(value="/sample", method=RequestMethod.POST)
public ModelAndView sample(Sample sample) throws Exception {
    try {
        ModelAndView mav = new ModelAndView();

        logger.debug(sample.toString());

        // Doing...

        return mav;
    } catch (Exception e) {
        throw e;
    }
}

실제 요청을 받아 보자. log 을 보면 값을 확인 할 수 있을 것 이고, 이로서 흔히 게시글 N개 를 동시에 등록할 때 사용하면 편리하게 처리가 가능 하다.

참고 사이트

• http://www.programming-free.com/2014/01/spring-mvc-40-restful-web-services.html
• http://3.bp.blogspot.com/-FeuNvZ3F84U/UuTtgkl7dNI/AAAAAAAACIg/gdkn6UqUteM/s1600/rest_web_services_spring_mvc_1.JPG

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

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

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

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

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

Bootstrap basic page 로 이동 해 보자.

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