UNDEFINED

사실 Spring MVC 패턴을 기반으로 한 프로젝트를 만드는 방법은 간단합니다.

바로 STS(spring Tool Suite) 라는 개발툴을 다운 받으면 되는데요

https://spring.io/tools

사이트에 접속 하신 뒤

자신의 환경에 맞는 Spring Tools 4 for Eclipse 를 받아주신 후

SpringToolSuite4.exe 를 실행시킵니다. 그러면

이런 로딩창과 함께

이런 이클립스와 똑같이 생긴 개발 툴이 다운받아 지는데요

몇가지 설정을 더 해주어야 합니다.

메뉴의 Help 의 Eclipse Marketplace... 로 들어가셔서

sts 라고 치시면 나오는 Spring Tools 3 Add-On for Spring Tools 4

라고 되어있는 확장 프로그램을 설치해줍니다.

이런 창이 나오시면 Confirm > 을 눌러주시구요

I accept the terms 어쩌구 라고 되있는 체크박스에 동의한다는 체크를 해 주신 후

Finish 버튼을 눌러줍니다.

다 설치가 되고나면 재시작을 하겠냐는 안내창이 뜨구요

다시 시작이 되셨으면 File 메뉴의 New > Others... 를 클릭하셔서

Spring 폴더 아래의 Spring Legacy Project 를 선택하고 Next > 를 눌러줍니다.

그러면 이런 프로젝트 생성 창이 나오는데요

Spring MVC Project 를 선택해 주시고

적절한 프로젝트 이름을 입력 해 주신 후

Yes 를 누르구요

혹시 이런 오류 창이 나오신다면 프로젝트 구조가 com.app.project 

이런식으로 . 으로 구분되는 구조이기 때문에

저렇게 이름을 넣어주고 Finish 를 누르시면 됩니다.

그러면

이렇게 Spring MVC 패턴을 기반으로 한

모든 기본 설정이 되어있는 프로젝트가 생성이 됩니다.

또다른 방법으로는 전자정부 프레임워크(egovframework) 가 있는데요

이 프레임워크는 국가 공공기관 등의 프로젝트에서 많이 사용되기 때문에

알아두시면 도움이 되실 것 같아서 알려드리겠습니다.

우선

https://www.egovframe.go.kr/EgovDevEnvRelease_300.jsp?menu=3&submenu=2&leftsub=2#

이 사이트에 접속을 하신 뒤

다운로드 > 개발환경 > 3.x 다운로드에서

개발자용 개발환경 이라고 되있는 파일을

자신이 원하는 버전에 맞게 다운 받으시면 됩니다.

저렇게 다운로드 버튼을 누르시면

이런식으로 이메일을 입력하는 창이 뜨는데요

무시하시고 아래의 다운로드 버튼을 누르셔도 다운이 됩니다.

혹시 안된다면 이메일을 입력하시면 되구요

다 다운이 받아지면

이런 설치 파일이 다운되는데

실행시키시면

이런 설치 창이 나타나는데

Browse... 버튼을 눌러 자신이 설치하고자 하는 폴더를 선택해 주신 후

Extract 버튼을 클릭하시면 설치가 됩니다.

해당 폴더에 들어가보시면

위의 두개의 폴더가 있을 텐데 

eclipse 폴더에 들어가셔서

eclipse 를 실행시켜 주시면

이렇게 프로젝트 폴더를 선택하는 창이 뜨는데

Browse... 버튼을 눌러

설치된 다른 폴더인 project 를 선택해주고

Launch 버튼을 눌러 줍니다.

그러면 똑같은 이클립스가 실행이 되는데,

여기에서 STS 와 동일하게

File > new > Others 를 선택하신 후

egovframework 라는 폴더의

eGovFrame Web Project 를 선택해 주시고

프로젝트 이름과 Target Runtime 오른쪽의 New... 를 눌러

각자 설치된 Tomcat 버전을 선택하신 후

Browse... 버튼을 눌러 자신의 Tomcat 이 설치된 폴더를 선택하고

Finish 버튼을 눌러주시면

이렇게 전자정부프레임워크 기반의 프로젝트가 생성이 됩니다.

간단하게 설명하려 했으나

설명이 꽤 길어진 관계로 직접 Dynamic Web Project 에서 설정해보는 방법은

다음 포스팅때 다뤄보도록 하겠습니다.

