Web (45) 썸네일형 리스트형 [React] Websocket npm i socket.io-client - socket은 연결해 놓으면 전역적인 특징을 띄기에 하나의 컴포넌트에 연결 후 다른 컴포넌트에 가면 연결이 끊어 질 수 있다. 그러므로, 컴포넌트에 종속적으로 연결해놓으면 컴포넌트가 사라질 경우 연결이 끊어질 위험성이 있으므로 그걸 방지하기 위하여 공통 된 컴포넌트에 연결해야 한다. - hook에 socket을 연결하면 해결된다. 컴포넌트간의 공통적인 일을 수행해야 할 경우는 부모 컴포넌트에 선언을 하는 것도 좋으나, view가 들어가지 않는 경우에는 hook에서 처리하면 된다. - socket.io의 경우에 socket을 지원하지 않는 브라우저도 있기에 http로 먼저 요청을 보낸 후 socket을 지원하는 브라우저일 경우 socket.io로 전환하여 보낸다.. [React] useRef useRef는 특정 DOM을 직접 선택하여 사용 할 수 있게 해주는 hook이다. React 개발 시 DOM을 직접 선택하여 작업을 해야 할 경우( element 크기, scroll 위치, focus 등) 사용 할 수 있다. useRef를 통하여 접근하고자하는 tag에 ref값에 넣어준다. ref.current로 선언을 하면 선언 된 tag의 DOM을 가르키게 되어 DOM을 직접 컨트롤 할 수 있게된다. [React] useSWR - SWR과 같이 실시간으로 데이터 관리가 가능 할 경우 props로 데이터를 넘길 필요가 없다 - props를 사용 할 경우 자식이 re-render 되므로 memo와 같이 신경쓸 부분이 있었으나 props를 사용하지 않는 시점에서는 component별로 따로 render가 되기 때문에 신경을 쓰지 않아도 된다 - [] ( deps)에는 외부에서 쓰이는데 바뀌는 값들에 대해서는 넣어주어야 한다 - 항상 SWR을 사용해야 좋은것은 아니다. 재사용 할 컴포넌트의 경우 안에 SWR을 무작정 넣기보다 props로 부모로부터 값을 받아 재사용성을 할 수 있도록 설계하는것이 좋다. [CSS] transform CSS / 애니메이션 / transform / 회전, 확대, 축소, 비틀기 등 형태 변형하는 속성 – CODING FACTORY [CSS] z-index CSS / z-index / 요소의 수직 위치 정하는 속성 – CODING FACTORY [CSS] Styled components Styled Components #1 Basic : 리액트 스타일 컴포넌트 기초 (velog.io) [HTML] Semantic HTML [HTML] 시맨틱(Semantic) HTML을 짜보자 (tistory.com) [CSS] white-space CSS / white-space / 공백 처리 방법 정하는 속성 – CODING FACTORY [CSS] text-overflow CSS / CSS로 문자열 자르기 – 한 줄인 경우, 여러 줄인 경우 – CODING FACTORY [CSS] grid Grid 2차원의 레이아웃 시스템 제공 Container와 items로 구성 Container 속성 Items 속성 유용한 함수 단위 Track : 하나의 행 또는 열 Line : 트랙과 트랙사이 간격 Cell : 아이템이 배치되는 최소 단위 영역 Area : 아이템이 배치되는 영역의 집합 이전 1 2 3 4 5 다음
