[개발 가이드 교육] 🌟 기록 끄적끄적2 :-) + Mybatis ' #{}, ${} 차이 ' / MAC address / JSON_STUDY

✔ Frontend - javascript library & plugin

---

jQuery
jdxWidget library - datepicker, grid 대부분
Fusioncharts library(모든차트) / c3, d3(Active Dashboard)
jquery.nanoscroller / jquery.coockie / jquery.chosen(Combo Box) ..

✔ Grunt

---

1. node.js - npm package manager, gem 내장
2. grunt - javascript build tool, 통합작업, (minify)최소화 작업 npm install -g grunt-cli
3. ruby - sass설치 전 ruby 설치
4. sass 설치 - CSS빌드 툴, sass 파일 통합작업, minify 작업을 위해 사용gem install sass
5. 각 프로젝트에 grunt 모듈 설치 .. 6 7 8 9

✔ 디렉토리 트리구조

---

frontend
sass - cache(grunt설치 후 보임) : sass 캐시파일, 네비게이터 표시X, SVN 공유X
dist - src 하위 app/xx.js에서 minify하면 dist로 이동한다. 배포용 파일이 생성되는 곳
..
src - 개발용 javascript files
GruntFile.js - grunt config javascript (svn 공유 X)

webapp
resources - 메뉴얼 및 javascript
WEB-INF - xx.jsp
reports - 사용자정의통계 다운로드 xxx.jrxml(보고서파일)

backend
com.seculayer.web
업무단위별로 나누어진다.
*Util.java(common/util/..) 자주쓰는함수는 개발되어있다.

✔ 화면 구조

---

레이아웃종류
[default] - 기본
[modal-page] ModalPopup함수선언 - [exmodal-page] exModalPopup함수선언 depth 4개까지 확장가능
[expand-page] - togglePage함수선언
..

템플릿종류
Layout 안 템플릿들이 있다.
TemplateAndPage => ../common/tpl/xx.jsp
선언 X -> default_template
..

@ui.component
class 지정 -> design 호출
ui.api.document 참고 _alert ..

✔ 🌟 협업을 위한 코딩가이드

---

1. 디버깅을 위해 작성한 소스는 커밋전에 반드시 삭제 (console.log, system.out.println)
2. 시스템 운영에 필요한 로그 정보는 logger 사용
   cd /CloudESM/logs/ls 로그정보가 쌓인다.
tail -f ./catalina.out
Logger.info/debug(cd /CloudESM/app/www/ROOT/WEB-INF..
3. 중복되는 코드 하나로 통합하기 (분기는 최소화)
4. 자주쓰는 기능은 공통함수 처리 및 사용 (Util 사용)
5. 필요하지 않는 소스는 주석처리 하지말고 삭제 !
6. 들여쓰기 및 개행 지키기
7. 변수, 함수, 클래스명 등은 다른소스들 참고하여 어느정도의 규약은 지킬것(코딩가이드 참고)
   변수,함수명(카멜 표기법 ex: onSave)
   클래스명(파스칼 표기법 ex: ComCodeController)
   DB 테이블컬럼(스네이크 표기법 ex:code_id)
8. 복잡한 로직은 주석 설명처리
9. 무작정 코딩부터 시작 하지말고 어떻게 개발할것인지 머리속으로 생각 후 코딩 시작할 것
10. 커밋이나 배포 전에 꼭 !!!! @다차원적인@ 테스트 필요.
    패치는 엔지니어들이 하기때문에 반드시 !

기타. 빌드 방식
작업한양이 너무많으면 .war 압축파일로 보내준다. .war 빌드하기전에 미리 해놓는다.
.war빌드 전 Project - Clean 컴파일 된거 모든파일들 재컴파일하고 클린해주기!

기타. SQL
SELECT / UPDATE 컴마 뒤쪽에 붙여서 주석처리 편하게 할 것. 개발 시 ..

✔ 🌟 URL Naming Rule

1. URL Naming Rule

• 일반적으로 URL은 다음과 같은 규칙으로 작성
  ["/" + {menupath} + "/" + {page_id} + "" + {action} + "." + {ext}]

• page_id : 업무를 대표하는 단어(사용자 : comuser , 자산 : asset)

• action : [list, form, view, insert, update, delete]
  . list : 목록 페이지/데이타
  . form : 입력/수정 Form
  . view : 상세 페이지/데이타
  . insert : 입력
  . update : 수정
  . delete : 삭제

• ext
  . html : 화면에 표시될 페이지
  . do : 입력/수정/삭제등 처리
  . json : 데이타 조회

  예) /management/collector_list.html (콜렉터 목록페이지)

