NEWCRM 프로젝트 - (0) 프로젝트 세팅

1. STS4 설치 및 JAVA 17 다운로드

1) Spring Toos 4 다운로드

Spring Tools 4 is the next generation of Spring tooling

jar 파일 다운로드됨

C:\PROJECT 폴더 만들고 안에다가 jar 파일 넣고 압축을 푼다.

contents도 압축 품

contents도 압축 풀어서 안에 보면 안에 exe 파일 있음. 그걸 실행하면 된다.

STS4 실행

++ 이클립스에 마켓플레이스에서 설치하려고 했는데 꼬일 수 있어서 그냥 따로 하기로 함.

Download the Latest Java LTS Free

2) JAVA17 다운로드

JAVA17은 그냥 Windows 버전 Installer 버전으로 설치한 뒤에 JAVA_HOME 변경해줌.

 

Window + R 눌러서 실행창에 [sysdm.cpl ,3] 치기

Window + R

JAVA_HOME 버전 변경

jdk이 17인지 확인해보자.

java -version으로 버전 확인

 

2.gitlab 에서 프로젝트 불러오기

우선 gitlab에 있는 프로젝트를 gitbash를 이용해서 가져온다.

폴더	설명
CRM	STS4가 작업하는 workspace 경로
NEWCRM	새롭게 Spring Boot로 만드는 업데이트 CRM
OLDCRM	이전에 Spring 레거시로 만든 현재 CRM
spring-tool-suite-4.4	STS4 프로그램 설치파일들

Project 폴더

OLDCRM과 NEWCRM 둘 다 빈 폴더 안에서 Git Bash를 실행한 뒤 프로젝트를 가져온다.

git bash로 가져오기

브랜치 이름이 master라서 마스터로 변경도 해줬음.

git init           #.git 파일 생성
git branch #비어있으면 master로 옮겨줘야함
git checkout master #master 브랜치를 가져옴
git ramote add origin {가져올 깃허브 프로젝트 주소} #git과 연결
git pull #프로젝트 당겨오기

pull로 댕겨오면 폴더에 더음과 같이 여러개가 생긴다.

파일 생성

 

OLDCRM과 NEWCRM을 둘 다 가져오고 STS에서 불러와보자.

 

위에 SpringToolSuite4.exe 아이콘 클릭해서 실행한다.

workspace는 CRM 폴더로 한다.

프로젝트 생성 후 import 해주자.

이미 있는 Maven 프로젝트 가져오기

이미 로컬에 있는 Maven 프로젝트를 불러올 것임.

체크 후 끝내기

pom.xml 체크 후에 Finish 하면 불러와진다.

 

++ 에러가 날 경우?

아마 서버가 안맞을 수 있고, 자바 버전도 다를거임. 맞춰주자.

 

1) 서버 맞추기

서버가 없으면 Window > Show view > other > servers

서버 생성

서버를 불러온다. 나는 잘 쓰던 apache 9.0을 가져올 것임.

클릭하고 경로에 있는 폴더 클릭

 

2) 자바 버전 맞추기

자바 버전도 맞춰준다. 원래 1.8로 되어있었음.

17로 맞춰주자.

프로젝트 우클릭 > Build Path > Configure Build Path 클릭

런타임 추가

 

3) 추가 점검

이렇게 해도 안되면 프로젝트 우클릭 > Refresh 클릭.

그것도 안되면  프로젝트 우클릭 > Maven > Update Project 클릭.

 

다 됐으면 우클릭 > Run As > 1 Run on server 로 실행하면 OLDCRM 초기 화면이 나온다.

 

Spriong Boot 는 좀 다르다. servers로 실행하는게 아니라 Boot Dashboard라는 것이 있음.

프로젝트 누르고 실행

상단에 있는 실행버튼 누르면 서버가 켜지고, 저기 옆에 써있는 포트번호인 localhost:8888 로 접속하면 된다.

 

3. 초기 설정

SpringBoot는 미리 DB 연결해서 설정을 해주신 것 같고...

OLDCRM은 옛날 프로젝트이니 DB를 맞게 변경해줘야 한다.

주소, 이름, 비번 수정

비밀번호는 랜덤으로 지정된 비밀번호라고 함.

SSL을 꺼줘야 접속이 가능하다. CRM은 http로 접속해야하기 때문.....

DB 연결을 위해 mysql 접속 가능한 주소로 수정해준다.

 

 

++롬독 설치

 

무슨 롬독? 그런거가 경로가 안맞아서 업데이트 해줘야한다고 함.

C:\Users\User\.m2\repository\org\projectlombok\lombok\1.18.24

위 경로로 가서 git bash 실행한 뒤 아래 코스 실행

JAVA -jar ./lombok-1.18.24.jar

이러면 프로그램이 실행되는데 STS4 설치된 경로를 열어주고 install 해주면 된다. 

경로 설정

▼ 롬독이 뭔데?

 

 

 

 

4. NEWCRM 기본 구조 파악하기

아이디는 동일하고 비밀번호는 1임.

기본 구조

