오늘은 KONKRIT 홈페이지 클론 코딩을 진행했다. 전반적으로 다행스럽게도 클론 코딩을 진행하는데 있어서 무리는 없었고, 그래도 기본적인 부분을 반복적으로 연습해서인지 연습했던 부분들에 있어서는 이해도 전보다 잘되고 손코딩도 빠르게 따라갈 수 있어서 도움이 많이 되었다는것을 느꼈다. 하지만 역시나 쉽지만은 않았다.
2차함수가 나오고 코드 안에 코드가 들어가는 내용들이 나오기 시작하면서 머리가 복잡해지고 어려워지기 시작하자 집중력도 많이 떨어졌다.
아직 전부 배운게 아니기 때문에 내일의 수업도 열심히 들어야겠지만 과연 강사님이 마지막 과제를 주셨을때 내가 잘 해낼 수 있을지 의문이 드는건 어쩔 수 없다.
일단은 오늘 어려웠던 부분들에 대해 정리를 해보고 아는 부분에 대해서는 기록을 남겨보도록 하겠다.
✅ 어려웠던 부분들.
-
1~10번까지 NFT를 페이지에 가져오는 코드.
-
2차함수와 마찬가지고 (p)인자를 받아온다. 그 이유는 페이지를 기준으로 21~30번 또는 31~40번까지 알기위해서는 page라는 값이 있어야하기 때문.
-
for문을 사용해 이전에 사용했던 반복문과 마찬가지로 (let i = 0; i < 10; i++) 코드를 작성.
-
const tokenId = i + 1 + (p - 1) * 10;
-
토큰아이디를 가져와야 하는데 1페이지면 1번부터 10번까지 NFT를 가져와야함.
-
i가 0부터 시작하기 때문에 +1 을 하여 가져옴. 그게 1번~10번이 됨.
-
여기서 2페이지 또는 그 이상의 페이지로 넘어갔을때 * 10씩 해줘야함.
-
근데 앞에 (p - 1)이 있는데 1page의 경우 (1 - 1) = 0이되고 * 10을하면 0이 되기때문에 0~9까지의 1page를 의미하게 된다.
-
2page의 경우 (2 - 1) = 1이되고 * 10을하면 10이 되기때문에 앞에 i+1과 합쳐 11~20까지의 2page를 의미하게 된다.
-
3page의 경우 (3 - 1) = 2이되고 * 10을하면 20이 되기때문에 앞에 i+1과 합쳐 21~30까지의 3page를 의미하게 된다.
-
결론적으로 i + 1 은 페이지에 있는 NFT의 뒷번호를 의미하고, (p - 1)*10 은 NFT의 앞번호를 의미한다. 그래서 33번째 NFT가 나온다면 4page를 의미하게 되는것이다.
-
-
NFT를 조회해와야하는데
${process.env.REACT_APP_JSON_URL}/${tokenId}.json코드로 가져올 수 있다.
-
-
-
받은 인자가 page이기 때문에 이벤트위치에 p를 작성.
-
onClickPage는 페이지를 클릭한 인덱스번호이기 때문에 아래 setSelectedPage(p);에 넣어줌.
-
(i + 1) 이 값이 (p)에 들어갔다고 생각하면됨.
-
1차함수에 인자를 넣고싶은 상황이 생겼을때 2차 함수를 사용.
-
onClick에서 값을 부여할때 보통 2차함수를 많이 사용. 이렇게 사용하지 않으면 값을 전달할 수 없음.
-
인자를 통해서 함수를 재활용할 수 있게 해야하는데 onClick안에서 쓰는 함수는 함수 자체로 1차함수를 가지고 있어서 인자를 내려주기 위해서는 함수의 차수를 올려줘야한다.
-
-
반복문을 사용해 NFT 갯수에 따라 페이지가 생성되도록 하는 코드.
-
let i = 0 은 시작하는 값, 즉 0을 의미
-
< page는 해당 페이지 갯수 이하까지를 의미
-
i++은 얼마씩 증가할 것인지에 대한 의미
-
i는 0이기 때문에 +1을 하면 1페이지가 됨.
-
i+1 과 selectedPage가 같음이 참이면 화이트텍스트, 거짓이면 그레이텍스트를 노출하도록 함.
-
for문도 map함수처럼 사용이 가능.
-
-
발행된 NFT를 기준으로 페이지를 나누기 위한 코드
-
setPage로 useState를 만들고, response가 숫자가 들어오지만 타입은 문자이기 때문에 parseInt를 사용한다.
-
1~10번까지 하나의 페이지이고, 11번부터 20번까지 하나의 페이지.
-
위 내용을 토대로 이미지에 있는 숫자를 예로들어 표현해보자면 10이라고 가정했을때 10 -1 = 9 / 10 = 0 + 1 = 1 이라고 계산이 되는데 이렇게 값이 도출된 이유는
- 10(1페이지) -1 = 9(값) / 10(2는 내가넣은 임의의 수이고, 한 페이지당 10개이기 때문에 10으로 나눔.) = 0(9를 10으로 나누면 몫이 0) +1 = 1(현재페이지) 즉, 이 식을 토대로 몇번째 페이지에 위치하는지를 구분할 수 있도록 한다.
-
-
소수점이 나오지 않도록 parseInt로 한번 더 감싼다.
-
BTC, ETH, MATIC을 내 페이지에 순서대로 가져오기 위해서 작성된 코드.
- Symbol로 각각의 약어를 작성하고 price에 각각의 response.data를 가지고 오도록 작성 되었다. []배열안에 번호는 각각의 순서.
🌜하루를 마치며..
감기때문에 어제부터 컨디션이 너무 않좋다. 수업에 집중하려고 노력하지만 목도 너무 아프고 숨쉬기도 불편해서 아무래도 힘든게 사실이다. 병원을 갔다와야 빨리 나을텐데 수업내용을 놓치기도 싫고..
일단 버티는데까지 버텨보고 너무 힘들면 잠깐 시간을 내서라도 병원에 갔다와야겠다.
