comtK

안녕하세요~ 오늘은 이전시간에 말했던것처럼 myBatis를 해볼까합니다.

지금 인터넷찾아보고 설정하면서 실시간으로 작성하는중인데

과연 오늘안으로 할수있을지 걱정입니다..ㅋㅋ

저번주(2015-09-13)에 여기까지 작성하고 내가 이걸 해도되나 생각좀 해보다가 오늘(2015-09-20)에서야 올려요ㅠ

아무래도 보고나서 하는거다보니 좀 캥겼나봐요ㅠ

이제 진짜 시작하겠습니다!!

빨간 점이 찍혀있는 파일 및 폴더는 이번에 설정하면서 수정 혹은 생성되는 파일들입니다.

일단 pom.xml에 아래와 같은 dependency를 추가해줍니다.

저는 mysql로 작업중이라서 mysql을 추가했는데, 각자 사용하시는 DBMS에 맞게 추가해주세요!!

다음으로는 root-context,xml입니다.

자 위에서부터 설명을 좀 해보면, db properties부분은 db의 정보를 설정하는 부분인데, 저는 다른곳에 properties파일을 만들어서 따로 저장해두었습니다. 그래서 거기서 정보를 읽어오는데, 그에대한 설정은 <bean>안에 <property>에서 파일위치를 알려줘서 거기서 가져오도록 하였습니다. 이부분을 해주지 않으면 아래 dataSource 설정할때 위 소스처럼 사용이 불가능합니다. 해주지 않으면 ${..} 대신에 정보를 직접 입력하셔도 됩니다.

db.properties 내용입니다.

위에서 '=' 왼쪽부분이 id처럼 사용됩니다.

자 그아래 dataSource부분!! 위에 properties에서 읽어온 정보를 적용시켜주면서 DB의 정보를 설정해주는 부분이에요. 위 소스보다 dataSource가 더 중요한부분입니다. 각자 자신이 사용하는 DBMS에 맞는 드라이버와 URL 및 계정정보를 입력해주시면 됩니다. 해당 빈에 id를 추가해주세요. 이 id는 그 아래 설정에서 사용하게 됩니다.

DB에 대한 정보를 계속 입력하지 않고, 한번 설정한 다음에 id를 부여해서 해당 id를 찾아가서 설정된 속성들을 가져오기때문에, 이부분(id)은 괜히 오타내지 마시고 복붙하시는게 좋다고 생각됩니다.

다음으로 transactionManager 입니다.

이름만 들어도 트랜잭션 관리를 하는 녀석인데.. DB에 대한 정보를 필요로하는것같습니다.

위에서 설정해준 id를 ref부분에 입력해주시면 됩니다.

그다음 sqlSessionFactory 입니다.

dataSource부분은 넘어가겠습니다.

그 아래 보시면 configLocation이 있습니다. 이름만봐도 알수있는 설정파일 위치입니다.

저기서 자주쓰는 자료형같은것들을 미리 설정해주면 나중에 parameter나 result를 념겨주고 가져오는데 좋습니다.

mybatis-config.xml 파일을 보겠습니다.

자 왼쪽에 type에 보면 java.부터 해서 마지막까지 주르륵 쓰여있습니다.

오른쪽에는 alias라고해서 짧게 정의되어있어요. 

이게 무슨말이냐 하면, alias를 작성해면 alias에 해당하는 type을 사용한다는 의미입니다.

값을 주고받을때 원래는 type에 있는 내용을 다 작성해야하는데 언제 java.부터 치고있어요ㅠ

다음은 mapperLocations 입니다.

실제도 돌리는 sql파일들을 말하는겁니다.

저같은 경우는 해당 패키지 안에있는 xml파일들 전체를 설정하였습니다.

마지막으로, typeAliasesPackage 입니다.

value를 보시면 vo가 들어있는 패키지로 설정되어있습니다.

이게 뭔지 말씀드리자면, 한마디로 설정한패키지 안에있는 (vo패키지 안에있는) 파일들에 대해서 configLocation 에서 설정한것처럼 alias를 부여해주겠다는 의미입니다.

그런데 보시면 따로 alias에 대한 이름은 없습니다. 저 패키지안에 뭐가 얼마나 들어갈지 모르는데 그걸 어떻게 미리 alias를 지정할수있을까요ㅠ 그럼 어떻게하느냐? 해당 class파일명으로 alias가 됩니다.

mybatis-config.xml 의 <typeAlias> 내용을 생각하시면 이해가 빠릅니다.

그냥 딱 저것처름 된다는거라서,, 뭐라고 더 설명할게 없어요ㅠ

마지막은 sqlSession인데...

sqlSessionFactory 의 정보를 갖고 세션관리를 한다고만 알고있습니다... 정확히는 저도 더 공부를 해봐야해요ㅠ

위에 root-context 하다가 시간을 다보냈어요..ㅠ 이렇게 오래걸릴줄이야ㅠ

역시 아는거랑 설명하는거랑은 차이가 크네요ㅠ

다음 보겠습니다ㅠ!

바로 이야기해볼께요.

처음 component-scan 부분에 보시면 base-package가 보입니다.

해당 패키지안에 있는 class파일들을 스캔하여 bean으로 등록해줍니다.

모든파일을 등록하는것이 아니라, '@Controller'나 '@Component'등의 어노테이션이 붙은 친구에 한해서 말이죠.

annotation-driven transaction-manager

1-3에서 설정한 transactionManager를 기반으로 트랜잭션을 관리해주는것이라고 생각됩니다.

이부분은 계속 찾아보면서 공부하고있는데 아직 확립이 잘 안돼요..ㅠ

자 이제 실직적인 구현부분입니다.

controller 먼저 보겠습니다.

빨간점 부분만 보시면됩니다.

나머지는 이전시간에 하던작업이랑 다른게 없어요.

이렇게 service를 등록해줍니다.

하지만 따라하시는분들은 service가 없을꺼에요.

괜찮아요 이제 만들꺼니까 ㅋㅋ

이렇게 인터페이스를 만들어줍시다.

여기에 인터페이스를 만들고 구현은 좀 뒤에 하겠습니다.

이렇게 mapper를 작성해줍니다.

역시 빨간점부분을 신경써서 보세요.

자, service와 mapper를 모두 만들고 난 후에 실제 구현을 해보겠습니다.

역시 빨.간.점!! 신경써서 보세요.

저는 처음에 할때 몇부분 빼먹어서 안된다고 징징대다가 혼나적이 한두번이 아닙니다....ㅠㅠ

service로 등록해주시고, 트랜잭션 처리를 위해 '@Transactional'을 적어줍니다.

'@Transactional'은 method 단위로도 사용 가능합니다.

그다음에 아까만든 service를 구현합니다.

구현하면서 DB에 접근할때 mapper를 사용하여 접근합니다.

그런데 DB에 접근해서 주고받고 한다고 하는데.. 저희는 sql을 작성한적이 없어요.

어디서할까요??

자 여기가 제일 중요한거같은데요.. 위에서 막 설정하고 그런거 여기 다나와요ㅠ

설명은 빨.간.점 기준으로 하겠습니다.

맨먼저 '<mapper>'를 보겠습니다.

'namespace'를 보시면 특정 mapper를 지정하였습니다.

저 mapper는 아까 인터페이스로 만든 mapper입니다.

위에서 만든 mapper에서 메소드명이 sql파일에서 id가 됩니다.

'<insert>'안에 'id' 보이시나요? 위로 올려서 mapper부분 보시면 메소드명이랑 일치합니다.

