Javascript

화살표 함수

//step1. 가장 기본적인 함수
function asd() {
	return "func1";
};

//step2. 변수에 저장한 함수
const f1 = function asd() {
	return "func1";
};
    
//=> 이 경우 함수를 호출할 때 함수 이름으로 호출되는 것이 아니라 변수 이름으로 호출됨.
//=> 오히려 함수 이름으로 호출하면 함수를 찾을 수 없다고 뜸.

//step3. 함수 이름을 생략
const f2 = function () {
	return "func1";
};

//step4. function 생략하고 화살표로 대체
const f3 = () => {
	return "func1";
};

// 리턴만하는 함수의 경우  {}랑 return 생략 가능
const f4 = () => "func4";

// 매개변수가 1개 있는 경우
const f5 = (num) => num + 1;

// 매개변수가 2개 있는 경우
const f6 = (num1, num2) => num1 + num2;

// 매개변수가 1개 있는 경우 () 생략 가능
const f7 = num => num + 1;

 

forEach 와 map

forEach

배열의 각 요소에 대해 주어진 함수를 실행하며 반환값은 없다.

let forEachResult = numbers.forEach((number) => {
	console.log(number);
});

console.log("forEachResult : " + forEachResult);
//=> forEachResult : undefined

 

map

배열의 각 요소를 변형해 새로운 배열을 생성해 반환

let mapResult = numbers.map(function aa(number) {
	console.log(number + 1);
	return number + 1;
});

console.log("mapResult : " + mapResult);
// => mapResult : 2,4,6,8,10

 

forEach는 단순히 배열 요소를 이용해 반복적인 작업을 해야할 때

map은 배열 요소를 바꿔야할 때 

 

동기 / 비동기

코드의 순서와 실행 순서가 일치하는가의 차이

동기는 코드 순서대로 실행이 되고, 비동기는 코드 순서대로 실행되지 않음

//예를들어 setTimeout은 설정한 시간 후에 메서드가 실행된다.

 

콜스택,  테스크 큐,  이벤트 루프

콜스택 : 작업들이 쌓이는 공간

테스크 큐 : 콜스택에 있는 작업 중 비동기 처리가 필요한 작업을 옮겨담아놓는 공간

이벤트 루프 : 콜스택과 테스크 큐에 있는 작업들을 실행시킴

 

테스트 큐 작업은 콜스택의 작업이 비워져야만 실행이 된다. 

예를들어,

while(Date.now()-start < 10000) 작업을 실행시킨 후에

비동기 작업인 setTimeout 1초를 실행시키면, 

while문 돌아가는 도중 1초가 되면 setTimeout이 실행될 것 같지만, 실행되지 않고 while문이 끝난 후에야 실행이 된다.

 

while(Date.now()-start < 10000)과 같이 오래걸리는 작업을 동기적으로 실행시키면 사용자 입장에서 웹이 멈춰있는 것처럼 보이기 때문에 비동기적으로 처리해주는 것이 좋다.

 

Promise

비동기 작업을 관리하기 위한 객체이다.

promise에는 상태가 존재.

- pending : 대기상태로 아직 작업이 완료되지 않은 상태

- fullfilled : 작업이 성공적으로 완료된 상태

- rejected : 작업이 실패한 상태

 

아래 코드는 백엔드로 요청을 보내는 코드이다. 

백엔드 서버까지 갔다와야하기 때문에, 백엔드에 요청을 보내고 응답을 받기까지 시간이 걸린다.

따라서 data에 값이 제대로 안들어갈 수가 있다.

따라서 이런 비동기 작업에는 관리가 필요하다.

이를 위한게 promise

const axiosData = ()=>{
      let url = "백엔드 주소";
      let reponse = axios.get(url); //백엔드에 요청하는 코드 -> 시간이 걸림
      let data=response;
      console.log(data);
}

 

예시코드

다음과 같은 코드를 실행시키면, 5초가 되기 전에 result를 출력하면 pending 상태로 뜨다가, 5초가 되면 fullfilled로 출력됨.

function fetchData() {
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("데이터 로드 완료!"), 5000);
	});

	// Promise 결과 반환
	console.log(result); // (5초 뒤) "데이터 로드 완료!" 출력
}

 

async , await

const axiosData = async()=>{
      let url = "백엔드 주소";
      let reponse = await axios.get(url); //요청 받을때까지 기다렸다가 저장해줌
      let data=response;
      console.log(data);
}

 

Promise 대신 사용할 수 있다.

await를 사용하면 응답이 올 때까지 기다렸다가 다음 코드를 실행한다.

await쓰려면 async를 써줘야한다.

 

백엔드 호출

axios

예시 코드 - 로그인 요청 보내기

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

    const login = async()=>{

        const email = document.getElementById("email").value;
        const password = document.getElementById("password").value;

        let url = `http://localhost:8080/login`; //요청 보내야하는 uri

        let info={ // 담아야하는 정보
            "email":email,
            "password":password
        };

        let response = await axios.post(url, info); //응답 받아서 저장
        console.log(response.data.accessToken);

    }

</script>