Land of Joe
jsp, java 백엔드 개발 정리 및 스케줄 프로그램 개발하면서 배운 내용들 정리 본문
[ 로그인 ]
: 찾는 거니까 select문
(>> 데이터베이스에서 값을 받아오는 ResultSet 라이브러리 필요)
(>> executeQuery 함수: 데이터베이스에서 데이터를 가져와서 결과 집합을 반환)
: 찾은 데이터를 session에 넣어놓고 계속 사용
[ 회원가입 ]
: 새로운 데이터를 넣는 거니까 insert문
(insert, delete, update문 >> executeUpdate 함수: 해당 SQL 문 실행에 영향을 받는 행 수를 반환)
1) 아이디 중복확인 버튼을 클릭 시 발생하는 아이디 중복확인 Action에서 해야하는 것
- 아이디 중복 확인
- 아이디 정규식 체크 (정규식에 부합하지 않는데 중복 안 된다고 통과시키면 안 되니깐)
2) 모두 입력 후 회원가입 버튼을 클릭 시 form.submit 되어 발생하는 회원가입 Action에서 해야하는 것
- 모든 값 정규식 체크
- 아이디 중복 확인
- 비밀번호, 비밀번호 재입력 동일 여부 확인
- 전화번호 중복 확인 (전화번호는 유니크키이므로 만약 이미 존재하는 값 넣을 시 백엔드 에러 발생함)
* 중복확인 버튼 클릭여부 또한 백엔드에서 확인해야하나 고민했으나, 이는 결국 아이디 중복확인을 위한 장치일 뿐이므로 프론트엔드에서 처리해주는 것만으로 충분하다는 결론에 도달하였음.
[ 로그아웃 ]
: 세션에 있던 내용들을 모두 삭제하는 session.invalidate 함수
[ 아이디/ 비번 찾기 ]
: 찾는 거니까 select문
[ 회원 탈퇴하기 ]
: 일단 로그인 되어 있는 상태 (세션에 idx 정보 들어 있음)
: 세션에 있는 정보 삭제해주기
: 테이블에서 데이터(행)를 삭제하는 거니까 delete문
>> executeUpdate 함수: 해당 SQL 문 실행에 영향을 받는 행 수를 반환, 즉 삭제된 행 수를 반환
>> 삭제된 행 수가 있다면 탈퇴 성공, 없다면 탈퇴 실패
: schedule 테이블(자식)이 account 테이블(부모)을 참조하고 있어 account 테이블 내 행을 삭제하려고 할 시 schdule 테이블을 먼저 처리해줄 필요가 있음
: alter table schedule add constraint foreign key (user) references account (idx) ON DELETE CASCADE; 이렇게 기존 테이블을 수정해서 해결하려고 했으나 변화가 없었음
: schedule 테이블(자식)을 drop(삭제)해버리고 다시 만들어줬다...
CREATE TABLE schedule (idx INT NOT NULL AUTO_INCREMENT PRIMARY KEY, user INT NOT NULL, FOREIGN KEY (user) REFERENCES account(idx) ON DELETE CASCADE, year INT NOT NULL, month INT NOT NULL, date INT NOT NULL, time TIME NOT NULL, content VARCHAR(250) NOT NULL);
[ 회원정보 수정하기 ]
: 비밀번호, 부서, 직책, 전화번호만 바꿀 수 있음
: 전화번호는 유니크 키이므로 다른 계정의 전화번호와 중복될 경우 "이미 다른 사용자에 의해 사용 중인 전화번호 입니다."라는 알람창 띄워줄 것
>> 테이블에 유저가 새로 입력한 전화번호 데이터가 존재하는지 확인 필요
기본 문법들
1. response.sendRedirect("") 링크 페이지로 보낸다
-> javascript에 location.href=""와 비슷한 느낌인 듯
2.
html에서 html로 url로 데이터 전달하기
이런 식으로..
3. window.open 함수
모달창을 만드는 것으로 원래 내가 알고 있던 방법은 오직 html 안에 모달창을 css,js까지 전부 다 만들어놓고
class="hidden"(.hidden {display:none})에 classList.add/remove 혹은 style="display:none/block"을 주는 것이었다.
그러나
4. window.onunload 함수
5. form 태그 안 input 태그에 type="submit"을 바로 주면 여러 예외처리나이벤트 등이 실행될 겨를이 없어 먹히지 않는다.
input 태그에 type="button"으로 일단 지정해놓고, onclick 이벤트의 내용들을 다 하고 나면 해당 form 태그를 submit 해주는 방향으로 개선할 수 있다.
6. 로그인 안 했으면 url 조작으로 강제로 페이지 열리지 못하게 하기
>> 세션에 넣은 idx값의 존재 유무에 따라
>> 세션에 넣어져있는 idx값이 없다면? response.sendRedirect()로 페이지 강제 이동 시킴
7. input 속성 disabled, readonly
>> 내가 처음에 만들었던 것: 비밀번호 입력칸, 비밀번호 재입력칸에 입력한 두 값이 같으면 더이상 입력 못하도록 두 칸을 disabled 시켜놓음
>> 문제: form 태그를 통한 pwValue가 데이터를 제대로 전송받지 못하고 null을 가진다는 의미의 "java.lang.nullpointerexception 오류" 발생함
>> 이유: disabled 속성은 form 전송 시 값을 전달하지 않음
>> 해결방안: disabled와 같이 사용자가 값을 입력 및 수정할 수 없게 만드는 속성이지만 전송 시 값을 전달하는 readonly 속성을 사용!
8. System.out.println
java에서 안내문구 띄우는 방법
9. boolean에 관하여
아무리 내가 처음 변수 설정을 false로 시작했다 한들
js의 if문 안에서 해당 변수는 true로 받아들인다.
jsp에서 받아온 boolean 변수에 ""를 붙여 문자열로 만들고 해당 변수가 === "true"인지 "false"인지 하나하나 눌러본 결과 깨달았음..ㅠ
10. a foreign key constraint fails 오류
문제상황: sql에서 두 테이블이 외래키로 연결되어 있을 경우 delete가 안 됨
>> 방법1) cascade : 부모 테이블이 삭제될 때 연관된 자식 테이블도 삭제되도록 하는 기법 활용하기 -> 테이블 지우고 다시 만들었음^ㅜ
>> 방법2) 자식 테이블의 관련된 row를 먼저 삭제하고나서 부모 테이블의 해당 row 삭제하기
11. css) display: grid
한 칸의 div 안에 span 두 개를 넣고 위와 같이 배치하고자 하였다.
하나는 좌측상단, 하나는 좌우상하 중앙.
div 자체에는 display: grid와 더불어 justify-items: center; align-items: center;를 주어 정중앙에 오는 span을 위치시켰고,
좌측상단에 오는 span의 경우 top: 0; left: 0; 이렇게 위쪽, 왼쪽 여백을 지정해주어 위치시켰다.
12. scheduleContent.readOnly = true; 와 scheduleName.setAttribute("readonly", true); 는 같을까?
- scheduleContent.readOnly = true;: JavaScript 속성을 사용하여 요소의 속성을 설정하는 방법. readOnly 속성은 true 또는 false 값을 가지며, 요소가 읽기 전용인지를 나타냄. 이 경우 JavaScript 속성을 사용하여 속성을 설정함.
- scheduleName.setAttribute("readonly", true);: setAttribute 메서드를 사용하여 요소의 속성을 설정하는 방법. 이 경우 HTML 속성 값을 설정하는 것이며, 여기서 readOnly는 문자열 값으로 설정되고 있음. HTML 속성은 보통 문자열 값으로 설정됨.
- 둘 다 readOnly 속성을 설정하지만, JavaScript 속성을 사용하면 요소의 DOM 속성을 조작하고, setAttribute를 사용하면 HTML 속성을 조작함. 보통은 두 방법 중 하나를 선택하여 사용하면 되지만, 일관성 있게 코드를 작성하는 것이 중요.
DOM 속성을 조작하고, HTML 속성을 조작하는 것 중 무엇이 더 효율적인지 모른다.
일단 name, type 등 createElement를 통해 만든 요소에 처음 속성을 추가해줄 때엔 setAttribute 메서드를 사용하고,
이후에 이벤트에 의해 속성이 바뀌게 될 때엔 JavaScript 속성을 사용하기로 했다.!
13. 클릭 이벤트가 발생한 객체의 부모: this.parentNode / 자식: this.children
14. for문 안에서 addEventListener로 clickEvent 넣기
addEventListener는 비동기함수이다. 비동기함수는 마지막으로 처리되는 함수이다..
일단 비동기함수와는 별개로
forEach문을 써서 내가 선택한 객체 안의 모든 input요소 / button 요소에 대해 변화를 주고자 하였다.
input에는 잘 해줬는데...
button은 내가 원하는 대로 안 움직이더라...
차이를 뜯어보니 forEach문 안에서 function(input){}에 대해 시작한 이상, input 태그 자체에 대한 설정이 들어간다.
마찬가지로 function(button){}에 대해 시작한 이상, button 태그 자체에 대한 설정을 해주어야하는데
나는 내가 바꾸고 싶은 버튼의 변수명을 들먹이며 직접 변화를 가한 것이다.....((이럴수가))
그렇게 되면 내가 선택한 buttonsInScheduleRow 안에는 button이 3개 있으니
내가 작성한 3줄의 코드가 3번 (buttonsInScheduleRow 안의 button 개수만큼) 돌아가게 되는 것이다...뷁
잘 해결했다는 해피엔딩~
15. DOM 구성에 대한 고민
백엔드 통신을 하기 위해선 form 태그로 감싸주어야 하고
하나의 form은 하나의 통신만을 한다 (1:1이라는 뜻)
나는 하나의 스케줄 row 안에 있는 수정버튼과 삭제버튼에 대해 각자 백엔드 통신을 해주고 싶은데
form 태그를 두 번 감싸줄 수도 없고 어떻게 DOM 구조를 짜야하나 고민했다.
수정에 관한 백엔드 통신은 사실 수정 완료 버튼을 눌렀을 때 비로소 진행되는 것이었던 것이었던 것이었다.
삭제에 관한 백엔드 통신은 삭제 버튼 눌렀을 때 바로 진행되는 것이고 말이다.
그러면 form태그의 위치를 각자 짜주면 되는 것 아닌가!
16. 원하는 대로 DOM 선택이 안 된다 야발.....
정말 눈물겹다 눈물겨워... 내가 해내고 만다....하쉬.....
17. <input type="button">일 때 버튼에 이미지 삽입하기
18. 선택한 객체의 자식 노드들 선택하기
첫 째 자식: (객체).firstChild
마지막 자식: (객체).lastChild
그 사이 두 번째 자식: (객체).firstChild.nextSibling
그 사이 세 번째 자식: (객체).firstChild.nextSibling.nextSibling....