WebRTC 란 ? WEB Real-Time Communication 으로 실시간 커뮤니케이션을 가능하게 해주는 기술로 peer-to-peer방식이다. peer-to-peer 방식 ? 소켓은 peer-to-peer방식이 아니다. 상대방과 내가 소켓io로 연결된 상황일 경우, 내가 상대방에게 hello라고 보내면 그 hello는 서버로 보내지고, 서버는 다시 상대방에게 hello를 전달한다. 즉 언제나 서버를 사용해야한다. 나는 상대방에게 메세지를 보내지만 사실 서버한테 메세지를 보내고 서버가 상대방한테 메세지를 보낸다. 이는 peer-to-peer가 아닌 서버에 연결되어 있을 뿐이다. 하지만 webRTC는 더이상 서버가 필요없다. webRTC는 서버가 보내고 받을 필요가 없이, 내 브라우저가 직접 상대방..

swr로 전역적인 상태 관리하기 프론트에서 데이터를 전역으로 저장하고 싶으면 리덕스가 필요하다. 하지만 리덕스에도 단점이 있다. 리덕스는 코드양이 많고, 한번 가져왔던 정보여도 컴포넌트가 마운트 될 때마다 새로 가져와야하며, 지속적으로 리덕스 로컬 스토어의 상태를 서버 상태와 맞추기 위한 동기화 작업이 필요하다. 따라서 리덕스를 사용하지 않고 그 대안으로 swr을 사용해 보고자 한다. SWR은 데이터 가져오기를 위한 React Hooks 라이브러리로 먼저 캐시(스태일)로부터 데이터를 반환한 후, fetch 요청(재검증)을 하고, 최종적으로 최신화된 데이터를 가져오는 전략이다. SWR을 사용하면 컴포넌트는 지속적이며 자동으로 데이터 업데이트 스트림을 받게 되며 그리고 UI는 항상 빠르고 반응적이다. im..

useContext는 context로 공유한 데이터를 쉽게 받아올 수 있게 도와준다. 하지만 컴포넌트 사용성의 재사용이 어려워질 수 있기 때문에 필요할 때만 사용하는것이 좋다. prop drilling을 피하기 위한 목적이라면 component composition컴퍼넌트 합성을 먼저 고려해보자. 그렇다면 리덕스랑 Context? 리덕스는 Context와 비교해서 훨신 더 풍부하고 많은 기능을 제공하기때문에 재사용성 측면 보다는 사용하고자 하는 목적에 대해 더 생각하고 무엇을 사용할지 결정하는게 더 맞는 표현 같아요 Context는 리덕스보다 가볍기 때문에 대부분에 경우 작은 프로젝트들에게 더 잘 어울린다고도 할 수 있겠지만 목적에따라 늘 그렇지 않을수도 있답니다! null이 아닐 때, context/ ..

useRef 참고 유튜브 : https://www.youtube.com/watch?v=VxqZrL4FLz8 useRef 변수 관리 반환된 ref는 컴포넌트가 계속해서 렌 더링이 되어도 언마운트가 되기 전까지 값을 유지 가능 변경 시 렌더링을 발생시키지 말아야 하는 값을 다룰 때 편리 실제적으로 dom 요소에 접근 가능 ex)포커스 주기 , 손쉽게 input요소 접근 가능 import import React, { useRef, useState } from "react"; const countRef = useRef(0); //countRef.current에 저장이 된다. 예제 코드 import React, { useRef, useState } from "react"; function Ref() { const..

Custom hook Custom hook이란? useState, useEffect 등등 hook을 사용하는 것만으로도 코드가 훨씬 보기 좋아졌지만, 반복되는 훅 활용 메소드들을 하나로 줄여줌으로써 더 간결하고 보기 좋은 코드를 만들 수 있는 것이 바로 custom hooks입니다. custom hook의 이름은 무조건!!!! use로 시작해야한다! //UserList.js import React, { useEffect, useState } from "react" import { Link } from "react-router-dom" function UserList() { const [userList, setUserList] = useState([]) const url = "https://jsonplac..

styled-components 설치 npm i styled-components import import styled from "styled-components"; 고정 스타일링 import React from "react"; import styled from "styled-components"; const StyledButton = styled.button` padding: 0.375rem 0.75rem; border-radius: 0.25rem; font-size: 1rem; line-height: 1.5; border: 1px solid lightgray; color: gray; background: white; `; function Button({ children }) { return {child..

const memoizedCallback = useCallback( () => { doSomething(a, b); }, [a, b], ); import { useEffect, useState, useCallback } from "react"; import "./App.css"; function App() { const [number, setNumber] = useState(0); const someFunction = () => { console.log(number); }; useEffect(() => { console.log("변경됨"); }, [someFunction]); return ( { setNumber(e.target.value); }} /> Call someFunc ); } export de..

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 자바스크립트에서는 원시타입과 객체타입이 있다. 원시타입? 어떤 변수에 원시타입의 값을 할당하면 그 값은 박스에 바로 들어간다. 같은 원시값을 가지고 있는 두가지 변수를 비교하면 true가 나온다. 객체타입? 하지만 객체는 어떤 변수에 객체타입의 값을 할당하면 객체는 크기가 크기 때문에 메모리상에 값이 할당되어 보관되고 변수안에는 그 객체에 담긴 메모리의 주소가 할당이 된다. 똑같은 객체를 넣어준 변수를 비교하면 false가 나온다. 변수라는 상자안에는 메모리 상의 주소가 들어가 있기 때문에 다른 주소에 저장되어 있기 때문이다. 오브젝트가 똑같아 보여도 다른 오브젝트이다. 렌..