ExtJS 6 강좌 영상은 링크를 통해 제공됩니다.


    (YOUTUBE 채널 구독해주세요!!)



    ExtJS 실전/응용 두번째 강좌입니다.


    많은 분들께서 서버연동하는 부분까지 요청을 주셔서 진행을 하게 되었습니다.


    저의 경우, Dynamic Web Project 를 이용해서 프로젝트 생성을 하지 않고, 


    Spring Boot를 이용해서 서버연동을 진행하도록 하겠습니다.


    Dynamic Web Project 로 진행을 하게 되면 이클립스의 경우 Building Workspace 


    동작을 하면서 이클립스 자체에서 메모리관련 문제가 발생합니다.


    Validation 설정으로 막을수도 있는 부분이긴 합니다만, 해당 부분은 IDE 설정부분이


    기 때문에 따로 설명드리지 않도록 하겠습니다.


    저희 강좌는 Spring Boot를 이용하여 강의를 연동하도록 하겠습니다.



    물론, 언어 관련문제가 아닌, IDE 툴에 대한 문제점이므로 


    타언어(PHP,ASP,ASP.NET, NodeJS 등...) 를 사용하시는 분들께서는 


    기존 사용하시는 툴을 이용하셔서 강좌를 진행하셔도 될거같습니다.


    프로젝트 생성


    우선 스프링부트 프로젝트를 생성하도록 합니다.


    우클릭 → New → Spring Starter Project




    위와같이 입력 및 선택값 설정 후, Next!


    다음은, 프로젝트 연동에 필요한 라이브러리를 체크 후 Finish 버튼 클릭을 합니다.



    저희 강의는 MySQL(MariaDB)를 이용하여 진행하므로 MySQL을 선택하였지만,


    기타 다른 DB를 사용하고자 하는 분들은 SQL 부분에 다른 DBMS 라이브러리

    체크를 하시면 되겠습니다.


    프로젝트 실행

    완료가 되었다면, 정상적으로 구동되는지 실행해보도록 하겠습니다.


    프로젝트 우클릭 → Run As → Spring Boot App


    바로 서버를 실행하게 된다면 아래와 같은 오류가 발생할 수 있습니다.


    Description:


    Cannot determine embedded database driver class for database type NONE



    이유는 JDBC 설정을 잡아주어야 하는데 설정을 하지 않아서 그렇습니다.


    이부분은 다음강좌에 진행하도록 하고, 

    pom.xml 에서 spring-boot-starter-jdbc 관련 dependency를 막아주고, 

    다시한번 실행해보도록 하겠습니다.


    Started MarketApplication in 3.674 seconds (JVM running for 4.554)


    마지막 로그에 위와같이 Started XXX 관련 로그가 출력이 되었다면 정상적으로 

    WAS가 구동된것입니다.


    그럼 Spring Boot의 기본포트인 8080으로 접속한번 해보도록 합니다.


    Witelabel Error Page 가 출력되었다면, WAS는 정상적으로 구동된 것입니다.


    신경쓰지 말고, 다음으로 넘어가도록 하겠습니다.


    임의로 API 데이터 만들기

    JSON 규격의 임의의 API 를 만들어 보도록 합니다.


    프로젝트내에 controller 디렉토리와 컨트롤러 클래스파일 하나 만들어 봅니다.





    TestController 클래스에 아래와 같이 API 샘플 코드를 작성 후, 


    브라우저에서 호출해보도록 하겠습니다.



    위와같이 코드를 작성하였다면, 한번 API URL 호출을 하여 


    JSON 값이 정상적으로 출력되는지 확인해봅니다.





    위와같이 나왔다면, API를 만들기 위한 기본적인 구성은 완료! 


    다음 강좌에 본격적으로 ExtJS 를 Sencha CMD를 이용해서 프로젝트 생성해보고 방금 생성한 api를 AJAX를 통해서 호출해보도록 하겠습니다 ^^



    Posted by 몽고
    • Chanse
      2018.12.07 19:45 신고

      지금 막 sencha를 작업하고 있는 새내기입니다. 제가 다이나믹 웹으로 작업을 해야하는데, validation 막는 방법을 알 수 있을까요? 부탁드리겠습니다.

      • BlogIcon 몽고
        2018.12.07 19:50 신고

        어느 validation을 의미하시는건가요?
        입력양식말씀하시는건지...

    • Chanse
      2018.12.10 09:28 신고

      그 몽고님이 다이나믹웹에 ExtJs sencha 파일을 빌드해서 사용 할 수 있다고 유튜브 강의에서 하셨잖아요. 혹시 그 방법을 알 수 있을 까요?
      sencha 들이 전부 js라서 빌딩이 안되서 다이나믹웹 실행이 안되서요.

      • 몽고
        2018.12.10 09:40 신고

        spring boot를 이용해서 하는 것이 아니고 그냥 dynamic web project 로 진행하실 경우 webapps? webapp?? 폴더영영으로 커맨드창에서 이동 한 후, sencha generate 명령어를 처리해서 진행해주시면 됩니다.

        ex)
        cd x:\xxxx\xxxx\webapp(dynamic web으로 만든 webapp 폴더 이동)
        sencha -sdk xxxx generate app ~~~~
        위와같이 하신다음 web app 폴더로 이동하셔서 sencha app watch로 화면개발하시고 서버쪽이랑 동시 진행하실거면 tomcat start up 도 같이 해주시면 되실겁니다

    • Chanse
      2018.12.10 10:20 신고

      그러면 톰캣서버 실행하고 , sencha app watch 로 실행하면 sencha 화면은 localhost:1841이 아니라 다른 주소로 검색해 야 하나요?
      아니면 서버랑 같은 도메인이 되는 건가요?
      서로 다른 도메인이면 cors 때문에 json 값을 불러 올 수 없다라고요.

      • 몽고
        2018.12.10 10:59 신고

        접속은 톰캣 포트로 접속하시면 되시고요
        sencha cmd 를 키는 이유는 작업할때마다 빌드를 통해서 화면에 적용하기 위해서입니다
        sencha cmd 를 켜지 않고 extjs 컴포넌트들을 작업한다면 빌드부분이 일부 무시되서 정상작동이 되지 않습니다.

        정리드리면

        1. sencha app watch 이유
        extjs 문법을 수정하면서 화면을 새로고침할때마다 변경작업을 확인 할 수 있다
        2. tomcat 포트로 브라우저 확인
        기본포트일경우 http://localhost:8080

        3. cors 환경으로 불러올수 없는 문제
        1) dynamic web 내에 webapp 디렉토리내에 생성을 하였다면 별도의 프로젝트가 아닌 하나의 프로젝트입니다.
        cors 는 도메인이 다를 경우 발생되는 문제인대 ajax call 할 시,
        url : "http://localhost:8080/xxxx"
        와 같이 호출 하지말고
        url : "/xxxx"
        만 호출하셔도 충분이 api call 이 될수있습니다

    • Chanse
      2018.12.10 11:06 신고

      제가 배움이 얕아서 이해가 안가는 부분이 많습니다.
      다음이 제가 설정한 방식입니다.
      web.xml
      <display-name>extJS6</display-name>
      <welcome-file-list>
      <welcome-file>index.jsp</welcome-file>
      </welcome-file-list>

      <servlet>
      <servlet-name>dispatcher</servlet-name>
      <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
      <load-on-startup>1</load-on-startup>
      </servlet>

      <servlet-mapping>
      <servlet-name>dispatcher</servlet-name>
      <url-pattern>/</url-pattern>
      </servlet-mapping>

      ------------------------------------------
      dispatcher-servlet.xml

      <context:component-scan base-package="com.*"></context:component-scan>

      <context:component-scan base-package="com.*"></context:component-scan>
      <mvc:annotation-driven/>

      <mvc:resources location="/WEB-INF/resources/css/" mapping="/css/**"></mvc:resources>
      <mvc:resources location="/WEB-INF/resources/js/" mapping="/js/**"></mvc:resources>
      <mvc:resources location="/WEB-INF/resources/img/" mapping="/img/**"></mvc:resources>
      <mvc:annotation-driven>

      <!-- messageConvertert -->

      <mvc:message-converters>

      <bean class="org.springframework.http.converter.StringHttpMessageConverter">

      <property name="supportedMediaTypes">

      <list>

      <value>text/html; charset=UTF-8</value>

      </list>

      </property>

      </bean>

      </mvc:message-converters>



      </mvc:annotation-driven>


      <bean id="viewResolver"
      class="org.springframework.web.servlet.view.InternalResourceViewResolver" >
      <property name="prefix" value="/WEB-INF/views/"/>
      <property name="suffix" value=".jsp"/>
      </bean>
      <bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource"
      destroy-method="close">
      <property name="driverClassName" value="oracle.jdbc.OracleDriver"/>
      <property name="url" value="jdbc:oracle:thin:@localhost:1521:orcl"/>
      <property name="username" value="system"/>
      <property name="password" value="Success#000"/>
      </bean>

      <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
      <property name="dataSource" ref="dataSource"></property>
      <property name="mapperLocations" value="classpath:myBatis/sqlmaps/*.xml"></property>
      </bean>

      <bean id="sqlSession" class="org.mybatis.spring.SqlSessionTemplate"
      destroy-method="clearCache">
      <constructor-arg name="sqlSessionFactory" ref="sqlSessionFactory">
      </constructor-arg>
      </bean>
      이렇게 잡았습니다. 그래서 기본 mapping된 jsp 페이지는 이동이 되지만, sencha로 생성한 .html은 절대경로로
      주소값을 입력해도 안되더라구요.
      혹시, 이에 대해 조언을 부탁드리겠습니다.

      • 몽고
        2018.12.10 11:11 신고

        현재 설정은 spring + jsp 연동구조라 센차가 당연 동작될수 없습니다...
        3가지중 하나를 통한 설정을 하셔야 할것입니다.

        1. 기존 spring 설정에서 cors 설정을 한다
        2. jsp 대신 html 파일이 인식될수있도록 환경을 변경한다
        3. spring simple project를 이용하여 스프링부트 프로젝트르 생성한다
        (위 예제처럼)

        (1,2)번은 기존프로젝트 기준을 말씀드린것이므로 둘중 하나를 정하셔서 진행하셔야 할것입니다.
        spring 관련 설정부분은 구글링 하셔서 해결 하셔야 할거같습니다!