IPv4

Async function

AsyncFunction 객체를 반환하는 하나의 비동기 함수를 정의합니다.

• Syntax

async function name([param[, param[, ... param]]]) {
        statements
}

• Description

async 함수에는 await 식이 포함될 수 있습니다. ( await 키워드는 async 함수에만 유효함 )

await 식은

1) async 함수의 실행을 일시 중지하고

2) 전달 된 Promise 의 해결을 기다린 다음

3) async 함수의 실행을 다시 시작하고

4) 완료 후 값을 반환합니다.

Note

- async/await 함수의 목적은 사용하는 여러 Promise 의 동작을 동기스럽게 사용할 수 있게 하고,
어떤 동작을 여러 Promise 의 그룹에서 간단하게 동작하게 하는 것입니다.

- async 함수는 항상 Promise 를 반환합니다. 만약 반환값이 명시적으로 Promise 가 아니라면
  암묵적으로 Promise 로 감싸집니다.
  아래의 코드를 예시로 볼 수 있습니다.

async function foo() {
        return 1
}

function foo() {
        return Promise.resolve(1)
}

비동기 함수

이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise 를 사용하여 결과를 반환합니다.

Promise

Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과값을 나타냅니다.

기본적으로 promise 는 함수에 콜백을 전달하는 대신에, 콜백을 첨부하는 방식입니다.

예를 들어, createAudioFileAsync() 라는 함수가 있다고 생각해보겠습니다.

해당 함수는 [ 음성 설정에 대한 정보 ] 를 받고, [ 두 가지 콜백 함수 ] 를 받습니다.

1) 음성 파일이 성공적으로 생성됬을 때, 실행되는 콜백

2) 에러가 발생했을 때 실행되는 콜백

function successCallback(result) {
  console.log("Audio file ready at URL: " + result);
}

function failureCallback(error) {
  console.log("Error generating audio file: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback);

만약 createAudioFileAsync () 함수가 Promise 를 반환하도록 수정한다면, 다음과 같이 사용할 수 있습니다.

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

// or

const promise = createAudioFileAsync(audioSettings);
promise.then(successCallback, failureCallback);

이러한 방식을 비동기 함수 호출이라고 부릅니다.

강좌2.

String 변수를 콘솔에서 사용하는 방법

• Template Literal 문법

let name = 'sungjun'
console.log('제 이름은 ${name} 입니다.' )

Array 의 형태 : Object

['하나','둘','셋']
[{'one':1},{'two':2}]
[[10,20],[100,200]]
[[[10,20],[30,40]],[[100,200],[300,400]]] // 3차원 배열 형태

• 다양한 메서드 ( 실습 필요 )

1) length

2) foreach

3) map

4) filter

5) push / pop ... 등등

Object ( 객체 )

key 와 value 형태를 지닙니다.

• 다양한 메소드

1) ObjectKeys

2) Object.values

3) Object.entries ... 등등

• Map,Set : object 

Function 

함수 A ( 피라미터 ) 의 형태로 선언하고, 함수 A ( 인자 ) 의 형태로 호출합니다.

호이스팅

console.log(add(10,20)) // 호이스팅 되서 출력됨
console.log(add2(10,20)) // 호이스팅이 안되서 에러 발생함


function add (x,y){
	return x+y;
}

let add2 = function(x,y){
	return x+y;
}

콜백 함수

: 함수를 인자로 받아서, 내부에서 실행을 시켜주는 함수입니다.

즉, 나중에 불러주는 함수입니다.

function add(x,y){
	return x+y;
}

function mul(x,y){
	return x*y;
}

function cal(a,b){
	return a(10,10) + b(10,10); // a라는 함수는 선언된적 없음
}

cal(mul,mul); // cal 이 호출되면서 a라는 함수에 각 함수들이 할당됨

화살표 함수

함수의 네이밍이 없고, 인자와 함수 본문만 보여진다.

• 형태 :

(a,b) => {
	let z = 10
    let res = z + a + b
    return res
 };

만약, 화살표 함수를 콜백함수로 사용한다면?

