[Ajax][웹에디터][국비교육] Day 73

Ga02·2023년 4월 13일
ajaxeclipse국비교육웹 에디터

국비교육

목록 보기
67/82

jQuery CDN 가져왔던거
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
복붙하면 이 코드인데
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
우리 해왔던 방식은 이거~
API

API도큐먼트를 보면 왼쪽에 에이젝트 카테고리가 있고 사용 가능한 함수들이 있어
다 사용하진 않고 4종류정도만 볼거야

🔍 jQuery를 이용한 Ajax

jQuery CDN
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

  • XHR 객체를 이용하여 AJax 코드를 작성하는 것이 불편 👉🏻 크로스 브라우저, 코드의 편의성 부족
  • jQuery 라이브러리는 크로스 브라우저 처리가 되어있음
  • jQuery DOM을 이용하여 응답데이터를 처리하기 편함

➰ jQuery AJAX API 함수

  • $객체.load(url [, data][, complete])
  • $.get(url [, data][, success] [, dataType])
  • $.post(url [, data][, success] [, dataType])
  • $.ajax(settings)

➰ jQuery AJAX API 01 - $객체.load()

$객체.load(url [, data] [, complete])


마지막 Short웅앵 들어가!
.load() 설명 보자~
url에서 응답받은 데이터가 있을거야 그걸 받아서 객체에 적용하겠다는 말임
load는 innerHTML까지 구현되어있다고 생각하면 돼
각 매개변수에 대한 설명 읽어보쎼용
complete는 성공실패 상관 없이 요청이 오면 하는거..? 사용방법 읽어보세요..

  • 매개변수인 url로 AJAX 요청을 보냄
  • 응답받은 데이터를 $객체의 내용물(innerHTML)로 적용
    ✔ 응답 데이터의 형식을 HTML로 작성하는 경우가 많음
    👉🏻 JSON으로 응답받으면 어울리지 않음 일부러 서버쪽 응답을 HTML로 해줘야 함
  • url : AJAX 통신을 수행할 URL
    • url 뒤에 쿼리스트링을 붙여서 GET 메소드의 요청파라미터를 추가할 수 있음
  • data : AJAX 통신에 사용할 전달 파라미터를 지정
    • String 타입 : GET 방식으로 요청할 때 ➡ 쿼리스트링 문자열
    • PlainObject 타입 : POST 방식 요청

      플레인 오브젝트 -> 중괄호로 묶인 {키:밸류, 키:밸류, ...} 들
      오브젝트는 대괄호로 묶은 배열을 말하는 경우라서 플레인 오브젝트라고 구분지어 줌
      로드는 보통 전달파라미터 안씀 그래서 첫번재 매개변수만 이용하는 경우가 많을거야

  • complete : 요청-응답 완료된 후에 호출되는 callback 함수를 지정
function(
	String responseText		//응답 데이터
    , String textStatus		//응답 상태 메시지
    , jqXHR jqXHR			//jQuery객체에 변환한 XHR객체
)
$("#result").load("./ajax02", {key1:1234, key2:"HI"}, function(a, b, c) {})
$("#result").load(
	"./ajax02", 
    {
    	key1:1234,
    	key2:"HI"
    }, 
    function(a, b, c) {
      jqXHR.함수
      jqHR.프로퍼티
      
      jqXHR[0].readyState
      jqXHR[0].status
      
      //실제로는 이렇게 복잡하게 작성 안할거야. 우리 복잡하게 안할려고 이거 하고 있는거잖아
      //이런식으로도 사용 가능하다고 보여준것일 뿐이에요
    }
)

코드 작성하러 가보자
서블릿 없이 jsp로 응답..? 움직이는거..? 먼저 보겠대
같은 Ajax 프로젝트에 webapp에 폴더만 새로 만들고 jsp 만들어줄게


화면 왼쪽에 사이드 메뉴바가 있다ㅗㄱ 생각하고 메뉴를 누르면 가운데 페이지만 변환되게!
보통은 상담에 탭이 있고 그걸 누르면 다른거 ㄴ가만히 있고 가운데 내용물만 변환되게
근데 이건 JS로도 구현 가능해 div를 각자 주고 display none 주고 이런식으로
근데 DB에서 가져와서 페이지를 갱신하거야 해야하느 ㄴ경우에 AJAX가 필요한거야
화면 일부에 대하 변경이 필요한데 이거의 데이터가 DB에ㅓ 받아와야 하는 경우 AJAX를 사용, 그렇지 않다면 JS DOM으로 내용물만 변경해도 가능~
지금은 서버데이터라기보다 ㄴ동작방식만 보고 이썽서 JS로도 구현가능한것임
메뉴바 구현해볼게


쟈잔 메뉴 누를 때마다 페이지 바껴야 해


스타일 줬어용
이제 right div 내용물 채워볼게용

