ougi FE

저는 프로젝트를 하다 채팅기능을 구현하게 되어서 어떻게 구현해야 할지 열심히 찾아보다가 알게 된 WebSocket을 소개 드리겠습니다!!WebSocket💬이란 무엇인가??서버와 클라이언트가 연결을 끊지 않고 유지하면서 양뱡향 소통이 가능하게 하는 기술입니다 이것을 이용하여 실시간 데이터 교환을 할 수 있기 때문에 실시간 채팅, 주식 등을 구현할 때 많이 사용됩니다HTTP 통신방법과 WebSocket의 차이점WebSocket 프로토콜은 접속 확입에 HTTP를 사용하지만, 그 후의 통신은 WS라는 프로토콜을 이용합니다Header가 작아서 overhead가 적다는 특징이 있습니다장시간 접속을 전제로 하기 대문에, 접속한 상태라면 클라이언트나 서버로부터 데이터 송신이 가능합니다더불어 데이터의 송신과 수신에 각..

JavaScript 2024. 8. 23. 20:01

저는 요즘 프로젝트를 진행하면서 저장소(LocalStorage와 SessionStorage)를 제대로 활용하지 못하고 있다는 생각이 들었습니다. 그래서 조금 더 깊이 이해하고자 이렇게 글을 쓰게 되었습니다. 그리고 쿠키도 비슷한 기능을 가지고 있는 것으로 알고 있어 쿠키까지 조사하게 되었습니다.💾 LocalStorage란?데이터를 저장합니다도메인 별로 남아있습니다시간 제한이 없습니다 브라우저가 꺼져도 남아있습니다값을 지우려면 직접 삭제해야 합니다장점저장된 데이터가 서버로 저장되지 않아서 트래픽을 줄일 수 있습니다단점HTML5 미만의 브라우저에서는 지원을 하지 않습니다💾 SesstionStorage란?데이터를 저장합니다브라우저가 종료될 때까지 데이터가 존재합니다세션이 종료되면 없어집니다소멸 타이밍이 존..

JavaScript 2024. 8. 17. 19:19

저는 오늘 서버와 통신하는 방법들 중 몇가지를 소개하겠습니다 제가 오늘 소개하는 방법들은 모두 비동기 통신 방법입니다 일단 알아두면 좋은 지식이니 먼저 비동기와 그 반대인 동기가 무엇인지 먼저 살펴보겠습니다!그림을 보면 동기 처리의 예시는 주문을 하고 음료를 받는 것까지 한명이 모두 끝날 때까지 기다려야 하지만 동기는 진동벨을 받고 여러 사람을 동시에 처리할 수 있습니다 요약하자면 동기는 순차적으로 작업을 수행하고 해당 작업이 수행중이라다음 작업은 대기하여야 합니다 반면에 비동기식은 요청이 들어오면 해당 작업이 끝나지 않았더라도 계속 요청을 받습니다FetchJavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드입니다기본 응답 결과를 따로 json으로 바꾸거나 text로..

JavaScript 2024. 8. 6. 17:51