Copy Coding

코딩할때 tab을 사용하거나 space를 사용하거나 한가지만 잘 사용하면 되는데 사람에 따라 두가지를 혼용하여 사용하면서 문제가 발생하게 됩니다.

특히 공통을 적용하거나 한번에 모든 소스를 수정할 때에 가끔 어려움을 격어야 하기도 하고 문서 작업할 때 소스를 복사하면 들쑥날쑥해서 한번더 손을 대야하는 경우가 발생 합니다.

이런 상황을 방지하기 위해서는 tab 보다는 space를 사용하는게 좋은데 eclipse는 기본적으로 tab을 적용하게 되어 있어서 space를 사용하려면 한번 설정을 해줘야 합니다.

설정 방법은 파일 종류별로 하나씩 설정을 할 수도 있고

한번에 모든 파일에 적용되게 할 수도 있으며

기존에 작업한 파일들도 한방에 space로 전부 변경할 수도 있습니다.

하나씩 알아보도록 하겠습니다.

I. file 종류별 설정

1. Preferences 설정 창 열기

Eclipse 또는 STS(Spring boot)를 열고 메뉴에서

Windows > Preferences를 선택 하면 설정 창이 오픈 됩니다.

2. tab 검색

Preferences 창의 “type filter text” 부분에 설정을 위헤 “tab”을 입력해 검색을 진행 합니다.

좌측에 탭을 설정해야할 파일 종류별 목록들이 다 보이는 군요.  차례대로 하나씩 설정을 진행 합니다.

스페이스로 변경해야 하는 파일 종류만 선택해서 작업을 진행 하면 됩니다.

CSS는 디자이너랑 싸우기 싫은뎅…. 걍 넘어가야지….

3. java 파일 설정

파일 확장자가 java인 파일들의 tab 간격을 space로 변경하도록 합니다.

Java > Code Style > Formatter를 선택 하고

우측에서 [New] 버튼을 선택 하면 새로운 창이 나오는데

Profile name에 구분하기 좋은 임의의 명칭을 입력해 줍니다.   저는 java space로 입력 했습니다.

name 입력을 하였으면 [OK]버튼을 클릭 합니다.

이제 실제 설정 창이 나타나는데

Indentation > Tab policy에서 Tabs only로 선택되어 있는데 이것을 Spaces only로 변경하고

하단 우측의 [OK] 또는 [Apply] 버튼을 클릭 하여 설정화면을 닫습니다.

다시 Preferences 창으로 돌아와 보면 Formatter의 Active profile이 java space로 변경이 되었습니다.  만약 변경이 안되었다면 클릭해서 방금 수정한 java space를 선택하고 우측 하단 [Apply] 버튼을 클릭해서 설정이 반영되도록 합니다.

java만 설정하려는 거라면 [Apply and Close] 버튼을 클릭하여 Preferences 창을 닫으면 됩니다.

4. JavaScript 파일 설정

JavaScript 파일도 java 설정 방법과 동일하게 좌측 메뉴에서 Formatter를 선택하고

우측에서 [New] 버튼을 클릭해서 이름 설정 창을 오픈 합니다.

Profile name에 기억하기 좋은 이름을 입력하고 [OK] 버튼을 클릭 클릭하여 설정 창을 오픈 합니다.

설정 창 Indentation 탭에서 Spaces only를 선택하고 우측 하단의 [OK] 버튼을 클릭 합니다.

다시 Preference 창으로 돌아와 Active profile에 방금 설정한 이름으로 변경이 되었는지 확인 하고 우측 하단의 [Apply] 버튼을 클릭해서 설정을 반영 합니다.

5. css 파일 설정

css 파일 설정은 위에서 했던 설정 방법과는 조금 다르게 진행 되는데 좌측에서 Editor 메뉴를 선택합니다.

그리고 우측에서 Indent using spaces를 선택 하고 탭 사이즈도 알맞게 변경한 후에 [Apply] 버튼을 클릭해서 설정을 반영 합니다.

6. html 파일 설정

html은 css 파일 설정과 동일한 방법으로 좌측에서 Editor 를 선택 하고

