동기 vs 비동기

동기(synchronous : 동시에 일어나는)

- 동기는 말 그대로 동시에 일어난다는 뜻이다. 요청과 그 결과가 동시에 일어난다는 약속이다.

ex ) 커피 주문을 받고 나올 때까지 기다리는 것이 동기 방식의 예이다.

 

 

비동기(Asynchronous : 동시에 일어나지 않는)

- 비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을 거라는 약속이다.

ex ) 점원 한명이 커피 주문을 받고 다른 점원이 커피를 건네주는 것이 비동기 방식의 예이다.

 

동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,
비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

 

비동기적으로 처리해야할 작업들

• 파일을 읽거나, 쓰기 처럼 오래걸리는 작업
• ajax 통신작업
• Dom의 이벤트 처리작업
• 일정 시간 뒤에 동작을 해야 하는 작업

 

- 아이디 찾기는 동기 통신을 사용(굳이 비동기로 처리할 이유가 없어서, 만약 비동기 통신을 사용하면 악의를 가진 사용자가 이메일과 이름을 마구잡이로 넣어서 아이디를 알아낼 수 있기 때문이다)

- 아이디 및 이메일 중복검사는 비동기 통신을 사용
 비동기 통신을 사용하는 가장 큰 이유는 새로고침 없이 사용자한테 업데이트 된 정보를 보여주고 싶어서
중복검사는 우리가 키보드로 입력할 떄마다 계속 서버랑 통신하기 때문에 비동기 통신은 자주 쓸수록 서버에 부담이 많이간다. 그래서 웹소켓이 부담이 크다.

 

프로젝트를 진행했을 때, 아이디 찾기는 동기 통신을 사용하고, 
아이디 및 이메일 중복검사는 비동기 통신(새로고침 없이 사용자한테 업데이트 된 정보를 보여주고싶어서)을 사용했다.

 

 

@PostMapping("/join")
		public String join(@ModelAttribute MemberDto memberDto,
				@RequestParam MultipartFile file) throws IllegalStateException, IOException {
			memberService.join(memberDto, file);
			return "redirect:joinFinish";
		}

	@GetMapping("/memberId/{memberId}")//아이디 중복검사
	public String findId(@PathVariable String memberId) {
		//log.debug("result = {}, {}", memberRepo.selectOne(memberId), memberRepo.selectOne(memberId) == null);
		String tep = memberRepo.selectOne(memberId) == null ? "Y":"N";
		return tep;
	}
	

       async IdCheck() {//비동기 아이디 중복검사
                if(!this.idFinalCheck) return;  //idFinalCheck 가 false면 return
                const memberId = this.memberId.trim(); // 입력된 아이디를 가져옴
                if (memberId === "") {
                    return; // 아이디가 비어있으면 검사하지 않음
                }
                const temp = document.querySelector("#idValidCheck");
                const temp2 = document.querySelector("#idInValidCheck");
                const memberIdTemp =  document.querySelector("#memberId");
                try {
                    const response = await axios.get(
                        "/rest/member/memberId/"+memberId 
                    );

                    if (response.data === "Y") {
                        this.isValid = true;
                        console.log("사용 가능한 아이디");
                        temp.textContent = "아이디가 중복되지 않습니다.";
                        memberIdTemp.className = "form-control rounded is-valid";
                        // TODO: 사용 가능한 아이디 처리
                    } else {
                        this.isValid = false;
                        console.log("사용 불가능한 아이디");
                        temp2.textContent = "아이디가 중복되었습니다.";
                        memberIdTemp.className = "form-control rounded is-invalid";
                        // TODO: 사용 불가능한 아이디 처리
                    }
                } catch (error) {
                    console.error("아이디 중복 검사 실패:", error);
                    temp2.textContent = "아이디 중복 검사 실패";
                    memberIdTemp.className = "form-control rounded is-invalid";
                    // TODO: 에러 처리
                }
                },

아이디 중복 검사의 흐름은 다음과 같습니다:
클라이언트 측에서 async IdCheck() 함수가 호출됩니다. 이 함수는 사용자가 입력한 아이디를 가져옵니다.아이디가 비어있는지 확인하고, 비어있다면 검사를 진행하지 않고 종료합니다.비어있지 않은 경우, 클라이언트는 서버에 비동기적으로 아이디 중복 검사 요청을 보냅니다.클라이언트는 /rest/member/memberId/{memberId} 경로로 GET 요청을 전송하고, 사용자가 입력한 아이디를 경로 매개변수로 전달합니다.서버에서는 해당 경로를 처리하는 findId() 메서드가 실행됩니다. 이 메서드는 입력된 아이디를 사용하여 데이터베이스에서 중복 여부를 확인합니다.서버는 중복 여부에 따라 "Y" 또는 "N" 값을 반환합니다.클라이언트는 서버의 응답을 받아옵니다.응답이 "Y"인 경우, 아이디는 중복되지 않았으므로 사용 가능한 아이디로 처리됩니다. 클라이언트는 사용 가능한 아이디를 표시하고, 입력 필드의 스타일을 변경하여 유효한 아이디임을 표시합니다.응답이 "N"인 경우, 아이디가 중복되었으므로 사용 불가능한 아이디로 처리됩니다. 클라이언트는 사용 불가능한 아이디를 표시하고, 입력 필드의 스타일을 변경하여 유효하지 않은 아이디임을 표시합니다.오류가 발생한 경우, 클라이언트는 오류 메시지를 표시하고 적절한 오류 처리를 진행합니다.