둘이 일치하지않으면 에러나요ㅠ 꼭 일치시켜 주세요ㅠ

다음으로 보시면 'parameterType'이 보입니다. 저부분이 아까 1-3. root-content.xml에서 sqlSessionFactory의 typeAliasesPackage를 설정해서 저렇게 간단히 사용가능한겁니다. 만약 그렇게 안했으면, com.contk.vo.HallCommentVO' 이걸 전부 입력했어야 합니다. 패키지명까지 전부 말이죠.

그 다음으로 3번째 'resultType'에 'Integer' 보이시나요? 이건 1-3. root-content.xml에서 sqlSessionFactory의 configLocation을 설정해논 덕분에 'Integer' 로 사용이 가능한겁니다.

자 마지막입니다.

'${id}' 보이시나요?? 저건 'HallSeatGradeVO' 안에있는 변수명입니다.

'serviceImp'에서 로직을 구현하면서 설정한 값이 들어갑니다. 자료형에 맞에 알아서 들어가니까 저렇게 써주시면 됩니다. 숫자일경우 ''없이 알아서 들어갑니다.

혼자 대충이해하고 말때는 금방인데 설명하려니 정말 다르네요.

크게 신경안쓰던것도 신경쓰면서 공부하게되고... 블로그 하길 잘한거같아요.

설명은 1차적으로 잘까먹는 저를위해 하는것도 있어요ㅠㅠ

다음번에는 스프링 시큐리티를 해볼까요!!

사실 지금까지 작성한건 이전에도 대충이라도 한두번 해봤던거라서 좀 나았는데 시큐리티 잘 할수있을지 ㅋㅋ

뭐 구글링을 잘 하면 되겠죠 ㅋㅋ 보시면서 도움이 되는지 모르겠네요 지극히 주관적으로 이해하고 그대로 작성하다보니... 틀린부분은 알려주시면 감사하겠습니다.

그럼 이만적고, 다음에 봐요!!

설정을 끝내고 이제 form으로 입력테스트를 하는중에, 한글데이터가 깨지는 현상이 발견됐다.

어씨? 뭐지 하면서 잠깐 고민했는데, 아까 '@Autowired' 에러났을때 'web.xml'에서 한글관련 필터를 본게 생각나서 얼른가서 긁어서 적용했다.

<filter>

<filter-name>CharacterEncodingFilter</filter-name>

<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>

<init-param>

<param-name>encoding</param-name>

<param-value>UTF-8</param-value>

</init-param>

<init-param>

<param-name>forceEncoding</param-name>

<param-value>true</param-value>

</init-param>

</filter>

<filter-mapping>

<filter-name>CharacterEncodingFilter</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

역시나 추가하니까 바로 한글 잘 넘어간다. 형꺼보고 배우는게 많다...

내 블로그 알려줬는데 보겠지.. 얼른 다른거 써야 이런거 못보는데..

나중에 오라클 인덱스관련해서 설명해놓은거 허락받고 가져올생각중이다.

ERROR: org.springframework.web.servlet.DispatcherServlet - Context initialization failed

org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'hallController': Injection of autowired dependencies failed; nested exception is org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.service.HallService com.comtk.controller.HallController.hallService; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'hallServiceImp': Injection of autowired dependencies failed; nested exception is org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.mapper.HallMapper com.comtk.imp.HallServiceImp.hallMapper; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.comtk.mapper.HallMapper] found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:288)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1116)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:519)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:458)

at org.springframework.beans.factory.support.AbstractBeanFactory$1.getObject(AbstractBeanFactory.java:295)

at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:223)

at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:292)

at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:194)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:626)

at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:932)

at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:479)

at org.springframework.web.servlet.FrameworkServlet.configureAndRefreshWebApplicationContext(FrameworkServlet.java:651)

at org.springframework.web.servlet.FrameworkServlet.createWebApplicationContext(FrameworkServlet.java:599)

at org.springframework.web.servlet.FrameworkServlet.createWebApplicationContext(FrameworkServlet.java:665)

at org.springframework.web.servlet.FrameworkServlet.initWebApplicationContext(FrameworkServlet.java:518)

at org.springframework.web.servlet.FrameworkServlet.initServletBean(FrameworkServlet.java:459)

at org.springframework.web.servlet.HttpServletBean.init(HttpServletBean.java:136)

at javax.servlet.GenericServlet.init(GenericServlet.java:158)

at org.apache.catalina.core.StandardWrapper.initServlet(StandardWrapper.java:1231)

at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1144)

at org.apache.catalina.core.StandardWrapper.load(StandardWrapper.java:1031)

at org.apache.catalina.core.StandardContext.loadOnStartup(StandardContext.java:4914)

at org.apache.catalina.core.StandardContext.startInternal(StandardContext.java:5201)

at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:150)

at org.apache.catalina.core.ContainerBase.addChildInternal(ContainerBase.java:725)

at org.apache.catalina.core.ContainerBase.addChild(ContainerBase.java:701)

at org.apache.catalina.core.StandardHost.addChild(StandardHost.java:717)

at org.apache.catalina.startup.HostConfig.deployDescriptor(HostConfig.java:586)

at org.apache.catalina.startup.HostConfig$DeployDescriptor.run(HostConfig.java:1750)

at java.util.concurrent.Executors$RunnableAdapter.call(Unknown Source)

at java.util.concurrent.FutureTask.run(Unknown Source)

at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)

at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)

at java.lang.Thread.run(Unknown Source)

Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.service.HallService com.comtk.controller.HallController.hallService; nested exception is org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'hallServiceImp': Injection of autowired dependencies failed; nested exception is org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.mapper.HallMapper com.comtk.imp.HallServiceImp.hallMapper; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.comtk.mapper.HallMapper] found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:514)

at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:87)

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:285)

... 33 more

Caused by: org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'hallServiceImp': Injection of autowired dependencies failed; nested exception is org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.mapper.HallMapper com.comtk.imp.HallServiceImp.hallMapper; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.comtk.mapper.HallMapper] found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:288)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.populateBean(AbstractAutowireCapableBeanFactory.java:1116)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:519)

at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:458)

at org.springframework.beans.factory.support.AbstractBeanFactory$1.getObject(AbstractBeanFactory.java:295)

at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:223)

at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:292)

at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:194)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.findAutowireCandidates(DefaultListableBeanFactory.java:910)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:853)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:768)

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:486)

... 35 more

Caused by: org.springframework.beans.factory.BeanCreationException: Could not autowire field: private com.comtk.mapper.HallMapper com.comtk.imp.HallServiceImp.hallMapper; nested exception is org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.comtk.mapper.HallMapper] found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:514)

at org.springframework.beans.factory.annotation.InjectionMetadata.inject(InjectionMetadata.java:87)

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor.postProcessPropertyValues(AutowiredAnnotationBeanPostProcessor.java:285)

... 46 more

Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type [com.comtk.mapper.HallMapper] found for dependency: expected at least 1 bean which qualifies as autowire candidate for this dependency. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

at org.springframework.beans.factory.support.DefaultListableBeanFactory.raiseNoSuchBeanDefinitionException(DefaultListableBeanFactory.java:986)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.doResolveDependency(DefaultListableBeanFactory.java:856)

at org.springframework.beans.factory.support.DefaultListableBeanFactory.resolveDependency(DefaultListableBeanFactory.java:768)

at org.springframework.beans.factory.annotation.AutowiredAnnotationBeanPostProcessor$AutowiredFieldElement.inject(AutowiredAnnotationBeanPostProcessor.java:486)

... 48 more

이런 에러가 났다.