우측에서 Indent using spaces를 선택 하고 탭 사이즈도 알맞게 변경한 후에 [Apply] 버튼을 클릭해서 설정을 반영 합니다.

7. xml 파일 설정

xml 파일도 Editor를 선택 하고

우측에서 Indent using spaces를 선택 하고 탭 사이즈도 알맞게 변경한 후에 [Apply] 버튼을 클릭해서 설정을 반영 합니다.

이렇게 해서 tab을 space로 변경이 필요한 파일 종류별로 설정하는 방법을 알아 보았습니다.

II. 모든 파일 설정 변경 방법

이번에는 각각의 파일 종류와 관계 없이 프로젝트에 포함된 모든 파일들에 대해 tab을 space로 한번에 변경하는 벙법에 대해 알아봅니다.

1. Preferences 창 열기

설정 창을 오픈하는 방법은 위에서 사용한 방법과 동일 합니다.

Eclipse 또는 STS를 열고 메뉴에서

Windows > Preferences를 선택 합니다.

2. tab 검색

Preferences 창의 “type filter text” 부분에 검색을 위헤 “tab”을 입력해 줍니다.

그리고 검색 결과에서 General >Editors > Text Editors를 선택 합니다.

우측에서 Insert spaces for tabs를 체크 하고 탭 간격(여기서는 4)을 입력해 줍니다.

설정이 완료되면 [Apply and Close] 버튼을 클릭 해서 설정을 반영 합니다.

모든 파일의 tab 간격을 space로 변경해야 한다면 정말 간단한 방법입니다.

III. space 설정 작업 반영하기

위에서 파일 종류별 설정 방법과 모든 파일에 대한 설정 방법에 대한 두가지 방법으로 tab을 space로 설정하는 것을 알아보았습니다.

그런데 설정을 했다고 기존에 tab으로 된 부분이 space로 자동으로 변경되는 것이 아니고 tab으로 작업된 부분은 그냥 원래대로 tab으로 남아있고 새로 작업하는 부분부터 space가 적용됩니다.

그래서 기존에 작업해 놓은 파일들에 대한 수정을 해야 하는데 이걸 한번에 수정하는 방법입니다.

I번 방법대로 하나의 파일 종류만 선택한 경우는 해당 종류만 변경되고

II번 방법대로 전체 파일에 대해 선택한 경우에는 모든 파일이 변경 됩니다.

프로젝트에 마우스를 놓고 우측 버튼을 클릭 합니다.

Source > Format을 클릭해 줍니다.

끝입니다.

모두 수정 되었습니다.

IV. 수정사항 확인

지금까지 여러 방법으로 설정을 해 보았는데 실제로 tab이 space로 변경이 되는지 확인해 보도록 하겠습니다.

설정을 통해 space와 tab이 기호로 표기되어 잘 보이도록 합니다.

상단메뉴에서

Window > Preference를 선택 하여 Preferences 팝업 창을 오픈하고

General > Editors > Text Editors를 선택 합니다.

우측에서 Show whitespace characters를 체크하고 하단에 있는 [Apply and Close] 버튼을 클릭 합니다

파일 하나를 열어보면 tab과 space(점)가 특수 기호로 보입니다.

10번 11번 라인은 java 파일에 대해 space를 적용하고 탭을 사용한 경우 getId()에 탭 대신 공백이 반영된 모습입니다.

보다시피 기존의 tab은 변함이 없고 신규로 작업하는 경우에만 tab이 space로 나타납니다.

이런경우 프로젝트 전체에 대해 설정을 반영하여 한번에 변경하는 방법을 사용해 보겠습니다.

위에서 III번에 해당하는 작업을 실행 합니다.(Project에 우측 마우스 클릭 > Source > Format 선택)

탭이 모두 스페이스로 수정 된것을 확인할 수 있습니다.

수정된 space를 다시 tab으로 되돌리고 싶으면 Ctrl + Z를 클릭하면 됩니다.

여기서 [OK] 버튼을 클릭하면 전체 수정 반영 이전으로 돌아갑니다.

필요한 부분만 잘 적용해서 사용하세요.

