블록체인 TIL-7Week-47Day(마지막 React)

오늘 마지막 React 수업이 끝났다. 뭔가 홀가분하면서도 아쉬운마음이 드는걸 보면 한달이라는 시간동안 React가 나에게 뭔가 더 깊에 들어온 느낌이 들었다. 아직 2달넘게 블체스가 남았는데도 뭔가 끝나가는 느낌이 드는걸 보면 아직 정신을 못차렸나보다 ㅎㅎ

오늘은 개인 NFT Page를 만드는 프로젝트를 마무리했다.
그제께 오후부터 오늘 오후까지 정말 그동안 배웠던 부분들을 다 적용해보며 은찬매니저님의 큰도움을 받아 그래도 개인적으로는 만족스럽게 마무리할 수 있었다.
그래서 오늘은 내가 했던 프로젝트의 복기 겸 마무리를 하는 시간을 가져볼까 한다. 그리고 내가 구현해낸 부분과 문제가 있었던 부분들, 어떻게 해결했는지에 대해서도 기록을 남겨보도록 하겠다.

💻개인 프로젝트(복기 & 기록)

✅전체적인 프로젝트 이미지.

• 메인페이지 header, intro, 상단 이미지

• 메인페이지 하단 이미지

• 디테일페이지 이미지

✅복기 & 기록.

• 먼저 위 이미지와 같이 series NFT와 special NFT로 카테고리를 따로 만들기 위해서
  필수 요소로 필요한 코드들을 새로 만들기 시작함.

• App.jsx, main.jsx, nfts.jsx에서 필요한 코드들을 똑같이 만들어주었고, datail, nftCard는 기존의 코드와 분리를 해야하기 때문에 따로 components를 만들어주었다.

• 단순히 코드만 복붙하는것이 문제가 아니라 그 안에서도 오류가 굉장히 많이 발생하였고, 오류를 하나씩 해결해 나가면 코드를 짜나갔다.

  

• 카테고리를 만들어 다른 이미지를 넣기 위해서는 json주소와 image주소도 달라야했고, 스마트컨트렉트 주소와 ABI도 달라야해서 그것도 다 만들어 주었다.

• 환률이 실시간으로 업데이트 되도록 setInterval을 사용해 4초에 한번씩 업데이트 되도록 만듬.

• 새로고침 할때마다 새로운 이미지가 뜨도록 코드가 짜여져 있었으나 기존에 강사님 이미지가 아닌 내가 만든 이미지를 넣고나니 이미지가 뜨지 않는 문제가 생김.

• 오랜시간을 찾다가 알고보니 기존에 강사님이 만들어주셨던 이미지는 1000장이여서 랜덤함수를 1000장으로 기준을 잡아두다보니 35장만 만든 내 이미지 나올 확률은 희박한 것이었음.
• 그래서 1000장이 있던 위치를 34장으로 바꿔줘서 내가 가진 35장 이미지중에서 랜덤으로 등장하도록 변경함.
• 다행히 변경하고 이미지가 잘 노출됨.

• 메인페이지에서 series NFT와 special NFT가 같은 이미지가 생성이 되었는데 special NFT가 이미지가 불려오지 않는 문제였던것을 확인했음.

• 알고보니 pinata에서 무료계정은 사용하기가 어려운 부분이 있었고, 문제가 많아 어쩔수없이 강사님께 도움을 요청해 해결하였음.(나는 다른사람들보다 이미지 배포를 여러번 요청드려서 강사님께 정말 죄송하고 감사했음.)

• Intro 부분에 있는 이미지에 setInterval을 똑같이 이용해 순차적으로 이미지가 변경되도록 만들었음.

• 다만, 위에있던 환율과 마찬가지로 접근을 하였으나 오류가 생겼고, 오류를 해결하면서 문제의 원인을 파악할 수 있었음.

• 먼저 ranNum 함수를 useState로 만들어주고, useEffect에 기존에 만들어져있던 랜덤함수를 넣어주었음. 이렇게 작업했는데도 오류가 있어서 무엇이 문제일까 고민해봤음.

• 알고보니 useEffect에서 랜덤함수를 불러오고 있는데 위에 imgSrc와 충돌이 생겨서 작동을 하지 않는다고 생각하게 되었음.

• 그래서 imgSrc를 useEffect 아래로 이동시켜주었더니 오류가 해결됨.

  

  

• series NFT는 해당 이미지에 맞게 detail 이미지까지 잘 가져왔지만 special NFT는 detail 이미지를 series NFT의 것으로 가지고 옴.

• 이 문제를 해결하기 위해 은찬매니저님과 새벽1시까지 머리를 싸매고 찾아보다가 결국 아주 허무하게 해결하게 되었음(그렇지만 굉장히 뿌듯했음.)

• detail 이미지에 영향을 주는 코드들을 확인해보니 다 뒤에 숫자2가 붙어있는것을 확인할 수 있었음. 아무래도 새로운 카테고리 하나는 더 만들다보니 처음에 간단하게 2를 붙여 만드는게 편해서 그렇게 했음.

• 하지만 간과했던점이 이 부분을 이상하게 생각하지않고 그대로 진행했던게 detail 이미지를 못가져오는 이유가 되었음.

• 아직도 왜인지는 이해를 못하겠지만 일단 다른 부분들은 숫자2를 뒤에 붙이거나 다른 이름으로 만들어 확실히 다른카테고리임을 구분해줘야했음. 하지만 useState나 useParams같은 경우 같은 함수를 사용해도 아무런 문제가 되지 않는것을 확인할 수 있었음.

