liebert

비동기와 동기.

가끔가다보면 정의되어 있는 용어가 왜 그 뜻인지 생각해보아야 하는 no직관성에 짜증날때가 있다.

귀찮아서 그냥 직역해놓은 것인지 무튼 헷갈려서 다시 찾아봤다.

Synchoronous (동기) :  start from the top of the file and exectue all the way down to bottom of the file 

java의 기본 코드 수행과 비슷하다. 수행하는 행위를 top에서부터 bottom까지 순차적으로 진행하고 모든 코드가 order에 맞추어 진행된다.

예를 들어, 누군가에게 $5를 보내기 위하여 거치는

procedure : 액수 입력 -> 전송하기 클릭 -> 수신자에 전달 완료 -> 나와 상대방에게 각각 송금/수신이 완료되었습니다 (동시 팝업)

는 동기에 해당되는 방식이다.

왜냐?  위의 procedure는 순차적으로 일어나야 마지막 목적에 도달할 수 있고 만약 순서가 뒤바뀌어 버리면 목적에 도달하는데 문제가 생기기 때문이다.

Asynchoronous (비동기) similar to the that of Synchoronous. but, during that execution it will run into ascynchoronous function or code, or it split off and execute that asynchoronous code seperately from the rest of the code and that's usually because it used to wait..

동기 방식과 동일하게 top to the bottom으로 코드를 수행한다. 다만 중간에 asynchronous function이 삽입되어 있을 시, 이를 수행하거나 아니면 코드에서 뜯어내어 마지막에 수행한다.

마지막에 수행하는 이유는 -> 코드가 수행되기까지 시간이 걸리기 때문인데 시간이 걸리는 이유는 여러가지가 될 수 있다.

그 중 한 가지 이유는 개발자가 직접 delay time을 걸어놓은 경우다.

아래에 첨부되어 있는 코드는 개발자가 애초에 setTimeOut function으로 코드를 실행하는 시간을 100ms로 설정해놓았다.

우측 콘솔 창에 보면 colesole.log(a), conesole.log(b) 가 먼저 실행된 것을 볼 수 있다.

100ms 을 기다리는 동안 다른 코드를 먼저 수행한 것이다. 

아래 사진은 많이 헷갈려 하는 개념이라고 하는데, 코드 중간에 보면 a =10으로 allocate 해두었다. 

a 는 중간에 10이라는 값을 할당받고 console.log('Synchronous'), (a), (b)를 수행했다. 때문에 콘솔 창에도 a 는 10의 값을 출력하고 있으며, 그 이후에 수행된 비동기 function인 setTimeOut 또한 10을 출력하고 있다.

=> top of code page에서 변수 a 가 할당받은 값이 1일지라도 function은 a 가 10을 allocate받은 다음에 수행되었기 때문에 function 안의 a 또한 10을 배정 받는 것이다.

위에서 적어두지 못한 콜백함수

