15) 깊은복사! 얕은복사 ! 가 뭔데?! 무한스크롤 / react-infinite-scroller/ updateQuery를 사용하자 Code-Camp FE 6기

^^한문제 차이로 저번달에 봤던 Sqld 시험 떨어졌네? 근데 정신단련이 하도 되어서 이정도 쯤은 가볍게 성공을 위한 발판삼고 오늘도 레츠고 ~

• 오늘이 지나면 술술읽힐 오늘 배울것 요약 !
  오늘 수업은 한 단계 레벨업을 할 수 있는 중요한 주제들이 포함되어 있었어요!
  객체/배열의 얕은 복사와 깊은 복사에 대해서 알아봤죠!?
  객체와 배열은 값을 주소에 저장시켜 준다 했습니다! 따라서 복사를 위해서는 새로운 저장공간을 만들어 복사할 내용을 새로 저장시켜주어야 했습니다! 그 안에서 값을 한번에 넣어줄 수 있는 스프레드연산자가 있었죠! 이 스프레드 연산자를 사용하여 복사하는 방식을 얕은 복사 방식이라고 했습니다! 반대로, 깊은 복사는 값을 JSON.stringify()을 사용해 문자열로 변경하고 다시 JSON.parse()로 객체 변환을 시켜 새롭게 만들어 준다는 개념이 였습니다! 하지만 이 깊은 복사는 처리 과정에서 시간이 좀 걸렸죠? 이를 해결해 줄 수 있는 라이브러리 lodash 또한 알아보았습니다! lodash는 효율적이고 빠르게 사용 할 수 있는 기능 모음 라이브러리였습니다!
  스프레드연산자는 굉장히 코드를 단축시켜 주었어요! 대괄호를 사용한 값=>키 변경을 활용해 state를 하나로 묶어주고, 함수도 하나로 묶어줌으로써 코드를 굉장히 짧게 작성할 수 있도록 도와줬었습니다! 이를 활용하면 우리가 지금까지 작성한 코드를 리펙토링 할 수 있겠죠!?
  지금 당장 기존의 코드를 모두 변경하는 것은 어려우니, 앞으로 만드는 부분! 혹은 중고마켓부터는 꼭 적용해 주시길 바랍니다!
  어제에 이어, 페이지 처리에 관해 무한스크롤 사용에 대해서 배웠습니다!
  라이브러리를 사용하여 적용시켜주었죠!? React-infinite-scroller 였습니다! (yarn add react-infinite-scroller)
  hasMore가 true일때 즉, 더 가져올 데이터가 있을 경우, 스크롤을 내리면 실행되는 함수 loadMore가 실행되는 형식이였습니다!
  여기서 우리는 loadMore에 fetchMore를 활용한 함수를 실행시켜주었고, 이 안에서 우리는 스프레드연산자를 활용했죠!?
  오늘 배운 무한스크롤을 자유게시판 댓글 부분에 적용시키면서 한번 더 흐름을 이해하시는 것이 중요합니다!

-good morning self study

오늘 & 주말에 해야할일 정리 !
-게시글 전체 - 배너css
-게시글 등록페이지 (모달 변경하기 )
-게시글 상세조회페이지 (삭제 버튼,내부 css 루피, 배경, 글씨체 바꾸기, 툴팁설정, 댓글수정넣기)
-게시글 수정페이지 (버튼 변경, 수정내용 없습니다)
-게시글 목록페이지 - css 추가, 베스트게시글, 페이지네이션 css조정
-+추가적으로 타입스크립트 오류 수정, any...고치기 !

-알고리즘 복습(다른사람들 풀이보고 삼항연산자 특히 익히기)& 다음주 문제 풀어보기

오늘의 첫번째 알고리즘 문제 나의 방법 !
새로운 메서드 - Math.abs
새로운 메서드를 사용해 보았지만, 조건이 하나하나 늘어날수록 더러워진 내코드 ㅎ
오늘 수업으로 리팩토링 하는거 잘 봐보쟈

오늘의 두번째 알고리즘 문제 나의 방법 !
새로운 메서드 - Math.sqrt, Number.isInteger
와 오늘 두문제 다 맞췄다 하지만 뭔가 찝찝하다 ㅋㅋㅋ일단 모든 메서드를 검색을 통해 알아냈으며,,
코드가 굉장히 더럽다...

- 포트폴리오 리뷰

사실 나는 귀찮아서 페이지네이션을 그냥 fetchboard 밑에 가져다가 붙였지만,
페이지네이션은 많은 화면에서 쓰이기 때문에 componentsdml commons에 넣어서 import해서 쓰자
그런데, 페이지 네이션이 웹 서비스 디자인마다 달라질수 있으니까 한번 만들때 container presenter.. 나눠 놓는 습관을 들이자 !
(다양한 디자인의 버튼, 페이지네이션 등등 모아둔것을 스토리북이라 한다 ! 디자이너들도 같이보고 우리회사에 어떠한 것들이 있고, 추가해야하는것들도 상의할 수 있고, 디자이너는 이를 바탕으로 figma에 올림)
요러케 요렇게 나누는거랑 스토리북 예시!
https://brunch.co.kr/@kmongdev/17
스토리북은 yarn add storybook이면 다운받아진다

