jquery
jquery 스니펫 등록
자주 이용하는 html 요소를 등록할 때
각각의 box class에 함수 등록하기
- 바닐라 코딩
- 여러 개의 요소를 선택하기 위해서는 무조건 querySelectorAll를 사용해야 하고 요소들을 제어하기 위해서는 for문을 돌려야 함
- 함수의 등록 시점과 발생의 시점은 다르니 일단 등록하기
- jquery
- jquery는 배열 생성하고 자동으로 for문을 돌려주네
- 그러니 하는 작업만 . 으로 연결하면 되는군...
이벤트가 발생한 html요소를 선택할 때, 이벤트가 발생한 요소 선택은 e.target로 작성 가능
웹프로그래밍
upload 및 다운로드의 로직
웹브라우저에서 파일을 업로드하면 임시 폴더에 저장
우리는 webapp의 upload 파일에 카피(임시 폴더를 원하는 위치에 원하는 이름으로 가지고 와야함)를 해야한다.
- 서버에서는 원래 파일의 이름, 바뀐 파일의 이름, 파일의 사이즈를 관리해야 함
UploadServlet
- @MultipartConfig
- setAttribute
setAttribute는 키: 값 형태로 데이터를 저장해서 서블릿이나 jsp 페이지로 데이터를 전달할 수 있음
페이지 전환 없이 받아오기
form 요소로 받아오기
- form요소에 이벤트 발생 시 동작, fetch 함수
- 폼 데이터를 바디에 받아서
- fetch 함수로 접속할 servlet 와 jsp 페이지 생성
- 폼 페이지에서 servlet와 jsp로 만들어진 데이터에서 내가 원하는 데이터 뽑아서 사용하기
전체흐름
내가 파일을 업로드하면 submit 이 되고 기본 페이지 이동이 막아짐 -> fetch 함수로 servlet에서 복잡한 작업을 한다 = 원본 파일명, 저장될 파일명, 저장될 경로 를 설정하고 지정한 경로에 저장 -> jsp 페이지로 응답 -> 웹브라우저에서 내가 원하는 데이터만 뽑아서 html 구성
- event.target : 이벤트가 발생한 요소의 참조값
폼 요소 없이 직접 받아오기
왜 FormData 객체를 만들어서 Form 형식에 담을까?
- 데이터를 서버가 이해하기 위해서는 적절한 포장이 필요함.
FormData는 데이터를 서버가 이해할 수 있게 만든 포장지 역할데이터를 서버에 보낼때 (특히 이미지, 파일)은 Form 형식에 담아서 보낸다.
fetch(backtic, innerHTML)
html의 요소를 변경하고 싶을 때, jsp 는 ${}을 무조건 해석 VS
자바스크립트는 "${}" 대입하는 데이터를 표현하는 식 헷갈리지 않ㄴ게 자바스크립트 요소 앞에 \ 작성하기Servlet의 역할?
- 서버에 저장할 파일의 위치가 있는지 확인하고, 없으면 폴더 생성
- 업로드된 파일의 원본 이름과 중복 방지를 위한 고유 ID를 조합해서 저장할 파일의 이름과 경로를 만듬
- 업로드된 파일(임시파일에 존재함)을 지정된 위치에 복사해서 저장한 후, 저장된 파일 정보를 JSP 페이지에 전달
저장할 파일의 위치가 있는데 왜 저장할 파일의 경로를 만드는가?
파일의 위치(upload)는 파일이 저장될 위치며 경로는 upload에 저장하기 위해 만든 길로 길에는 파일의 이름까지 있어야 한다.
즉 원하는 위치에 저장하기 위해서는 파일의 경로에 파일의 이름이 포함되어있어야 한다.
SmartEditor
전반적 이해
- 텍스트를 작성하고 편집하는 기능
- 폼 안에 있는 텍스트를 입력하고 편집하는 기능을 조금 더 편하게
프로세스
- 우리가 입력한 내용을 자바스크립트로 마크업으로 변경 -> 서버에 마크업 그대로 저장 -> 웹브라우저에게 그대로 뿌려줌 -> 웹브라우저 해석
그러면 진짜 DB가 연결이 된다면..?
- DB에서는 아예 통으로 저장해서 html요소로 뿌려주기
글작성 및 제출
-
html 작성 폼 생성 및 제출 시의 함수 등록하기
-
smartEditor를 실행하는 자바스크립트 갖고오기
-
제출 버튼을 누르면 submitContents(elClickedObj)를 실행되면서
textarea의 value 값에 입력한 글의 정보가 마크업 돼서 담긴다.
*submitContents(elClickedObj) 는 버튼을 누르면 제출!
- 저장 버튼을 누르면 마크업 언어가 submitContents(this)를 통해서 textarea의 value가 되어 스마트에디터 영역에 출력
스마트에디터 자바스크립트를 복사해서 가져오고 textarea 영역의 id와 name 확인해서 자바스크립트와 일치 후 button요소 onclick 추가
글수정
-
글 수정 양식(기존에 입력한 내용을 갖고오기)
-
smartEditor를 실행하는 자바스크립트 갖고오기
단 여기서 textarea의 name과 id가 content인지 확인하기
글수정 기능은 입력폼 복사만 하고 입력한 내용 가져오기
단, textarea는 innerText로 넣는다.
회원가입 밎 예약 시 입력한 문자열을 웹브라우저가 검증을 할때가 있다?
ex. 비밀번호 입력 시 특수문자를 조합해라!, 이메일 주소를 입력하면 이메일 형식에 맞게 입력
정규표현식으로 사용
https://regex101.com/
단어가 들어갔는지 숫자가 있는지 패턴까지 알 수 있음
정규표현식 생성 방법
1. ^ 와 $
- 웃으면서 시작하고 돈으로 끝남
2 . 은 아무거나 한글자를 의미한다.
3. []은 한글자가 될 수 있는 후보군
[]
[abc]=> 한글자가 될수 있는 후보군 = 안에 들어있는 문자 중에 한글자
[a-z] => 영문자 소문자가 있는지 여부
[A-Z] => 영문자 대문자가 한글자 있는지 여부
[a-zA-Z0-9] => 특수문자가 아닌 한글자
[가-힣] => 한글 한글자
[^a-z] => not의 의미로 영어 소문자가 아닌 글자
^[^a-zA-Z0-9] => 특수문자로 시작하는 글자보완
- innerHTML, backtic, ${}의 의미
1-1. innerHTML
자바스크립트로 Html에 요소를 추가하고 싶을 때 사용
1-2. backtic
backtic으로 사용할 때는 "${넣기 원하는 데이터}"를 활용
backtic은 html의 원하는 요소를 생성할 때 사용
