[은버지] React로 Pagination 구현하기 - 회고록-

구현 한 내용 및 주요 회고                 

1. pagination 게시물 사이트에 가면 게시물을 넘길때 번호 클릭하고 그러는 것

라이브러리도 있지만 실제로 구조에 대해서 구현을 직접해보는 방식을 택해서 하나하나 뜯어보게 되었다.

 

2. axios를 이용해서 API 사용해 보기 (with postman)

 

 

---

잘 안된점

 

1. css 건드릴 대 main.jsx 다 삭제를 하고 index.html도 이것저것 건드렸었는데 사실 이거 건드리면 안되는 거였다.

main.jsx를 건드리면 안되는 이유 root라는 놈이 담긴 index.html의 <div>가 있는데 이놈자식을 main에서 import 해서 document~~로 실행을 하고 있다 그래서 건드리면 안됨

 

2. API연결하면서 정보를 불러 올때 몇가지 트러블슈팅이 있었다

API설정해서 받아올 값은 6개인데 10개가 뜬다

알고보니 params나 기본적으로 세팅해야되는 값이 잘못되어있었다 하나하나 사용하면서 어떻게하면 더 잘 사용할 수 있는지 정리를 해봐야겠다.

 

3. vite를 이용하니 props가 이상해...

보니깐 props로 보내는 url이 잘못되었다는 에러가 있는데 eslint에 rule을 추가하면 된다는데 에러뜨는 props마다 계속 뭔가 주석처리로 끄적끄적 적는데 이게 맞는건지 잘 모르겠지만 이렇게 해결하면 된다.

 

4. map함수 앞에 (array?.map() ) 이렇게 되어있는 이상한 구조

이게 보니깐 &&연산자처럼 앞에 array가 true일때 map을 실행하는 그런구조로 되어있나보다

 

 

---

배워야 할 내용

• redux 사용법 (전역상태 관리를 제대로 하지 않다보니깐 props와 state가 너무 무분별하고 구분하기가 힘들다는 느낌이 든다
• css 관리 style component를 배워서 css 관리에 대해서 좀 더 나은 모습을 보이겠다 실제로 지금은 index.css에 넣다 보니 내가 보기도 힘들다
• 파일정리방법 민버지와 은버지의 github를 훔쳐봐서 구조에 대해서 어떻게 나누는게 좋은 지 대충 감이라도 잡아야겠다.
• custom Hooks 실제로 책을 읽으면서 이게 많이 쓰일까 싶어서 간단히 보고 넘어갔었는데 진짜 많이 쓰이고 있는거 보니깐 이거부터 다시 배워야겠다.

 

---

고쳐야 할 내용

실제로 배운내용을 많이 써먹지 못했다 사실 책을보면서 redux 및 각종 hook을 다루는 법에 대해서 공부를 했지만 실제로 써보려하니 useState 말고는 쓸 수 있는게 없었다.. 공부하면서 좀 더 주도적으로 복습을 해서 사용법을 익히는 것이 시급하다는 것을 느꼈고 뭔가 진도가 나갔으면 그에 대해서 간단하게라도 창작물로써 결과를 남겨야겠다는 생각도 든다.

지금 github에 올린 내용은 ui 구현과 등등 부족한 것이 많기에 완성을 이번주 내로 하고싶다.

 

---

느낀점 한줄

css관련 다루는 기술이 많이 부족하다는 것을 느꼈고 점점 익숙해 질 수 있도록 노력을 해보려 한다. 그리고 잘하는 사람이 엄청 많아서 보면서 열등감 좀 많이 느끼고 분발하겠다!

 

더 많지만 다 적으면 회고록이 너무 무거워지니 다음으로 몇개는 토스..ㅎ

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://luminous24.tistory.com/269