어제 이해하느라 은근 시간썼던 startpage+ index 역시 자주보니까 걍 외워졌다
startPage는 기준페이지 ! -10 +10 해서 refetch하는거여따
그리고 난 이게 잘 이해가 안가는데
이게 아닐때로 바꿔주거나 부등호를 >로 바꿔주는거였는데 아직 완벽히 이해가 안간다 다시 잘 생각해보자
activedPage라는 값을 줘서 현재 클릭된 페이지 값을 바꿔주는 state를 다시 만들었는데
나는 이렇게 안했던거 같은데 !! 다시 봐보자 그리고 이 방법도 해보자

현재 보여지는 페이지가 startpage + index자나
activePage를 페이지 이동버튼을 누를때마다 바뀌어주고 , 현재 페이지와 같으면! 이라는사실을
isActive라는 데다가 넣어주고. emotion가서 바꿔주면 된다
? true : false 쓰면 타입스크립트에서 필요없다고 지우라고 빨간줄 뜬댜
refetch 타입은 apollotype에서 제공해준다 타입스크립트에서 알려준거 복붙하면 된다

-얕은 복사 / 깊은 복사 (Shallow-Copy / Deep -Copy)

객체와 배열이 복사가 이상해 ..
예시를 보는게 빠르니까 !
난 여기서 profile2만 바꾼건데 , 왜 profile도 바뀌지 ?
객체랑 배열을 복사하려면 우째야 하지 ?
사본을 바꿨는데 원본도 바뀌고 그러네 ? 복사가 아닌거잖아 공유잖아 !
그 이유는 요런 느낌이어서 그래! 이런걸 깊은복사라고해 !
얕은복사를 하면 복사본만 바꿀수 있어! 사실 복사라는건 없다 그런개념은 없지만, 최대한 비슷하게 해보면..
{} 이거는 주소에 저장을 한다는 뜻인데, 새로운 주소를 만들어서 저장을 해주면 된다 !
이러면 값을 가져온거야 !

근데 복사라는건 귀찮아서 가져온건ㄷㅔ, 더 길어졌는데 코드가 ? ...

그래서 나온게 스프레드 연산자 !!!!

-스프레드 연산자

위에서 이어지는 내용입니다

근데 객체 안에 객체는 어쩌지 ? ?
알맹이만 복사를 하게 된다 ! 그래서 객체안에 객체를 바꾸니까 걔는 또바껴...ㅠ짜증난

아래처럼 ...해서 쓰는건 얕은복사라고 한다 !

:Shallow-Copy

그럼 우리는 깊은복사를 해주면 된다 !!
깊은 복사는 우찌하지? 그럼우리는 전체를 문자열로 해놓고
백틱을 이용해서 JSON.parse("")안에 담아주면 똑똑한 사람들이 아예 새로운 객체를 만드는거라고 표시해놨다 ! \" 는 가짜문자열이라는 뜻 !
JSON.stringify() -안에 있는 객체를 string으로 바꿔주는것 그냥 다 텍스르가 된거야 !
다시 얘를 JSON.parse() 하면은 안에 있는걸 다시 객체로 바꿔주는건데,
아까한거랑은 아예 다른 새로운 객체를 복사한것이다 !
예를 보면 좀 더 빨리이해할수 이따

콘솔에선 이해가 너무 잘가는데, vscode가면 나 약간 힘들어하겠지 ? 개념 잘 잡고가자 !

얕은복사는 객체가 없을때 쓰지만 안에 이렇게 복잡하게 있으면 깊은복사를 해주면 된다 !
깊은복사는 좀 느리고 번거로워서 , 깊은복사를 따로 저장해놓은 라이브러리가 있다 ! !

https://www.npmjs.com/package/lodash
여기는 뭐냐면, 있으면 좋을것 같은 기능들을 모아놓은 것들이다.
그중에 cloneDeep 이라는거가 깊은 복사이다
옛날에는 저렇게 썼는데 두개는 같은말이다

lodash 같은경우에 import해서 를 쓴다
.cloneDeep()이라고 쓸 수있기 때문에 !
<사실 여기 이해 잘 안간다 >

-배열의 복사는 우짜지 ?

배열도 객체랑 똑같이 작동한다 !
요거는 배열의 얕은복사 !

댓글 수정하기 힌트 !

• 일단 수정하기를 누르면, 그 화면만 바뀌어야 한다
  -바꾸는데는 두가지 방법이 있다