(https://www.hanumoka.net/2018/10/24/javascript-20181024-javascript-callback/) 참고.

다시 한번 짚고 넘어간다.

보면 setTimeOut이라는 내장 객체 안에 함수가 들어가 있다. 어떤 특정 이벤트가 발생할 시에, 자동으로 호출되는 함수를 콜백 함수라고 하는데 사용하는 경우는 아래 네 가지로 보면 된다.

1.사용자 이벤트 처리

브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하다.
따라서 이런 화면이벤트를 관리담당하는 녀석에게 우리는 특정이벤트가 발생할 때 호출을 원하는 내용을 callback 함수에 전달하게 된다.

2.네트워크 응답 처리

화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올지 알 수 없다.
따라서 이런 서버에 대한 응답처리 등도 비동기적으로 처리해야 한다.

3.파일을 읽고 쓰는 등의 파일 시스템 작업

4.의도적으로 시간 지연을 사용하는 기능(알람 등)

위와 같이 이벤트 등을 기다리는데 하나뿐인 소중한 스레드를 사용한다면, 또 서버의 응답을 기다리기 위해 하나뿐인 소중한 스레드를 사용한다면…
사용자는 멈춰져 있는 화면을 보게되는 것이다.
위와 같이 스레드의 블록킹을 야기하는 작업은 필수적으로 비동기적 프로그래밍을 해야 한다.

+ 콜백함수를 인자로 받을 경우, name 만 입력하면 된다. ()생략.

Asynchronous

JavaScript

And

XML

기본 개념은 웹 서버와 데이터를 교환하여 웹 페이지를 비동기식으로 업데이트할 수 있도록 하는 것.

즉, 전체 페이지를 다시 로드하지 않고도 웹 페이지의 일부를 업데이트할 수 있도록 하는 technique 이다.

이게 뭔소리냐 하면... 예를들어 investing.com에서 경제에 영향을 미칠만한 각종 포럼들의 schedule을 확인해보고 싶다고 하자. 그 페이지의 html을 받아오는 행위 (request) 를 사용자의 get 요청이라고 한다.

get 요청 방식에는 세가지가 있는데, 

1. url 직접 입력 하기

2. form tag (버튼 눌러서) 페이지 불러오기

3. ajax로 get 요청이 있다.

1, 2번의 문제는 새로고침이 실행되어 화면이 하얗게 변했다가 요청한 html을 불러온다는 것이다. 

그런데 3번은  화면 새로고침 없이 요청한 자료만을 불러오게 된다.. 설명하다보니 예시가 잘못 된 것을 깨달았다...

다시.

만약 내가 youtube에서 영상을 보다가 comment 확인을 하고 싶어 comment 버튼을 눌렀을 때, 유튜브 전체가 새로고침되는 것이 아니라 comment만 확인이 가능하다. 이것은 ajax 덕분인 것이다.

Ajax 활용 예시.

<script>
	fetch('response해줄 url') //fetch 기본함수를 이용해 해당 url로 get요청 날려준다.
    .then((response) => { //response 콜백 함수로 입력.
    	return response.json() // 요청한 데이터 리턴값으로.
     })  //결과 가져오기
	.then((결과) => { //parsing 한 결과 가져오기.
    	console.log(결과)
     })
</script>

Spring과 Boot 들어가기전에 JS 관련 내용 정리 좀 다시 정리 하려고 한다.

어디서부터 어디까지 다시 보는게 좋을 지 잘 모르겠지만 어차피 끝은 없으니.. 선 시작.. 

Javascript : 정적인 HTML 콘텐츠를 프로그램 구현 통해 동적으로 변경하거나 데이터를 받고 내보내는 담당을 하게된다.

Object 기반의 스크립트 언어로,  Node.js와 같은 프레임 워크 사용하면 서버 프로그래밍에도 사용할 수 있다.

                                                                                                                      => 웹 브라우저에 인터프리터가 내장 되어있다

Javascript의 core function 크게 4가지

1. 유효성 체크 : 데이터가 DB에 저장될 수 있는지, 부족한 것은 없는지 검사

(말은 유효성이라고 거창한데, 그냥 조건 걸어서 사용자 입력값을 DB에 넣을지 뺄지 확인하는 거다.)

2. html 태그 컨트롤

3. Ajax를 통한 웹서와의 데이터 통신

4. 동적인 메뉴 제작. 이미지 효과 등. ->

이미지나 메뉴 blinking, blur 같은 효과는 css 구문 자체로도 있기는 한데, script 태그 안에 function 넣는게 젤 편하다. 지저분하게 CSS 구문이나 HTML 구문을 늘리는 것, 또는 html태그 안에 포함시키는거보다 function만 js파일에 따로 모아놓는게 나중에 코드 수정할때 편하다.

변수 선언 방식

1. var :  변수를 선언하고 추가로 동시에 값을 초기화 한다. 

2. let 블록 내 지역 변수를 선언 & 값 초기화

3. const  지역내에 읽기 전용 상수 선언. (Ex clock 과 같은 function 들은 const로)

내장함수

1. eval(문자열) : 문자열을 수식으로 변환
2. Number(문자열) : 문자열을 숫자로 변환, 정수/실수 가리지 않고 숫자로 변환
3. parseInt(문자열) : 문자열을 정수로 변환
4. isNaN(문자열) : 문자열이 숫자형식이 아니면 true, 숫자형식이면 false -> Not-A-Number(숫자가 아님)
5. alert(문자열) : 문자열을 대화상자로 출력
6. confirm(문자열) : 문자열을 확인/취소 대화상자로 출력
7. prompt(문자열) : 문자열이 제목으로 표시되는, 값을 입력받기 위한 대화상자 호출

Math함수는 java와 기본적으로 동일.

1. Math.ceil() : 소수점 올림, 정수 반환

2. Math.floor() : 소수점 버림, 정수 반환

3. toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환.

 Return.

(1) 주어진 값을 호풀 지점으로 반환

(2) function을 벗어남 -> 함수에서 return 문에 도달하면 break처럼 조건문을 나와 다음 코드를 실행하는 것이 아니라, 아예 function 밖으로 나가버린다.

console.log() 메서드는 웹 콘솔에만 메시지 출력한다.

ex1 | document.

<script type="text/javascript">
document.write("안녕 자바스크립트!!");
</script>

HTML 페이지의 <body> 태그 안을 document 라고 부른다.

ex2 -1  | var

	var a = 10
	a = 100
	console.log("1 = >" + a)
	{
		var a = 200
		console.log("2 = >" + a)
		{
			var a = 300
			console.log("3 = >" + a)
			{
				var a = 400
				console.log("4 = >" + a)
			}
			console.log("5 = >" + a)
		}
		console.log("6 = >" + a)
	}
	console.log("7 = >" + a)

var 변수 - 각기 구역 다른 값을 출력한다. 어디에서 어떻게 사용될지 파악하기 힘듬. 때문에 let과 const방식을 보완.

구역 잡아놓은 것과 관계 없이 최근의 a 값을 가지고 내려간다.

ex2 -2  | let

<script type="text/javascript">
	let a = 100
	a = 250
	console.log("1 = >" + a) //200
	{
		let a = 50
		console.log("2 = >" + a) // 50
		{
			let a = 200
			console.log("3 = >" + a)
			{
				let a = 300
				console.log("4 = >" + a)
			}
			console.log("5 = >" + a)
		}
		console.log("6 = >" + a)
	}
	console.log("7 = >" + a)
</script>

let 변수 - 구역내에 변수값이 지정되어 있으면 해당 값을 그대로 가지고 간다. 

let은 변수에 재할당이 가능하다. 하지만, const는 변수 재선언, 변수 재할당 모두 불가능하다. 

exam03 - 07 기본연산이라 스킵

ex8 Math 함수

	console.log(a + 3); // 1.73
	console.log(parseInt(a) + 3);  // 반올림 x , 4
	console.log(Math.floor(a) + 3); // 4
	console.log(Number(a) + 3);  // 4.7
	console.log(~~(a) + 3); // Math.floor(a) 와 비슷, 4

Math.ceil() : 소수점 올림, 정수 반환
Math.floor() : 소수점 버림, 정수 반환
Math.round() : 소수점 반올림, 정수 반환
toFixed() : 숫자에서 원하는 소수점 길이만큼만 반올림하여서 반환

parseInt() : 문자 -> 정수     "123" -> 123
parseFloat() : 문자 -> 실수     "45.3" -> 45.3
Number() : 문자 -> 정수&실수