오늘도 긴 글 읽어주셔서 감사합니다.

자바 개발자 특히 웹개발자로 일을 하기 위해선 반드시 알아야 할 개념이 있습니다.

Spring 과 Maven 입니다.

Spring 의 개념을 인터넷에서 찾아보면 빠지지 않고 등장하는 말이 있습니다

“

스프링이란 어떤 것이다라고 한마디로 정의하기는 쉽지 않다. 스프링에 대해 가장 잘 알려진 정의는 이렇다.

자바 엔터프라이즈 개발을 편하게 해주는 오픈소스 경량급 애플리케이션 프레임워크

“

저도 저 말을 듣고 이해할 뿐이지 모르는 사람에서 설명을 하라고 한다면 도저히 이해시킬 자신이 없습니다.

단 ‘프레임워크’ 라는 단어는 기억하셨으면 좋겠습니다.

그냥 제 식대로 예를 들어가며 설명을 해 보겠습니다.

만약 당신이 아무것도 없는 상태에서 목재 가구를 만든다고 생각해 봅시다.

우선 설계를 해야겠죠

가로 몇미터 세로 몇미터짜리 나무 판자 몇 개를 이용하여

어떤 모양으로, 어떤 크기로, 어떤 기능을 할 지

못은 몇 개가 필요하고 망치, 톱 등 어떤 공구가 필요한 지

하나부터 열까지 다 정해야 합니다.

여차저차해서 다 정하고 나면

나무부터 구해야겠죠

공구점에가서 필요한 공구를 산 다음 숲으로 나무를 베러 갑니다.

원하는 크기의 나무가 나올 때까지 나무를 찾아다닌 뒤 나무를 베고 그 나무를 원하는 크기로 다시 가공해야합니다.

저는 여기까지 오기 전에 진작에 가구 만드는걸 포기했을 것 같습니다.

그런데 이 때 이케아 매장이 근처에 생겼습니다.

이케아에 가 보니 내가 필요한 가구가 종류별로 크기별로 조립만 하면 가구를 만들 수 있도록

가공된 제품을 팔고 있습니다.

저는 필요한 제품을 사서 조립만 하면 되겠죠

이렇게 내가 필요한 개발 환경을 편하게 제공해 주어서 나는 만드는 데에만 집중할 수 있도록 해주는 것이

‘스프링 프레임워크’ 입니다.

물론 비유가 좀 잘못됐다고 생각하시는 분들도 있으실 겁니다.

이케아에서 파는 제품은 내가 원하는 대로 만드는 것이 아니라 정해진 대로만 만들어야 하기 때문입니다.

음 그렇다면 다른 예를 들어보겠습니다.

Powerpoint로 발표자료를 만들 때

배경색, 글씨체, 크기, 그림, 그라데이션 애니메이션 등등

하나하나 다 처음부터 만드시는 분들은 거의 없으실 겁니다.

대부분 인터넷에서 무료로 베포하거나 혹은 판매하는 템플릿을 다운받아서 사용하신 적이 있으실 겁니다.

이 템플릿을 스프링 프레임워크라고 생각하시면 될 것 같습니다.

템플릿을 이용하면 디자인에 들일 시간과 노력을

발표 자료에 양과 질에 더 투자할 수 있으니까요

여기까지가 대략적인 스프링의 개념에 관한 간단한 비유적 설명이었습니다.

그렇다면 메이븐은 어떻게 설명할 수 있을까요?

메이븐은 한마디로 아이언맨에게 자비스 같은 존재라고 할 수 있습니다.

토니스타크가 뭔개 개발을 할 때, 혹은 전투를 할 때

자비스에게 수시로 뭔가필요한 것을 부탁하면

자비스는 그자리에서 바로바로 토니스타크가 필요로 하는 무언가를 제공해 주지요

자바로 무언가 개발을 할 때 모든 기능(함수라고 불리는)들을 바로 쓸 수 있는 것은 아닙니다.

그때그때 필요한 API 혹은 라이브러리들을 찾아서 import 시켜주고 build 시켜주어야 하지요

그런데 이 때 내가 필요로 하는 기능들을 하나하나 필요할 때마다 찾아서 빌드를 시켜준다면

아마 아이언맨은 아직까지 개발이 되지 않았을 지도 모릅니다.

이렇게 pom.xml 이라는 파일에 내가 필요한 라이브러리들을 기술하기만 하면

