0425
JS 복습
foreach
사용 방법
1
2
3
4
| arr = [1, 2, 3, 4]
arr.forEach((value, index, arr) => {
return condition;
});
|
- 반복문을 간편하게 쓸 수 있음.
- 원래라면 이렇게 적어줘야 할 것을
1
2
3
4
| let res = 0;
for (let i = 1; i < 5; i ++){
res += i
}
|
1
2
3
4
5
6
7
8
| let res = 0;
[1, 2, 3, 4].forEach(num => {
res += num;
});
[1, 2, 3, 4].forEach(function(num){
res += num;
});
|
- 화살표 함수는 함수 표현식에서만 동작한다. 근데 왜 forEach()문에선 바로 화살표 함수를 사용해도 에러가 나지 않는가?
- => forEach()가 콜백함수 를 매개변수로 받기 때문이다. 콜백함수란, 다른 함수의 인자로 전달되어 실행되는 함수를 말한다.
map
원본 배열은 그대로 냅두고 어떤 작업을 수행한 후 새로운 배열을 돌려주고 싶을 때 사용
사용방법
1
2
3
4
5
| const arr = [1, 2, 3, 4];
const newArr = arr.map((value, index, array) => {
return condition;
})
|
filter
배열에서 특정 값만 남기고 싶을 때 사용
사용방법
1
2
3
4
5
6
7
8
| const arr = [1, 2, 3, 4];
const temp = arr.filter(function(value, index, array){
return condition;
});
const temp = arr.filter((v, i, arr) => {
return condition;
});
|
reduce
배열을 하나의 값으로 뭉치고 싶을 때 사용
사용방법
1
2
3
4
5
6
7
8
9
10
| const arr = [1, 2, 3, 4];
// acc는 누적시킬 값을 의미한다.
// foreach문으로 1부터 10까지 돌면서 res에 값을 누적한다고 했을 때
// reduce를 사용하면 한 번에 처리할 수 있다.
const sum = arr.reduce((acc, value, index)=>{
return acc + value;
});
// reduce((함수), (초기값));
// 초기값을 설정하면 초기값에 해당 return값을 더한다.
|
reduce로 해시맵 구현하기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
const fruits = ['apple', 'banana', 'cherry', 'cherry', 'apple'];
const count = frutis.reduce((acc, value) => {
acc[value] = (acc[value] || 0) + 1;
return acc;
}, {});
// (acc[value] || 0) + 1
// 이라는건 값이 있으면(acc[value]) 그 값에 + 1을 하고,
// 값이 없으면(0인 상태) 0에 +1을 해달라는 소리.
// acc 값:
acc = {
'apple' : 2,
'banana' : 1,
'cherry' : 2,
}
|
왜 화살표 함수를 사용하는가
https://dmitripavlutin.com/differences-between-arrow-and-regular-functions/
this
this란 함수가 실행된 문맥을 말하며 해당 문맥에 따라 다른 객체를 참조할 수 있다.
- 애초에 화살표 함수가 함수 표현식에서만 사용될 수 있다고 하지 않았는가.
- 화살표 함수는 전역 객체를 바라보기에 누가 나를 불렀는지는 관심이 없다.
- 반면 일반 함수 안에 사용된 this는 누가 나를 불렀는지 확인해서 함수 안에있는 함수를 바라본다.
삼항연산자
1
2
3
| 조건 ? A : B
// 조건이 true면 A
// 조건이 false면 B
|
Git
pull과 fetch의 차이
pull
원격 저장소에서 변경된 메타데이터 정보 + 최신 데이터 복사를 한꺼번에.
fetch
원격 저장소에서 저장된 변경사항을 확인하고 merge로 따로 받아와야함. fetch 후 차이를 보고 싶다면 git diff origin/main 을 활용.
0428
js에서의 비동기처리
- js는 웹사이트에서 인터랙션 요소를 넣어줄 수 있는 것
- 비동기 처리란 A라는 작업이 완전히 끝나지 않았을 때 다른 작업이 동시에 실행 되는 것. 즉 오래 걸리는 작업은 백그라운드에 넘기고, 다른 코드는 계속 진행하게 만듦. 이 때 오래 걸리는 작업이란 API 요청, DB 조회등을 기다리지 않고 다른 작업을 먼저 진행하게 만드는 것. 웹사이트가 멈추지 않고 계속 동작하는 것처럼 보이도록 도와주는 것을 비동기처리라고 함.
콜백함수
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| fuction fetchMenu(callbackFunction){
callbackFunction();
// 5초 뒤에 data가 출력됨
setTimeout(function(){
let data = {firstMenu : "구독"};
callbackFunction(data);
return data;
}, 5000);
}
let menu;
// 익명 함수란 함수에 이름을 선언하지 않은 것을 의미함
menu = fetchMemnu(function(res){
// callbackFunction에서 실행할 코드
console.log("5초 뒤 실행", res);
});
// 콘솔로그가 먼저 찍힌 후에
console.log("출력결과:", menu);
|
콜백함수의 단점
콜백함수가 여러개 겹쳐질 때는 (callback hell) 오류처리가 어려워짐.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| fuction fetchMenu(callbackFunction){
callbackFunction();
// 5초 뒤에 data가 출력됨
setTimeout(function(){
let data = {firstMenu : "구독"};
callbackFunction(error, data);
return data;
}, 5000);
}
// 익명 함수란 함수에 이름을 선언하지 않은 것을 의미함
menu = fetchMemnu(function(error, res){
if (error){
console.log("오류");
return;
}
// callbackFunction에서 실행할 코드
console.log("5초 뒤 실행", res);
});
|
그래서 등장한게 promise
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| fuction fetchMenu(){
return new Promise(function(resolve, reject){
setTimeout(function(){
let data = {firstMenu : "구독"};
if (error){
reject(error);
}
resolve(data);
}, 5000);
});
}
let menu;
// then()에는 실행할걸글, catch()엔 오류가 날 거를 작성
// promise로 객체를 받아야됨
fetchMenu()
.then(function(res){
console.log("5초 뒤 실행", res);
menu = res;
})
.catch(function (error){
console.log("에러처리");
return;
});
|
또 다른건 asnyc & await
1
2
3
4
5
6
7
| async function init(){
let menu;
menu = await fetchMenu();
console.log(menu);
}
init();
|
개발자가 읽기에 가장 좋기 때문에 asnyc & await가 많이 사용됨. 비동기 처리를 할거면 await로 받는 객체는 promise로 선언 되어있어야 함. ansyc 안에 try catch를 활용해서 비동기처리와 error 처리를 해주면 됨.
0429
0430
0501
React 기초
- 컴포넌트란: 데이터만 다르게 넘기고 UI는 동일하게
- 화살표 함수나 일반 함수로 제작함
- 이걸로 만들었으면 태그처럼 <함수명> 과 같은 형식으로 적어줘야함.
- html은 폼을 넘기면 리프레시가 되는 동작이 기본
event.preventDefault(); 를 설정해서 리프레시가 안 되도록 설정할 수 있음
- 상태(무언가 값을 누적시킬때)를 만들고 싶을 때 useState함수 사용.
React.useState(초깃값); - 왜 굳이 map 함수를 쓰는걸까? 새로운 배열을 왜 반환하는거지? 그냥 foreach문 쓰면 안되나? -> map 함수는 새로운 값을 반환하고, foreach는 반환하지 않고 그냥 순환문만 돌기 땜에 배열에 있는 값을 보여주고 싶을 땐 map 함수를 사용해야됨.
- 그리고 왜 이렇게 복잡하게 괄호를 감싸는거지? 그냥 js에서 쓸 때는 이렇게 적으면 안되나? -> react에선 jsx문법을 따르는 경우가 대다수임. jsx란 javascript xml로 js안에 html문법과 유사하게 사용할 수 있도록 도와주는 것을 의미함.
1
2
3
4
5
6
7
| return (
<ul className="favorites">
{cats.map((cat)=>(
<CatItem img={cat} key={cat}/>
))}
</ul>
);
|
