본문 바로가기

CLASS265

#8-2 / 게시판 insert 모듈화... 게시판 insert 모듈화..... 선생님.. ⚡ 게시판 insert 모듈화.....- qa_writeok2.java@MultipartConfig( fileSizeThreshold = 1024 * 1024 * 2, maxFileSize = 1024 * 1024 * 10, maxRequestSize = 1024 * 1024* 100)public class qa_writeok2 extends HttpServlet { private static final long serialVersionUID = 1L; PrintWriter pw = null; ArrayList al = null; ArrayList> all = null; protected void doPost(HttpServletRequest req, .. 2024. 6. 21.
#8-1 / 게시판 login.html 과 이어짐-> top.jsp 에 추가 ( )   =>   top.jsp 아래 qawrite.jsp가 들어감 로그인| 회원가입 | 고객센터 님 환영합니다. | 장바구니 | 고객센터 |  🔽 🔽 글쓰기 input 검토 등 기능 js로 구현 ⚡ 파일첨부 input 핸들링 찾아보기 + 추가  $.fn.fileck = function(){ var $fnm = .. 2024. 6. 21.
#1-4 / js, jquery - 외부 data load (CORS 해결) ❌❌  CORS 에러 ❌ ❌ : 도메인(ip)이 서로 다를경우 Access 오류로 인하여 데이터를 로드하지 못하는 상황 localhost일때는 문제발생X해결 : 1. json에서 ajax로 바로 로드가 안됨(CORS) , JSON -> JSP로 변환 후 외부로 송출2. script 통신(script 파일로 CORS JSON로드방식) - ajax안쓰고 jsp파일에 fileReader로 outprint 해주기=> 둘다 backend(상대방)에서 작업해줘야함 ⚡ 1. JSON -> JSP로 변환 후 외부로 송출 json파일을 바로 핸들링하기 어려우므로 jsp파일을 load후 핸들링- 내가 로드할 html파일 - 상대방(backend) 에서 만든 jsp파일trimDirectiveWhitespaces="true".. 2024. 6. 20.
#1-3 / 🌺 ajax(jquery) 🔽 이거갖구 놀거임=> product.json의 대표key : flat_product       => 나중에 mysql의 table명이 대표key가 됨 ,  mysql의 colomn명이 일반 key가 됨 ⚡ ajax(jquery) 기본=> javascript에 반해 parse를 따로 작성하지 않아도 됨!🔽반복문(jquery - each문) 이용한 html 출력//통신이 끝난 후 얘가 실행되어야 함$.fn.htmls = function(){ //jquery each : 2개인자 , js foreach : 3개인자 $.each($data["flat_product"],function($a,$b){ //$a : index번호 / $b : 자기자신 $("#box").app.. 2024. 6. 20.
#1-2 / ajax + json(key가 있는 배열) => 5초에 한번씩 실행 json의 [ ] 안에 { } 로 들어갈 시 key배열 ! => 백엔드가 가장 많이 만드는 형태key배열은 { }에 넣을것!! 나중에 mysql의 coloumn명이 key가 됩니다대표키는 table명[ {"seq": 1,"product":"모니터","price":195000}, {"seq": 3,"product":"냉장고","price":295000}, {"seq": 4,"product":"에어컨","price":395000}, {"seq": 9,"product":"세탁기","price":495000}]  👀 변수 형태의 function => 변수 형태의 function이 먼저 읽힘//일반 functionfunction aaa(){ alert("function")}//변수 형.. 2024. 6. 20.
#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 - session 입력,출력,삭제 여깃음 ❓cookie브라우저의 cache 메모리에 값을 저장하는 방식최대 20개까지밖에 저장 불가(cache 메모리에 한계가 있음 - 4KB)java,js 둘다 있음 (back,front)최근엔 cookie로 사용하는 형태에서 storage사용하는 형태를 주로 사용하는게 추세ex) 오늘 하루 팝업 닫기 , 아이디 저장session 일정시간동안 브라우저에 해당 값을 저장,유지시키는 방식(일정시간 지나면 파기됨)java (backend전용)server , web.xml 에서 세팅브라우저별로 각각 작동됨, 사용 브라우저 닫았다가(tab x) 키면 파기됨ex) 은행 로그인시 일정시간 유지 5​storage(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.
게시판 editor api 설치 [ ckeditor4 ] ckeditor4 download(full package) : 게시판 editor - lts는 유료임 다운 x -> 폴더에 복붙  jquery or js로 에디터 내용 확인var ed = CKEDITOR.instances.editor.getData(); if(ed==""){ alert("내용을 입력하세요");}=> editor body 내의 컨텐츠 검토 =>  많이쓰는 editor API 순서1. CKeditor : 유료(영상 등 가능)/무료 잇음 2. SmartEditor : naver에서 제공하는 API3. DaumEditor : daum,nate에서 제공하는 API4. FCKeditor : ckeditor 무료버전 (옛날 ..)5. RainEditor :  보안 구림 - 조심 2024. 6. 17.
#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.
#5-2 / trigger 응용문제 , signed,unsigned [응용문제]회원가입시 바로 1000포인트가 지급되게 제작member table, point table + triggercreate table member( idx int(4) not null auto_increment, id varchar(30) not null, pw varchar(30) not null, name varchar(30) not null, tss enum('SKT','KT','LGT','알뜰폰') not null default 'SKT', phone char(11) not null, post char(6) not null, adr1 varchar(50) not null, adr2 varchar(50) not null, sex enum('male','female') not null defa.. 2024. 6. 10.
#5-1 / 각종 key 상세,trigger - 실무 ❗ table을 어떻게 만드느냐에 따라 java에서 핸들링하는 방식이 바뀜  show create table table명  : 어떻게 제작했는지 상세하게 출력show index from table명  : 현재 key가 어떻게 등록되어있는지 출력 key의 우선순위 primary key ▶ unique ▶ multi (다중 key) ▶ foreign key ⚡ primary key- auto_increment 사용시 무조건 해당 key로 등록되어야 함 -> primary key에 미등록시 error   * key 를 한개이상 등록시 or 형태로 구분되어짐  => primary key(idx,id) : 둘중에 하나라도 틀리면 정상적으로 등록됨      ∴ 통상적으로 auto_increment만 primary .. 2024. 6. 10.
#4-2 / view 응용 문제 , view select가 안됨 해결-권한문제 [ 응용문제 2 ]장바구니 웹페이지를 제작 해야합니다.해당 웹페이지에 다음과 같이 출력되도록 sql 문법을 작성하시오. table : basket 고객명 , 고객 id , 상품명 , 상품 code , 상품 수량 select  b.mname, a.mid, c.prd_name , a.pcode, a.ea from basket as a join member as b join product as c where a.mid = b.mid and a.pcode = c.prd_code; a basketb memebrc product=> select a.mid,a.ea from basket as a join member as b join product as c .. view table 생성시 에러뜸.. 뭐가 문젤까..... 2024. 6. 5.
#4-1 / group by , table및 column 복제 등 * show full columns from table명;   : table의 상세 내용을 모두 출력 -> erd comment 볼 수 잇음  ⚡ [합계,평균 등]select sum(colomn명) from table명; => 총 합계금액 출력 (단,문자일 경우 오류가 발생할 수 있음) select avg(colomn명)  from colomn명;=> 평균 select max(colomn명)  from colomn명; => 제일 큰값  ⚡ [데이터의 범위 갯수만큼 출력하는 방법] select * from table명 limit 배열번호,출력 갯수; => 원하는 만큼 데이터 출력 ex)select * from pay limit 0,10; => 0번부터부터 10개 select * from pay limit .. 2024. 6. 5.