자바스크립트 (3) 썸네일형 리스트형 [React] useRef는 unmount 되어도 유지될까? 최근에 캐시된 이미지를 사용하기 위해 useRef에 캐시되어야 할 id를 저장하고 캐시여부를 판단해야 하는 상황이 있었습니다..! 관련해서 오늘은 useRef와 관련된 사실을 알아보겠습니다! 먼저 내가 원했던 동작은 useRef를 선언한 컴포넌트가 unmount 되어도 그 값이 유지되어서 다음에 컴포넌트가 mount되어도 동일한 useRef 값을 사용하고 싶었습니다! 다음 코드를 살펴보자 //App.js function App() { const [isOpen, setIsOpen] = useState(false); return ( { setIsOpen(!isOpen); }} > click {isOpen && } ); } 먼저 App.js에 state를 바꾸는 버튼을 하나 만들어주고, 버튼이 클릭될때마다 U.. [네트워크] Websocket과 socket.io 채팅 기능을 구현하다 보면 Websocket과 socket.io를 많이 들어봤을 것이다. 일단 저거를 써서 채팅 기능을 구현하는건 알겠는데 도대체 뭐지? 라는 생각이 든다. Websocket이란? 일단 Websocket이 나오게 된 배경 부터 알아보자 맨 처음에 웹이라는 것이 나왔을때 브라우저의 렌더링 방식은 HTTP요청에 대하나 응답을 받아서 화면을 새로 만들어주는 방식이었다. 이를 stateless방식이라고 하는데 클라이언트에서 요청을 보내면 서버는 요청 받은것에 대한 응답을 건네주고 연결을 끊어버리는 식이다. 왜 서버와의 연결을 계속 유지하지 않지? 클라이언트가 10억이라고 치면 서버에서 그 많은 연결을 유지하게 되면 과부하가 걸려 다운된다. 왜 stateless상태를 채택했는지 알 수 있다. 이렇.. [JavaScript] Bind가 뭐죠? Bind란 무엇일까? 모든 함수의 메소드로 context를 수정하게 해주는 것이다. bind는 함수처럼 호출 가능한 "특수객체"를 반환한다. 이 객체를 호출하면 this가 원하는 형태로 고정된 함수가 반환된다!! let user = { firstName: "John" }; function func() { alert(this.firstName); } let funcUser = func.bind(user); funcUser(); // John 이렇게 바인딩을 시켜주면 func내부의 this는 user를 가리키게 된다!! 신기하다.. let user = { firstName: "John", say(phrase) { alert(`${phrase}, ${this.firstName}!`); } }; let say .. 이전 1 다음
