달란트(Talanton)

다음은 웹을 배우면서 홈 페이지를 개발하는 프로젝트를 수행한다. 이때 필요한 기능들을 기술해 본다.

• 회원관리 기능 : 회원가입, 약관 및 개인정보수집 동의, 로그인, 로그아웃, 아이디/비밀번호 찾기, 회원탈퇴, 회원정보 관리(목록보기, 회원정보보기, 변경), 아이디 중복 검사, 아이디/비밀번호 입력제약 Audit 기능, 개인정보 암호화 저장

• 게시판 기능 : 페이징 처리, 댓글 순서 관리, 목록보기, 게시글 쓰기, 게시글 수정, 게시글 삭제, 게시글 검색, 스마트 에디터 사용, 첨부파일 저장, 비밀글 기능, 게시판 종류 및 다른점 처리 (방문록, Q&A, 공지사항, 게시판, 자료실, FAQ), 게시판 권한관리(읽기, 쓰기, 답변, 첨부 허용여부 관리), 다중 게시판 만들기(게시판이 여러 개일 때 관리방법), 게시판 관리(목록보기, 추가, 변경, 삭제)

• 메뉴 체계 및 링크 연동 : 헤더에 있는 nav 및 사이드바에 있는 lnav

• nav : 몇 단으로 할 것인가? 마우스를 갖다 대면 전체 메뉴를 보여 줄 것인가? 아니면 1단 메뉴에 속한 2단 세부 메뉴를 보여줄 것인가?

• lnav : nav와 연동되어 표시되는 방법은? 몇 단으로 구성할 것인가?

• 관리자 측면에서는 메뉴의 관리를 할 것인가? 즉, 메뉴에 대한 추가, 삭제, 변경 및 목록보기, 보기를 허용할 것인지? 아니면 고정적으로 운영할 것인지 이다.

• SNS 연동 기능 : 페이스북 로그인, 카카오톡 로그인, 트위터 로그인, 게시글 공유(카톡, 페이스북, 트위터), 좋아요, 별점

• 반응형 웹 만들기 : 휴대폰에서 브라우저에서 접속할 때 동작

• 실행환경 서버 관리(윈도우 서버, 리눅스 서버) : 네트워크, 하드웨어(CPU, 메모리, 하드디스크, 백업장치), 도메인관리, 호스팅 관리 , 실행환경 구축

• 전자정부표준프레임 : 공통기능(모바일 포함), 하이브리드앱

• HTML5 기능 : 비디오, 오디오, 캔버스, 드래그 & 드롭, 지오로케이션, 웹 스토리지, Indexed DB, 파일, 커뮤니케이션, 웹워커, 히스토리, 오프라인

• Open API 연동 : Rest API, SOAP API 연동 (공공데이터 연동)

• Open API 기능 제공 : REST API 제공

• 주기적인 Job 수행 방법

학원에서 스프링 MVC를 적용하여 프로젝트를 학생들이 하고 있는데 Ajax와 첨부파일을 적용하는 것이 어렵다고 하여 정리해 본다.

나의 작업환경은 다음과 같다.

1. 멀티 게시판 : 하나의 Article 데이터베이스 테이블에 여러 개의 게시판의 게시물을 한꺼번에 저장

  - 게시판 테이블 운영

  - ref, step, depth 체계를 가진 게시판

  - 네이버에서 공개한 스마트에디터 사용

  - 본문에 사진 추가 기능 사용

  - 첨부 파일은 5개 까지 적용 가능

  - 오라클 11g DBMS 사용 : Board, Article, PdsItem 테이블 및 각각의 sequence 운영

2. 스마트에디터에 대한 스프링 MVC 적용

  - 소스코드 위치 : src/main/webapp/resources/smarteditor

  - photo_uploader/popup/attach_photo.js 수정

    + html5Upload() function

      * 본문에 삽입되는 사진을 서버에 저장하기 위한 URL : /contextPath/board/file_uploader_html5 (내부적으로 Ajax 처리)

    + callFileUploader() function

      * sUrl : 'contextPath/board/file_uploader'

      * sCallback : 'resources/smarteditor/photo_uploader/popup/callback.html'

  - writeForm.js 수정 : 게시판 쓰기를 위한 jsp 파일의 javascript 파일

    + nhn.husky.EZCreator.createInIframe 수정

      nhn.husky.EZCreator.createInIFrame({

        oAppRef: editor_object,

        elPlaceHolder: "smarteditor",

        sSkinURI: ctx + "/resources/smarteditor/SmartEditor2Skin.html", 

        htParams : {

            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseToolbar : true,             

            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)

            bUseVerticalResizer : true,     

            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)

            bUseModeChanger : true,

            fOnBeforeUnload : function(){

            }

         }

       });

    + 전송 버튼을 눌렀을 때 처리 : 가비지 컬렉션 처리를 위해 먼저 사진 파일에 대한 관리를 먼저하고, 이후 첨부파일에 대한 저장을 처리

      $("#addBtn").click(function(){

        //id가 smarteditor인 textarea에 에디터에서 대입

        editor_object.getById["smarteditor"].exec("UPDATE_CONTENTS_FIELD", []);

        // 이부분에 에디터 validation 검증

        var el = document.createElement('html');

        el.innerHTML = editor_object.getById["smarteditor"].elPlaceHolder.value;

        var imageF = el.getElementsByTagName('img');

        var url = ctx + "/board/file_uploader_real";

        var params = "";

        for(var i = 0;i < imageF.length;i++) {

          if(i == 0)

            params += ("src=" + imageF[i].src + "&title=" + imageF[i].title);

          else

            params += ("&src=" + imageF[i].src + "&title=" + imageF[i].title);

        }

        sendRequest(url, params, callbackFunction, "POST");

        callTimerProcessing();

      })

      function callTimerProcessing() {    // 사진에 대한 처리를 보장하기 위해 loop를 돌다, 응답이 오면 처리

    if(loop) {

      setTimeout(function() {

           callTimerProcessing();

          }, 100);

    }

    else {

          //폼 submit

          $("#frm").submit();

    }

      }

서버에서 처리는 다음에 ...