➰ Ancestors(조상) 메소드 : 선택된 요소의 상위 요소들을 선택할 수 있는 메소드 $("요소명").parent() 선택된 요소의 바로 위 상위 요소 $('요소명').parents([매개변수]) 선택된 요소의 모든 상위 요소 리턴 매개변수가 있으면 매개변수와 일치하는 부모만 리턴 $('요소명').parentsUntil(매개변수) 선택된 요소부터 매개변수 요소 전까지 범위의 요소 리턴 ➰ descendants(자손, 후손) 메소드 : 선택된 요소의 하위 요소들을 선택할 수 있는 메소드 $('요소명').children([매개변수]) 선택된 요소의 모든 자식 객체 리턴 매개변수가 있으면 매개변수와 일치하는 자식 객체만 리턴 연속해서 사용 가능 $('요소명').find(매개변수) 선택된 요소의 인자와 일..
ON
➰ fetch() API ( fetch : 가지고오다) : JS의 Promise객체를 이용한 비동기 요청 방법으로 JS에서 기본 제공함 - Promise(약속) 객체 : 비동기 요청에 대한 처리가 완료되면 바로 결과를 제공하겠다고 약속 📂 POST 방식 ① 요청 작성 방법 fetch("요청주소“, { // 지정된 주소로 비동기 요청(ajax) method : “POST”, // 데이터 전달 방식을 POST로 지정 headers: {"Content-Type": "application/json"}, // 요청 데이터의 형식을 JSON으로 지정 body : JSON.stringify( {K:V, K:V} ) // JS객체를 JSON 형태로 변환하여 Body에 추가 }) .then(response => resp..
fetch가 나오기 전에는 자바스크립트에서 jQuery를 이용해서 아래와 같이 AJAX 작성해왔다. 그렇다면 AJAX와 jQuery는 무엇이었을까 ? 이전에 AJAX 정리했던 내용을 다시 살펴보자. 🌝 Ajax란? : JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식 자세한 내용은, 아래 포스팅을 다시 보고 오자 [Servlet] Ajax란? Ajax를 이용해서 이메일 중복검사하기 ➰ Ajax란? : JavaScript를 이용하여 비동기식으로 클라이언트와 서버가 데이터(XML)를 주고받는(통신) 방식 - 전체 페이지를 갱신하지 않고 일부분만 업데이트 가능 - 사용자에게 즉각적인 반응과 풍 jnaa.tistory.com 2023.07.14 - [ON/Se..
📂 Filter (클라이언트 -> Filter -> Dispatcher Servlet) " 클라이언트의 요청/ 응답을 걸러내거나, 첨가하는 클래스 " 📕 로그인 필터 : 로그인 필더가 없다면 로그인하지 않는 회원이 마이페이지의 주소를 주소창에 입력해서 회원이 아닌데도 마이페이지에 접근할 수 있다. 이를 방지하기 위해 로그인한 회원만 마이페이지에 접근할 수 있도록 로그인 필터를 만들어준다! ✳ LoginFilter package edu.kh.project.common.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; i..
🌝 header.jsp 메인페이지 | 로그인 ${loginMember.memberNickname} 내정보 로그아웃 🌝 css /* 헤더 오른쪽 상단 메뉴 */ header{position: relative;} .header-top-menu{ position: absolute; right: 10px; top: 5px; } .header-top-menu *{ font-size: 15px; font-weight: bold; } /* 헤더메뉴체크박스 */ #headerMenuToggle{display: none;} /* 오른쪽 상단 닉네임 부분 */ label[for='headerMenuToggle']{cursor: pointer;} label[for='headerMenuToggle']:hover{text-de..
✳ signUp.jsp / main.jsp * 아이디(이메일) 인증번호 받기 메일을 받을 수 있는 이메일을 입력해주세요. * 인증번호 인증하기 * 비밀번호 영어,숫자,특수문자(!,@,#,-,_) 6~20글자 사이로 입력해주세요. * 닉네임 한글,영어,숫자로만 2~10글자 * 전화번호 전화번호를 입력해주세요.(- 제외) 주소 검색 가입하기 🌝 main.jsp 회원가입 | ID/PW 찾기 ✳ signUp-style.css .signUp-content{ display: flex; justify-content: center; height: auto; } #signUpFrm{ margin-top: 30px; } #signUpFrm > label{ display: block; margin-top: 40px; fon..
✳ MemberController 만들기 // @RequestMapping : 요청 주소에 맞는 클래스/메소드 연결 // @RequestMapping("요청 주소") // -> GET / POST 구분 X(모두 받음, 주소만 맞으면 연결) // @RequestMapping(value="요청 주소", method=RequestMethod.GET/POST) // -> GET / POST 방식을 구분 @Controller // 요청, 응답 클래스 + bean 등록(Spring이 관리하는 객체) @RequestMapping("/member") // 공통된 주소 앞부분 작성 // member로 시작하는 요청은 해당 컨트롤러에서 처리 @SessionAttributes("loginMember") // Model의 이..
📁 Spring MVC Spring Framework 에서는 클라이언트의 화면을 표현하기 위한 View와 서비스를 수행하기 위한 개발 로직 부분을 나누는 MVC2 패턴을 지원한다. Model, View, Controller 사이의 의존 관계를 DI 컨테이너에서 관리하여 유연한 웹 애플리케이션을 쉽게 구현 및 개발할 수 있다. 📕 구성요소 구성 요소 설명 DispatcherServlet 클라이언트의 요청(Request)을 전달 받고, 요청에 맞는 컨트롤러가 리턴 한 결과 값을 View에 전달하여 알맞은 응답(Response)을 생성 HandlerMapping 클라이언트의요청 URL을 어떤 컨트롤러가처리할지결정 Controller 클라이언트의요청을처리한 뒤, 결과를 DispatcherServlet에게 리턴 ..
