웹4 React로 WebSocket 통신해보기 (client, server) 사이드 프로젝트에서 채팅을 담당하게 되서 이참에 Websocket을 정리해보려고 한다. (환경은 React + Typescript + NodeJS이다) 웹소켓 클라이언트와 서버 간의 양방향 통신 프로토콜이다 실시간 통신이 가능하다 Server 백엔드분과 통신하기 전에, 로컬서버를 만들어 채팅을 주고 받을 수 있는지 테스팅해보기로 했다. 서버 폴더를 생성하고 server.ts를 생성한다. mkdir websocket_test cd websocket_test npm init -y 그리고 다음 패키지들을 설치한다 npm i ws npm i ts-node-dev npm i --save-dev @types/ws npm i --save-dev @types/node server.ts를 만든후 다음과 같이 작성한다 i.. 2024. 4. 16. ESC눌러서 모달창 닫기, 배열을 querystring파라미터로 전달하기 ESC눌러서 모달창 닫기 useEffect(() => { window.addEventListener('keydown', (e: KeyboardEvent) => { if (e.key === 'Escape') { onClose(); } }); return () => window.removeEventListener('keydown', () => onClose); }, [onClose]); 배열을 querystring파라미터로 전달하기 JSON으로 serialize할 수 있다 myArray = ['aaa', 'bbb', 'ccc']; var arrStr = encodeURIComponent(JSON.stringify(myArray)); // '%5B%22aaa%22%2C%22bbb%22%2C%22ccc%22%5.. 2023. 9. 12. 쿠키 세션 토큰 JWT 쿠키 그냥 옮기는 매개체 쿠키를 이용해서 서버는 브라우저에 데이터를 저장(너에 관한것을 기억하기 위해서) 브라우저에 쿠키를 저장한 후, 요청을 보낼 때 마다 쿠키도 같이 보냄 쿠키 특징 쿠키는 도메인에 따라 제한이 됨 (예를 들면, 유튜브가 준 쿠키는 유튜브에만 보내지게 됨) 유효기간이 있음 (서버가 정한 기간에 따라 유효함) 인증뿐만 아니라 여러 정보를 저장할 수 있다 (예를 들어 웹사이트 언어설정을 바꾸면 서버는 쿠키에 언어설정을 저장하고, 나중에 요청을 보낼때 쿠키안의 언어로 응답을 받게 됨) 💡 http 프로토콜은 stateless이기 때문에 서버는 누가 요청을 보내는건지 모른다 ⇒ 요청할 때 마다 우리가 누구인지 알려줘야함 ⇒ 그 방법들이 바로 세션, 토큰 세션 영화표 반쪽은 브라우저에, 반쪽은.. 2023. 6. 30. CORS 배경 토이프로젝트로 프론트서버 :3000에서 start라는 버튼을 누르면 백엔드서버 :3001로 요청을 보내는 부분을 만들고 있는데 CORS 에러가 떴다. 이 참에 정리해본다 CORS ( Cross-Origin Resource Sharing) 란 다른 출처가 리소스를 요청할 때 발생하는 에러이다. 해결법을 통해 한 출처에서 실행중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있게 브라우저에게 알려준다. CORS 발생하는 이유, 목적? 1. 브라우저는 요청헤더에 자신의 출처 origin 를 담아 요청을 보낸다. 2. 서버가 이 요청에 응답을 할때 응답 헤더에 Access-Control-Allow-Origin에 이 리소스에 접근 가능한 출처를 보낸다 3. 클라이언트에서 자신의 origin과 서버가 보낸.. 2023. 6. 4. 이전 1 다음