처음 페이지는 Main페이지가 열리고 Home이라는 탭이 자동으로 열리게 만들어져 있다.

더이상 Spring Boot에서 JSP를 지원하지 않는다. 따라서 페이지는 html 파일로 만들어야함. 억지로 jsp를 쓸 수는 있지만 지원을 안함. 

 

타임리프 기반으로 만들었다.

 

▼ TimeLeaf란?

https://blog.naver.com/bgpoilkj/221982228705

 

 

 

 

만들어지는 화면은 html로 만들어지게 되고 templete 밑에 contents 아래에 붙게 된다.

화면들

레이아웃이라고 해서 두가지를 만들어놨는데 대부분은 simple_layout.html을 쓰지 않을까 한다.

simple_layout.html

내가 만들어야하는 부분을 contents 라는 블럭 안에다가 만들것이다. 

 

화면이 main으로 되어있으면 거기에 딸려있는 js가 있다.

이전 프로젝트(AS-IS) 에서도 js가 따로 있는데 그 js 경로들은 static > pages 아래에 각각의 html과 매칭되는 js 파일들을 두었다.

js들

html 페이지에서 js를 불러오는 코드는 다음과 같다. 흔히 썼던 import 이렇게 안불러옴.

main.html

layout은 default로 가져왔다는거고, css와 js를 각각 이런식으로 불러온다.

 

 

Home.html

home의 경우 처음 프로젝트가 열리면 자동으로 열리는 탭 페이지이다. 탭 안에 있는 페이지라고 보면 됨.

home은 simple_layout을 썼다. 그러니 우리도 탭 안에 있는 것을 개발할테니 기본 레이아웃은 타임리프의 simple을 쓰면 되겠지?

 

우리는 싱글페이지 어플리케이션(SPA)라서 초기에 한번에 다 불러오고 그때그때 요소가 없어졌다가 불러왔다가 한다.

그래서 sheet 와 관련된 js, jquery, 부트스트랩 등이 초기에 열리는 Main이 다 가지고 있다. 얘네들이 각각의 iframe이 아니기 때문에 부모가 되는 main이 가지고 있는 것을 그냥 쓰면 되는 구조이다.

사용자 관리 열기

만약 사용자 관리를 가져온다고 치면 경로는 DB로 부터 가지고 오게 되는 거니깐...(읭?)

userView.do로 가져오게 된다. 이건 어디서 가져오느냐? Controller쪽 보면 이렇게 되어있다.

UserController.java

RequestMapping 경로가 UserView.do로 되어있음. 모델앤뷰를 써서 각각의 오브젝트를 가져와서 뿌려준다.

AS-IS 그대로 가져온거니까 참고하고.

 

 

 

이름 약속

약속해야할 부분이 있음. js를 감싸는 객체의 이름을 맞춰야함.

 

user.js 를 들어가면 다음과 같음.

user.js

이게 뭐냐면, js에 아까 컨트롤러에서 RequestMapping 경로가 UserView.do 로 되어있던 것을 소문자로 해서 변수로 선언할것임.

ex. UserView.do - var userview = { ~~~~ }

const는 쓰면 안됨. const로 하면 전역으로 적용이 안되기 때문에 var로 선언해주자.

 

왜냐면 SPA니까 같은 도큐먼트 안에 여러 탭들이 살아있게 되는거기 때문에 서로 충돌나지 않게 하기 위해서 객체의 이름을 서로 다르게 해준다.

또한 자바스크립트는 저 구조를 기본적으로 가져야 함.

SPA지만 탭별로 시트가 생성되고 살아있어야하기 때문에 pageInit이라는 함수와 pageDestory 라는 함수를 둬서 각각 시트 생성과 시트 삭제를 담당한다.

home.js

home은 닫히지 않으니까 필요는 없지만 어쨌든 구조를 맞춰둔거니까 확인해보자면, pageInit에서 아래 initSheet를 불러와서 시트를 생성하고, pageDestory에서 시트를 dispose 해준다.

create

기존에는 시트 [id값.메소드] 형태로 사용했지만, 서로 충돌이 나지 않게 하기 위해 this로 객체를 받아서 쓴다.

따로 시트 id값은 랜덤으로 생성해서 서로 다르게 겹치지 않게 해주고, this.sheet1과 같이 객체를 받아서 이걸로 시트를 생성하고 메소드를 쓴다.

 

예약어처럼 사용할 예정이니 반드시 저 구조를 포함해서 js를 만들도록 하자.

 

el은 동적으로 그냥 받아오면 됨. querySelectorAll로 받아온다.

 

 

5. 기타 참고 사항

개발 방식은 엑셀파일에 만들어야할 페이지를 지정해놓을테니 만들 때 거기에 이름 써두고 개발하면 됨. 일정은 천천히 잡고 변환 작업까지 잘 해보도록 하자.

 

DB는 MySQL을 사용하는데 MySQL Workbench 라는걸 깔면 확인할 수 있음. 데이터 확인은 할 수 있으나 변경하지는 말 것. 여기도 붙을 때 SSL을 꺼줘야할 것임.