1. 삼항연산자 조건으로해서, 174페이지 안보여줬듯이,
   한개의 열만 해당되는게 다르게 보이게 하면 된다
   우선은, 수정하기 화면이 2가 아니면 위에걸 보여주고, 2이면 아래 수정하기화면입니다를 보여줘라!
   이렇게 보면 이해가간다
   이러면 그냥 2가 바뀌어있으니까. 버튼을 누르면 바뀌도록 버튼을 만들어서 함수를 만들어주자
   그리고 state를 이용해서 현재 클릭한 값을 넣어주고 함수로 바꿔서 보여주게 map 뿌린곳에 조건문 넣어주면 되지 !

얕은복사라서 기존에 이미 바뀌어버린 값이라 setstate를 못넣는다는것 이해가 안간다....

근데 배열이라서 우리가 []안에
false 10번써야하니까 밑에 map 뿌려주는데를 컴포넌트로 만들어서 state를 공유하는 식으로 하자 !
와 여기 이해 안간다......ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ복습 .....>!!!!!!!!

-추가적으로 알아둬야 할 부부 ㄴ

const를 써서 {}하면 주소값을 저장하는거기 때문에 새로운 키값을 다시 할당하려하면 그건 안된다
또, 이거 안되는건 알지 ?
그래서 스프레드 연산자를 쓴다

이원리를 사용해서 해야하는 부분이 무한스크롤 !!!
댓글 무한스크롤...............하 어려울것 같은데 집중해보자 아름

-react infinite scroller

스크롤 형태의 페이지네이션 만들자 ! Infinite-Scroll

우리 기존에 10개의 댓글이 있는데 스크롤을 내리면 다음 10개를 받아오는 형식으루..!!

이전에 fetchboardcomments하면 10개 나오고, 그 다음도 변수에 저장을하고 두개를 합쳐서 보여준다치면 스프레드 연산자 !!
fetchmore(updateQuery를 작성할수 있게 된다 )을 날리면 추가퀴리 날려줘라는게 날라가게 되는데
어떤 쿼리를 패치할것인가 ?
variables page: 2page를 보여줘 라는 뜻 !
updateQuery: prev는 usequery를 사용해서 받아온 이전쿼리를 뜻한다
지금 추가적으로 패치 쿼리해서 받아온거를 fetchMoreResult에 들어가게 된다
요 그림이 이해가 가니 ? 어려운거 빼고 봐바 !!

-return을 가지고 updatequery가 진행되면서 화면도 바뀌게 되는거다
-위에꺼는 if(!f?fs. )추가로 더 받아와 근데 없어 ? 그럼 이전꺼 보여줘 하는 부분
-밑에는 있으면 추가꺼 더해서 주고 없으면 이전꺼만 보여줘 부분이 if ~ return ~return부분이다
-page: 부분은 다음페이지 부분(현재페이지 나눠서 더하기 1해주면)
저 내용을 스크롤 내렸을때 함수 실행시켜주는 부분에 적어주면 된다 !
라이브러리를 소개하지

npm 페이지의 React Infinite Scroller
혹은 React Infinite Scroller component 를 사용하면 되는데 사용방법은 비슷해서 둘중 아무거나 사용하면 된다 !

저기 item 부분이 너가 그리고싶은 map을 넣으라는 뜻
그래서 여지껏 해줬던거와 똑같이 복붙해주고
타입스크립트도 yarn ~ --dev 해주고 !
loader= 부분은 스크린이 띄워지는걸 기다리는동안 ..loading을 띄우겠다
loadmore = 더 있으면 이 함수를 실행시키겠다
hasmore = 계속 받아오냐 ?
기존에 10개 했었는데 Fetchmore은 추가로 10개를 더할게

저기 usewindow라는 애는 전체 화면의 스크롤을 의미하고
(false니까 전체 스크롤은 지금 안쓰겠다라는 뜻이다 )
스크롤 감싸는 태그에 overflow auto하면 된다

- 알고리즘 수업

처음숫자부터 마지막 숫자까지 더하는것은 반복문으로 쉽게 해결할수 있기 때문에 그걸 지정해주는게 더 편하다 !
reduce.. 난 절대 이해를 못하네...개념부터 잡고 봐보자 ㅜ

예외처리 없는 reduce 처리방법

두번째 문제 제곱근을 찾는 반복문 ! 신박하다 기억해둬야지

거듭제곱연산자 추가적으로 알아두자
2의 6제곱을 하려면 2**6 하면 됨 !!!
메서드는 Math.pow(2,6) 이렇게 쓰면 된다
while문으로 조건식 중단할때 쓰는방법인데 진짜 간단한것같다 !!
익숙해지장 for문보다는 사용횟수가 적지만! 쓰일때는 이렇게 간단하다