[TIL] d+16

지난 새벽... 과제 코드를 거의 99.9% 누리님의 도움으로 짜게 되었다... ㅠ. ㅠ (무한감사)

덕분에 애매하게 모르겠던 부분들을 이해할 수 있게 되었는데, 그럼에도 불구하고 계속 헷갈리거나 잘 모르겠었던 부분들(왜 이런 식으로 작성해야 할까? 이건...뭐지...? 이게 뭐였더라...? 등)이 있어서, 앞으로는 그중 해소된 부분들을 정리해 보려고 한다~! (이게 진짜 TIL의 의미겠지...)

대부분 이미 강의 들으며 이해했던 부분이었는데, 정작 강의 영상 없이 코드만 짜보니 머릿속에서 연결이 안 되는 것들이 많았다.

엄청 바보같은(ㅋㅋ) 고민들밖에 없었어서 어디 물어보지도 못했는데, 그래도 여기서나마... 나의 바보 같음을 전시하면서 적어보려고 한다... 반발짝 더 나아가기 위해...!

(갑자기 TIL을 하루 건너뛴 이유는 어제 하루가 정신적으로 너무나도 힘들었기 때문이다. 그 정신에 뭘 할 새가 없었다.)

1. 여기는 왜 이런 괄호를 써야 할까? 이 괄호는 어디서 튀어나온 괄호지? 괄호가 너무 많아! 너무 헷갈려!

이렇게 괄호 안에 괄호 안에 괄호 안에 괄호...가 반복되면 제대로 읽어보기도 전에 뇌가 빳빳하게 굳는 느낌이 들기 시작한다... 괄호가 우르르 열릴대로 열렸는데 어딘가 닫히지는 않아서 에러가 뜨면 대체 어느 괄호가 모자란 건지 찾느라 한 세월이 걸렸다. 그래서 좀 풀어가면서 써보려고 한다. 그럼 나중에 도움이 되겠지.

1. Circle은 return 전 이미 정의된 상수이다. (const Circle = Array.from({ length: 5 }, (v, i) => i);)
   이 Circle을 return 내에서 그냥 사용하는 건 물론이고, map을 돌리는 과정까지 모두 js 문법이기 때문에, 일단 Circle을 사용한 모든 과정은 {중괄호} 로 묶어줘야 한다.
2. map 부분을 풀어쓰면 map(function(cur,idx){………}) 이고, 이를 줄여서 화살표 함수로 표현해 map((cur, idx)=>{………})가 된 것이다
3. 둘을 합치면 사진과 같은 모습이 된다!

갑자기 또 뇌가 빳빳해진다...🤯

일단 map을 돌리며 시작한다. js문법이니까 중괄호로 먼저 묶어주고... 근데 map 안에 또 중괄호로 묶어준 map이 있다...! 그 사실 하나만으로 갑자기 안 헷갈릴 코드도 헷갈리기 시작한다! 마치 눈을 깜빡이고 있다는 것을 인지한 사람처럼... map안에 map이 있다는 생각만 계속하게 되는...

일단 좀 보기 편하게 신경 안 써도 되는 부분들을 가리고, 헷갈리게 하는 부분들은 자기들끼리 묶어서 하이라이트 해주었다. 이렇게 헷갈릴 땐 열심히 분리해가며 확인을 하면 좀 더 잘 보이는 것 같다... 슬슬 흐름이 보이기 시작한다... 마치 닌자처럼 얘기해 봄...

2. map()... 분명히 알았는데...

그래도 다시 정리해 보자... map은 Array 내장함수이기 때문에 배열 이름의 뒤에 붙여 arr.map()과 같은 식으로 작성한다.

map()은 파라미터로 콜백함수를 받는데, 이 콜백함수의 파라미터는 순서대로 1. 요소, 2.인덱스, 3.배열 이 들어온다. 여기서 배열은 현재 map 메서드를 호출한 배열 자신이다. (보통은 인덱스까지만 사용하는 것 같다.)

