javascript 심화
sort
함수에서 사용할 item에 뭐가 담겼는지가 중요함
배열 구조 분해해서 할당(destruct)
destruct 사용 목적은 할당을 하지 않는다는 것!
function
기본값 설정이 가능하며 매개변수를 만들고 전달하지 않아도 함수가 실행된다.
...args
- 매개변수의 갯수 및 타입에 제한이 없이 배열로 출력
...args = 자유로운 타입과 공간의 갯수가 무한대인 배열이다.
자바스크립트의 class
class로 객체 생성
타입 지정말고 let을 사용해라
static
클래스에 static이 붙었으면 클래스명. 으로 메서드 사용 가능하다.
constructor(생성자) + 필드
자바스크립트에서는 class 밖에 필드를 선언하지 않고 생성자 안에 작성하자!
로그인
앱에서는 session 기반 로그인 가능한가?
- 세션 기반은 웹브라우저만 가능하고 앱은 불가능(단, 앱은 토큰을 이용한다.)
개인 정보 수정
info.jsp
SessionDto에서 원하는 데이터 뽑기
- 필요한 정보(num, userName, role)가 담긴 session에 담긴 num으로 DB에서 데이터 뽑기
- 로그인한 회원의 정보가 담긴 session이란 그릇에 담긴 데이터를 이용해서 DB에서 뽑는다.
로그인한 회원의 정보를 뽑을 때 session 이용하기
파일 업로드와 사용자 정보 업데이트
- JSTL의 empty로 업로드한 이미지가 없는 경우
전체흐름 : 만약에 올린 이미지가 없다면 기본 이미지 , 만약에 올린 이미지가 있다면 servlet에서 만든 upload 파일에서 이미지 가져오기
UpdateProfileServlet
1️⃣ 로그인한 사용자의 세션 정보를 가져와 DB에서 회원 정보 조회
2️⃣ 기존 프로필 이미지가 있는지 여부 확인
3️⃣ 업로드할 파일의 저장 경로 설정 및 폴더 생성
4️⃣ req.getPart("profileFile")을 사용하여 업로드된 파일 확인
5️⃣ 업로드된 파일이 있다면
- 파일명을 중복되지 않도록 설정 (UUID.randomUUID())
- 서버 저장 경로에 파일 저장 (Files.copy())
- 기존 이미지가 있다면 삭제
6️⃣ DB에 이메일과 프로필 이미지 업데이트
7️⃣ 업데이트 완료 후 개인정보 페이지로 리다이렉트 (info.jsp)
File 객체로 기존 파일 삭제
- 왜 여기서 메서드를 나눈걸까?
하나로 합친다면 이메일만 수정하는 경우에도 프로필 이미지가 삭제될 수 있기에 나눴음.
update-form.jsp
reset button
- 폼의 요소인 리셋 버튼은 input type의 초기값을 자동으로 기억함.
그러므로 초기 이미지만 따로 상수에 담아놓는다.
동기, 비동기 동작
- 동기 : 순서대로 처리 , 멀티 쓰레드 = java , 먼저 요청(코딩)하면 응답을 받아야 함
- 비동기 : 순서대로 처리 안할 수 있음 , 싱글 쓰레드(일단 넘어가!), 작업을 먼저 요청(코딩)했다고 해서 먼저 응답이 올 지 알 수 없음 = javascript
자바스크립트는 다음에 명령이 행해질려면 계속 함수 안으로 들어가는 문제점이 발생
콜백 지옥
- 자바스크립트에서 순서를 보장할려면 계속 함수 안으로 파고들어가야 한다...
- 해결책은 promise로 .then .then .then ...
코드에서 보면...
- 별표친 애들의 작성 순서가 상관 없다.
왜냐면 javascript는 비동기 작업이이게 수행하는 동안 다음 작업 ㄱㄱ - reader.onload =(evetn)=>{}; : reader 라는 object에 onload라는 방에 함수를 저장하고 함수 수행 경과를 event에 담는다.
파일을 읽으면서(reader) DataURL 형식의 문자열로 읽고 -> onload의 {}가 실행된다.
git pull을 할려고 하면...
만약에 git을 pull할려면 작업 이력이 클린한 상태에서 pull을 받아야 함
근데 pull을 받고 충돌이 발생하면 충돌 해결 후에 merge를 하고 push 하기
비밀번호 수정
비밀번호 수정으로
ID :superman
PWD : 1234$
하이하잉