넋두리에서 적은것처럼 난 복붙을 하면서 작업했다.

뭐가문제일까 잘 보는데 도대체 알수가 없었다.

hallcontroller와 hallmapper가 보여서 계속 찾아봤으나 알수가없었다.

구글링을 2시간정도 하면서 할려주는대로 다 해봤는데 안됐다...

다시 하나씩 뜯어보던중에.... mapperscanner에서 value를 잘못썼다... 사실 잘 썼는데, 프로젝트랑 패키지명이 맘에안들어서 막 바꾸고나서 저걸 안바꿔줬더니 이런 에러가 났다.

이글 작성하면서 자세히 보니 맨 위에 'Context initialization failed' 이게 바로보이네..

그래도 이거잡으면서 이것저것 잘못설정해놓은 것들을 다 잡았다. 나중에 아마 또 이럴거같으니 적어놔야지.

안녕하세요! 1주일만에 작성하는거같네요ㅠ

게을터러져서 참... 이러면 안돼는데 왜이럴까..ㅠ

헛소리 그만하고 바로 시작하겠습니다ㅠ!

화면을 구성하는데 있어서 하나의 파일이 아닌 여러부분을 따로 작업해서 하나로 묶어 화면에 보여주는것을 말합니다.

예를들어서 한 화면에 레이아웃이 header, content, footer로 구성되어 있으면 각 부분을 파일로 만들어서 여러 페이지에서 내용만 바꿔가면서 모든페이지에 header와 footer를 보여주는것이 가능합니다.

물론 하나의 파일에 전부 때려박아도 가능은하지만.. 뭔가 수정할때 페이지수만큼 수정이 필요합니다.

JSP에는 이미 include 기능이 있는데 굳이 tiles를 쓰는 이유가 있을까요?

저도 tiles를 전부 이해한게 아니라서 뭐라 설명은 못드리는데... 일단 include보다 편합니다.

그대신 사용하기전에 설정이 필요해요. 레이아웃 요소들부터 레이아웃의 틀까지 만들어줘야합니다.

편리함으로 예시를 하나 들어보면, 만약에 페이지수가 50장정도 되는 웹사이트가 있다고 가정합니다.

이 웹사이트의 header부분에 수정이 필요해서 header에 해당하는 jsp파일을 수정했습니다.

이럴경우 include와 tiles를 사용했을때 둘다 나머지를 따로 수정할필요가 없습니다.

알아서 모든 페이지들에 수정한 header가 적용되기 때문이죠. 그러나, 수정사항으로 header파일이 하나 더 생기게 된다면 어떻게될까요? 특정 페이지들에 대해서 새로만든 header파일이 적용되어야 한다면, 그페이지들 모두를 수정해야 할겁니다. 하지만 tiles를 사용하면 이런경우에도 크게 작업이 들어가지 않습니다. 이유는 설정부분을 설명하면서 차차 알아가보겠습니다.

자 이전에 올렸던 글에 이어서 계속 작업하도록 하겠습니다.

이전글은 아래 따로 링크를 걸어두었습니다.

[Spring] 03. Spring 프로젝트 생성 : http://comtk.tistory.com/7

 파일구조 입니다.

빨간 점이 찍혀있는 파일 및 폴더는 이번에 설정하면서 수정 혹은 생성되는 파일들입니다.

먼저 pom.xml을 보겠습니다.

pom.xml 에서 <dependencies></dependencies> 사이에 tiles dependency를 추가해주세요.

자 여기서  pom.xml은 뭐고 dependency를 선언하는이유는 무엇일까요??

pom.xml은 간단하게 설명하면 필요한 라이브러리를 추가하는곳 이라고 말씀드리고싶네요. 라이브러리들의 버전관리 등을 할수있어요. 그런데 사실 저도 잘 몰라요..ㅠ 공부할게 산더미입니다ㅠㅜ 일단 당장 필요한 부분만 설명드리면서 넘어가고있어요ㅠ 이후에 저도 다시 살펴볼 예정입니다ㅠㅜ!! 필요한 라이브러리를 추가하는 방법은 pom.xml의 <dependencies></dependencies> 사이에 필요한 라이브러리의 dependency를 추가해주면 됩니다. 그럼 나머지는 maven이 알아서 얍얍 하고 추가해줄겁니다.(인터넷 저장소에서 다운받아줘요!!)

배포판으로 export하면 라이브러리들이 추가되어서 쨔쟌! 하고 나옵니다.

이미지가 가로로 좀 길어서 잘 보이실지 모르겠네요ㅠ

자 이번엔 root-context.xml입니다. root-context.xml를 열어보시면 아마 엄청 깨끗할겁니다. 저는 그랬어요.

자 그럼 아래 공간을 좀 주시고 <!-- tiles --> 아랫부분부터 </beans> 사이의 내용을 적어주시면 됩니다.

다 일일이 타이핑하셔도 되는데, 오타나면 에러나잖아요ㅠ ctrl+space 사용해서 자동완성으로 얍얍 하고 추가해주세요.

자 이번엔 servlet-context.xml 입니다.

<beans:beans></beans:beans> 사이에 주석처리된 부분 아래 내용을 추가해주세요.

첫번째 bean은 아직 좀 더 공부해봐야 뭔가 말을해드리기 좀 애매하네요ㅠ 제가 아직 많이 못알아봤으니 패스ㅠ

두번째 bean은 tiles의 설정에 대한 class입니다. 아래 value 경로에 tiles에 대한 설정파일이 들어있다는것을 정의해주고 있습니다.

이번엔 tiles.xml 입니다.

tiles에 대해 정의되어있는 내용입니다.

하나씩 살펴보면 먼저 맨 첫줄 name이 layout인 줄부터 보겠습니다.

definition의 template는 만드신 파일에 맞게 작성해주시면 됩니다. name은 편하신대로 해주시면 돼는데 이왕이면 의미있는걸로 지어주세요. aaa, asd 이런거 하지 마시구요.

먼저, name은 tiles-definitions에서 사용할 이름을 정의해놓은 것입니다. 뒤에 속성에 value나 template에 따라서 사용하는부분이 달라집니다.

template는 말그대로 템플릿 입니다. 레이아웃의 틀이되는 파일을 적어놓은 곳입니다.

어떤 모양으로 어떻게 설정할지는 각자 알아서 작성해주시면 됩니다.

제가만든 파일내용은 잠시후에 보여드리겠습니다.

두번째 <put-attribute/>를 보겠습니다.

보시면 template 안에 속성처럼 들어가있습니다. 이게 무슨말인가 하면, '해당 template에서는 이런 이름으로 이런파일을 가져다 쓰겠다' 라고 정의한 것입니다. 위에서 보시다시피 필요한만큼 정의해주시면 됩니다.

template이 정의되어있는 definition에 <put-attribute/>를 작성하면 해당 템플릿의 레이아웃에서는 고정적으로 보여지게 됩니다. 변화가 없이 모든페이지에 들어가는 header 또는 footer를 이런식으로 많이 설정해서 사용합니다.

그 다음 definition을 보겠습니다.

먼저 name을 보시면 name이 이상합니다. '*/*' 이라고 되어있는데 이게 무슨뜻일까요??

이것은 controller에서 return을 '*/*' 다시말해서 '경로/파일명' 이런식으로 넘겨주는데, 그에대한 패턴을 적어놓은 것입니다. 패턴이 name과 일치할경우 해당 definition이 캐치하여 그에맞는 content를 보여주는것입니다.

