FACTS(사실, 객관) : 내가 한 일
오늘 과제를 제출할 생각이었는데, 어제 팀원분들이 막히는 부분에 대해 공유하기 시작했다
이렇게 SelectPockmonBox에는 6개의 비어있는 li <EmptyBox>가 있는데 selectedPokemon이 생기면 <EmptyBox>를 <PokemonCard>로 변경하는 .. 나는 그냥 단순히 추가만 하는 것으로 넣었던 그 기능..😩
여기에 자극을 받아 context로 리팩토링한 브랜치에 이것까지 수정해보기로 정말 큰결심을 했다
먼저
선택된 카드를 넣어줄 6개의 li를 만들어 꾸며준다.
그리고 이제
여기에 카드가 추가되면 카드를 넣고 아닌건 기존의 비어있는 li를 사용한다! 가 내 계획이고
이 li들을 배열로 만들어서 순회하며 카드를 넣어주는? 거라고 설명해주?셨는데..
사실 잘 모르겠다 배열을 또 어떻게 만들어야하며 이걸 어떻게 돌려야되는지 튜터님께 질문을 했고
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
Array.prototype.fill() - JavaScript | MDN
Array 인스턴스의 fill() 메서드는 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경합니다. 그리고 수정된 배열을 반환합니다.
developer.mozilla.org
이것을 알려주셨다
Array 인스턴스의 fill() 메서드는 배열의 인덱스 범위 내에 있는 모든 요소를 정적 값으로 변경합니다. 그리고 수정된 배열을 반환합니다. 라는 설명인데
const emptyBoxArray = Array(6).fill(null);
이렇게 하면 emptyBoxArray에 6개의 null원소를 가진 배열이 생김
emptyBoxArray = [null, null, null, null, null, null]
이제 이 배열안에 선택된 카드들을 넣어줘야함.
{emptyBoxArray.map(
selectedPokemon ? (
<PokemonCard
key={selectedPokemon.id}
pokemon={selectedPokemon}
onRemove={onRemovePokemon}
isSelected={true}
navigate={navigate}
/>
) : (
<EmptyBox />
)
)}
먼저 이렇게 넣어줬는데 오류가 너무많이뜸
다시 여쭤보고 굳이 emptyBoxArray를 만들지 않아도 된다는걸 알게됨!!
아예 selectedPokemon을 6개 원소의 배열로 만들어 사용하라고 !
그래서 위에 선언했던 emptyBoxArray를 지워버리고
{Array(6).fill(null).map((index) => {
selectedPokemon[index] ? (
<PokemonCard
key={selectedPokemon.id}
pokemon={selectedPokemon}
onRemove={onRemovePokemon}
isSelected={true}
navigate={navigate}
/>
) : (
<EmptyBox />
);
})}
오류는 안뜨고
분명 선택된 카드는 잘 담기고 같은 카드를 한번 더 눌렀을 때 이미 추가된 카드라는 alert도 잘 뜨는데
이 화면에는 추가가 되지 않음!
한참 삽질하다 다시 질문함
너무 감사하게도 코드카타적?으로 쉽게 풀어주셨는데
1. 빈 배열을 만들어야 함
const selectedPokemonWithSixLength = [];
2. 이 빈 배열에는 선택된 카드와 빈 슬롯이 들어가야함.
(선택된 카드는 Dex.jsx에서 이미 6개까지만 가져올 것이라고 했고, 빈 슬롯은 카드가 아예 없는 경우 6개까지 들어갈 것)
(selectedPokemon과 Array(6).fill(null)은 배열이므로 앞에 스프레드오퍼레이터 ... 으로 펼쳐준다.)
const selectedPokemonWithSixLength = [...selectedPokemon,...Array(6).fill(null)]
이제 이 상태에서 만약 카드를 3개 선택할 경우,
이 배열에는 [카드1, 카드2, 카드3, null, null, null, null, null, null ] 이렇게 들어가게 된다.
3. dashboard에 들어가야 하는 갯수(6)에 맞게 배열을 잘라줌.
const selectedPokemonWithSixLength = [...selectedPokemon, ...Array(6).fill(null)].slice(0, 6);
마지막으로 이걸 map으로 펼쳐주면 그럼 길이 6의 선택된 카드만큼 표시되는 대시보드가 된다..
앞에서 한 삽질을 모두 지워주고 selectedPokemonWithSixLength를 맵으로 펼쳐준다 인자도 알맞게 바꿔줘야함!
{selectedPokemonWithSixLength.map((pokemon, index) => {
return pokemon ? (
<PokemonCard
key={pokemon.id}
pokemon={pokemon}
onRemove={onRemovePokemon}
isSelected={true}
navigate={navigate}
/>
) : (
<EmptyBox />
);
})}
ㅠㅠㅠ
FEELINGS(느낌, 주관) : 나의 감정적인 반응, 느낌
안되는 코드만 붙들고 계속 파기만 한게 큰 실수였던 것 같다
저렇게 풀어서 정리해놓으니까 어. 이거 . 알고리즘 풀면서 한 번쯤 해봤을 문제인데 왜 이렇게 어렵게만 생각했는지 모르겠다 설명해주신 튜터님도 알고리즘을 더 많이 꾸준히 하라고 하셨다. .
매일 알고리즘시간에 한 문제 잡고 늘어지고.. 한 문제 잡고 늘어지고.. 했는데 앞으로는 더 많이 팍팍 풀어봐야겠다
FINDINGS(배운 것) : 그 상황으로부터 내가 배운 것, 얻은 것
const arr = Array(6).fill(null)
원하는 길이의 비어있는 배열을 만드는 방법
fill 뒤의 괄호()안에는 null로 아무것도 넣지 않을 수도 있지만, 원하는 숫자, 문자를 넣을 수도 있다!
알고리즘을 열심히 풀자!
FUTURE(미래) : 배운 것을 미래에는 어떻게 적용할 지