티스토리 뷰

Web/Project

[2016-01-03 작업내용] 코드화 적용 방법

부라더#수 2016. 1. 3. 03:44

사실, 이게 현업에서 어떤 용어로 불리며 쓰여지는진 잘 모르겠다; 

오늘 작업한 코드화란, 영상편집에서 Encording을 이야기하는것은 아니다.

스크린 샷으로 오늘 작업한 코드화에 대한 부분을 확인 해 보자.

 

 

코드화 前

 

 

 

빨간색 네모 박스의 부분에서 아직 한글화 되지 않은 일종의 암호코드가 들어가 있다

이 데이터들은 DB에서 Ajax로 가져온 데이터들을 뿌려 놓은 것이다

 

 

코드화 後

 

 

 

빨간색 네모 박스의 부분이 원하는 한글화 패치(?)가 되었다

 

이와 같은 과정을 오늘 진행 해볼 것이고, 이것을 내 맘대로 '코드화' 라고 하겠다

 

 

 

 

Step1. 코드화 전, 어떤 코드를 매칭(matching)할 지 결정하여 문서화(document)한다!

 

 

 

 

 

 

Step2. 문서화 된 코드 정보들을 별도로 관리 할 코드 관리자 페이지를 만든다

 

 

그룹코드 마스터 정보의 MAJOR 탭 안에는 아래와 같이 각각의 코드와 코드명이

1:1 매칭(Matching)되어 저장되어 있다

 

 

이후 포스팅에서 관리자 페이지를 구성하고 제작하는 방법에 대해서 소개 하겠다

그룹코드 마스터정보 DB테이블 : CODE_MST

그룹코드 상세정보 DB테이블 : CODE_DET

 

 

 

Toad에서 MAJOR grcode에 해당하는 상세정보를 뽑아보았다

 

 

 

 

Step3. MEMBER_MST DB(회원정보)에서 데이터를 가져오기 위해 DB를 연결한다

 

 

 

[내 정보 페이지(myInfo.jsp)에서와 같은 데이터이므로 MemberInfo.xml mapper에서 그 내용을 가져다 쓰도록 한다]

HomeController.java에서 MyInfoServiceImpl의 selectMyInfo_MST()로 return (SELECT)!

 

 

 

 

 

Step4. 연결된 MEMBER_MST DB에서 데이터를 꺼내와 input box에 채워준다(Ajax)

  

 

 

가져올 때, major와 major_nm 처럼 뒤에 _nm이 붙은 것들이 있다 (붉은색 네모칸 참고)

만약 ,A.MAJOR AS major (1번째 라인)로만 데이터를 가져온다면

 A01, B02와 같이 코드화 前 데이터가 넘어올 것이다

 

이것을 '컴퓨터 공학과' 처럼 코드화 하기위해서는 매칭(Matching)되는 CODE값과 CODE_NAME을 가져와야 한다

 

 

그래서, CODE_DET 테이블에서의 MAJOR GRCODE와 위에서 가져온 A.MAJOR 값을 비교하여 그 두 값이

일치 하는 것을 가져와(한글화 상태) major_nm이라고 하는 전공_이름 변수에 넣어주게 된다 (2번째 라인)

 

이 major_nm은 MyInfoVO에 별도로 변수선언되어 getter와 setter를 걸쳐 return 된다.  

 

 

 

앞으로 여기에 *_nm로 변수 선언된 녀석들은 코드화 된 데이터로, jsp에서 불러올 때 이 parameter로 가져올 것이다

별도 _nm이 붙지 않은 데이터는 코드화 되지 않은 데이터이다

 

 

 

Step5. 로그인 이후 loginController를 통해 코드화 된 데이터를 jsp로 넘기자

 

 

기존 다른 페이지에서는 각각의 jsp에 해당하는 controller에서 코드화를 진행하여 jsp로 넘겼다(response)

하지만 Home-Login 페이지에서는 Home.jsp에서 로그인을 성공 했을 때 loginController를 타기 때문에

이곳에서 코드화를 진행하여 jsp로 넘겨주어야 한다

 

별도의 Model model을 파라미터로 지정하여, 각각 model에 addAttribute로 속성을 추가해준다

selectCodeDet()에 코드화 하고자 하는 (예:MAJOR) 변수명을 입력해준다

 

이제 Controller에서 jsp로 response를 넘길 때 코드화 된 데이터까지 완전히 넘길 수 있게 되었다

마지막으로 jsp에서는 이 resonse를 어떻게 받아와 적용 하는지 확인해 보자 (Ajax)

 

 

 

Step6. Ajax를 통해 response를 받아와 input box에 채워준다

 

 

<script> </script> 에서 Ajax 를 통해 response를 가져온다

이때 dataForm에는 memberId로 sessionScope에 저장된 memberId를 넘겨준다 (Filtering)

response는 배열 형태로 넘어오기 때문에 response[0].major_nm 으로 받아와야 한다

 

이때 response.major_nm으로 받아오면 null값이 넘어오므로 주의하자!!

 

 

 

<body> </body> 에서 받아오고자 하는 input box의 id로 major_nm을 써주면 정상적으로 받아온다

이때 코드화 하지않은 id는 memberId과 같이 camel표기법에 맞추어 적어주고

Ajax에서도 response[0].memberId 로 가져오면 된다

 

 

 

후! 길고 길었던 포스팅도 다 끝났다:-) 이제 최종 웹 페이지에서 정상적으로 넘어왔는지 확인 해 보자!

 

 

 

 

Comment

코드화는 client가 A01 같은 코드가 어떤 것을 의미하는지 찾아보는 수고로움을 덜어 주는 방법이다

모든 페이지에서 하나 하나 데이터를 가공해서 처리하기 보다는 한 번에 일괄 처리할 수 있도록

별도의 Code_MST와 DET 테이블을 만들고, jsp페이지 (managementCode.jsp)에서 관리하자

 

저작자표시

'Web > Project' 카테고리의 다른 글

Ajax response에서 불러온 사진 불러오는 방법  (0) 2016.01.09
[2016-01-05 작업내용] .each() 함수를 사용한 데이터 출력  (3) 2016.01.06
공유하기 링크
댓글