자바스크립트는 싱글쓰레드이다.
그럼 여기서 싱글쓰레드가 무엇인가?
동시에 뭔가를 실행하지 않고 무조건 하나의 행동이 끝나야 다음거를 실행하는 것을 싱글쓰레드라고 할 수 있다.
1. 싱글쓰레드
- 한번에 하나만 실행(하나가 끝난 뒤에 다음 거 실행)
- 자바스크립트는 위에서부터 순차적으로 실행하기 때문에 도중에 에러가 생기면 다음거를 실행하지 않음
- 그렇기 때문에 에러를 처리하지 못하는 경우 바로 에러가 나 멈춤
- 보완점으로 타입스크립트가 나왔고 타입스크립트에서 예외처리의 중요성이 커짐
자바스크립트는 싱글쓰레드에 비동기방식
동기방식은 멀티쓰레드
2. 동기/비동기
js는 싱글쓰레드고 비동기방식으로 처리, node.js는 js로 만들었음
- 동기: 다같이 처리
- 비동기: 동시에 일어나지 않음
쉽게 말하면
동기는 내가 해당하는 화면에서 다 로드됨(무조건 새로고침해야 적용됨->은행, 메일서비스)
비동기는 새로고침 안 해도 변화된 데이터가 적용됨(실시간으로 뜸)
3. Call Stack(호출 스택)
- LIFO 방식
- 함수의 호출을 기록하는 자료구조
- 자바스크립트는 하나만 실행
- 함수가 있으면 따로 빼놓고 console 먼저 찍고 그 다음 함수를 실행시킴 - onclick에서 이벤트를 발생시키고 만들어놓은 함수 호출(가져와서 실행)
- onclick 호출 스택은 call stack에 함수가 쌓여 실행되는 것을 의미
4. Event Loop
- console은 함수가 아니기 때문에 바로 실행
- 무조건 함수로 만든 것은 백그라운드로 빠져 태스크 큐라는 곳으로 보내짐
- 순서대로 빠지고 순서대로 실행
그렇다면 자바스크립트는 어떻게 실행될까?
싱글쓰레드라서 순서대로 실행된다.
함수는 어떤 과정을 거쳐서 실행되는 걸까?
함수가 실행되면 호출 스택에서 빠져서 백그라운드에 간다. 그리고 순차적으로 태스크 큐에 빠지고 순서대로 보여준다.
- 내장 함수를 썼을때도 당연히 백그라운드로 빠짐
- 그렇다면 이런경우에는?
const run =()=>{
return 3;
}
console.log("1");
console.log(run);
console.log("2");다음과 같은 순서로 실행됨
1
const run =()=>{
return 3;
}
2
for문은?
자바스크립트로 찍는 친구
내장 함수는 한번 빠졌다가 나옴 -> 즉, 행동을 3번함(리소스를 잡아먹는다고 표현)
console은?
호출 스택에 한번만 딱 함 -> 행동을 한번만에 함
for문으로 1부터 10까지 돌려서 찍는 것보다 console.log를 1부터 10까지 찍는게 리소스를 덜 잡아먹음
물론 100까지면 for로 돌리는게 빠름
참고. forEach 런타임에러 -> map이나 filter로 쓰면 빨라짐
싱글쓰레드
- 호출 스택에 하나만
- 태스크 큐에는 쌓여있음(대기)
이벤트 루프는 언어마다 다 다름
5. node.js
- 비동기 방식(하나씩 처리)에 어울리는 서비스(스트리밍서비스, 채팅서비스 등)
- 넷플릭스를 한 화면에 여러 개 띄우면 다 볼 수 없음
참고. 가장 빠른 언어는 c언어, 가장 느린 언어는 파이썬
6. 모듈
- express 같은 거
- 캡슐화(자바할때 중요), 추상화
리액트에서 class를 지원하지 않고 함수형식으로…
그래서 프론트엔드는 추상화로 복잡한 시스템이나 객체를 단순화하여 핵심적인 부분에 집중하는 프로그래밍 원칙만 알고 있으면 됨
객체지향 - 외부에서 못 건들도록 함
재사용 - 두개를 하나의 함로 처리(리액트에서 매우 중요)
모듈 만들기
- 해당하는 함수를 내보냄(export로 내보낼 수 있구나 이런식으로 내보낼 수 있구나만 알고 있기(그렇게 중요하진 않음))
- 모듈을 불러올때는 구조분해해서 가져옴({})
- 구조분해란 원래 있는 데이터를 분해한다.const data=[
{
name:”김김김”,
age: 14,
},
{
name:”이이이”,
age: 15,
},
];
const names = data.map((x,i)⇒{
return x.name;
});//이름만 뽑아서 새로운 데이터만들기
const name2=data[1].name; //두번째객체의 name 데이터가져오기
console.log(names, “이름”);
map(리액트문에서는 forEach말고 map을 많이 사용)
여기서 map을 돌릴때 x는 객체
> {
name:”김김김”,
age: 14,
},
를 지칭함
i는 인덱스
#### 7. 원하는 데이터 뽑아보기(js로 데이터 뽑는 연습)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table,
th,
td {
margin: 0 auto;
max-width: 1000px;
padding: 2px 10px;
text-align: center;
border: 1px solid black;
border-collapse: collapse;
}
.box {
margin: 0 auto;
max-width: 1000px;
margin-top: 5px;
border: 1px solid;
}
</style>
<body>
<div class="main-wrap">
<!-- js로 동적 추가 -->
<!-- 1번째 테이블 2번째 테이블 row 클릭시에 -->
</div>
<!-- br태그 -->
<!-- 1번째 -->
<!-- 이름 나이 커리어 별명 -->
<!-- 2번째 -->
<!-- 해당하는 줄을 눌렀을때 alert 혹은 모달을 사용해서
해당하는 사람의 이름은 name이고 나이는 age이며 미성년자||성인 입니다.
커리어에는 놀기, 먹기, 자기, 숨쉬기가 있고 별명으로는 ,로 나와야함 -->
<!-- 3번째 -->
<!-- 1. 미성년자는 000이 있고 그 사람의 커리어는 careers가 있으며 별명은 nickName입니다.
2. 성인은 name,name이 있고 name의 커리어는 career가 있으며 별명은 nickName입니다.name의 커리어는 career가 있으며 별명은 nickName입니다.
3. 별명중 가장 별명이 긴사람을 찾는 알고리즘을 만들어주세요.(광철)
div든 span이든 3개가 나옴 -->
</body>
<script>
// 데이터
const data = [
{
id: 1,
name: '김철수',
age: 14,
careers: [
{ title: "놀기" },
{ title: "먹기" },
{ title: "자기" },
{ title: "숨쉬기" },
],
nickName: [
{ name: "김안철수" },
{ name: "김김안철수" },
{ name: "박터짐" },
],
},
{
id: 2,
name: '영희',
age: 35,
careers: [
{ title: "놀기" },
{ title: "자전거타기" },
{ title: "오렌지먹기" },
{ title: "사과부시기" },
],
nickName: [
{ name: "김영희" },
{ name: "야생사자" },
{ name: "오올이" },
],
},
{
id: 3,
name: '박광철',
age: 20,
careers: [
{ title: "일수나가기" },
{ title: "돈빌려주기" },
{ title: "공무집행방해하기" },
{ title: "무면허운전하기" },
],
nickName: [
{ name: "대흥역호랑이와사자두마리" },
{ name: "마포불주먹" },
{ name: "전설" },
{ name: "경찰의적" },
],
},
];
// 1번째
const peopletable = document.querySelector(".main-wrap");
peopletable.innerHTML = `
<table>
<thead>
<tr>
<td>이름</td>
<td>나이</td>
<td>커리어</td>
<td>별명</td>
</tr>
</thead>
<tbody class="tablebody">
</tbody>
</table>`;
const userinfo = data.map((x, i) => {
const careerr = x.careers.map((a, b) => {
return `${a.title}</br>`;
});
const nickNamee = x.nickName.map((a, b) => {
return `${a.name}</br>`;
});
return `<tr id=${x.id}token interpolation">${x.id})">
<td>${x.name}</td>
<td>${x.age}</td>
<td>${careerr.join('')}</td>
<td>${nickNamee.join('')}</td>
</tr >`;
});
const tbody = document.querySelector('.tablebody');
tbody.innerHTML = userinfo.join('');
// 2번째
const readyalert = (id) => {
data.forEach((x, i) => {
const ca = x.careers.map((a, b) => {
return a.title;
})
const ni = x.nickName.map((a, b) => {
return a.name;
})
let adult = "성인";
if (id === x.id) {
if (x.age < 20) {
adult = "미성년자";
}
alert(`이름은 ${x.name}이고 나이는 ${x.age}이며 ${adult}입니다. 커리어에는 ${ca}가 있고 별명으로는 ${ni}이 있습니다.`);
}
})
}
// 3번째
// 성인 이름
const ainfo = data.filter((data) => data.age >= 20);
const adultname = ainfo.map((x, i) => x.name);
const car1 = ainfo.map((x, i) => {
const ca = x.careers.map((a, b) => {
return a.title;
})
return ca;
});
const ni1 = ainfo.map((x, i) => {
const ni = x.nickName.map((a, b) => {
return a.name;
})
return ni;
});
// 미성년자 이름
const binfo = data.filter((data) => data.age < 20);
const babyname = binfo.map((x, i) => x.name);
const car2 = binfo.map((x, i) => {
const ca = x.careers.map((a, b) => {
return a.title;
})
return ca;
});
const ni2 = binfo.map((x, i) => {
const ni = x.nickName.map((a, b) => {
return a.name;
})
return ni;
});
// 가장 별명이 긴사람
const longnick = () => {
let max = 0;
let rrr;
const nick = data.map((x, i) => {
return x.nickName
});
nick.map((a, b) => {
a.map((c, d) => {
if (c.name.length > max) {
max = c.name.length;
rrr = c.name;
}
})
})
return rrr;
}
let longperson = longnick();
peopletable.innerHTML += `<div class="box">1. 미성년자는 ${babyname}가 있고 그 사람의 커리어는 ${car2}가 있으며 별명은 ${ni2}입니다.</br>
2. 성인은 ${adultname}이 있고 ${adultname[0]}의 커리어는 ${car1[0]}가 있으며 별명은 ${ni1[0]}입니다. ${adultname[1]}의 커리어는 ${car1[1]}가 있으며 별명은 ${ni1[1]}입니다.</br>
3. ${longperson}</div>`;
</script>
</html>
어서와