• 그리고 가장 중요한 부분은 detail 이미지를 props로 가져오는 부분에 변경해야하는 부분이 있었는데 바로 그냥 "/"가 아닌 "/a/"처럼 만들어주는것이었음. 뒤에 무언가를 붙이는게 아닌 앞에 만들어 주는게 포인트였음.

• 아직도 위 뒤에 붙이면 안되는지에 대해서는 확실한 이유를 찾지못함. 어쨌든 문제를 해결해서 special NFT detail 이미지도 잘 가지고 오게 해결했음.

  

  

  

• detail 페이지에 새로운 기능을 만들기 위해 제안하기, 구매하기 버튼을 만들었음.

• 단순히 버튼만 만드는건 의미가 없다고 생각하고 이걸 작동시킬 방법이 뭐가 있을지 고민해봄.
• 그래서 제안현황을 만들어 제안버튼을 눌러 제안현황에 제안된 내용일 기록되면 좋겠다는 생각을 하게됨.(아기사자를 하며 은찬매니저님이 알려주신 차크라UI로 만들었던게 생각남.)
• 하지만 이 부분이 생각보다 구현이 복잡하다고 느낌. 단순히 input을 만들어서 거기에 입력해서 구현하는게 아닌 제안버튼을 눌러 창을 만들고 그 창에 input을 할 공간을 만들고 입력하면 그 입력값이 제안현황 안에 들어와야하기 때문이였음.
• 은찬매니저님께 다시 헬프요청을 하니 은찬매니저님께서 테일윈드로 만들어진 코드에 차크라UI를 섞어보면 어떻냐는 기이한? 아이디어를 주심.
• 나는 그게 가능하냐고 물어보니 가능하다고 말씀하심.
• 그래서 아직 미숙한 나와함께 아기사자에서 은찬매니저님이 알려주신 내용을 토대로 하나씩 해보기 시작함.
• 당연히 문제에 직면했고, 어떤부분은 차크라UI 코드를 써서 어떤부분은 테일윈드에 쓰는 코드여서 연결이 안되는 부분들이 생겼음. 하지만 생각보다 빨리 해결을 했고, 서두가 길었으나 해결방법과 적용된 부분들을 작성해보겠음.

💡 이런 혼종이 만들어짐. (차크라UI와 테일윈드는 같이 사용이 가능!)

• 1) 제안하기, 구매하기 버튼 만듬

• 2) 제안현황 만듬.

• 3) Modal.jsx를 만들어 Modal을 이용해 그 안에 input값을 넣은 공간을 만들고 입력창을 만듬.

• 4) 제안현황에 입력이 되도록 연결을 하고 내용이 지워지는게 아닌 계속 쌓이도록 구현.

• 5) Modal에서 엔터를 누르면 입력이 되고, 입력을 하면 Modal창이 꺼지도록 구현.

  • 5-1) form태그로 input과 button을 감싸고, onsubmit을 만들고 그 안에 onClickSuggestion을 넣어줌.

  • 5-2) onChage를 만들고 안에 e.target.value를 작성해줌.

  • 5-3) 마지막으로 아래 value를 만들고 중괄호 안에 name을 넣어줌.

• 6) 상위에 있는 onClickSuggestion에 있는 소괄호에 이벤트 (e)를 넣어주고 아래 e.preventDefault를 작성해줌.

• 7) 마지막으로 입력후 창이 닫히게 하기 위해 차크라UI 코드인 onClose();를 써줌.

🌜하루를 마치며..

위에 작성한 내용 말고도 변경하거나 디테일하게 구현한 내용이 많지만 크게 기억나는 부분들만 정리하여보았다. 이번에 개인 프로젝트를 해보며 배운것도 많고 특히 은찬매니저님이 알려주신 부분들이 많아서 정말 많은 도움이 되었다. 그리고 강사님도 자신이 도와줄 수 있는 부분에 항상 최선을 다해 도와주시는것 같아 항상 감사한 마음이다. 아직 무에서 유를 창조하는건 굉장히 어렵지만 그래도 이번에 열정적으로 프로젝트를 해보며 코딩에 또다른 재미를 알게된 것 같아 기쁜마음도 있었다. 아무래도 어렵다보니 재미가 점점 없어진다는 느낌도 받았어서 한편으로 걱정이였는데 그래도 다시 재미를 갖게 되어서 다행이라는 생각을 했다. 앞으로도 혼자서 이것저것 만들어보도록 해야겠다. 그리고 오늘이 성현강사님과 하는 React 마지막 시간이였다. 물론 헤어지는건 아니지만 한동안 못본다고 생각하니 뭔가 마음이 아련하고 영영 못보는것 같은 느낌이였달까? ㅋㅋㅋ 뭔가 블체스가 다 마무리되는 느낌이였달까 그런 느낌이여서 기분이 이상했다. 하지만 정신을 차려야 하는게 다음주부터는 은찬매니저님이 그렇게 말씀하셨던 solidity를 시작하게 된다. 극악의 고통을 느끼게 될거라고 하던데 벌써부터 긴장이 된다. 그리고 그 시간동안 배웠던 React를 까먹게 될까봐 그것도 걱정이고.. 어떻게 해야할지 모르겠지만 일단은 뭐든 부딪혀보는게 중요하다고 생각한다. 주말동안 잘 정리를 하고 민서강사님을 맞이할 준비를 해야겠다.