- copy coding -

STS에는 WAS인 tomcat이 포함되어 있어서 별도로 설치를 하지 않아도 되고 jar 파일을 생성하면 jar 파일내에 tomcat이 들어가기 때문에 개인지 테스트 삼하 작업 하기에는 편리한 툴 입니다.  물록 tomcat으로 서비스를 하는 회사들도 있기때문에 개발하고 바로 서비스를 할 수도 있습니다.  

작업 순서는

1. STS 다운로드 및 설치

2. 프로젝트 생성

3. 소스코드 개발

4. jar로 build 및 서비스

jar 파일을 만들기 위해 STS를 설치부터 해 봅니다.

https://spring.io/tools

사이트에 접속해서 OS에 맞는 버전을 다운로드 받습니다.

jar 형태의 압축파일을 풀고 contents.zip 압축파일도 풀어주면 sts-4.12.1 폴더를 얻을 수 있습니다.  압축은 zip 파일을 풀드시 일반적인 툴을 이용합니다.

여기서 한번더 contents를 풀면 됩니다.

SpringToolSuite4를 실행하고

작업을 진행할 폴더를 선택해주고 [Launch]를 선택하면

개발 툴 화면을 볼 수 있습니다.

한번 신규 프로젝트를 생성해 봅니다.

File > New > Spring Starter Project

Type, Packaging, Java Version, Languageㅇ 4개를 자신의 취향에 맞도록 수정 가능 합니다.  요즘에는 Maven 보다 Gradle을 많이 사용하니 Gradle로 설정을 해서 생성합니다.

간단한 확인만 하려는 것이니 [Spring Web]만 선택 합니다.

프로젝트가 생성이 되었고 기본적인 소스도 자동으로 만들어 집니다.

간단하게 사용할 것이므로 콘솔 버퍼는 나중에 변경시키기로 하고 일단 실행을 해 봅니다.

툴의 좌측 하단에서 demo 를 선택 하고 빨간색 네모 둘중 하나를(실행, 디버깅) 클릭하면 embeded tomcat이 8080으로 잘 실행 되었다고 우측에 표시 됩니다.

웹에서 확인해 봅니다.

아직 아무것도 만들지 않아서 기본 오류페이지가 잘 나오고 있습니다.  설치는 완료 되었군요.

API를 하나 생성 합니다.

실행하면

잘 되는군요. 이제 jar 파일을 생성해 봅니다.

Gradle Tasks를 열고 bootJar를 더블클릭 합니다.  빌드가 완료되면

build > libs 폴더에 파일이 생성 되었습니다.

생성된 jar 파일을 별도로 띄워 봅니다.  먼저 8080포트가 충돌나지 않도록 STS에 띄워놓은 프로젝트는 중지를 하고 CMD 창을 하나 열어서

Java로 실행을 해 봅니다.

java를 path에 등록 했다면

java -jar demo-0.0.1-SNAPSHOT.jar

그렇지 않다면 java의 전체 위치를 같이 사용하여 실행 합니다.

D:\Java\jdk1.8.0_131\bin\java -jar demo-0.0.1-SNAPSHOT.jar

실행이 되었다면 웹에서 확인해 봅니다.

잘 나오는 군요.  실제 서버에서도 이렇게 jar를 이용해서 서비스 해도 됩니다.

jar에는 내장 톰캣이 있는데 톰캣을 제외하고 외부 톰캣이나 다른 WAS를 사용한 테스트를 하기 위해 조만간 WAR로 배포를 해봐야겠네요.

- copy coding -

현재 나와있는 스프링 부트는 4버전이지만 좀 안정적인 사용을 위해서는 3버전을 설치하기로 하고 다운로드 페이지로 이동을 합니다.

https://github.com/spring-projects/toolsuite-distribution/wiki/Spring-Tool-Suite-3

Spring 사이트는 텍스트 위주로 되어 있어서 정보를 많이 얻을 수는 있지만 뭐가 찾으려면 직관적으로 찾기는 좀 어려운 사이트인것 같습니다.

