우리는 form을 submit하는게 아니라 ajax 호출을 하는 것!
name속성을 이용해서 값알아오기
아님 jQeury 넣고 $해서 .val()로 알아와도 됨
setRequestHeader는 open 이후에 와야 함에 대한 에러
이렇게 바꿔주기
GET인지 POST인지는 여기 확인하기
이 방식은 잘 안쓰긴 함!
한글 보려면 ok.jsp쪽에 한글 인코딩 코드 넣어주기
웹앱 폴더 안에 리소스 폴더 만들어서 css, image, js 만들어주기~
그러고 강사님이 보내주신거 집 풀어서 js에 넣어주기
GET도 POST도 아니면 강제적으로 GET으로 만들어줌 -> 소문자 post로 오타나도 GET으로 바뀔 것
가영 : 삼항연산자가 많이 사용된 if문들이라 해석이 헷갈리겠군,,,
ajax_03.jsp복붙해서 04만들고 스크립트 코드 싹 다 지워! 그리고 시작할게~
강사님이 보내주신 js파일 로드하기! 두가지 방법이 있음
로드 잘 되는지 확인하기
잘 로드되었다면 이렇게 사용가능할 것~
- 로드된 js파일로 사용할 수 있는것
- httpRequest 프로퍼티
- getxmlHttpRequest() 함수 ➡ 이건 밑에 send가 쓸 애를 만든거라서 우리가 직접 쓸 일은 없음
- sendRequest(method, url, params, callback) 함수
Quiz. 내가 잘못 한 부분
변수에 저장할 때 변수 이름이랑 id 값이랑 같으면 안돼... 할거면 window라고 지칭을 해줘야함!퀴즈 정답 변수에 저장해서 사용하는 방법도 있는데 내가 귀찮아서 안썼어.. 미안...
근데 더 많이 사용하는건 변수 없는 버전이래
이런식으로 태그를 마음대로 이름지어서 사용할 수 있음
알아보기 좋게 이해하기 좋게 지어서 사용할 수 있음
와 미안 카톡하다가 이거 설명 하나도 못들었다
XML은 태그니까 항상 열고 닫고가 필수! 그래서 실제로 필요한거에 비해 글자수가 2배가 되고 용량이 커지게 됨 -> 통신할 때 느려지고 비용이 많이 들게 됨 -> 아주 큰 단점! -> xml 대신 JSON을 사용
🔍 JSON, JavaScript Object Notation
자바스크립트 객체 표기법
통신할 때 데이터를 전달하기 위한 데이터 표기법으로 사용됨
- 통신에 참여하는 시스템들이 사용하는 언어들이 서로 다를 때 데이터를 곧바로 주고받을 수 없음
👉🏻 상대방 시스템의 언어 체계(데이터 타입)를 이해할 수 없음 - 공통적으로 이해할 수 있는 데이터 표기방식이 필요 👉🏻 JSON 표기법 사용, XML 표기법을 사용하기도 함
➰ JSON의 데이터 표현 방식
- 객체, Object
{}중괄호로 데이터를 감싸서 표현- 데이터 없이 빈 객체로 표현할 수 있음
- 데이터는
name=value쌍을 하나로 표현하며 프로퍼티(property)라고 부름 - name은 문자열, value는 어떤 타입이든지 허용
- 여러 쌍의 프로퍼티를 표현할 때에는
,콤마로 구분
👉🏻 (자바로 따지면) 클래스, 객체, Map, (자바스크립트의) Object, (둘 다 속하지 않는) 구조체 등의 데이터 타입으로 변환할 수 있음
- 배열, Array
[]대괄호로 데이터를 감싸서 표현- key값 설정없이 인덱스가 자동으로 부여되는 요소(element)들의 나열
- 여러 개의 요소들을 표현할 때
,로 구분
👉🏻 (자바로 따지면) 배열, List, Set, Vector, Sequence 등의 데이터타입으로 변환할 수 있음
- 문자열, String
""큰 따옴표로 데이터를 감싸서 표현- 문자열 데이터를 한 개씩 표현
- 숫자, Number
- 데이터를 감싸는 특수 기호 없이 숫자 데이터를 표현
- true, false, null
직렬화해서 데이터를 1bbyte씩 쪼개서(분해)해서 보내고 받는 쪽에서는 역직렬화해서 조립해서 받음 -> 스트림에 들어있음
보내는 데이터가 JS나 Java인 경우 쪼개면 이해를 하지 못함..?
JS를 JSON으로 변환해서 보내고 JSON으로 받아서 원하는 Java데이터로 변환
Java를 JSON으로 변환해서 보내고 JSON으로 받아서 원하는 JS로 변환
자기꺼를 남을 위해 변환하는것 : 마샬링
데이터를 받아서 자기꺼로 복원하는 것 : 언마샬링
➰ 직렬화, Serialization
스트림을 통해서 데이터를 전송하기 위해 1바이트 단위로 잘게 나누는 것
- 나뉜 데이터들을 직렬로 연결해서 전송
➰ 역직렬화, Deserialization
스트림을 통해서 데이터를 수신하기 위해 1바이트 단위로 전달된 데이터를 원본 형태로 복원하는 것
➰ 마샬링, Marshalling
데이터를 전달하기 위해 공통 데이터 표기법으로 변환하는 것
👉🏻 JSON으로 변환
- 클라이언트 : Javascript 데이터 ➡ JSON 표기법
- 서버 : Java데이터 ➡ JSON 표기법
어느 한 쪽에서만 해야하는게 아니라 양쪽에서 모두 해야함
➰ 역마샬링, Unmarshalling
마샬링되어 전달된 데이터를 자신의 시스템(언어)에 맞게 복원하는 것
- 클라이언트 : JSON 텍스트 ➡ Javascript 데이터
- 서버 : JSON 텍스트 ➡ Java 데이터
✔ 원본데이터 ➡ 마샬링(JSON) ➡ 직렬화 ➡ 송신 ➡ 수신 ➡ 역직렬화 ➡ 언마샬링(사용 가능한 타입) ➡ 복원데이터
jsonTest 폴더랑 jsp 하나씩 만들었음
c는 당연히 문자열이 들어가는 자리라서 ""가 없어도 문자로 인식하지만, Cherry는 어떤 타입도 올 수 있는 자리라서 "" 필수
json으로 쓸 때는 몇몇 API에서 인식 못하는 경우가 있어 ""를 사용해주는 것이 좋음
문자열로 바깥을 "" 큰 따옴표로 감싸는 경우 중괄호 안의 큰따옴표를 문장끝으로 인식하는 경우가 있어 \" 이스케이프를 해줘야 함
바깥을 큰따옴표로 감쌌으면 안은 작은따옴표를 사용 혹은 그 반대로 사용해주는 것이 좋음
위에는 JS객체 밑은 JSON 텍스트
JSON 텍스트로 변환한 JS객체!
숫자는 큰따옴표 안들어감~ true, false가 있었어도 안들어갔을 것
똑같이 ajax 다이나믹웹웅앵에 gsontest 서블릿 하나 만들게~
🔍 GSON 라이브러리 다운받기
파일 뉴 했을 때 제일 처음 뜨는게 Maven이었단거 알아..? 나도 몰랐어..
뭐 하는 애라는데 사실 설명 잘 못들었어.. 멍때렸어..
자바코드가 있으면 이걸 컴파일 하죠 그럼 기계언어(저급언어)가 나옴 이게 실행이 되려면 추가로 API 코드가 들어가야 함
우리가 개발한 소스코드의 결과물과 API를 결합하는 것을 빌드라고 함 -> 실행준비
메이븐이 실행에 필요한 라이브러리를 관리하는 애 -> 빌드 관리 도구 -> Spring할 때 사용할 것
메이븐에 Commons 검색해볼게~
이런 화면을 확인할 수 있어
하나 들어가서 눌러보면
이런걸 확인할 수 있어 메이븐 프로젝트를 만들면 저 메이븐 코드를 넣어서 뭘 사용할 수 있다는데 흠.. 잘 안쓴다고 한거같애.. 분명 들었는데 기억이 잘 안나..
뭘로 쓰는 다 똑같은 빌드도구고, Gradle은 안드로이드 어플같은데서 많이 써
웹은 시작할 때 메이븐이 주였고 앱은 시작할 때 Gradle이 주여서 그렇게 됐슴다
앱 기준 Maven은 옛날거고 웹은 섞어서 써도 되는데 우리는 그냥 메이븐 사용할거고 나중에 저 메이븐 코드 추가하게 될거야
그래들 쓰는게 훨씬 좋은데 다들 메이븐 쓰니까 메이븐 쓰고 그래들은 추가로 공부하면 좋지
우리 이제 Gson 검색하고 다운받을게~ 얘는 구글 JSON이야
우리가 메이븐을 썼다면 메이븐 코드를 썼겠지만 그게 아니니까 jar 파일을 받아서 넣어줄게
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ강사님 또 살짝 고장나서 딴길로 샐뻔ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
Gson이 2등이고 잭슨이라는 애가ㅏ 1등인데 우리는 스프링할 때 잭슨 쓸거야 Gson은 잠깐~ 스쳐지나가는~
짠 추가완~
어떤 타입으로 쓸건지에 대한 명시를 두번째 타입에 해줘야 함! 그럼 그걸 반환해줄거야
JSON텍스트는 항상 문자열이니까 얘는 명시를 할 필요가 없겠지~
이걸 만약 변수에 저장을 한다면 이런 형태가 되겠지~ -> "\"Apple\""
롱도 자주 쓰는데 없어졌음,,, 다른 방식으로 쓰나봐
JSOM은 롱과 인트를 구별할 수 있는 능력이 없어 똑같이 숫자일 뿐
더블도 마찬가지일거야
근데 fromJson으로 갈때는 명시해줘야해!
현재 참조값만 출력됨 -> 의미가 없잖아 그래서 마샬링을 해줘야해
짜잔~
키값은 자유롭게 변수이름처럼 정해도 됨
이게 갑자기 왜 나와... 어려워...
클라이언트에서 AJAX로 인서트 하는 경우 딱히 응답을 할게 없잖아..? 근데 응답은 반드시 있어야해 안할 수 ㄴ없으니 그럼 true나 보내자
이때 생으로 true만 보내는 것보다 맵을 만들어서 단순히 하나만 보내는것보다 object로 보내는 것이 좋아
습관적ㅇ로 {}로 묶어서 보내야지!(object로 보내야지!)하고 생각하는 것이 좋음
이렇게!
그럼 이제 fromJson써볼게
넘버타입 JSON텍스트
int로 바꾸려면 이렇게.. 왜.. 이렇게...? JSON 모르겠다..
클래스는 제네릭을 가지고 있어서 알고싶은 데이터의 유형을 적어주는 방식으로 사용해야해
Class< Person >이렇게 하면 Person정보를 담고 있는 클래스가 됨
이걸 간단하게 쓰기 위해 Person.class 이런 형태로 쓸 수 있게 해줌
그래서 int.class도 이런 형식이야
엄밀히 따지자면 int는 클래스가 아니잖아 근데 기본형이라..? 이걸 가능하게 해줘..? 이런 설명이 아니었는데..
제네릭에는 기본데이터타입이 들어갈 수 없ㅂ어서 Integer로 들어가야 하는데 많이 사용하니까 int로도 사용할 수 있게 해준대
같은 "12345"이지만 반환타입을 다른 데이터타입으로 지정~
0118에 수업했던 제네릭 메소드에 관한 부분 참고하면 좋을 것 같아 Class03
Long이랑 long이랑 뭐가 달라...
testServlet02 하나 더 만들고 package dto 만들어서 Person Class 만들어~
null값은 굳이 있을 필요가 없어서 phone은 안들고옴
반대로 넣는 경우 없다ㅗㄱ 오류가 나지도 않음 없으면 null이구나, undefined구나 함
굳이 phone:null이라고 하는건 데이터 낭비 데이터 아끼려고 JSON하는건데 말이 안되겟죠
콘솔창에서 출력 및 확인 가능
없는 phone은 JSON이 알아서 잘 해줘~
자바에서 배열은..?아마 중괄호말한듯 선언과 동시에 초ㄱ기화할 때만 사용 가능하며, 텍스트여야하기 때문에 문자열만 가능함
그리고 자바에서는 Stirng이''작은 따옴표로 표현되지 않음 \를 다 넣어서 이스케이프를 해줘야해
map에 넣고 toJOSN 돌려버리면 훨씬 쉽다 굳이 그렇게 하지 마라
바깥이[]인걸 보고 배열이구나~ 알 수 있음
맵에 넣으면 오브젝트타입의 밸류,,,? 진짜로 뭔 말인지 모르겠어...
Person data1 = new Person();한 것과 같은 효과
하지만 멤버필드가 없으니까 하나씩 넣어줘야겠지
JSON과 비슷해보이는 형태지만 ""큰 따옴표가 없어!
그럼 json으로 바꿔ㅓㅅ 비교해보자
차이~ 큰 차이 없죠
HashMap<String, Object> 타입으로 DTO를 대체할 수 있음 그러면 List< DTO >가 가능한것처럼 List< Map >도 가능하겟지?
근데 이러면 해야할게 너무 많아.. DTO 쓰는게 훨씬 낫겠지요
웹 툴중에 json parser가 있음
자동변환이 잘못됐거나 직접 작성하면서 이상해졌을 때 찾기 편함
이건 phone에 " 하나 지웠을 때
한번씩 쓰는 경우가 있을 뿐 자주 쓰는건 아니라 필요할 때마다 알아보렴
res : map
.get("dataList") : List
.get(0) : map
.get("name") : string
👉🏻 반환되는 타입들
이걸 어케 다 기억해? 마우스 대면 자동으로 알려줘^.^
❗ 결론! 우리는 DTO 쓰자... 근데 필요한 경우도 있긴 해.. 어쩌란말이냐..
JS 쪽 JSON과 Java 쪽 JSON을 통신하게 하기 위해서 우리 이거 배웠잖아
이제 각각 JSON 배웠으니 통신하는 것도 배워야지
JS에서 보내는건 잘 안할거야 응답에서 서버에서 Java를 마샬링해서 클라이언트로 보내는것 많이 하게 될거야
toJson과 parse...?를 많이 하게 될 것
컨트롤러 패키지 만들고 서블릿 하나 만들고
jsp 하나 만들어서 포워딩 하자!
폼 만들었으니까 클릭이벤트 있어야하는데 JS로 해줄게
마지막 callback함수는 보통 쟤 전용으로 일회용으로 사용하는 경우가 많아 익명함수로 넣어주지만 ㅣㅈ금 이렇게 하지는 않을거야
여기까지작성하고 실행해봤을 때 버ㅓ튼 클릭하면 에러나는 것 당연. POST 안만들었으니까^^
doPost 넣어주니까 에러없지롱
이제 post에서 응답을 구현해보겠어요
포스트에서 작성한 이 응답을
jsp의 여기서 처리해줘야함
이렇게~
바로 처리해줘도 되는데 변수에 저장해서 함 해봅니다
아직 JSON 데이터여서 파싱해줘야해 끝이아냐.
클라이언트 입장에서는 JSON으로 받았으니까 JS데이터로 언마샬링 해줘야 할 차례
마참내!
근데 아직 끝이 아니었음
이거 doPost족
근데 우리 이렇게 안보내기로 했잖아 항상 키:밸류로 묶어서 보내기로 했어 라고 하시면서 바꿔씀
결과는 이렇게~
zlsms dhqmwprtxmdptj wlrwjq RJsof tn dlTsms qkdqjqdl djqtdjtj wlrwjq Tjwnjdi go
찐 최종 jsp printData에 마지막으로 반영코드 추가해주기
아놔 찐최종 아니었네
서블릿에서 직접 응답 안하기로 했어
그거에 대해 수정해줄게...
서블릿에 위에 appen지우고 DTO 활용해서 작성해주기
근데 둘 다 write랑 append 쓰는데 뭐가 다른데,,,
Member dto 하나 만들어볼겡
근데 아까 Person은 생성자 안만들었었나봐 난 만들었었는데...
ㅇㅣ번엔 생성자 만들어보겠대...
서블릿에서 위에꺼 지우고 List로 해보심
근데 위에꺼 안지우면 제이슨 보내고 끝나고 또 보내는거라서 오류남 나도 이 오류 나고 지금 주위에서 이 오류 투성이임 조심해
제이슨 응답은 제이슨 하나여야 함 ,로 연결되는 것도 아니고 {} 중괄호로 끝나므로 제이슨 2개가 되어 오류가 남... 언니 나 이거 진짜 이해 하나도 못하겠어,,,,, 오늘 과부하걸렸어.....
콘솔로 결과물 ~
jsp쪽도 응답데이터 처리 코드 바꿔주기~
결과물 나 왜이래.. 이렇게 나오면 안돼 언니... 나 뭐 잘못했네..
밑에 div에 추가하는 코드 안썼다...
시험 정규식 사용해야함....