2. v_2.x > v_3.x 업그레이드에 따른 Backend 변경부분

• 화면 표시부분과 데이터 조회/처리를 분리
  예) 기존 : comuser_list.do => 변경 : comuser_list.html(화면) + comuser_list.json(데이터 조회/처리)

• 첫 화면은 기존 default_template을 사용, 부분 페이지(modal, exmodal, togglePage)는 partial_template을 사용
  예) ModelAndView mv = new ModelAndView(default_template); // Template = "/common/tpl/default_template";
  ModelAndView mv = new ModelAndView(partial_template);
  

• 모든 데이타 송수신 방식은 json 형식을 사용하므로 @RequestBody, @ResponseBody로 Controller 변경
  Grid를 제외한 모든 요청에 대한 결과는 JsonResultEntity 객체에 담아서 전달
  예) public @ResponseBody JsonResultEntity insert(HttpSession session, @RequestBody Map<String, Object> map) {}

• 화면의 Grid Library에서 사용되는 요청과 ~~.html 은 parameter 방식사용하고 결과는 GridResultEntity를 전달
  예) public @ResponseBody Map<String,Object> getList(@RequestParam Map<String,Object> map)

• Grid에서 Paging 처리시 recordstartindex와 pagesize를 사용하므로 mapper에서 해당 변수명으로 변경
  예) LIMIT #{recordstartindex}, #{pagesize}

  		<choose>
  			<when test="recordstartindex==null">
  				LIMIT 0, 10
  			</when>
  			<otherwise>
  				LIMIT #{recordstartindex}, #{pagesize}
  			</otherwise>
  		</choose>	

• 대메뉴단위에서 업무 단위로 Mapper.xml 분리

• 코드성 정보는 화면에서 선택하는 용도로 사용할 경우 jsp에서 직접 사용,
  결과 데이타의 코드는 SQL 또는 서버 로직으로 값을 변환

• 기존 Controller에서 Transaction 및 다중처리(업무 로직) 부분이 있는 경우 Service에서 처리되도록 변경

3. Frontend 변경부분

• URL은 Context Path로 시작하는 절대경로를 사용(모든 페이지에 gCONTEXT_PATH가 전역변수로 정의되어 있으므로 이 변수를 사용)
  예) $.get(gCONTEXT_PATH + "system/comuser_list.json")
• 각 페이지에서 사용하는 변수는 전역 Scope에 정의하지 말고 내부변수를 사용하거나 namespace를 아래와 같이 사용
  예) _SL.nmspc("user").list = function() {...};

MyBatis에서 #{}, ${}의차이는?

#{}은 PreparedStament이다. #{} 구문은 ? 로 변경되어 DBMS에 SQL문이 캐싱되어진다.
추후에 바인딩되기 때문에 ?값이 달라져도 같은 컴파일이 된 내용을 재사용할 수 있다.
또한 ''가 자동으로 생성된다.
그렇기때문에 Table명이나 Column명이 들어갈 때는 ${}을 통해 쿼리문을 작성한다.

${} Statment이다. ${}구문은 ? 아닌 새로운 쿼리로 실행된다.
따라서 SQL문 자체가 변경되고 컴파일되며, SQL Injection에 취약하다.
또한 '' 가 자동으로 생성되지 않는다.

MAC Address

• 할당받은 Linux ip address : 10.1.9.110
  -> cd ./CloudESM/tool/mac_address.sh https://10.1.9.110:8443/
• 로컬
  -> ipconfig -all 물리적주소 : A8-xx-xx http://localhost:8080/
  

JSON_Study

참고 https://velog.io/@lzhxxn/JSON-Parsing%ED%8C%8C%EC%8B%B1%EC%9D%B4%EB%9E%80
참고 https://velog.io/@lzhxxn/Today-I-learned.-what-can-do
참고 https://velog.io/write?id=598b365b-f225-4d2b-8010-ec66af4d88c2