nahos

이클립스에서 톰캣으로 프로젝트 실행하려 할때 다음과 같은 에러 발생

 Project facet Java version 1.8 is not supported. 

상단메뉴 - Window - Preferences - Java - Installed JREs 에서 기본 JREs를 설치된 jdk.18로 설정

혹은 프로젝트 선택 후 마우스 오른쪽버튼 - Properties - Project Facets - Java 버전 확인

nodejs 에서  mysql 을 사용하기 위해 

node-mysql 모듈을 사용합니다. 

nodejs 홈페이지 또는 검색을 통해서 사용 방법을 알수있습니다.

https://www.npmjs.com/package/node-mysql

설치방법 

npm install --save node-mysql 

사용방법( select & insert )

nodejs에서 js 파일을 수정 후 자동으로 변경 되지 않는다.

그렇기 때문에 supervisor 라고 하는 모듈을 사용한다.

https://www.npmjs.com/package/supervisor

npmjs 홈페이지에서 supervisor를 검색하여 사용법과 다운방법을 확인할 수 있다.

설치 방법

npm install supervisor -g

실행 방법 

ex) supervisor app.js

http://expressjs.com/ko/starter/installing.html

위의 사이트에 express.js 설치 방법이 잘 나와 있으먀,

간단하게 설명하면, 

해당 프로젝트 폴더를 생성 후 cmd에서 해당경로에 접속한 후 

npm init 명령어를 입력 후 npm install express -save 명령어를 입력

해당 프로젝트 경로를 확인하면, package.json 파일과 node_mdules 폴더가 생성된 것을 확인 할 수 있다.

https://nodejs.org/en/download/ 

node js 홈페이지 접속

자신의 OS에 맞게 선택

윈도우는 msi 파일을 선택하고 설치하는 것이 편하다.

(Mac 인경우 pkg 파일)

msi 파일을 실행하여 설치를 완료하면 끝.

(npm 포함)

cmd를 실행 후 아래와 같은 명령어를 통해 nodejs가 제대로 설치 된 것을 확인 할 수 있다.

helloworld.js

위와같은 js 파일을 생성 후, 해당경로에서 아래와 같은 명령어를 통해 nodejs가 실행되는 것을 확인할 수 있다.

3. Controller , Dao , mapper 작성

우선 첫번째로 아래와 같이 프로젝트 구조에서 

controller, dao, domain 패키지를 추가합니다. 

(domain 패키지는 vo이며, 여기서는 사용하지 않으니 설명은 생략합니다.)

이제 실제 소스를 작성하는 부분이며, 간단하게 유저 아이디 숫자를 카운팅하는 예제입니다. 

(controller - dao - mapper 의 구조로 구성되어있으며, 소스는 간단하기에 설명은 생략하겠습니다.)

UserController.java

-쿼리문의 결과를 json으로 return

UserMapper.java

-쿼리문을 실행하는 xml 파일과 연결하는 java

userMapper.xml

-실제 쿼리문을 작성하는 xml

마지막으로 프로젝트를 실행하고, 

테스트를 해본 결과 아래와 같이 json 결과로 나오는 것을 확인 할 수 있습니다. 

(크롬 앱 postman을 사용하여 테스트 하였으며, 사용 방법은 생략합니다.)

https://github.com/nahosung/springboot_setting

2. DB 연결을 위한 설정

maven에 DB 접속에 관련된 dependency를 추가하도록 합니다. 

pom.xml 파일에 아래와 같은 dependency를 추가합니다.

(각각에 대한 설명은 생략 하며, https://mvnrepository.com/ 에서 검색하여 다른 버전을 사용하면됩니다.)

다음으로 application.properties 파일에 DB 접속 정보에 대해 입력 합니다. 

( 최초 application.properties 는 아무런 내용도 없으며, DB뿐만아니라 각종 설정에 대한 값을 작성한다. ex)server.port(톰캣포트) )

그 다음으로  mybatis 쿼리를 작성하기 위한 파일을 만들도록 합니다. 

src/main/resources 경로 아래에 mappers 폴더와 mybatis-config.xml 파일을 만들도록 합니다. 

mappers 폴더 안에는 실제 mybatis로 쿼리문을 작성하는 xml 파일이 존재합니다.

우선 여기서는 해당 폴더만 만들어 놓고 , Controller 만들때 실제 xml 파일을 생성 하도록 합니다. 

mybatis-config.xml 파일의 내용은 아래와 같으며, mybatis에 대한 설정이 필요할때 해당 파일에 작성을 하면됩니다.

지금은 넣을 내용이 없으니 아래와 같이 만들어 놓습니다.

(위에서 작성한 mappers 폴더 안의 xml 파일과 , mybatis-config.xml 에 대한 부분이 들어있습니다.)

기본적인 DB 접속에 대한 설정은 끝났으며,