다음으로 definition에 template가 아닌 extends 라는 속성이 보입니다. 그 안에 값은 template의 name값이 들어있네요. 이게 무슨의미일까요?

이건 해당 definition은 레이아웃을 설정하지 않고, 이미 설정되어있는 레이아웃을 사용한다는 의미입니다.

name과 extends를 합쳐서 definition을 설명해보면 'name에 해당하는 패턴으로 controller에서 리턴을 해주면 extends의 값과 일치하는 레이아웃에 content를 보여주겠다' 가 되는것입니다.

자 그럼 그 안에 <put-attribute/>를 보겠습니다.

name을 보시면 'content' 라고 적혀있습니다. 그런데 이건 내용만있어요. header나 footer가 따로 없습니다.

그럼 이 파일이 보여질대는 header와 footer가 나오지 않을까요??

그렇지 않습니다. 위 definition에서 어떤 레이아웃을 사용할지 extends에서 정의하였고, 그 레이아웃에는 header와 footer가 설정되어있습니다. 그 레이아웃에 맞는 header와 footer이 같이 나오는겁니다. content는 해당 파일의 내용에 따라 계속 바뀌겠죠.

자 다음은 value를 보시면 '{1}/{2}.jsp' 라는것이 보입니다.

전에는 파일의 경로와 파일명이 적혀있었는데 이건 무슨의미일까요??

아까 definition의 name의 패턴을 보면 '*/*'이었습니다. 이 패턴으로 결과가 오는 친구들을 캐치해서 contnet를 보여주는데, 이때 이 값이 '경로/파일명'이라고 위에 설명하였습니다. 이 경로와 파일명이 {1}과 {2}에 들어가는겁니다. 숫자는 *의 순서에 맞게 적어주시면 됩니다.

먼저 레이아웃이 되는 파일을 보겠습니다.

<tiles:insertAttribute>만 설명드리면 될거같네요.

나머지는 그냥 HTML이니 넘어가겠습니다. id와 <tiles:insertAttribute>의 name이 같아서 헷갈리실수도 있는데 달라도 전혀 지장없습니다.

<tiles:insertAttribute>가 작성된 부분이 아까 정의했던 파일들이 들어가는 부분들입니다.

해당 파일들이 어떻게 자기위치를 찾아가는지는 벌써 감이오신 분들도 있을겁니다.

아까 tiles.xml에서 name을 적어주셨는데, 그 name에 맞게 해당 파일들이 적용됩니다.

설정을 잘 하시면 레이아웃과 tile로 쓸 파일들을 여러개 만드시고 각각 해당 레이아웃에 맞는 각각의 타일들을 적용시키는것도 가능합니다.

tile들(header, footer)과 메인페이지를 보겠습니다.

내용이없으니 설명은 따로 적지않고 이미지만 올리겠습니다.

위에서부터 순서대로 header, footer, home 입니다.

마지막으로 controller에서(controller 하나밖에 없는거 다 알아요. 그거맞으니까 그거 열어보세요 ㅋㅋ) return을 'home' 에서 'main/home'로 바꿔줍니다. 이거는 제가 이미지를 준비 못했네요ㅠ

자 이제 설정은 다 했고, 결과를 보겠습니다.

위에 보시면 각각 파일들은 따로 작성되어 있는데 결과에서는 합쳐져서 나오는것을 볼 수 있습니다.

다음번엔 뭘할지 생각은 해뒀는데 금방 할수있을지 모르겠네요ㅠ

다음번엔 MyBatis를 적용해볼까 합니다.

다음번에도 열심히 적어볼께요!!

몇분이나 보시는지 모르겠지만... 많이들 봐주셨으면합니다 ㅋㅋ 다음시간에봐요!!

원래 이전글에 다같이 쓰려고했는데... 일하면서 쓰다보니 힘들더라구요ㅠ

별것도아닌걸로 글을 나눠버렸네요ㅠ 죄송합니다아ㅠ

바로 시작해볼까요!!

1. 자 일단 프로젝트 익스플로러에 마우스를두시고 우클릭을 합시다.
   거기서 New -> Project 를 클릭해주세요.
   

   

   
   

2. 누르셨으면 창이 하나 뜰꺼에요~ 거기서 'spring'을 찾아서 눌러주시면3가지가 나옵니다.
   Import Spring 어쩌구랑, Spring Project, Spring starter Project 이렇게 나오는데 이중에 'Spring Project'를 선택해주시면 됩니다.
   

   

   
   

3. 그리고 Next를 눌러주시면 다른창으로 변하는데 여기서 맨 위에 'Project Name'에 프로젝트명을 적어주시고, 아래 보시면 'Templates'라는게 보이고 그 안에 이것저것 리스트가 보입니다. 거기서 맨 아래쪽으로 내리셔서 보시면 'Spring MVC Project'라는 친구가 보일겁니다. 그친구를 선택해주시고 Next를 눌러주시면 됩니다.
   

   

   
   

4. 자 다시 창이 변했는데... 이번엔 뭐 없어보여요. 입력할곳도 하나밖에 없습니다.
   그런데 이게 대체 무슨소린지 알아먹을수가 없네요. 그래요 저는 못알아먹었어요ㅠㅠ 초딩영어부터 해야할까봐요ㅠ
   그래서 이게 무슨소린가 하니 패키지명을 정하는겁니다. '.'으로 구분지어서 3뎁스까지 만들어주시면 됩니다.
   ex) com.test.tester
   

   

우리가 방금만든 친구를 확인해보려면 톰켓서버가 필요합니다!!

뭔가 없다싶으시면 이전글을 보고오세요 ㅋㅋ 이전글에 어디서 받고 어떻게하고 나와있어요!!

자 이제 시작해보겠습니다.

1. 자 먼저 이클립스에서 화면이 여기저기 나뉘어져있습니다. 그중에서 'Servers'를 찾으세요!!
   아마 안보이는분이 태반일겁니다. 그럼 어떻게하느냐?? Window -> Show View -> Servers를 클릭해줍니다.
   

   
   
   

2. 그러면 Servers가 똭!! 하고 나타납니다. 어딘가 있을거에요 잘 찾아보세요...ㅠㅠ
   찾으셨다 치고 진행하겠습니다ㅠ 못찾으신분은 찾을때까지 이거 읽지 마세요ㅠㅠ
   자 그럼 이번엔 'Servers'에서 우클릭을 한 다음에 New -> server를 클릭해줍니다.
   

   

   
   

3. 자 그럼 창이하나 뜰텐데, 여기서 'Apache'폴더를 눌러보시면 버전별로 여러개 뜰겁니다.
   여기서 지난번에 다운받은 톰켓 버전에 맞게 선택해주시고 Next를 눌러주세요.
   저는 7.0을 사용하기때문에 7.0을 선택하였습니다.
   아 그리고 저는 이전에 설정을 미리 해놓와서 Server runtime Environment'가 표시되는데, 처음하시는 분들은 아마 나타나지 않을것입니다. 그래도 그냥 설치한 버전 선택하고 Next 눌러주세요. 제가 다른버전을 선택해서 같은 화면이 나오게끔 진행하겠습니다.

   

   
   

