CLASS123 #1-1 / 🌺 ajax(javascript) 기본 구조 1. javascript ajax2. jquery ajax3. es ajax4. react ajax=> 다 다름 => 다알아야함 ⚡ json 구조원래는 database + java 로 만들어야함 배열 => [ ] (key 없는 배열) or { } (key배열일경우)json파일 내 주석사용 Xdatafile 종류 : xml,json(api서버가 없을 때) / jsp,do (api서버가 있을 때 )[ ["hong","kim","park"], ["22","32","42"]] ⚡ ajax 기본 구조 : ajax는 비동기 통신전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이다.즉.. 2024. 6. 20. jquery ui ⚡ jquery ui$(function(){ $("#today").datepicker(); $("#popup").draggable(); $("#popup").droppable({ //다른 오브젝트가 해당 오브젝트 안에 들어오면 작동 drop : function(){ $(this).css("background-color","pink"); } }); $("#popup2").draggable(); $("#menu").selectable(); //선택한 오브젝트를 표시하는 함수(css와 함께 사용) $("#menu2").sortable(); }) datepicker minDate: "0", 오늘부터선택가능maxDate: "7", 선택가능 max 지정 showOn: "both"buttonText: ".. 2024. 6. 20. #7-3 / 첨부파일 기능 + database 저장 https://dev-eunse.tistory.com/155 예제의 html파일에 review 받는 input 추가리뷰내용 : 🔽 create table filelist( fidx int(7) unsigned not null auto_increment, f_img text null, f_text varchar(200) not null, f_indate timestamp not null default current_timestamp, primary key(fidx) ); 🔽 ⚡ 리뷰등록 fileok2.java@MultipartConfig ( fileSizeThreshold = 1024*1024*2, maxFileSize = 1024*1024*10, maxRequestSize = 1024*1024*1.. 2024. 6. 19. #7-2 / 첨부파일 기능 - java + io cos 사용하는 방법도 잇음 - 궁금하면 google에 쳐보세욘 이 예제는 database 전달 없음⚡ 첨부파일 기능첨부파일은 get으로 날릴수 없음 => post로만 날릴 것!- fileupload.html enctype : 기본(따로 작성안할시)이 application/x-www-form-urlencoded 으로 되어있음 multipart/form-data : input type이 파일일 경우는 무조건 이걸로 받아야함form태그 속성 첨부파일 : - fileok.java@의 역할 - 첨부파일 환경설정 세팅@MultipartConfig( )fileSizeThreshold :한개의 파일 전송 크기maxFileSize = 업로드 가능한 최대 크기 maxRequestSize = 여러개의 파일 전체 .. 2024. 6. 19. #7-1 / 회원 가입 후 로그인,로그아웃 👀 참고out.print(); : 웹페이지(jsp)에 출력로그인| 회원가입 | 고객센터님 환영합니다. | 장바구니 | 고객센터님 환영합니다. | 장바구니 | 고객센터 요것도 가능!--> * session 가져올 시 null일 경우 String으로 변환 관련 https://dev-eunse.tistory.com/153⚡ 회원가입 후 로그인기능 이전 과정들은 https://dev-eunse.tistory.com/150 여기에 있음! = 회원가입(sql data 저장) + 로그인(성공시 세션저장)- top.jsp 로그인| 회원가입 | 고객센터 님 환영합니다. | 장바구니 | 고객센터 | - logout.java (.do)public class logout extends HttpServlet { p.. 2024. 6. 19. #6-3 / storage ⚡ 1. local storage 사용법( - front 주로사용)key값은 중복 불가!! ⚡ 2. session storage 사용법(- backend 주로 사용) => 1,2파일 닫아도 localstorage도 product,냉장고 들어가있음 - 창 닫았다 켜도 계~~~~속 남아있음∴ 아이디 비밀번호 이런거 넣으면 절~~~~~대 안됨!! session storage는 해당페이지에서만 작동 - 창 닫을시 사라짐 (해당페이지에서만 사용 가능하기때문에 백엔드가 주로 사용) 🔽 로그인 저장https://dev-eunse.tistory.com/150 여기서 하던거를 로그인 저장기능 붙이기⚡ localstorage 이용한 로그인 정보 저장사실 이 기능을 실무에서 잘 만들진 않음 회원 로그인 .. 2024. 6. 18. #6-2 / session,cookie ❓cookie브라우저의 cache 메모리에 값을 저장하는 방식최대 20개까지밖에 저장 불가(cache 메모리에 한계가 있음 - 4KB)java,js 둘다 있음 (back,front)최근엔 cookie로 사용하는 형태에서 storage사용하는 형태를 주로 사용하는게 추세ex) 오늘 하루 팝업 닫기 , 아이디 저장session 일정시간동안 브라우저에 해당 값을 저장,유지시키는 방식(일정시간 지나면 파기됨)java (backend전용)server , web.xml 에서 세팅브라우저별로 각각 작동됨, 사용 브라우저 닫았다가(tab x) 키면 파기됨ex) 은행 로그인시 일정시간 유지 5storage(session)cache메모리localstorage(js-frontend) , sessions.. 2024. 6. 18. #6-1 / 간편 회원가입⭐ ⚡ 회원가입- html 회원 로그인 아이디 : 패스워드 : 로그인 - module : database 접속 환경설정 파일 생략 (https://dev-eunse.tistory.com/148 와 동일)- servelete (insertok.java)public class insertok extends HttpServlet { private static final long serialVersionUID = 1L; dbconfig db = new dbconfig(); //db정보 PrintWriter pw = null; private Connection con = null; //보안 중요 private Statement st =.. 2024. 6. 18. #5 / 🌺 MVC? / excute,statement정리 mysql-memo에 연습버전도 잇음 👀 초반 설명 java => jquery + javascript => mysql => servlert => jsp⚡ MVC :java -> Servlet + Class -> jspServelt : Controller (통신 언어를 받음)Class : Module (순수 java)Jsp : View (html,css,jquery 등 여러가지 담당)=> 각 해당 역할이 아닌 다른 역할을 작성할시 👎view ↔ Controller ↔ Module꼭 거쳐야만 전달 가능참고 : https://dev-eunse.tistory.com/110 ⚡ dababaseRDBMS : mysql,mssql..등DBMS : nosql 등=> database 연결 시 라이브러리가.. 2024. 6. 17. #5 / 회원가입 data mysql로 전달 1.약관.html -> 2. Backend -> 3. 회원가입.jsp(or .do) -> 4. Backend -> 5. Database 저장=> 회원가입 페이지는 post로 data 전송!! (get은 보안 포기) ⚡ step1 (agree.html) 약관동의 전체선택 (필수)이용약관 (필수)개인정보 수집 및 이용 🔽 backend로 전달 (member_ship.java) member_ship.jsp에 step2 html 코드 복붙 후 핸들링 ⚡ member_ship.java (servlet)public class member_ship extends HttpServlet { private static final long serialVersionUID = 1L; protected .. 2024. 6. 14. #4-1 / jquery 이용 룰렛 제작 ⚡ 룰렛 페이지 제작 var data = ["500포인트","5000포인트","꽝","3000포인트","2000포인트","1000포인트"];var count = 3; //기회 count$(function(){ var arr = new Array(); $rd = 0; $("#gamebtn").click(function(){ if(count =5 && $random=66 && $random=126 && $random=186 && $random=246 && $random306 && $random pc값 무시하고 직.. 2024. 6. 13. #3-2 / backend-data(배열) ▶ jquery를 이용한 배열 출력 👀 backend에서 데이터를 받을경우 해당 데이터는 jquery 아닌 js(전역변수)로 받는걸 권고var data = ""; // " "에 넣어야함!=> ⭐ java에서 원시배열로 script전송에 대한 값을 출력하지 못함 => '강호동','신동엽','유재석','김나래' 로 반복문 돌려 string 으로 전달해 front에서 [ ]에 담으면 배열이됨 (아래 jsp확인) 사실 class배열로 하면 더 쉬움.. ∴ ❗ 백엔드 -> 프론트엔드로 배열 전달시 원시배열이 아닌 class배열로 전달할것을 권고 ❗ ⚡ 원시배열middle14.javapublic class middle14 extends HttpServlet { private static final long serialVersionUI.. 2024. 6. 12. #3-1 / jquery이용한 form + submit ⚡ append를 이용한 채팅 프로그램 건전한 채팅문화를 선도합니다. 전송 => input type button이 아닌 submit에는 id 작성 X !! , click event 안에 return false 작성! 2024. 6. 12. #2 / jquery checkbox ⚡ jquery checkbox - attr 버그발생 전체 동의합니다 [필수]본인 확인 서비스 약관 동의 [필수]통신사 이용 약관 동의 [필수]통신사/인증사 개인정보 공유 동의 [필수]고유식별 정보처리에 대한 동의 attrattribute의 약자 / 태그 속성 가져옴attr 사용시 속성값에 대한 상황을 확인해야만 정확한 핸들링을 할 수 있게된다 / 그냥 코드 소스 속성 수정시 사용 propproperty의 약자 / 메모리 상주 관련 속성 / 브라우저의 메모리 영역 파트를 변경 => checkbox 핸들링할 경우는 prop 사용 2024. 6. 12. #1 / jquery jqueryjquery3.7.1.min.js jquery3.7.1.js 이 둘 차이 : min은 암호화되어있음 (jquery3.7.1.js 얘가 커스텀이 더 쉽다) 2024. 6. 11. #10-2 / js중급 - 키보드 이벤트 핸들링 onkeypress키보드 입력시 기존에 있는 값을 가져오는 형태 onkeyup키보드 입력시 누르고 떼자마자 입력된 모든값을 가져오는 형태 onkeydown키보드 입력시 누르자마자 직전값을 모두 가져오는 형태오른쪽 숫자키,상단숫자키 keycode ascii번호가 다름 ( onkeypress는 동일 )특수키 keycode ascii번호도 인식 ( onkeypress는 불가 ) =>새로고침방지,스크린샷방지,id입력시 spacebar 사용금지 등..에 사용⚡ 키보드 이벤트 핸들링 2024. 6. 11. #10-1 / js중급 - 자식노드핸들링,시간함수 ⚡ 자식 노드 핸들링var node = document.getElementById("box").childNodes;var rem = document.getElementById("box").children; childNodes태그가 공백없이 죽 나열되어있지 않은이상 빈 공백까지 text node로 인식=> ∴ text 등 쓸모없는 node까지 싹 찍혀서 핸들링하기 어렵다 children : 태그 기점으로 진짜 딱 자식 노드만 확인 ⚡ 시간함수 ⭐⭐ - 시간함수는 변수에 담아 사용 ! - setTimeout : 해당 시간이 지나고 한번만 호출하여 사용(실무에선 이걸 더 많이 사용) -setInterval : 해당시간에 맞춰서 지속적으로 호출※ 함수안에 사용시 반복이 중첩되어 시간함수가 늘어남 ?.. 2024. 6. 11. #20-3 / collector interface, Comparable ⚡ CollectorCollector : generic을 사용하는 유일한 interface ❗ 기본제공 라이브러리 어렵당... 몰라두댐.. 나중에혹시 쓰게된다면..참고... 추후에 공부..stringbuilder가 뭐였더라... https://dev-eunse.tistory.com/75Stream 사용하면 lamda방식이구나 하면됨public class interface_etc { public static void main(String[] args) { String data[] = {"aaa","bbb","ccc"}; //원시배열 Stream st = Stream.of(data); //원시배열을 바로 핸들링하기 위해 stream선언함 //Stream : lamda 형태 구조로 구성하기 위해 .. 2024. 6. 11. #20-2 / generic code 형태의 class generic code 형태의 class : T 파라미터 값을 이용한 자료형 classjava11번대 이상에서 사용( 8번대는 사용 불가 )알아두면 좋다!~ ⚡ T : typeT : type의 약어, 사실 아무거나 써도 되지만 통상적으로 T 사용public class generic { public static void main(String[] args) { gen g = new gen(); //무조건 문자로 던지라는 class g.test("test"); //test 출력 gen g2 = new gen(); //무조건 숫자로 던지라는 class g2.test(100); //100 출력 }}class gen { //자료구조를 자유자재로 사용 가능 T result; public void tes.. 2024. 6. 11. #20-1 / 람다(lamda)코드 사용 방식 단점 : 버전 별로 달라질 수 있다java11번 기준 수업 => ∴ 8번대에서는 안먹힐 수 있다 ✅ lamda 방식 ( =삼항연산)java8번대부터 시작 / java11에서 가장 활발사용이유 : method를 단순화(익명)하는 작업javascript는 ES5부터 해당 방식 도입 ✅ lamda방식의 형태 - 2가지 방식화살표 방식 : ->?또는 :을 활용하는 방식 ⚡ 화살표 method단점 : 디테일하게 쓰지는 못하는..package java_test_t;//람다코드 사용방식public class lamda { static void ex(abc z) { //memory 상주 void method z.run(); } static abc test() { //interface를 이용한 return m.. 2024. 6. 11. 이전 1 2 3 4 5 ··· 7 다음