다음은 실제로 rest api 호출을 통해 json 으로 반환되는 부분을 작성하겠습니다.

(Controller , Dao , mapper ...)

https://github.com/nahosung/springboot_setting

이클립스 spring boot 를 사용하여 rest api 서비스를 구축하는 간단한 프로젝트입니다.

윈도우 운영체제를 사용하였으며, 이클립스 mars 사용했습니다.

Maven 과 Mysql 을 사용하였으며, 설치에 대한 설명은 없습니다. 

1. springboot 프로젝트 생성

우선 STS를 설치하도록합니다. 

상단 메뉴 - Help - Eclipse MarketPlace - sts 를 검색 - Spring Tool Suite (STS) for Eclipse ..을 다운 받습니다. 

설치를 완료 하였으며, 프로젝트를 생성합니다.

상단메뉴 - File - new - Project... 을 클릭하고 스프링 폴더에서

Spring Starter Project 를 선택하고 next

아래와 같은 화면이 등장하며 , Name, Group, Package를 입력합니다.

여기서 Maven 또는 Gradle 을 선택할수 있으며, War와 Jar로 선택이 가능합니다.

저는 Maven으로 프로젝트를 진행하겠습니다.

다음으로 아래와 같은 화면이 등장합니다.

spring boot 버전은 선택되어있는 그대로 사용을 하겠습니다.

그리고 여기서는 Web만을 체크하고 Next 혹은 Finish를 클릭합니다.

(여러가지 설치를 할 수있으며, sql을 클릭하여 보면 mysql, mybatis 등 있는 것이 확인가능합니다.

 여기서는 Web만을 선택하며, 다른 부분은 maven을 통해 설치 할 것입니다.)

Next를 클릭하면 아래와 같이 나오며, Finish를 클릭하면 아래 화면 없이 프로젝트가 생성됩니다.

아래와 같은 프로젝트 구조를 가지고 있으며, 

프로젝트이름Application.java 와 ServletInitializer.java 파일이 자동으로 생성된다.

다음 과정에서 수정이 필요한 파일들로 우선은 넘어가도록 한다.

spring boot 는 톰캣을 포함하고 있기 때문에, 별도의 톰캣 설치와 설정(이클립스 서버 설정)이 필요하지 않습니다.

프로젝트 선택 후 마우스 오른쪽 버튼을 클릭 - Run As - Spring Boot App 을 클릭하여 서버를 구동합니다.

기본 포트는 8080을 사용하며, 콘솔창에 아래와 같은 화면이 나오며, 실행되는 것을 확인 할 수 있습니다.

(application.properties 파일에서 ' server.port = 포트번호 ' 를 입력하여 포트 번호 변경 가능)

브라우저를 통해 접속하여 보면 아래와 같은 화면이 나오며, 

아직 Controller와 View 에 아무런 작업을 하지 않았기에 아래와 같은 화면이 나오는 것입니다. 

(REST API 프로젝트이므로 화면쪽은 별로 상관 없기는 합니다...)

첫번째 스프링 부트 프로젝트 생성을 했으며, 

다음으로 spring boot 로 mybatis , mysql 설정을 하도록 하겠습니다.

https://github.com/nahosung/springboot_setting

IE9에서만  typeof(opener.부모함수) 값이 'object' 로 들어온다.

그렇다고 함수가 실행을 못하거나, 문제가 발생하는 것이 아니므로 아래와 같이 수정하면된다.

IE9 에서 구글 차트를 사용하는데 문제가 발생했습니다.

(IE8 이하에서는 구글 차트 api가 지원되지 않습니다. )

IE9에서만 차트를 그리지 못했으며, 

script5009: 'gvjs_l' is undefined ('gvjs_l'이(가) 정의되지 않았습니다.)

script445: object doesn't support this action (개체는 이 기능을 지원하지 않습니다.)
와 같은 오류가 발생했습니다.

여기서는 구글차트 api 사용 방법에 대해서는 설명하지 않겠습니다.

(다양한 구글 차트 사용 방법은 https://developers.google.com/chart/interactive/docs/gallery 에서 확인 가능)

결론적으로 문제가 되는 부분이 바로 아래의 부분이었습니다.

current 가 구글차트 api 현재 버전을 나타내는 것인데, IE9에서 문제가 발생하는 부분이었습니다.

(아마 현재 버전이 올라가게 된다면 자연스럽게 사라질 오류가 아닌가 싶다.)

google.charts.load("current", {packages:['corechart']});

위의 부분을 아래와 같이 고쳐주면 IE9에서도 차트가 나오는 것을 확인 할 수 있습니다.

google.charts.load("43", {packages:['corechart']});

(참고: https://stackoverflow.com/questions/35648530/google-visualization-charts-api-examples-are-broken-how-to-fix-them/35648674#35648674?newreg=acfb5c1d9c9c4825b34733f6cc551a04 )