여기까지 잘 됐으면 이제 제이쿼리 cdn 추가해주고 작성시작해볼게용

이벤트 리스너를 걸어주려고 해요
근데 버튼 누르자마자 페이지가 바뀌면서 콘솔창도 바뀌어ㅓㅅ 뒤로가기를 눌러야 콘솔창에서 제대로 됐는지 확인될거야
근데 우린 페이지 이동을 하고싶은게 아니잔아 그래서 페이지 이동을 멈춰볼게
return false 주기

짠 이렇게 페이지 이동 없이 콘소ㅗㄹ창 출력~

이거 의미
right에 추ㅏㄱ해줄게(로드해줄게) 이 객체(this 즉 a click)의 속성 href를!

짠 이제 메뉴바 누르면 화면에 추가되지롱~

➰ jQuery AJAX API 02 - $.get(), $.post()

get
post
설명보고 오세용

  • $.get(url [, data][, success] [, dataType])
    • $.get()메소드는 GET 요청을 보냄
  • $.post(url [, data][, success] [, dataType])
    • $.post()메소드는 POST 요청을 보냄
  • url : AJAX 통신을 수행할 URL
  • data : 전달파라미터
    • String 타입, PlainObject
  • success : 요청 완료 후 성공적인 응답일 경우 호출하는 콜백함수
    👉🏻 우리가 했던 readtState == 4 / status == 200 을 한꺼번에 해결해주는 코드
function(
	PlainObject data,		//응답 데이터
    String textStatus,		//응답 상태 메시지
    jqXHR jqXHR				//jQuery XHR 객체
)
  • dataType : 응답받은 데이터의 타입(형식)을 지정
    • 지정된 타입으로 응답데이터를 파싱(추출)함
    • 파싱된 결과는 success콜백함수의 첫 전달인자로 전달됨
    • xml, json, script, text, html 👉🏻 사용할 수 있는 값들
      ✔ 우리는 주로 json 아님 html을 적용
      ✔ 응답데이터를 지정된 타입으로 파싱할 수 없다면 에러가 발생

정리했으니까 이제 사용하러 가보자~
jsp를 추가해줄게용 jqAjax_01.jsp

이거 전까지는 특별한거 없엇음!

언니 여기 자동완성으로 작성될 때 중괄호 조심해야해!

주석 참고참고

이제 값 입력하고 버튼 누르면 네트워크 쪽에서 ok.jsp 누르면 헤더에 requestURL에 쿼리스트링으로 값 들어가잇는거 확인할 수 있어~



결과창 jsp는
ajax 폴더에서 ajax_02_ok.jsp에서 긁어오고!

요기 상단에 파라미터 이름만 맞게 바꿔주자~
이제 post 테스트

결과도 똑같을거얌

➰ jQuery AJAX API 03 - $.ajax()


low레벨 쪽에 있어용
지금까지는 축약 메소드를 본거고요 이거는 추상메소드에요
대신 로우레벨이라 우리가 설정값을 일일히 다 넣어줘야해
다 할 수 있으면 좋은데 다 외윅 싫으면 이ㅓㄱ 하나만 제대로 하면돼.
그넫 대신 얘는 외울 내용이 좀 많음
설명 읽어볼게요

수행한 결과로 실행할 함수, 그 결과로 실행할 함수, 그 결과로 실행할 함수 이렇게 중첩해서도 사용할 수 있긴합ㄴ다
강사님은 위에 야들 안쓰고 이걸로 씀 더 길고 복잡해지긴 하지만 그러신대..

  • $.ajax(settings)
    • settings : PlainObject 타입 👉🏻 AJAX 요청/응답을 설정하는 항목들을 key/value 쌍으로 작성
  • settings 필수 옵션
    ❗ 다음 6가지를 필수로 적용하도록 함
    • type : "GET"(기본값) | "POST" 👉🏻 소문자로 적어도 적용됨
      • HTTP 요청 메소드를 지정
    • url : 요청 URL
      • String 타입
    • data : 요청 파라미터
      • PlainObject 타입
    • dataType : 응답 데이터를 처리할 형식을 작성
      • xml, json, script, text, html 👉🏻 주로 json 아님 html일 것
        ✔ 요청 파라미터의 타입을 나타내지 않음

        요청으로 보내는건 항상 String / 응답으로 오는건 html, json, file, text, ...
        이거 안맞춰주면 에러나.. 데이터 처리가 안될거야

    • success : 요청/응답 성공시 호출하는 콜백함수
function(
	//사용 가능한 모든 데이터 -> 그냥 Object라고 생각해도 됨
	//문서에서 설명하기 위해 이렇게 표현한거지 애니띵이라는 타입이 있는게 아님
	Anything data			//응답 데이터
     , String textStatus	//응답 상태 메시지
     , jqXHR jqXHR			//jQuery XHR 객체
     
)
  • error : 요청/응답 실패시 호출하는 콜백함수
