slack 실시간 채팅(3)

children

children을 사용을 하면 Workspace 안의 태그를 children으로 props 할 수 있게 된다.

 

data의 값은 처음에는 false인데 로그인이 되면서 revalidate()가 실행이 되고 , data의 회원 정보가 들어간다.

이때 리 렌더링이 일어난다.

 

 

return은 항상 hook보다 아래에 있어야한다.

Mutate    vs     revalidate

revalidate는 서버에 요청 다시 보내서 데이터를 다시 가져오는것 

Mutate는 서버에 요청 안보내고 데이터를 수정하는 것 

백엔드에서 response.data(회원정보)가 오는데  revalidate()가 실행될 필요가 없다.

false까지 적어줘야한다.

 

mutate 의 또다른 사용방법

위와 최상위 swr 에서 import를 할 경우에는 mutate 는 주소인 key 값과 value 값을 함께 사용하면 된다.

 

Optimistic UI

먼저 사용자의 의견을 반영하고 서버로 요청을 보내는 것

 

false 면 서버에 요청없이 변경하는 것

 

 

dedupingInterval

 

컴포넌트마다 ​SWR이 있다면 동시에 서버를 여러번 호출 하게 됨을 걱정할 수도 있다.

그것을 방지하기 위해 dedupingInterval이 라는 것이 존재하고 위 같은 경우 10초동안은 서버에 요청을 보내지 않고 캐시에 저장된 정보를 사용한다.

 

 

SWR fetcher

fetcher는 get 으로 만 사용할 수 있는 것이 아니다. post, put delete 모두 가능하다. 그리고 중요한 점은 그렇게 된 정보가 data에 저장된다는 것이다.

 

같은 주소에 다른 fetcher를 보내고 싶다면 위와 같이 꼼수?를 사용할 수 있다. 서버는 #123은 없애버리기 때문이다.

 

SWR을 사용할때,

1. 비동기에 얽매이지 말자.

2.

response.data 만 보낼 수 있는게 아니라고 하셨는데 아직 잘 와닿지가 않는다.

 

 

​랜덤 이미지 gravatar

 

​​

 

그런데 매번 npm i 를 할떄 @types 까지 같이 해줘야할까 확인하는 방법은 없을까?

 

npm 사이트에서 검색시 DT라고 되어있으면 types 까지 설치해야한다.

 

TS라고 되어있으면 @types 안해도 된다!

 

다시 gravatar 설명으로 넘어가서 

retro는 깃허브 처럼 기 초록색 사진 알지? 그거처럼 나온다.

 

http://en.gravatar.com/site/implement/images/

Gravatar - Globally Recognized Avatars

이곳에 더 많은 스타일이 있다.

나중에 필요할때 보면 좋을 것 같다.

 

 

Layout 과 Page 

layout는 화면에서 공통되는 부분을 의미한다.

page는 이제 바뀌는 흰 부분이 될 것이다.

 

 

Workspace는 layout을 의미하고 이 Workspace내에서도 switch를 사용해서 페이지를 나누게 된다.

 

위와 같은 식으로 말이다. 이때 코드 스플리팅도 가능하다.

 

이때 주의해야할 점은 layout의 path가 /workspace이고 

workspace내의 페이지의 path 들도

/workspace/(페이지이름) 이런식으로 계층적으로 이루어져야한다.

 

 

 

백엔드에서 보내지는 data

 

코드설명

 

85 - map을 사용하기 때문에 key 값이 필요하다. 

86 - name을 가장 맨앞의 첫 문자를 slice하면 대문자로 바꾸어준다.

아래와 같다.

 

코드 설명 2

11 - stopPropagation 함수를 선언한 이유는 21 번 라인에서 onClick이 발생하면 이벤트 버블링이 발생해서 19번 라인의 onClick도 실행되어 버린다. 이를 막기위해서 20번 라인의 stopPropagation이 사용된다.

 

 

타입스크립트 에러

 

타입스크립트에러는 보통 TS이다. 나는 () => void 로 잘못된 타입을 선언하였고 타입스크립트가 (e: any) => void로 고쳐라고 말해준다.

 

 

 

Input이 있다면?

input은 보통 state로 상태관리를 하는데 input을 사용하는 화면은 따로 컴포넌트를 분리시켜주는것이 성능에 좋다.

 

 

trim

https://deeplify.dev/front-end/js/remove-space

[Js/자바스크립트] 공백(space) 제거 하는 방법: trim, replace

위 사이트의 내용입니다.

trim을 이용한 앞 뒤 공백 제거 예제

var text1 = ' test ';
var text2 = '\ttest\t';
var text3 = '\ntest\n';

text1.trim();   // test
text2.trim();   // test
text3.trim();   // test

위 코드는 모든 앞 뒤의 공백을 제거할 수 있는 예제입니다.

문자열 앞 뒤에 공백이 중복되어 여러 개가 있어도 모두 제거됩니다.

 

 

 

console.log , console.dir , console.trace

MDN에서 글 캡쳐해왔습니다.

라고 하는데 뭔가 와닿지 않는다.

 

console.trace는 굉장히 .. 좋은것같다 왜 몰랐을까.. 

 

 

react-toastify