링크된 페이지에 가면 Spring tools 최신 4버전 부터 아래로 버전별로 리스트 되어 있고 사용하려는 버전을 선택 하면 됩니다.

최신 버전은 4이지만 3버전의 마지막 배포본을 다운 받았습니다.

설치는 압축을 풀기만 하면 되기 때문에 가능하면 사용하려는 위치로 압축파일을 이동해서 풀어줍니다. 압축을 풀어줄 때 알집이 아닌 7zip을 이용하길 권장합니다.

알집으로 압축을 풀면 저만 그런가 오류가 발생해서 실행은 되지만 찜찜한 기분이 들어 7zip을 이용 합니다.

압축이 풀리면 3개의 폴더가 생기는데 이중 sts라고 되어 있는 폴더에 들어가 보면 

사용하려는 STS를 볼 수 있습니다.

STS.exe를 실행 합니다.

java를 설치하지 않았다면 JDK를 찾을 수 없다는 안내 창이 나타나고 기존에 java가 설치 되어 있다면 

다음과 같은 창이 나오고 작업 폴더를 선택하고 Launch 버튼을 클릭 합니다.

Spring boot 설치가 완료 되었습니다. 이제부터 좋은 프로그램을 만들기만 하면 됩니다.

- copy coding -

개인적으로는 좀 생소한 axboot.  생산성이 높다고 해서 한번 설치를 하려는데 eclipse 환경에 익숙해서인지 설치 자체가 부담으로 다가와 두번 설치 하라고 하면 못할 것 같아 몇자 적어둡니다.

사전에 작업해야 하는 부분은 Java, Tomcat, STS, lombok, git, node, bower 등의 프로그램을 설치해야 됩니다.  설치 항목이 너무 많아 중간에 그만 두려고 했을 정도로 좀 지겹습니다(나만 죽을 순 없지, 이걸 맨 마지막으로 옮길까? 올리기 전에 결정할것).  STS를 설치 하면서 왜 Tomcat도 설치 해야 하느냐는 외부에 있는 WAS를 사용하는 테스트를 하려는 것 입니다.( 만들다 보니 너무 길어서 외부 Tomcat 이용은 다음 기회에…)

1. JAVA 설치

Oracle 사이트에 접속하여 Java를 1.8.x 버전 이상을 다운받아 설치를 합니다.

Java를 설치하고 환경 변수 설정을 합니다.  설치 위치에 따라 폴더는 변경하면 됩니다.

JAVA_HOME

"F:\project\Java\jdk1.8.0_131"

Path에 %JAVA_HOME%\bin을 추가 합니다.

자세한 설명은 참조는 아래 링크를 참조 하세요.

Java 설치 및 환경 설정

2. Tomcat 설치

나중에 STS에 있는 WAS를 사용하지 않고 별도의 WAS를 사용 하려면 Apache 사이트에 접속하여 Tomcat를 다운받아 설치 합니다.  내부 WAS를 이용 하려면 다음으로 Pass 하세요.  이것도 설치 후에는 환경 변수 설정을 합니다.

CATALINA_HOME

"C:\project\apache-tomcat-8.5.39"

Tomcat 설치 관련 설명은 하단 링크 앞부분 참조.

eclipse java apache-tomcat 설치 (Windows)

3. STS 설치

사이트에 접속하여 설치를 진행 합니다.

https://spring.io/tools

설치는 파일을 다운로드 받은 후 압축을 풀어주기만 하면 됩니다.  자세한 사항은 하단 링크를 참조 합니다.

Spring Tools 설치 Spring Boot (STS 4.4.2.1)

4. lombok 설치

도메인 또는 VO로 부르는 class의 getter, setter 관련 자동화 도구입니다.  썰렁한 사이트에 접속해서 다운로드를 받습니다.

https://projectlombok.org/download

콘솔을 하나 열고 파일이 있는 폴더로 이동하여 다운받은 파일을 실행 합니다.

C:\project>java -jar lombok.jar

그러면 다음과 같은 창이 열리는데

여기에서 Specify location… 버튼을 클릭하고

STS 실행 파일을 선택 해주고

