[6주차 미션] 구현 완료했습니다. 리뷰 부탁드립니다.

[kanamycine]

6주차 풀리퀘 후, 5주차 리팩토링을 진행했어야 하는데 짬뽕이 되었네요 ..... 죄송합니다.

AJAX

왜 쓰나 ?

• 댓글을 다는 경우를 생각해보자
  • 댓글 데이터 추가 -> 서버쪽 컨트롤러로 날린다
  • 데이터베이스에 추가
  • 게시글 상세 데이터 조회 댓글 데이터 조회
  • HTML 전체를 동적으로 다시 생성
  • 클라이언트로 보내줌
  • 클라이언트는 받아서 화면을 첨부터 끝까지 다시 그린다
• 비효율적이네 그린거 또 그리고 조회한거 또 조회하고 ..
• 그래서 사용한다
• 그릴 부분만 다시 그리자. 성능적인 이점을 가질 수 있다.
• Ajax는 HTTP 통신을 효과적으로 이용하는 기술이라고 할 수 있다.
• ajax를 이용한다면 ?
  • 댓글 칸에 content를 입력하고 버튼 클릭
  • 사용자의 이벤트로부터 javascript는 해당 컨텐츠가 쓰여진 DOM을 읽는다.
  • 그리고 XMLHttpRequest 객체를 통해 웹 서버에 해당 contents을 전송
  • 웹서버는 요청을 처리한뒤 JSON을 XMLHttpRequest 객체에 전송
  • 그러면, Javascript가 해당 응답 정보를 DOM에 쏜다
  • 페이지가 만들어짐
• 정리
  • 정리하자면, AJAX는 웹페이지 전체를 다시 로딩하지 않고, 웹 페이지의 일부분만을 갱신할 수 있게 해준다.
  • AJAX를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.
  • JSON, XML, HTML, 텍스트 파일 등 다양한 데이터를 주고받을 수 있다.
  • 하지만 서버푸쉬같은 실시간 서비스는 만들 수 없다.
  • 바이너리 데이터 전송 불가, ajax 스클립트가 포함된 서버로만 요청 가능

fetch api?

fetch(url, options)
	.then((response) => {return response.json();
	})
	.catch((error) => {
  console.log("error:", error);
	})

• 자바스클립트에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 도와주는 메서드
• 비동기 처리 프로그래밍 방식에 잘 맞는 형태이다.
• 가독성에 큰 이점을 주고 비동기 콜백을 쉽게 벗어날 수 있다.

const myData = {
  id: 1,
  content: "content",
};

const option = {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify(myData),
};

fetch("http://server-ip.com", option).then((res) => {
  // 생략
});

비동기

• 직접 제어할 수 없는 대상의 작업처리 여부와 상관 없이 자신의 작업을 진행할 수 있음.
• 상위 프로세스가 하위 프로세스 작업 완료 여부 또한 신경쓰지 않음
• 순서대로 코드가 실행되는 것이 아니라 코드를 해석할 때 주의가 필요함
• 비동기 실행이 동기 실행에 비해 동일한 작업을 어 빠른 시간 내에 처리
• 응답에 관계 없이 바로 다음 동작이 실행되는 것으로 함수의 리턴하는 시간과 결과를 반환하는 시간이 불일치
• 비동기를 사용하는 이유는 위의 ajax를 왜 사용하는가에 대한 답으로 말할 수 있다.

[dadadamarine]

비동기에 대해 깊게 조사하셨군요. 👍 조사 내용중 동기/비동기와 block/nonblock 개념이 섞인 설명이 있는것 같아요. 동기(sync)/비동기(async)와 blocking/nonblocking 이 어떤차이가 있는지 한번 확인 부탁드려요~!