알아서 웹상에서 찾아서 가져와 프로젝트에 포함시키고 빌드시켜주는 것이 바로 메이븐 입니다.

여기까지가 스프링과 메이븐에 관한 아주 간단하고 비유적인 개념 설명이었습니다.

좀 비전문적일 순 있지만 초보분들이 어떻게 하면 쉽게 이해할 수 있을까 하는 관점에서 풀어쓰게 되었는데

혹시 저와 생각이 다르시다거나 태클을 거실 부분들이 있다면 언제든지 댓글 달아주세요.

그럼 다음 포스팅에서는 제가 공부한

스프링과 메이븐의 기본 설정 방법을 알려드리겠습니다.

긴 글 읽어주셔서 감사합니다.

(- -)(_ _)

Controller에서 보낸 변수를 Jstl로 자바스크립트에서 가져오는 방법은 크게 두가지가 있습니다.

var searchItem='<c:out value="${searchItem}"/>'

var searchItem2=${searchItem}

입니다.

두 변수를 각각 콘솔로 찍어보면

콘솔창에는 이렇게 표시가 됩니다.

소스탭에서 보면

이렇게 나오네요

즉

1의 방법은 value 값을 문자열로 받아오겠다는 의미이고

2의 방법은 Html Object 그 자체로 받아오겠다는 의미가 됩니다.

따라서 만약 자바스크립트에서 저 value 의 값을 사용하려면

1은 변수에 value 값이 담기기 때문에 그대로 사용하시면 되지만

2는 Object 이기 때문에 searchItem.value 의 방법으로 사용하셔야 합니다.

콘솔로 찍어보면

이렇게 나오는걸 확인할 수 있습니다.

메이븐 프로젝트 코딩을 하던 중

여러개의 변수를 Map 에 담아

Mybatis Sqlmapper 를 이용하여

쿼리를 날려야 하는 작업이 있었습니다.

맵에 담긴 여러 변수 중

일부는 테이블 이름 혹은 컬럼 이름으로 매핑되고

일부는 WHERE 조건절 등의 변수로 사용해야하는데

일반적으로 사용하는 #{변수명} 으로 파라미터를 받아왔더니

Bad SQL 에러가 뜨는 것이었습니다.

한참을 헤메고 고민하다가 결국 선임개발자에게 질문을 했는데

너무나 명쾌하게 고민을 해결해주셔서

혹시나 같은 고민을 하시는 분들이 계실까봐

이렇게 포스팅을 하게 되었습니다.

Dao 에서 전달한 파라미터를

sqlmapper에서 받아오는 방법은

크게

${변수명}

와

#{변수명}

으로 나뉩니다.

$ 은 한마디로 말하면 상수값

즉 쿼리를 날릴 때 ' ' 에 들어가지 않는 값이고

# 은 변수값 즉 ' ' 안에 들어가는 값을 받아와서 자동으로 매핑시켜 줍니다.

예를 들어 보겠습니다.

PEOPLE

이런 테이블이 있을 때

이름이 '지엔키' 인 사람의 주소를 가져오려면

SELECT ADDRESS FROM PEOPLE WHERE NAME='지엔키';

가 되겠죠?

이 때

SQLMapper 에

SELECT ${columnName} FROM PEOPLE WHERE NAME=#{name}

이렇게 설정 을 해주면

sqlmapper 가 자동으로

$ 가 붙은 컬럼이름, 즉 상수에는 ' ' 를 붙이지 않고

# 가 붙은 변수 에는 ' ' 를 붙여 쿼리를 날리게 된다는 겁니다.

굉장히 간단하지만 꼭 필요한 걸

이제라도 알게되어서

혹시나 필요한 분들에게 도움이 되셨기를 바랍니다.

GIT 과 SVN 을 이해하려면 먼저 형상관리(버전관리)에 대해 이해해야 한다.

프로젝트를 진행할 때 각자 업무를 나눠서 맡은 부분을 개발을 하게 되는데,

각자가 개발한 코드 혹은 문서들을 하나의 관리 도구에서 통합적으로, 버전별로 관리하게 되는 것을

형상관리(Configuration Management) 혹은 버전관리(Version Management)라고 부른다.

형상관리, 버전관리, 변경관리 등 용어는 다양하지만

실무에서 사용하는 의미는 거의 비슷하기 때문에 구분하지 않고 사용하는 경우가 많다.

