λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°

Study/JSP8

[JSP] jQuery μ„ νƒμž 정리 πŸ™πŸ» jQuery μ„ νƒμž 정리 πŸ“ jQuery CSS μ„ νƒμž λͺ¨μŒ β‘  κΈ°λ³Έ μ„ νƒμž β–ͺ️ $("*") : λͺ¨λ“  μš”μ†Œλ₯Ό 선택 β–ͺ️ $(".class") : μ§€μ •ν•œ 클래슀λ₯Ό κ°€μ§€λŠ” λͺ¨λ“  μš”μ†Œ 선택 β–ͺ️ $("element") : μ§€μ •ν•œ νƒœκ·Έλͺ…을 κ°€μ§€λŠ” λͺ¨λ“  μš”μ†Œ 선택 β–ͺ️ $("#id") : μ§€μ •ν•œ ID 속성을 κ°€μ§€λŠ” λͺ¨λ“  μš”μ†Œ 선택 β–ͺ️ $("selector1, selector2") : μ§€μ •ν•œ μ„ νƒμžλ“€μ„ λͺ¨λ‘ κ²°ν•©ν•˜μ—¬ 선택 β‘‘ μžμ‹ μ„ νƒμž β–ͺ️ $("div:first-child") : λΆ€λͺ¨μ˜ 첫 번째 μžμ‹μΈ λͺ¨λ“  μš”μ†Œ 선택 β–ͺ️ $("div: first-of-type") : λ™μΌν•œ μš”μ†Œ μ΄λ¦„μ˜ ν˜•μ œ 쀑 첫 번째 μš”μ†Œ 선택 β–ͺ️ $("div:last-child") : λΆ€λͺ¨μ˜ λ§ˆμ§€λ§‰ ν•˜μœ„ μš”μ†Œ λͺ¨λ‘ 선택 β–ͺ️ .. 2022. 11. 22.
[JSP] JSP πŸ™πŸ» JSP : Java Server Page : HTML μ½”λ“œμ— JAVA μ½”λ“œλ₯Ό λ„£μ–΄ 동적 μ›Ή νŽ˜μ΄μ§€λ₯Ό μƒμ„±ν•˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜ 도ꡬ JSPκ°€ μ‹€ν–‰λ˜λ©΄ μžλ°” μ„œλΈ”λ¦ΏμœΌλ‘œ λ³€ν™˜λ˜λ©° μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ μ„œλ²„μ—μ„œ λ™μž‘λ˜λ©΄μ„œ ν•„μš” κΈ°λŠ₯을 μˆ˜ν–‰ν•˜κ³  κ·Έλ ‡κ²Œ μƒμ„±λœ 데이터λ₯Ό μ›Ή νŽ˜μ΄μ§€μ™€ ν•¨κ»˜ ν΄λΌμ΄μ–ΈνŠΈλ‘œ μ‘λ‹΅ν•©λ‹ˆλ‹€. JSPλŠ” μ„œλΈ”λ¦Ώ 기술 ν™•μž₯, μœ μ§€ 관리 용이, λΉ λ₯Έ 개발이 κ°€λŠ₯ν•˜λ‹€λŠ” νŠΉμ§•μ΄ μžˆμŠ΅λ‹ˆλ‹€. βœ… JSP 개발 ν™˜κ²½ 도ꡬ 1) μžλ°” 개발 ν™˜κ²½ : JDK JSPλŠ” HTML μ½”λ“œ λ‚΄ μžλ°” μ½”λ“œλ₯Ό μž‘μ„±ν•˜κΈ° λ•Œλ¬Έμ— μžλ°” 개발 도ꡬ인 JDKκ°€ λ°˜λ“œμ‹œ μ„€μΉ˜λ˜μ–΄μ•Ό 함 2) μ›Ή μ„œλ²„ : Tomcat μ›Ή ν”„λ‘œκ·Έλž˜λ° μ–Έμ–΄λ‘œ μž‘μ„±λœ μ›Ή νŽ˜μ΄μ§€κ°€ μ‹€ν–‰λ˜μ–΄ μ›Ή λΈŒλΌμš°μ €μ— λ‚˜νƒ€λ‚˜λ„λ‘ ν•˜κΈ° μœ„ν•΄ μ›Ή μ»¨ν…Œμ΄λ„ˆ μ„€μΉ˜ν•¨ μ—¬κΈ°μ„œ 자주 μ‚¬μš©λ˜λŠ” .. 2022. 11. 22.
[JSP] DataTables πŸ™πŸ» DataTables : μ„œλ²„μ—μ„œ κ°€μ Έμ˜¨ 데이터λ₯Ό μ„€μ •ν•œ μ˜΅μ…˜μ— 맞게 κ·Έλ¦¬λ“œ ν˜•νƒœλ‘œ κ·Έλ €μ£ΌλŠ” 라이브러리 λ‹€μ‹œ μ„€λͺ…ν•˜λ©΄ HTML의 을 λ°μ΄ν„°κ·Έλ¦¬λ“œ ν˜•μ‹μœΌλ‘œ μ‚¬μš©ν•˜κΈ° μœ„ν•œ 라이브러리λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. μ„œλ²„μ—μ„œ 데이터λ₯Ό 가져와 μ‚¬μš©ν•˜κΈ° λ•Œλ¬Έμ— λŒ€μš©λŸ‰ 데이터λ₯Ό 가져와 ν‘œμ‹œν•  λ•ŒλŠ” μ†λ„μ €ν•˜μ˜ μ΄μŠˆκ°€ μžˆμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. νŽ˜μ΄μ§€ 정보, ν‘œμ‹œ 건수, 검색 쑰건 λ“±μ˜ 데이터λ₯Ό Parameter둜 보낸 ν›„ μ„œλ²„μ—μ„œ μ •μ œν•˜μ—¬ μ›ν•˜λŠ” 만큼의 데이터λ₯Ό 가져와 μ‚¬μš©ν•˜κΈ° μœ„ν•΄μ„œλŠ” ServerSide μ˜΅μ…˜μ„ μ‚¬μš©ν•©λ‹ˆλ‹€. 1) ν‘œμ‹œ 건수 μ œμ–΄ κΈ°λŠ₯ 2) νŽ˜μ΄μ§• κΈ°λŠ₯ 3) μ •λ ¬ κΈ°λŠ₯ 4) ν•„ν„° κΈ°λŠ₯ 5) 슀크둀 κΈ°λŠ₯ Datatable을 μ‚¬μš©ν•˜λ©΄ μ΄λŸ¬ν•œ κΈ°λŠ₯을 λΉ λ₯΄κ²Œ κ΅¬ν˜„ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ μ„œλ²„μ—μ„œ JSON 데이터λ₯Ό λ°›μ•„ ν‘œμ‹œν•  수 .. 2022. 11. 22.
[JSP] ObjectMapper πŸ™πŸ» ObjectMapper : JSON ν˜•μ‹μ„ μ‚¬μš©ν•  λ•Œ, 응닡듀을 μ§λ ¬ν™”ν•˜κ³  μš”μ²­λ“€μ„ 역직렬화할 λ•Œ μ‚¬μš© πŸ’‘ JSON [ ν‚€ : κ°’ ] 쌍으둜 이루어진 데이터λ₯Ό μ „λ‹¬ν•˜κΈ° μœ„ν•΄ μ‚¬λžŒμ΄ 읽을 수 μžˆλŠ” ν…μŠ€νŠΈλ₯Ό μ‚¬μš©ν•˜λŠ” 포멧 πŸ’‘ 직렬화 객체(Object)λ₯Ό λ¬Έμžμ—΄(String)으둜 λ³€ν™˜ - 데이터 전솑을 μœ„ν•˜μ—¬ πŸ’‘ 역직렬화 λ¬Έμžμ—΄(String)을 객체(Object)둜 λ³€ν™˜ - 데이터 전솑이 λλ‚œ ν›„ νšŒλ³΅μ„ μœ„ν•˜μ—¬ @Getter class Car { private String name; private String color; public Car(String name, String color) { this.name = name; this.color = color; } public Car( ) { this.na.. 2022. 11. 18.
[JSP] Mybatis πŸ™πŸ» MyBatis : κ°œλ°œμžκ°€ μ§€μ •ν•œ SQL, ν”„λ‘œμ‹œμ €, 고급맀핑을 μ§€μ›ν•˜λŠ” μ˜μ†μ„± ν”„λ ˆμž„μ›Œν¬ 객체와 κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€λ₯Ό λ§€ν•‘ν•˜λŠ” μ˜μ†μ„± ν”„λ ˆμž„μ›Œν¬λ‘œ, JDBC둜 μ²˜λ¦¬ν•˜λŠ” 상당 λΆ€λΆ„μ˜ μ½”λ“œμ™€ νŒŒλΌλ―Έν„° μ„€μ • 및 κ²°κ³Ό 맀핑을 λŒ€μ‹ ν•΄μ£ΌλŠ” ν”„λ ˆμž„μ›Œν¬ μž…λ‹ˆλ‹€. βœ”οΈ μ˜μ†μ„± : Persistnece μ΄λž€ ν”„λ‘œκ·Έλž¨μ΄ μ’…λ£Œλ˜λ”λΌλ„ 사라지지 μ•ŠλŠ” λ°μ΄ν„°μ˜ νŠΉμ„±μ„ μ˜λ―Έν•©λ‹ˆλ‹€. RDBMS ν˜Ήμ€ 파일 μ‹œμŠ€ν…œ λ“± 별도 λ°μ΄ν„°λ² μ΄μŠ€μ— 영ꡬ적으둜 μ €μž₯ν•˜μ—¬ 데이터가 μ˜μ†μ„±μ„ κ°€μ§‘λ‹ˆλ‹€. βœ”οΈ ORM (Object Relationship Mapping) μ΄λž€ 객체와 RDBMSλ₯Ό μžλ™μœΌλ‘œ λ§€ν•‘ν•΄μ£ΌλŠ” κ²ƒμœΌλ‘œ JPA, Hibernate, JDBC 등이 μžˆμŠ΅λ‹ˆλ‹€. 객체 지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ€ 객체λ₯Ό μ‚¬μš©ν•˜μ§€λ§Œ, κ΄€κ³„ν˜• λ°μ΄ν„°λ² μ΄μŠ€λŠ” ν…Œμ΄λΈ”μ„ 사.. 2022. 11. 18.
[JSP] JQuery πŸ™πŸ» JQuery μ‰½κ²Œ λ§ν•˜μžλ©΄ μ•„μ£Ό κ°„νŽΈν•˜κ²Œ HTML μš”μ†Œλ₯Ό μ„ νƒν•˜κ³  κ·Έλ ‡κ²Œ μ„ νƒλœ μš”μ†Œμ— νŠΉμ • λ™μž‘μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. $(μ„ νƒμž).λ™μž‘ν•¨μˆ˜1( ).λ™μž‘ν•¨μˆ˜2( ) β‘  $ λ‹¬λŸ¬($) κΈ°ν˜ΈλŠ” jQueryλ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€. 즉, jQuery에 μ ‘κ·Όν•  수 있게 ν•΄μ£ΌλŠ” μ‹λ³„μžλ₯Ό λœ»ν•˜μ—¬ μ΄λŸ¬ν•œ μ‹λ³„μžλ₯Ό μ΄μš©ν•˜μ—¬ μ›ν•˜λŠ” HTML μš”μ†Œλ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. β‘‘ μ„ νƒμž μ›ν•˜λŠ” HTML μš”μ†Œ, CSS μš”μ†Œλ₯Ό μ„ νƒν•˜λ©° κ·Έ μš”μ†Œκ°€ μ„ νƒμžκ°€ λ©λ‹ˆλ‹€. β‘’ λ™μž‘ν•¨μˆ˜ λ™μž‘ν•¨μˆ˜λ₯Ό μ •μ˜ν•˜μ—¬ μ„ νƒμžλ‘œ μ„ νƒλœ μš”μ†Œμ— μ›ν•˜λŠ” λ™μž‘μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€. μ—¬λŸ¬ 개의 λ©”μ„œλ“œλ₯Ό μ—°μ†μœΌλ‘œ ν˜ΈμΆœν•˜λŠ” 'λ©”μ„œλ“œ 체이닝'이 κ°€λŠ₯ν•©λ‹ˆλ‹€. πŸ“ JQueryλ₯Ό μ‚¬μš©ν•˜λŠ” 이유 1) νŽ˜μ΄μ§€ λ‚΄λΆ€ μš”μ†Œμ— μ ‘κ·Όν•˜κΈ° 쉬움 jQueryλ₯Ό μ‚¬μš©ν•˜μ§€ μ•ŠμœΌλ©΄ DOM 트리.. 2022. 11. 18.
[JSP] JSTL πŸ™πŸ» JSTL : JSP Standard Tag Library : μžλ°”μ½”λ“œλ₯Ό HTML νƒœκ·Έ ν˜•μ‹μœΌλ‘œ κ°„νŽΈν•˜κ²Œ μ‚¬μš©ν•˜κΈ° μœ„ν•œ 라이브러리 JSPμ—μ„œ 자주 μ‚¬μš©ν•˜λŠ” κΈ°λŠ₯인 λ°˜λ³΅λΆ„, 쑰건문, λ°μ΄ν„°ν‘œν˜„ 등을 미리 κ΅¬ν˜„ν•΄ 놓은 μ»€μŠ€ν…€ νƒœκ·Έ λΌμ΄λΈŒλŸ¬λ¦¬λΌκ³ λ„ ν•©λ‹ˆλ‹€. πŸ“ JSTL νƒœκ·Έ μ’…λ₯˜ β‘  Core (prefix : c) - λ³€μˆ˜ 지원, μ œμ–΄λ¬Έ, νŽ˜μ΄μ§€ κ΄€λ ¨ 처리 β‘‘ Formating (prefix : fmt) - 포멧 처리, κ΅­μ œν™” 지원 β‘’ Database (prefix : sql) - DBκ΄€λ ¨ CRUD 처리 β‘£ XML (prefix : x) - XML κ΄€λ ¨ 처리 β‘€ Function (prefix : fn) - Collection, String 처리 πŸ‘‰πŸ» λ‹€μŒκ³Ό 같이 νƒœκ·Ένƒ€μž…μ„ μ§€μ •ν•˜λ©΄ ν•΄λ‹Ή JSTL의 Core.. 2022. 11. 18.
[JSP] Ajax μ•ˆλ…•ν•˜μ„Έμš” ! JSP κ΄€λ ¨ ν•™μŠ΅μ΄ ν•„μš”ν•˜κ²Œ λ˜μ–΄ 곡뢀 κ²Έ 기둝을 μœ„ν•΄ λ‹ΉλΆ„κ°„ κ΄€λ ¨ ν¬μŠ€νŒ… ν•  μ˜ˆμ •μž…λ‹ˆλ‹€ :) λ¨Όμ € 비동기 톡신인 AJAX에 λŒ€ν•΄ μ„€λͺ…ν•˜κ³ μž ν•©λ‹ˆλ‹€ ! πŸ™πŸ» AJAX : Asychronous Javascript and XML : ν΄λΌμ΄μ–ΈνŠΈμ™€ μ„œλ²„ κ°„ XML 데이터λ₯Ό μ£Όκ³ λ°›λŠ” 비동기 톡신 μ‰½κ²Œ 말해 μžλ°”μŠ€ν¬λ¦½νŠΈλ₯Ό 톡해 λΉ„λ™κΈ°μ‹μœΌλ‘œ XML을 μ΄μš©ν•˜μ—¬ μ„œλ²„μ™€ ν†΅μ‹ ν•˜λŠ” 방식을 μ˜λ―Έν•©λ‹ˆλ‹€. μ΅œκ·Όμ—λŠ” XML보닀 JSON을 더 많이 μ‚¬μš©ν•˜κΈ°λ„ ν•˜λŠ”λ°μš” πŸ’‘ μ—¬κΈ°μ„œ λΉ„λ™κΈ°μ‹μ΄λž€ ? μ—¬λŸ¬κ°€μ§€ 일이 λ™μ‹œμ μœΌλ‘œ λ°œμƒν•˜λŠ” κ²ƒμœΌλ‘œ μ„œλ²„μ™€ ν†΅μ‹ ν•˜λ©° λ‹€λ₯Έ μž‘μ—…μ„ μˆ˜ν–‰ν•  수 μžˆμŒμ„ μ˜λ―Έν•©λ‹ˆλ‹€. 비동기방식은 μ›ΉνŽ˜μ΄μ§€λ₯Ό Reload ν•˜μ§€ μ•Šκ³ λ„ 데이터λ₯Ό 뢈러올 수 μžˆμ–΄μ„œ AJAXλ₯Ό 톡해 μ„œλ²„μ— μš”μ²­ν•˜λ”λΌλ„ ν•΄λ‹Ή ν”„λ‘œκ·Έλž¨μ€ .. 2022. 11. 18.

ν‹°μŠ€ν† λ¦¬νˆ΄λ°”