4. 자 그럼 아래와 같은 화면이 나올겁니다.
   여기서 두번째 입력칸 옆에 'Browse'를 눌러주시고, 톰켓이 설치된 곳까지 찾아갑니다.
   

   
   
   아래 이미지와 같이 톰켓 폴더까지만 가세요. 더 깊이 들어가지 마시구요.
   install 파일을 이용해서 설치하신 분들이 계실텐데 그분들은 c:/Program Files/apache어쩌구 아래 가보시면 있을겁니다. 거기서 버전에 맞게 선택하시면 됩니다.

   

   
   그리고 확인을 눌러주시면 아래 이미지와 같이 경로가 입력됩니다.
   저는 설명을 위해 이클립스에서 8.0을 선택하고 폴더를 찾아들어가서 7.0을 선택한 뒤에 확인을 눌러서 안된나고 이클립스가 호통치는겁니다. 보고계신분들은 버전에 맞게 선택해주시면 아무 탈 없이 잘 진행될겁니다.
   

   
   
   

5. 자 이제 거의 다왔어요!! finish 누르셔도 되는데 이왕이면 Next 누릅시다.
   다음화면이 궁금하지않아요?? 안궁금해도 그냥 Next 눌러주세요. 그래야 제가 쓸게 좀 더 많아져요.
   자 이제 Next를 누르시면 프로젝트 목록이 오른쪽에 주르륵 뜹니다. 그중에 방금 생성한 프로젝트를 하나 선택하시고 'Add >'버튼을 눌러서 오른쪽으로 이동시켜주시고 Finish버튼 눌러주시면 됩니다.
   

   

   
   

자 이제 서버에 프로젝트까지 추가했습니다!!

이제 실행화면을 보시죠.

아까 'Servers'탭으로 가셔서 

저친구를 눌러주세요. 그럼 Console창이 떠있다면 글씨가 막 바바박!!!! 하고 올라갈껍니다.

그뒤 프로젝트를 우클릭 한 뒤에 Run As... -> Run on Server를 눌러줍니다.

그럼 창이하나 뜨는데 서버 뭐로할꺼냐고 묻는겁니다.

아까 프로젝트를 추가한 서버를 선택한 후에 Finish 버튼을 눌러주시면 됩니다~
지금 전부 처음하는걸 기준으로 작성중이니 서버도 한대밖에 없을거에요. 더있으면 아까 만든거 찾아서 눌러주시면 됩니다.

자 그럼 화면이 떴는데... 나오는데... 뭐가 좀 이상해요.

? 겁나나오고 숫자나오고 그러는데 딱봐도 뭔가 이상해요. 문제가 있습니다.

해당 파일을 찾아가볼께요.

기본적으로 구조는 아래 이미지처럼 되어있습니다.

이중에 우리는 'home.jsp'파일을 수정할겁니다. 이 파일을 열어볼까요??

열어보시면 이렇게 페이지인코딩이 안되어있습니다.. 이친구가 자동으로 하나 만들어주는데 거기에 인코딩부분이 빠졌습니다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

맨 위에 이거한줄 추가해주시고 다시 실행해봅시다.

자 이제 한글도 잘나옵니다. 고생하셨습니다~

다음번엔 하나하나 설정을 해보던지 할께요!! 아 물론 제가 먼저 작업해본다음에 하는거라서 좀 걸린텐데...
주말에 하려고 하는데 이번주말에 친척형 결혼식있어요ㅠ 그전에 해보도록 노룍해볼께요ㅠ

안녕하세요!! 오늘은 Spring와 maven을 기반으로한 프로젝트를 만들려고합니다.

어제 제가 공부할꺼 만들면서 사진만 찍어놓고 글을 안썼어요.. 이렇게 게으릅니다 제가 ㅋㅋㅋ

그런데 Spring + maven이 맞겠죠...?

일단 준비물이 몇개 필요해요!!

1. JDK (Java Development Kit)
   http://www.oracle.com/technetwork/java/javase/downloads/index.html
   들어가시면 영어로 뭐가 많은데 무시하시고
   

   

   이친구를 찾아서 클릭해주시면 페이지가 이동합니다. 역시 영어로 뭐라 말이 많아요.
   

   

   이친구 찾으신 다음에 저기 Accept License Agreement 눌러주시면
   
   
   빨간 네모부분이 변하면서 아래 파일들이 다운로드 가능하도록 변합니다.
   어디누르는지 모르겠으면 빨간박스 안에보시면 보일겁니다.
   자 이제 각자 OS에 맞게 다운받아주시고 설치하시면 됩니다.
   잘 모르겠으면 그냥 NEXT 누르시면 자기가 알아서 다해요 ㅋㅋ
   
   

2. 이클립스
   http://www.eclipse.org/downloads/
   
   위 이미지처럼 Java EE Developers 받으셔야해요!!
   받으시고 원하는 위치에다가 압축푸시면 됩니다.
   실행하기전에 1번부터 작업해주셔야지 안그러면 'JDK없어ㅠㅜ!!' 하고 울어요ㅠ
   정확히는 자바가 없다고 우는거지만.. 여튼 그러합니다.
   
   