형상관리 방식에는 크게 중앙집중식과 분산관리식 으로 나뉘는데

대표적으로 사용되는 도구가

중앙집중관리식의 SVN 그리고 분산관리식의 GIT 이다.

SVN 은 내 로컬PC 에서 Commit을 하면 바로 중앙저장소에 반영이 되는 반면

GIT 은 내 로컬PC에서 Commit을 하면 로컬 저장소에 반영이 되고 로컬저장소에서 Push를 하면

원격저장소에 반영이 된다.

SVN의 최대의 장점은 직관적이다.

모든 사람이 중앙서버에 있는 같은 자료를 받아오고

내가 Commit을 하는 순간 모든 사람에게 공유가 된다.

이러한 방식의 단점은 만약 두 사람이 하나의 파일을 동시에 수정하고 커밋하였을 때

충돌이 일어날 확률이 높다는 얘기이다.

반면 GIT은 직관적이지 못하고 적응하는데에 시간이 필요하다.

내가 한 작업물을 원격저장소에 올리려면

우선 로컬PC 에서 작업내용을 Commit 하여 로컬 저장소에 반영한 후,

원격저장소에서 fetch로 로컬저장소로 마스터 파일을 받아와서

충돌이 나지 않게 merge를 이용하여 합친 다음,

로컬 저장소의 내용을 Push 하여 원격저장소에 올리면 그때 다른 사람들에게 나의 작업 내용이 공유가 된다.

그러나 GIT 의 장점은

모든 작업이 로컬에서 이루어지고 네트워크 사용은 원격 저장소로 저장할 때 한 번 이루어지므로

개발 시 처리속도가 빠르고,

웹 상에 저장소를 둘 수 있기 때문에

언제 어디서나 협업을 할 수 있고(이건 단점일수도…),

여러 사람이 가지가 뻗어나가듯 자신의 작업을 하기 때문에 이를 브랜치 라고 하는데,

브랜치와 머지의 상호작용을 잘 할 수 있도록 편의성을 잘 제공해주기 때문에 협업이 더욱더 용이해진다.

그리고 원격저장소의 내용이 모든 협업자들의 로컬 저장소에 저장이 되어 있으므로

중앙저장소에 에러가 생기면 모든 작업이 마비되는 SVN 과 다르게

원격저장소에 에러가 생겨도 로컬에서 복구하기 용이하고,

히스토리 관리가 잘 제공되어 있어 히스토리 관리가 용이하다.

 출처 :

https://rojhw.tistory.com/27?category=618906

https://www.slideshare.net/justinyoo/git-from-svn

https://www.slideshare.net/einsub/svn-git-17386752

http://blog.naver.com/PostView.nhn?blogId=special9486&logNo=220197084141&categoryNo=0&parentCategoryNo=17&viewDate=¤tPage=1&postListTopCurrentPage=1&from=postView

이런 jsp 페이지를 만들어 봅시다.

 제목에서 알 수 있듯이

아이디, 비밀번호를 입력하고

버튼을 누르면

hidden 값에 저장된 값과

텍스트 와 패스워드 필드에 입력된 값을 비교 후

alert 문을 이용하여 아이디 비밀번호 매치 여부를 알려주는

그런 간단하고 가장 기본이 되는 코드 입니다.

참고로 alert 문은 확인창? 안내창? 경고창? 같은 그런 창입니다.

아마 직접 저 코드를 작성하신 뒤 실행시켜 보시면 알 수 있으실 겁니다.

코드를 간단히 설명드리자면

버튼 태그에 onclick="buttonFunction()" 이라는 코드를 추가하여

버튼을 클릭할 시 어떤 이벤트(함수) 을 발생시킬 지 정의를 해 줍니다.

그리고 그 함수는 </head> 태그 바로 아래의

<script></script> 사이에 정의해두었습니다.

document.getElementById 라는 메소드를 이용하여

각 태그들에 미리 id="" 이라는 고유의 아이디 값을 부여하여

그 아이디값의 value 에 들어있는 값을 가져 온 뒤

hidden 태그 값에 미리 value 를 정의해둔 값과 비교하여

맞으면 맞다고 틀리면 틀리다고 안내메시지를 띄워주는 코드입니다.

이런식으로 코드들이 서로 상호작용하여 동작하면서

기능들을 만들어 나가는 것입니다.

만약 정말 개발쪽 공부를 하시고싶은 분들이라면