function(
	jqXHR jqXHR				//jQuery XHR 객체
     , String  textStatus	//응답 상태 메시지
     , String errorThrown	//에러 정보
)

코드 보러 가자
아까 했던 get, post를 똑같이 해서 함 해볼게
jsp 파일 하나 jqAjax_02.jsp 이름으로 만들고 jqAjax_01.jsp의 바디 태그만 복사해서 가져오고 제이쿼리 준비하자

이렇게 기본 뼈대를 만들어봤어요
강사님은 원본 남겨두려고 복붙해서 하나더 만들고 주석처리하셨엉
나도 해야지
지금 이벤트를 등록해놓은게 아니라ㅓㅅ 새로고침하면 무조건 ajax 코드가 실행될거야 그래ㅓㅅ 이벤트코드로 감싸줄게

감쌌지롱

🔍 웹 에디터, Web Editor

웹 페이지에서 글을 작성할 때 보조하는 라이브러리

  • 위지윅(WYSIWYG) 형식의 HTML 웹 에디터
    What You See Is What You Get : 보이는대로 결과물을 얻는다
    • 작업 도중 확인할 수 있는 진행 상황을 그대로 최종 결과물을 얻음
    • 문서나 작업물의 최종 결과물을 확인하면서 보는 모습 그대로 결과물을 저장하는 것

➰ 웹 에디터의 종류

  • CKEditor
  • Summernote
  • Froala
  • TinyMCE
  • 스마트 에디터 2 👉🏻 얘만 무료 네이버꺼임 / 단점이라면 Low-level임

➰ 네이버 스마트 에디터 2

네이버 스마트 에디터2
공개된 소스 깃허브


오른쪽 메뉴바 릴리즈 들어가ㅓㅅ 다운받아용

이거 제일 위에서 tgz 파일 받아서 압축 해제하면 package 폴더가 뜰거양
설치 설명은 강사님꺼 참고해주~

다이나믹 웹 프로젝트 WebEditor로 하나 만들게용

우리 이렇게 해서 정적자원 관리하잖아 근데 se2 폴더 하나에 다 넣을게

짠 압축해제한 package 폴더에서 저렇게 6개만 가지고 와서 넣어주세요
textarea에 씌워줄거라서 텍스트area 코드 뒤에 적어줘야해 그 전에 적으면 안돼

이렇게~
작성버튼 누르면 제출되도록 위에 스크립트에 작성해줄겡

근데 프레임이(에디터가) textarea 가리고 있어서 display none으로 되어있대 ㅇㅣ 상태로는 아무리 버튼을 클릭해도 보내지지 않는대! 개발자도구 엘리먼트 확인해보자
우리는 아이프레이 ㅁ안에 작성된 글을 실제로 사용하려는 textarea에 옮겨주는 작업이 필요하고 그러고 서브밋ㅇ르 해야 전송이 될거얌
이걸 하게 해주는 함수를 작성해볼게

이렇게 하고

호출해줄게!
어떻게 동작하는지 눈으로 볼 수 없지만~ 확인하고 싶으면 개발자도구에서 textarea에 display none을 풀어줘


작성 눌렀을 때 이렇게 되어야 맞아!

폼 제출 갈겨보자!
전달되었다면 네트워크에서 확인 가능한~

페이지는 doPodt 구현 안해줘서 405 에러나더라!

포스트 구현하고~

짠

summernote 해볼겡
summernote
컨트롤러에 에디터컨트롤러2랑 jsp도 write2 만들어주께
글고 섬머노트에 있는 cdn 가져올겡
섬머노트 cdn -> 게팅 스타티드 누르면 이성용

그냥 복붙했어!
jsp작성해줄게

이렇게 그러고 위세 스크리븥 코드로 섬머노트 불러오기

훨씬 간단하죠!

완성화면~
근데 단순호출 말고 안에 뭐 값을 줘서 변경도 가능하대 함 해보자

이런식으로 해봤습니다
이번에는 웹 에디터 없애는 기능을 해볼게! 폼 바깥쪽에 버튼 하나 만들었어

그러고 클릭 이벤트 걸어주자


버튼 누르면 없어지지롱~ 근데 저 textarea가 보이면 안된대 없애는거 가보자고

임베디드 맞아..? 이걸 무슨 방식이라 하지 암튼 직접 주기도 하고

클릭했을 때 없게도 만들어줄게~
이번에는 보여주기 만든대ㅠ

보여주기 버튼 만들고 스트립트도 작성 갈겨! 진짜 정신없다..

이렇게 했어용
화면사진은 생략합니다...
근데 섬머노트는 textarea 아니어도 적용가능하대! div 만들어서 적용해보께

profile
Ga02
IT꿈나무 댓츠미
이전 포스트

[ajax][국비교육] Day 72

다음 포스트

[JSTL][국비교육] Day 74

0개의 댓글