1. 네이밍을 안해도됨
2. 다른 곳에서 사용할 수 없음
3. 콜백 지옥에 빠질 수 있음

function cal(a,b){
	return a(10,10) + b(10,10);
}

cal((a,b) => a+b, (a+b) => a*b);
// cal 이 호출됨과 동시에 화살표 함수로 함수가 선언되어 실행됨

동기와 비동기

• js는 일을 처리할 수 있는 스레드가 1개 싱글 쓰레드라고 합니다.
• 모든 일을 여러명이 처리할 수 없다면 항상 기다려야하는 문제가 발생하고, 무한대기에 빠질 수 있습니다.

* 동기와 비동기를 이해하려면 자바시크립트 실행 동작원리를 이해해야함 ( 숙제 )

DOM

• 메소드

1. getElementById() : 해당하는 Id 를 가진 요소에 접근하기
2. querySelector() : css 선택자로 단일 요소에 접근하기
3. document.createElement (target) : 타겟 요소를 생성합니다.
4. element.appendChild ( target ) : 타겟 요소를 요소의 자식으로 위치합니다.
5. ... 등등

강좌 1.

주의사항

• JavaScript 와 CSS 는 분리해주는게 유지보수면에서 좋다.
• JavaScript 출력 방법 4가지를 익혀놓을 것
• HTML 문법 자동 완성해주는 코드 : html 에서 ! 입력

JavaScript 출력방법

• Chrome 에서 콘솔창을 이용

• about:blank 접속
• cmd + option + I 입력 ( 맥북 )
• 요소로 들어가서 원하는 부분 소스코드 수정 ( 바로 반영됨 )
• 콘솔에 javascript 부분 입력

1. document.getElementById('one').innerHTML='hi world'  : 문서 내에 요소를 선택하여 출력
2. document.write('js hello') : 문서에 직접 입력
   
3. alert('hello') : 사용자 인터랙션 ( alert 이외에 confirm 등이 있음 )
4. console.log('hello') : 콘솔에 찍는 방법

코드 구조

1. statement 는 세미콜론으로 구분 ( 붙치지 않는곳도 존재 )
2. statement 는 값, 연산자, 키워드, 명령어, 표현식 등으로 구성됨

엄격 모드

• use strict 라는 지시자를 통해 엄격모드를 활성화할 수 있습니다.
• 활성화된 경우에만 반영이 됩니다.
• class 문법의 경우 엄격모드가 기본입니다.
• 함수별로 엄격모드를 다르게 적용할 수 있으나 이는 혼란을 야기합니다.

변수 선언 방법

• let : 값을 중간에 변경해야하는 경우 사용합니다.
• var : 앞에 선언하고, 뒤에 또 선언해도 에러를 발생시키지 않아서 사용하는 것을 권장하지 않음
• const : 상수로 선언할 시 문제가 될 것 같은 경우에만 let을 사용하고 웬만하면 const 를 항상 사용

ex.

const xx = 10;
xx= 30; // Error !

let xx = 10;
xx = 30; // Success

* 특이사항

- let,const 는 블록 단위의 스코프를 가집니다. ( 블럭이라하면 중괄호 ( { } ) 를 의미 )

nullish 병합 연산자

let result1;
let result2 = result1 ?? 100; // 100

let result3 = 10;
let result4 = result3 ?? 100; // 10

result1 이 null 이거나 undefined 인 경우, 뒤에 값을 넣어줌

프로퍼티 접근 연산자

• 마침표 프로퍼티 접근 연산자
• 대괄호 프로퍼티 접근 연산자

let x = {'one':1, 'two':2}
x.one // 1
x['one'] // 1

관계 연산자

키만 가지고 판단

10 in [10,20,30] // false
1 in [10,20,30] // true
1 in 'hello' // error
'name' in {'name':'hojun','age':10} // true
'length' in [10,20,30] // true

• 10 이 false 가 나오는 이유

[10,20,30] 은 기본적으로 인덱스 값이 키값으로 들어가있습니다.

[ 0:10, 1:20, 2:30 ] 이런식입니다.