Install/Update 버튼을 클릭해 줍니다.

설치가 완료되면 Quit Installer 버튼을 클릭 합니다.

SpringToolSuite4.ini 파일을 열어 보면 다음과 같은 라인이 추가 되어있습니다.

-javaagent:C:\project\sts-4.2.1.RELEASE\lombok.jar

5. Git 설치

여기까지 오니 슬슬 질리기 시작하는데 그만둘 수도 없으니 계속 진행 해 봅니다.  Git도 사이트에 접속해서 설치를 합니다.

https://git-scm.com

설치 방법은 다운 받은 파일을 실행 하고 계속 다음 버튼을 클릭 해 줍니다.

자세한 설명은 하단을 참고 합니다.

[Git] Git 설치 하기 (Windows 용 - Git-2.20.1-64-bit)

6. Node 설치

Node도 사이트에 접속하여 파일을 다운로드 받습니다.

https://nodejs.org/ko/

다운로드 받은 파일을 실행하고 계속 다음 버튼을 클릭하고 설치가 완료되면 콘솔 모드에서 버전을 확인해 봅니다.

여기까지 오면 잘 설치가 된 것 입니다.  자세한 설치 설명은 하단 링크를 참고 합니다.

node.js 다운로드 및 설치하기

7. Bower 설치

화면 단 파일관리 툴인 Bower를 설치 합니다.  이건 위에서 설치한 node에 포함된 npm을 이용하여 설치를 합니다.  콘솔을 하나 열고

C:\>npm install -g bower

명령을 입력 하면 설치가 진행 됩니다.  –g는 global로 아무 폴더에서나 사용하기 위한 옵션 입니다.

여기 까지 해서 필요한 프로그램 설치는 완료 되었습니다.  개인적으로는 혹시나 해서 Maven도 설치를 했습니다.

8. axboot 소스코드 생성

이제 준비작업이 완료 되었으니 본격 적으로 axboot 관련 작업을 시작 합니다.

Sample 프로젝트를 하나 생성해 보기 위하여 Initializr 사이트에 접속 합니다. 

http://start.axboot.com/

사이트에 접속해서 필요한 항목을 입력합니다.

잘 안보이나요?

이케 적었습니다.  별거 없습니다.

Generate Project를 클릭 하면 소스가 다운로드 됩니다. webtest_20190527.zip 날짜가 추가 되어 있는데 압축을 풀면 날짜가 없는 폴더가 하단으로 생성 됩니다.

Command 창을 하나 열어 추가 작업을 시작 합니다. 작업은 package.json을 이용하여 plug-in을 download 하는 것으로 압축을 풀어놓은 위치로 이동을 합니다.

cd C:\project\webtest_20190527\webtest

이동하였으면

C:\project\webtest_20190527\webtest>npm install

명령을 입력 합니다.

한참 진행을 하다가 오류사항들이 나오는데 phthon2를 찾고 난리도 아닙니다.

설치 매뉴얼에 python 얘기는 없었기 때문에 오류가 나도 무시 하기로 하고 그냥 다음 단계로 진행을 합니다.

다음 단계는 실행을 하는 것 입니다.  콘솔의 동일한 폴더에서 다음 명령을 입력 합니다.

C:\project\workspace2\webtest>mvn spring-boot:run

한참 스크롤이 올라가며 다운로드 하고 뭔가 진행을 하다가 동작이 멈춥니다.  웹 페이를 열고 localhost:8080을 입력해 보았습니다

실행이 잘 되었군요. 스키마 및 초기 데이터 생성하기 버튼을 클릭 합니다.

원가 진행이 되고 있고 콘솔에서는 로그가 올라가기 시작 합니다.

현재 브라우저에서 진행되는 상황을 log로 제공하여 볼 수 있습니다.

잠시 후 초기화가 완료 됩니다.  확인 버튼을 클릭 합니다.

화면이 변경 되었습니다.

로그인 창인데 아이디와 패스워드는 입력이 되어 있습니다.  로그인 버튼을 클릭 합니다.

설치가 잘 완료 되었습니다.

메뉴를 하나씩 살펴보세요.