가장 기본적이면서도 가장 많이 쓰이게 될 형식이니

코드를 복붙 하지 마시고 직접 한번 타이핑 해보시면서

실습해보시는걸 추천드립니다.

저 페이지를 실행시켜보면

이런 로그인 폼이 생성되고

만약 아이디가 hidden1 값과 다르다면

이런 메시지가,

비밀번호가 hidden2 와 다르다면

이런 메시지가,

아이디와 비밀번호 모두 일치한다면

이런 메시지가 뜨게되는 간단한 코드입니다.

한번만 코드를 읽어보신다면 이해하시는데 어렵진 않으실겁니다.

홈페이지는 대부분 마우스의 클릭과 키보드의 타이핑으로 동작을 합니다.

클릭을 하기 위해선 버튼이 있어야 하고

타이핑을 하기 위해선 텍스트 필드가 있어야 합니다.

그래서 이번시간에는

JSP 의 가장 기초 중 하나인

input type 들과

가장 많이 쓰이는 태그 중 하나인 a 태그에 대해서 알아보겠습니다.

위의 사진은 https://www.w3schools.com/tags/att_input_type.asp

사이트에서 퍼온 현재 제공되는 input type 들입니다.

개발을 하다 보면 구글링을 통해 영어로 된 문서를 읽어야 할 때가 정말 많습니다.

지금부터라도 영어공부와 병행하시는걸 진심으로 추천해드립니다.

저기 제공되는 태그들 중

5자로 슈퍼맨같은 마크가 박혀있는 타입들은

html5 버전에서 새롭게 제공되는 태그들입니다.

사실 많이 쓰이지도 않고 표준에 맞게 개발을 하다보면 쓰고싶어도 쓰지 못할때가 종종 있으니

저 마크가 없는 중요하고 자주 쓰이는 타입들 위주로 살펴보겠습니다.

<body></body> 사이에 저렇게 코드를 써준 뒤 저번처럼 실행시켜주게되면

위와같은 화면이 출력되게 됩니다.

하나씩 설명을 해드리자면

1. text : 말 그대로 텍스트를 입력할 수 있는 타입입니다. 여기에 입력된 텍스트들을 value 에 담아서 사용할 수 있습니다.

2. button : 눌렀을 때 어떠한 이벤트들을 발생시킬 수 있는 가장 기본적인 태그입니다.

3. checkbox : 여러개의 선택지 중 여러개를 선택할 수 있도록 하는 체크박스 입니다.

4. file : 첨부파일을 생각하시면 됩니다. 파일선택 버튼을 클릭 시 내 컴퓨터의 파일 하나를 첨부할 수 있습니다.

5. hidden : 숨겨진 태그입니다. 어떠한 값을 숨겨놓고 사용하고 싶을 때 사용하시면 됩니다.

6. password : 비밀번호 입니다. 보시는것과 같이 타이핑을 해도 검은 동그라미로만 표시가 됩니다.

7. radio : 여러개의 선택지들 중 하나만 선택할 수 있는 라디오박스입니다.

8. submit : 확인, 혹은 제출의 의미로 생각하시면 되겠습니다. 버튼을 눌렀을 때와 거의 동일하게 사용되지만, 해당 태그가 쌓여져 있는 폼의 속성에 의해 움직이게 됩니다.

9. reset : 초기화 버튼입니다. 예를들면 텍스트 타입에 글을 입력하다가 reset 버튼을 누르게 되면

작성하던 텍스트를 모두 지우고 초기화 시킬 수 있습니다.

이러한 타입들이 자바스크립트, 혹은 제이쿼리와 같은 언어들에 의해 기능이 추가되고 이벤트가 발생하게 되면 동작들을 하게 됩니다.

다음은 input type 은 아니지만 가장 기본적이고 가장 많이 쓰이는

a 태그 입니다.

이런식으로 <a  href="" ></a> 와 같은 형식으로 사용을 해주게 되고

위의 코드를 실행시켜보면

위와 같은 파란글씨로 밑줄이 쳐진 태그가 생성이 되게 됩니다.

저 글씨를 클릭하면 href 위에 적혀진 주소로 이동을 할 수 있게 됩니다.

가장 간단하면서도 기본적인 태그들에 대해 알아봤으니

다음시간에는 간략하게 태그들이 어떻게 동작하는지 알아보겠습니다.