그래서 10은 키값으로 없으니 false 이고, 1은 1이라는 인덱스가 존재하는 true 가 반환됩니다.

• length 가 true 가 나오는 이유

[10,20,30] 을 console.dir 로 찍어보면 Array(3) 안에 length : 3 이 존재하는 것을 볼 수 있습니다.

변수의 형(타입)

typeof 로 확인 가능

• 원시타입 ( primitive type ) : 유일한 값을 가진 것 ex. boolean, string, number, null ....
• 참조타입 ( reference types ) : 값을 변경할 수 있는 것 ex. object, array, map, set, function ...
• Number : 숫자

ㅇ 폼 태그의 역할

 : 입력된 데이터를 한 번에 서버로 전송하고, 전송한 데이터는 웹 서버가 처리하며, 결과에 따른 웹페이지를 보여줍니다.

ㅇ 폼 태그 동작 방법

1) 폼 내용 입력 후 제출

2) 모든 데이터를 웹 서버로 보내고 데이터 처리를 위해 웹 프로그램으로 넘김

3) 웹 프로그램은 데이터 처리 후 결과에 따른 HTML 페이지를 웹 서버에 보냄

4) 웹 서버는 받은 HTML 페이지를 브라우저에 전송

ㅇ 폼 태그 속성

: name, action, method, target 등의 폼 속성이 있는데, 전송할 때 어디로 보낼지에 대한 방법을 정합니다.

1) action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 ( 즉, 어디로 보낼지를 지정해주는 것입니다. )

2) name : 폼을 식별하기 위한 이름을 지정

3) accept-charset : 폼 전송에 사용할 문자 인코딩을 지정

4) target : action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정

5) method : 폼을 서버에 전송할 http 메소드를 정함 ( GET or POST )

ex.

<form action="/login/new" method="post">

ㅇ GET / POST

1) GET : 폼 데이터를 URL 끝에 붙여서 눈에 보이게 보내지는 것

 -> 보안적으로 취약하여 지정된 리소스에서 데이터를 읽을 때만 주로 사용

2) POST : 내부적으로 보냄으로써 눈에 보이지 않음

 -> 지정된 리소스에서 데이터를 처리할 경우 쓰기,수정,삭제할 때 사용

ㅇ <input> 태그

: 사용자가 다양하게 폼 태그에 입력할 수 있는 공간을 만들어 줍니다.

속성에는 type, readonly, maxlength 등이 있습니다.

1) type : 태그 모양을 다양하게 변경 가능

 - text / radio / checkbox / password / button / hidden / submit / reset 등

2) name : 태그 이름을 지정

3) readonly : 태그 읽기 전용

4) maxlength : 해당 태그 최대 글자 수 지정

5) required : 해당 태그가 필수태그로 지정됩니다. 필수 태그를 입력하지않고 submit 하면 에러 출력

6) placeholder : 태그에 입력할 값에 대한 힌트 줍니다.

ㅇ 자세한 예제를 살펴보자

- html

<div class ="contatiner">
        <form action="/new" method="post">
            <div class="form-group">
                <label for="name"> 이름</label>
                <input type="text" id="name" name="name" placeholder="이름 입력하세요">
            </div>
            <button type="submit"> 등록 </button>
        </form>
    </div>

- MemberController.java

    @GetMapping("/new")
    public String New() {
        return "/Login/memberNew";
    }

    @PostMapping("/new")
    public String create(Form form) {
        Member member = new Member();
        member.setName(form.getName());
        return "redirect:/";
    }

 - [ form action = "/new" method ="post" ] , <input name="name"> 구동과정

1) 이 태그를 보면 form 에 사용자가 값을 입력하고 등록 버튼 누름

2) 그 값은 input name = "name" 을 통해 Form 클래스 내부에 있는 name 객체와 매칭이 되면서

     Form 클래스의 name 에 값이 들어감

2) /new 라는 주소를 post 해줌

3) controller 에서 PostMapping 을 통해 form 의 name 데이터를 받고 데이터 저장을 하든 뭘 하든 가공 처리를 한다.

4) 해야할 처리가 다 끝나면 이동할 주소를 return 해준다.