3. 톰켓
   사이트에 들어가신 후에(http://tomcat.apache.org/) 왼쪽에 보시면
   

   
   이런 메뉴가 있습니다. 원하시는 버전을 선택해 주시면 오른쪽 화면이 바뀌는데 여기서
   

   

   이부분을 찾으신 후에 OS에 맞게 원하시는거 찾아서 설치 혹은 압축 풀어주시면 됩니다,

이렇게 3개가지가 필요합니다. 이제 준비물은 다 챙기셨구요. 다음으로 넘어가겠습니다.

프로젝트 생성은 매우 쉬워요. 밥아저씨가 그림그리는거마냥 쉬워요. 이미지 같이 올리니까 따라하시면 됩니다.

일단 이클립스를 실행하면 이클립스가 뭐하나 물어봐요.

'너 작업하면 이제 파일들 겁나생기는데 그거 어따둘래??' 하고 물어봅니다. 참 착해요. 물어봐줄줄도알고 아주 배려심이 남다르네요. 자 그럼 자기가 작업한 내용을 모아둘곳을 지정해주시면 됩니다. 기본적으로 'workspace'라고 자기가 이름하나 추천해주는데 거기에 작업하셔도 무난해요. 그런폴더 없다구요?? 이클립스가 알아서 만들어서 저장해줘요 걱정하지맙시다.

자 이제 뭔가 막 나오는데 우리는 스프링을 할꺼니까 일단 스프링을 추가해줍시다.

이클립스는 플러그인 방식이라 필요한거 추가해주시면 됩니다.

마친 앱스토어나 구글플레이에서 앱 검색해서 추가하듯이 플러그인 검색해서 추가해주면 됩니다.

자 따라해봅시다. 저도 그냥 따라했어요.

1. 메뉴에서 Help -> Eclipse Marketplace... 를 찾아서 눌러주세요~
   
   
   
2.  find에 'spring' 또는 'STS'를 입력해주시면 아래 'Spring Tool Suite'가 나옵니다. 찾아서 'Install'을 눌러서 추가해주세요~
   
   
   
3. 다른거 보지 마시고 빨간 테두리 안을 클릭해주시면 됩니다.
   
   
   
4.  그리고 Finish를 눌러주시면 이렇게 인스톨이 진행됩니다. 진행되는동안 다른거 하지마시고 그냥 기다리세요. 이클립스 재실행해야하니까 다 무의미합니다..ㅠ
   
   
   
5.  이렇게 재실행하자고 하니 따라줍시다.
   

자 이제 프로젝트를 만들 준비는 다 했어요!!

다음시간에는 스프링 프로젝트를 만들어볼께요!!

안녕하세요~ 오늘은 Spring에 관해서 적어볼까 해요!!

Spring은 저도 공부하는중이라서 '다른'게 아니라 '틀릴'수도 있어요!!

참고는 하시되 너무 맹신하지 마시고, 저역시 알려드리는게 아닌 공부하는것이니 틀린부분이 있으면 지적 부탁드립니다!!

오늘부터 스프링으로 프로젝트를 만들어보려고 이것저것 찾아봤습니다.

사실 다른분들 블로그나 개발예제 같은거 주로 보고 나름대로 다시 정리하는겁니다 ㅋㅋㅋ

나중에 제가 잊어버리면 다시보기위해서 말이죠 ㅋㅋㅋ

저는 처음에 Spring의 개념을 잡기위해 'Spring 개념'으로 검색을 하다가 AOP에 대한글을 먼저 읽었습니다.

그러므로 오늘은 AOP를 이야기해보도록 할께요.

Aspect Oriented Programming의 약자라고 합니다.

저는 영어를 못해서 이게 뭔소린지 알아먹지 못하기때문에, 구글번역기를 돌려봤습니다.

이거래요. 뭐 구글님이 이거라고하시니 이게 맞을껍니다.

'관점 지향 프로그래밍' 이라고 합니다. 다른분이 블로깅하신 글을 보면

AOP는 '어플리케이션을 다양한 관점으로 분해하여 객체지향에서 추구하는 모듈화를 더욱 잘 지원하도록 하는 프로그래밍 기법'

이라고 설명해 주셨네요. 자 여기서 다른건 좀 알아먹겠는데, '다양한 관점' 이라는말이 도대체 무슨말인지 이해가 되지 않아요ㅠ

다양한 관점이란 무엇을 말하는것인지 알수가없으니 좀더 알아보겠습니다.

'다양한 관점'에는 두가지 관점이 있다고 합니다. '핵심관심사'에대한 관점과, '횡단관심사'에대한 관점이죠.

제가 읽어보고 이해한 바로 적어놓겠습니다.

'각 모듈마다 수행되는 기본적이고 대표적인 기능' 이렇게 적혀있습니다.

말그대로 제가 작성한 모듈이 해야하는 일 자체를 '핵심관심사' 라고 부르는거같습니다.

'여러개의 모듈에 걸치는 시스템의 부가적인 업무' 이렇게 적혀있습니다.

이것만 들어서는 도대체 무슨말인지 잘 와닿지 않았습니다. 그러나 친절하게 아래 예를 적어주셔서 좀 나았어요.

ex : 로깅, 사용자 인증, 성능 관리

예시를 보니 어플리케이션이 운영되는 전반에 걸쳐서 사용자에게 편의를 주기보다, 사용자를 컨트롤(사용자 인증, 사용자별 권한)하고 어플리케이션의 자체를 관리(로깅, 성능, 트랜잭션)하는 부분을 의미하는 것 같습니다.

아래 제가 참고한 사이트의 출처를 적어놓았습니다.

들어가보시면 이미지도 있어요!! 참고해보시면 좋을거같습니다.

출처 : http://blog.naver.com/dworyu/100028862065

AOP의 시작은 '중복을 줄여서 조금만 수정해도 프로젝트 전체의 변화를 줄수있도록 하자!!' 로 출발했다고 합니다.

위에서 설명한 '두가지 관점'들을 생각하고 관점을 분리하여 작업한다고 하는데 실제로 프로젝트 셋팅 및 개발에 들어가기 전까지는 크게 와닿지 않을것으로 생각됩니다....ㅠㅠ 일단은 그러한 개념이 있고, 그걸 기반으로 한다는 부분이 중요하다고 생각되니 기억해 두는걸로 만족해야겠습니다!! 개발작업에 들어가면서도 이해가 안되면 다시 읽어보고 더 찾아봐야겠어요!!(설마 그러겠어? 라고 생각은되지만 설마가 사람잡는다 고 진짜 그럴거가은 느낌적인 느낌...ㅋㅋ)

장점으로는

• 중복되는 코드 제거
• 효율적인 유지보수
• 높은 생산성
• 재활용성의 극대화
• 변화수용에 용의하다

이번엔 AOP의 용어들에 대해서 살펴볼께요.

1. 어드바이스
2. 조인포인트
3. 포인트컷
4. 애스팩트
5. 인트로덕션
6. 위빙

1. 컴파일시 위빙
   컴파일할때 알맞은 위치에 공통코드(횡단관심사를 모듈화하여 구현한 코드)를 삽입한다.
   
   
2. 클레스 로딩시에 위빙하기
   로딩한 클래스의 바이너리 정보를 변경하여 알맞은 위치에 공통코드를 삽입한 후에 새로운 클래스 바이너리 코드를 사용하도록 한다고 한다. 원본 바이너리 코드 + 공통관심사 = 새로운 바이너리 코드 이거겠지??
   
   
3. 런타임시 위빙
   스프링에서 자체적으로 지원하고있는 기능이며, 1번과 2번처럼 코드를 수정하지 않고, 프록시를 사용하여 AOP를 적용한다.
   객체에 직접 겁근하는것이 아니라 중간에 프록시를 생성하여 접근하는데, 프록시는 메서드의 호출에 한해서만 어드바이스를 적용할 수 있다. 위 내용중 '포인트컷'이 한정적으로 되는 이유가 이때문이 아닐까 생각된다.
   뭐 원한다면 포인트컷의 영역을 늘릴수도 있겠지만!!

1. http://najuung.tistory.com/category/%EC%BB%B4%ED%93%A8%ED%84%B0%20%EA%B3%B5%EB%B6%80/Spring
2. http://ssad.tistory.com/50
3. http://blog.naver.com/andwise/220144147253

안녕하세요~ 오늘은 선택자(selector)에 대해서 알아볼께요!!

이게 참 javascript나 CSS, jQuery에서 공통적인부분이라 카테고리 나누기가 참 애매했네요 ㅋㅋ

간단하게 id와 class로 특정개체 혹은 개체집합을 선택하는걸 해보겠습니다.

일단 id와 class의 개념부터 먼저 잡고가실까요.

아 물론 제가 알고있는부분에 한해서 적기때문에, 설명에 대해 공감못하실수도있고, 틀린부분이 있을수도 있어요.

틀린부분은 말씀해주시면 참고하고 수정작업을 하겠습니다.

일단 컨셉하나 잡고 설명들어가겠습니다.

지금 제가 이 포스팅을 작성하고있는 페이지나, 혹은 네이버 메인, 티스토리 메인 등등 기타 모든 페이지들 하나하나를 '나라' 또는 '지역' 이란 개념으로 생각해주시면 이해가 빠르실겁니다. 제가 이렇게 설명을 할거거든요 ㅋㅋㅋ

페이지 = 나라

id = 주민번호

class = 인종, 지역주민등 사람이 모여있는 그룹

개체 = 사람

저는 개인적으로 이런식으로 생각하고있습니다.

페이지 하나하나를 각각의 나라로 보고, id를 그 나라의 고유한 주민번호로 생각하면 됩니다. 그리고 class는 지역주민 혹은 인종, 게체를 사람으로 보겠습니다.

먼저 id에 대해서 이야기해보겠습니다.

하나의 나라(페이지)에는 모든사람(개체)이 고유한주민번호(id)를 갖고있어야 합니다. 만약 중복된 주민번호(id)가 있다면 그건 그나라에 문제가 있는거겠죠? 그들중에서 한사람을 특정지을수가 없잖아요. 이름도 동명이인이 있을수 있으니까요. 이들을 각각 구분할 수 있는건 주민번호(id)밖에 없습니다.

이렇게 생각하시면 따로 외울 필요가 없습니다. 우리는 이미 다 알고있는 사실이니까요.

단어만 몇개 바꿔주면 바로 이해가 갑니다. 이처럼 id는 하나의 페이지안에서 주민번호와 같은 역할을 합니다. 특정개체 하나만을 선택할 수 있는거죠.

이번엔 class에 대해서 이야기해볼까요?

하나의 나라(페이지)에는 여러 사람(개체)들이 있습니다. 그들은 특정 인종(백인 및 여러 유색인종)이거나, 종교를 갖고있거나, 특정 지역에 모여산다거나 여러가지 기준으로 그룹(class)으로 나눌수있습니다. 그룹(class)은 기준을 어떻게 잡느냐에 따라서 달라지죠.

이처럼 class는 하나의 페이지안에서 특정그룹을 지칭하는 역할을 합니다. 1개이상의 개체를 선택할때 사용합니다.

class는 하나 이상의 개체를 선택할때 사용한다고 방금 말씀드렸습니다. 여러개체에 같은 class명을 지정해주어도 무방하다는 말이죠. 그런데 좀 생각해보면, 그룹화하는 기준에 따라 그룹(class)안의 개체는 바뀔 가능성이 있습니다.

마치 '남자사람' 이라는 개체는 남자, 사람, 생물, 동물 등등의 여러가지 그룹에 포함됩니다. 하나의 그룹으로는 '남자사람'을 온전하게 정의할 수 없어요. '사람' 으로만 정의하면 성별이 빠지고, '생물' 로만 정의하면 동물이면서 사람인부분이 빠집니다. 성별역시 빠지게 되죠. 그러나 다행히도,class는 하나이상의 설정이 가능합니다. 이점은 알아두시면 유용해요!!!

어떤 사람이 '○인종이고, □종교를 갖고있고, 그사람이 X지역에 산다.' 라고 가정하면 그사람을 나누는 기준은 확인가능한것만 3가지(인종, 종교, 지역)나 됩니다. 저는 이 그룹에 이름을 지어줘볼까 합니다.

인종그룹 = groupA_W(백인), groupA_B(흑인), groupA_Y(황인)

종교그룹 = groupB_CA(천주교), groupB_CH(기독교), (무교는 추가 안함)

지역그룹 = groupC_S(서울), groupC_I(인천)

이렇게 이름을 붙여보겠습니다. 위 이름들은 나중에 또 사용하게 될거에요.

그러고보니 개체를 신경 안쓰고있었네요 ㅋㅋ 다만들어놓고 사람이 없....

개체를 만들겠습니다. A씨, B씨, D양, E양

(C씨는 어감이 맘에 안들어서 안만들어요. 왠지 부럽고 질투남)

A씨는 백인이고, 인천에 살고있으며 종교는 천주교입니다. 주민번호는 num1 이구요.

B씨는 흑인이고, 서울에 살고있으며 종교는 무교입니다. 주민번호는 num2 이구요.

D양은 백인이고, 서울에 살고있으며 죵교는 기독교입니다. 주민번호는 num3 이구요.

E양은 황인이고, 인천에 살고있으며 죵교는 무교입니다. 주민번호는 num4 이구요.

이걸 나름 코드로 표현해볼께요.

CSS(Cascading Style Sheets)는 제가 정리를 아직 안해서 옆에 주석을 달아놨습니다. 알아봐주셨으면 해요ㅠ

이렇게 각 개체에 고유한 id를 주고, 기준별로 나눈 그룹에 해당하는 class명을 설정해줍니다.

이제 결과를 보실까요?

그럼 이런식으로 표시가 됩니다.

id와 class는 각 개체를 선택하는데 필요한 아주 중요한 속성들입니다. 이것들을 헷갈릴경우, 다른 사람들과의 협업이 제대로 이뤄지지 않을수도 있으며, 원하는대로 스크립트가 동작하지 않을 수 있습니다. 이점 꼭 알아두셨으면 해요!!

id와 class의 이름은 좀 시간을 들이셔서 의미가 있게 만들어주시면 굉장히 도움이 됩니다. id명과 class명만 보고도 이 개체가 어떠한 기능을 하며, 어떠한 내용을 담을것인지를 짐작 할 수 있으니까요. 저는 설명한다는 핑계로 엄청 대충지었습니다ㅠㅠ 미안해요ㅠㅠ 이름짓는거는 따라하지마세요ㅠㅠ

소스 첨부해놓을께요!!

selector.html

안녕하세요~ 오늘은 자바스크립트에 대해서 이야기해볼까 합니다.

간단한건데 스크립트 디버깅이라던지 뭐 다양한 경우가 있지만 자주쓰는것들에 대해서 이야기해볼겁니다.

바로 alert()과 confirm(), prompt()에 대해서 이야기해보겠습니다.

'alert'을 검색해봤는데 여러가지 뜻중에 '알리다' 라는 뜻이 있네요.

다른뜻은 지금 처음알았습니다.... 저는 그냥 '알리다'만 알고있었어요.. 여하튼..!! 뜻 그대로 뭔가를 알려주는것이라고 생각하시면 됩니다. 보통 회원가입하실때나, 비밀번호 설정할때 자주 보셨을것으로 생각됩니다. 계정을 생성할경우 중복체크할때나(뭐 요즘은 alert말고 ajax로 바로바로 체크해서 옆에 텍스트로 알려주는곳이 더 많은거같아요..) 비밀번호 설정시 처음 비밀번호와 입력한 비밀번호를 확인하는 과정에서, 두개의 비밀번호가 일치하지 않는경우 '비밀번호가 일치하지 않습니다.' 같은 확인창이 '띵!' 하고 나타나죠. 물론 계정 로그인시 비밀번호가 틀렸을때도 자주볼수있습니다.

이렇게 뭔가를 사용자에게 알려줄 경우에 많이 사용합니다. 사용법 역시 간단하죠.

위 이미지처럼 스크립트를 짜고, 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

그러면 결과는

위 이미지처럼 나옵니다. 아주 간단해요. 참 쉽죠? 밥아저씨가 생각나는것은 기분탓일껍니다....ㅋㅋ

'confirm'역시 검색해봤어요.

대충 예상은 했어요. 그런데 일본어 사전에나온뜻이 더 맘에드는건 저뿐인가요...ㅋㅋ 저는 '확인하다' 라고 굳게믿고있었는데 영어사전은 절 배신했습니다. 아주 못된친구네요. 뭐 이상한이야기는 이쯤하고. '컨펌'이라는 단어 익숙하실겁니다. 프리랜서분이시던, 직장은 다니는 분이시던간에 작업하면서 한번씩 거치는과정이죠. '요구하신게 이거맞나요?' 혹은 '이렇게 진행하려하는데 어떤가요?'등 보통 1안부터해서 3안쯤까지 가다가 4안쯤가면 1안이 제일좋다고들 하시죠.. 역시 처음이 제일좋아요...ㅠㅜ

이제 언제쓰는건지 아실거라 생각됩니다. 사용자들에게 이 작업을 할것인지 말것인지를 물어보고 사용자의 결정에 따라 처리를 할 수 있는 함수입니다. alert()는 '확인'버튼 하나였지만, confirm()은 '확인'과 '취소'버튼이 있습니다. 어떠한 버튼을 누르냐에 따라서 분기를 할 수 있어요. 결과값은 boolean형으로 리턴됩니다. 변수에 따로 받아서 처리하셔도 되고, if문의 조건을 설정하는쪽에 직접 작성하셔도 됩니다. 뭔가를 결정할때 주로 볼수있어요. 결제를 한다던지(결제하는거 참 좋아하는데 할때마다 손이 부들부들....), 글을 작성하고 저장할때도 주로볼수있어요. 그러고보니 티스토리 블로깅할때는 못본거같은데 뭐 그럴수도 있죠. 이제 사용법을 알아볼까요.

저는 이런방식으로 사용합니다. 기호에 맞게 작성하세요 ㅋㅋ

그리고 아래 이미지처럼 버튼에 이벤트를 걸어서 호출합니다.

이제 함수를 호출해보겠습니다. 아래 이미지는 confirm()을 호출한 모습입니다.

실행하면 이렇게 나와요!! 그리고 각 버튼별로 분기를 하면

이런식으로 분기가 가능합니다. 이거역시 어렵지 않아요. 쉽게 사용하시면 됩니다.

'prompt'는 검색결과가 맘에들지않아요 ㅋㅋ 올리지 않을래요ㅠㅠ

'prompt'는 사용자에게 입력을 요구할때 사용합니다. 그런데 개인적으로 저는 잘 사용하지 않아요.. 지금 정리하면서 오랜만에 만나서 반갑네요. 아마 많이 못보셨을거라고 생각됩니다. 제가 여기저기 막 돌아다니고 그러는데 저도 많이 못봤어요.. 그래서 많이 할말이 없어요ㅠㅠ 보통 뭔가 입력받을때 form을 만들어서 그안에 입력하고 확인버튼 누르면 체크하시지 않나요ㅠ? 저만그런가요.. 뭐 각설하고 바로 사용법을 알아보겠습니다.

위 이미지처럼 스크립트를 작성한 후에, 아래 이미지처럼 버튼에 이벤트를 걸었습니다.

저는 이런방식으로 사용합니다. 정말 어색해요 마치 초등학교때 그냥저냥 알던친구를 버스에서 우연히 만나서 서로 알아보고 옆자리에 앉아서 어색하게 대충 안부물으면서 가는데 심지어 목적지까지 같아서 가는길 내내 어색할때정도의 어색함이랄까.. 와닿으실지 모르겠네요.. 대충 상상해보시면 상상만으로도 불편하지않을까 싶습니다. 이제 호출해볼까요.

이렇게 사용자에게 입력을 요구합니다. 그런데 이렇게 뜨는거 저는 별로 않좋아해요ㅠㅠ '띵! 띵!' 그러면 좀 거슬려요ㅠ

그래도 예시니까 값을 입력하고~ 확인을 딱!! 누르면

이렇게 활용이 가능합니다 ㅋㅋㅋ 저는 변수에 담아서 alert로 값을 띄웠어요 ㅋㅋ

이렇게 입력받은 값은 따로 변수에 저장해서 가공할 수 있습니다. 이친구는 정말 할말이 많이 없네요.

오늘 작업한 내용을 파일로 올려놓을께요!! 

alert.html

블로그 내용중에 제가 표로 만든내용이나 기타 설명같은부분들이 맘에 안드시거나 그렇게 생각하지 않는분이 계실수도 있는데, 지극히 개인적으로 느끼고, 작업한것을 토대로 작성한것입니다. 틀린부분은 지적해주시면 확인하는대로 수정하겠습니다~ 개인의견차가 있는 부분은 그냥 '아 이친구는 이렇게 생각하는구나' 하고 넘어가주셔도 괜찮을거같아요~

안녕하세요~ 공부를 시작하는데 정리하면서 같이 공유도 할겸 블로깅을 시작하게되었습니다.

혹시 생각하시는것과 다른것이 있거나, 혹은 틀린부분이 있다면 알고게시지만말고 알려주세요!!

오늘은 제가 항상 헷갈려하는 메소드 오버로딩과 오버라이딩에 대해서 정리를 해볼까 합니다.

정리하면서 개념좀 확실히 잡혀서 안헷갈렸으면 하는 바램이 있어요ㅠ

시작합니다!

메소드 오버로딩은 하나의 클래스 안에서 같은 이름의 메소드를 여럿 생성하는것이라고 보시면 됩니다.

그런데 메소드명이 같으면, 메소드를 호출할때 어떻게 구분할까요?? 같은 이름의 메소드들 사이에 뭔가 차이점이 있으니 그걸 통해서 각각 구분을 하는거겠죠? 그 차이점은 크게 3가지로 볼수있습니다.

먼저 기존의 메소드를 확인하겠습니다.

1. 인자의 자료형

인자의 자료형 역시 메소드를 구분하는 기준점이 됩니다.

2. 인자의 갯수

같은 메소드명이 여러개있을때 인자의 갯수에 따라 구별이 가능합니다.

3. 인자의 순서

메소드가 넘겨받는 인자의 순서도 역시 메소드를 구분하는데 영향을 미칩니다.

4. 메소드를 호출

메소드를 호출할때의 모습입니다.

이런식으로 호출할때 어떤 메소드를 사용할지 알 수 있습니다.

툴에따라 다를수도 있어요..!!

이렇게 하나의 클래스 내에서 같은목적을 갖고있는 메소드들에게 같은 이름을 사용하려할때 메소드명을 목적에 맞게 지정해주면서 각 메소드들마다의 동작을 할 수 있게끔 하는것을 메소드 오버로딩 이라고 합니다.

메소드 오버라이딩은 하위 클래스에서 상위 클래스를 상속받아서 사용할 경우, 상위클래스에서 정의된 메소드를 하위클래스에서 필요에 맞게 재정의하여 사용하는것을 말합니다.

예를들어서 작업을 하는데 있어서 직상 상사 또는 선배와 같이 일을하는데, 이사람이

'이런 기능을 하는게 필요할거야. 내가 만들어뒀으니 그냥 써 찡긋★'

하면서 클래스를 하나 던져줬습니다. 그래서 '감사합니다!!' 하고 받아서 쓰고있는데 사용하다보니 제한이 있는걸 알게되었습니다. 그래서 클래스를 열어봤더니 매우 마음에 들지 않는거죠.

예시를 들면서 짰지만 정말 마음에 들지 않아요. 뭐 갯수가 한정되어있다면 할말없긴하지만... 여하튼!

이걸 전해받은 거는 정말 너무 싫었어요. 그런데 이걸 수정하자니 우리 착한 선배 or 상사님께 상처가 될까 말하기도 좀 그런겁니다. 그래서 저는 이렇게 다시 짜기로 했어요.

이렇게 하였을 경우 위의 방식보다는 활용도가 높죠. 경우에 따라 다르긴 하겠지만 적어도 글자수에 제한은 없으니까요. 제가 오버라이딩한 메소드와 상위클래스의 메소드의 결과를 비교해볼까요.

위아래 결과가 다른것을 확인할 수 있습니다.

위의 결과값은 0~9까지 10개의 문자를 입력해도 최대 8까지밖에 나오지 않아요.

그러나 아래는 입력한 만큼 별이 찍힙니다. 글자수에 제한을 두고싶지 않아서 재정의하여 사용한것입니다.

지금 이 상황은 제가 어거지로 만든겁니다. 그냥 설명하는거보다 이미지로 남는게 좀 더 쉽게 기억되지 않을까 하는 마음에... 그리고 위에서 이렇게 짜주는경우는 정말 흔치않아요. 그건 너무하잖아요..ㅠㅠ (혹시 있을지도 모르니 절대라고는 말 못하겠습니다.)

지금처럼 상위클래스의 내용을 하위클래스에서 필요에 맞게 재정의하여 사용하는것을 오버라이딩이라고 합니다.

오늘 작업한 내용을 파일로 올려놓을께요!!

method.zip

다음에는 또 다른거 정리해야지.