map함수는 배열 내의 모든 요소에 콜백함수를 실행해 새로운 배열을 반환한다.

첫 항목의 이 사진에선 Circle이라는 이름을 가진 div를 return하도록 되어있다. 또한 요소를 cur로, 인덱스를 idx로 받아오고, key에 인덱스(idx)를 넣어 특정한 값을 정해주었다. 결과적으로 각각의 인덱스 넘버를 키값으로 가진 Circle div가 배열Circle의 길이만큼 생성될 것이다!

3. Array.from()은 기억나니...?

from()은 사용법이 다양한데, 1. 원하는 것(ex.문자열)을 배열로 만들고자 할 때, 혹은 유사배열을 복제해 새 배열로 만들 때. 2. 아예 새로운 배열을 만들 때(초기화...?) 사용한다.

기본적인 사용법은 아래와 같다!

const name = "river";
const name_arr = Array.from(name);

console.log(name_arr);
=> ["r","i","v","e","r"]

아래와 같이 콜백함수를 사용할 수도 있다. 이 경우 map()의 콜백함수처럼 처럼 파라미터로 각 요소, 인덱스를 받아온다.

const name = "river";
const num_arr = Array.from(name, (item, idx) => {
return index;
});

console.log(name_arr);
=> [0, 1, 2, 3, 4]

각 요소의 인덱스 넘버를 반환한다!

위에서 계속 나왔던 배열 Circle 역시 Array.from() 을 사용해 생성되었다.

아까는 어떤 값이 들어갔던 자리에 Array.from({length:5})와 같이 속성을 넣어줄 수도 있다. 길이가 5인 배열을 만들기 위해 속성값을 넣어준 것이다. 그 뒤로 콜백함수를 넣어

let new_arr = Array.from({length:5}, (item, idx) => {
	return index;
});
console.log(new_arr);
=> [0, 1, 2, 3, 4]

같은 식으로 표현이 가능하다. index 넘버를 요소로 가진 길이 5짜리 배열을 생성할 수 있다.

사진의 Circle은 요소를 v라는 이름으로, 인덱스를 i라는 이름으로 받은 것이다. Circle 또한 위의 예시와 같은 [0, 1, 2, 3, 4] 배열이 생성되었을 것이다!

• 유사배열 : 배열과 같은 모양새를 하고 있고, length나 각 요소에 접근하는 것은 가능하지만, Array의 내장함수는 사용할 수 없다.

  ---

정규 타임이 끝난 뒤 진혁님과 누리님이 따로 모여서 처음부터 시도해 보려고 하신다길래 양해를 구하고 유림님을 끌고 갔다. 각자 다른 조원들이 모여있으니 궁금하셨는지 매니저님이 들르셨는데, 마침 리액트에 대해 엄청나게 절망적인 기분을 느끼고 있었던지라... 매니저님은 항해 참여 중 이런 시련을 어떻게 극복해나가셨는지 여쭈었다. ㅠ . ㅠ... 거의 지푸라기 잡는 심정으로...

그렇게 매니저님의 조언도 듣고, 다른 조의 조원분들이랑 이야기도 해보면서 보낸 그 새벽이 지나고 느낀 점은 나만 이 어려움을 겪는 것이 아니라는 것이다. 요 며칠 게더에서 만나는 사람마다 나와 비슷한 구렁에 빠져있는 모습을 보고 있다. 개인적으로는 어제가 여러모로 자괴감도 들고 의문도 드는, 3주간의 일정 중 가장 힘겨운 하루였다고 생각했는데, 아니나 다를까 다른 사람들도 같았는지 옆 조에선 벌써 하차자가 나왔다. 내가 여기서 어떻게 이겨내는지에 따라 나의 다음 주가 바뀌겠지... 힘내서 버텨보자~! 아직 이번 주는 만으로 이틀이나 더 남았고, 나는 어떻게든 할 수 있을 것이다...!