본문 바로가기

⭐ Personal_Study/Javascript9

웹소켓을 활용해 실시간 채팅 구현하기 - React 웹소켓을 활용해 실시간 채팅 구현하기 - React 웹소켓을 활용해 실시간 채팅 구현하기 - Springboot 웹소켓을 활용해 실시간 채팅 구현하기 - React React 코드 사실 웹소켓에서 백엔드는 중개역할만 하고 대부분의 작업 (웹소켓 객체 생성, 연결, 데이터 송수신)은 프론트에서 이루어진다. 아래 코드는 웹소켓을 기반으로 간단한 실시간 채팅을 구현한 프론트 코드이다. 해당 코드는 메세지를 주고 받지만 결국 무엇이 됐든 웹소켓으로 데이터를 주고 받는 원리는 똑같아서, 코드를 변형하면 훨씬 다양한 기능들을 구현할 수 있다. 아쉽게도 내가 프론트가 아니라 따로 디자인은 넣지 않았다. 실제 프로젝트에서 사용했던 코드를 가져온 거라 다른 프로젝트에 적용할 경우 적절히 변형해서 사용하면 된다. 코드 대.. 2023. 5. 6.

AJAX AJAX AJAX 개요 ✔ Asynchronous Javascript And XML (비동기 통신 웹 개발 기술) ✔ 비동기 통신을 이용해 화면 전체를 새로고침 하지 않고도 서버 요청을 보내고, 데이터를 받아 화면의 일부분만 업데이트 하는 기능 AJAX의 특징 페이지 새로 고침 없이 서버에 요청 서버로부터 응답(데이터)를 받아 작업을 수행 AJAX를 이용해 Django follow 기능 구현하기 사전준비 템플릿에 script 코드 작성을 위한 block tag 영역 작성 ... {% block script %} {% endblock script %} axios CDN 작성 {% block script %} {% endblock script %} id 속성 지정 및 선택, 불필요한 action과 metho.. 2022. 11. 5.

Axios Axios Axios 개요 ✔ JavaScript의 HTTP 웹 통신을 위한 라이브러리 ✔ 확장 가능한 인터페이스와 쉽게 사용할 수 있는 비동기 통신 기능 제공 Axios 기본구조 Axios 사용해보기 ✔ get, post 등 여러 method 사용 가능 ✔ then을 이용해서 성공하면 수행할 로직 작성 ✔ catch을 이용해서 실패하면 수행할 로직 작성 고양이 사진 api 가져오기 (Python) import requests print('고양이는 야옹') cat_image_search_url = 'https://api.thecatapi.com/v1/images/search' response = requests.get(cat_image_search_url) if response.status_code ==.. 2022. 11. 5.

동기와 비동기 동기와 비동기 동기(Synchronous) ✔ 모든 일을 순서대로 하나씩 처리하는 것 ✔ 요청과 응답을 동기식으로 처리하게 된다면? 요청을 보내고 응답이 올 때까지 기다렸다가 다음 로직을 처리 비동기(Asynchronous) ✔ 작업을 시작한 후 결과를 기다리지 않고 다음 작업을 처리(병렬적 수행) 비동기를 사용하는 이유 ✔ 사용자 경험 아주 큰 데이터를 불러온 뒤 실행되는 앱이 있을 때 동기로 처리한다면 데이터를 모두 불러온 뒤에야 앱의 실행 로직이 수행되므로 사용자들은 마치 앱이 멈춘 것과 같은 경험을 겪게된다. 비동기로 처리하면 먼저 처리되는 부분부터 보여줄 수 있으므로, 사용자 경험에 긍정적인 효과를 볼 수 있음 Single Thread 언어, JavaScript ✔ JavaScript는 한번에 .. 2022. 11. 4.

Callback & Promise Callback과 Promise 비동기 처리 방식의 문제점 ✔ 비동기 처리의 핵심은 Web API로 들어오는 순서가 아니라 작업이 완료되는 순서에 따라 처리된다는 것 ✔ 실행 결과를 예상하면서 코드를 짤 수 없다 콜백함수(Callback Function) ✔ 다른 함수의 인자로 전달되는 함수 ✔ 시간이 걸리는 비동기 작업이 왼료된 후 실행할 작업을 명시하는 데 사용되는 콜백 함수를 비동기 콜백(asynchronous callback)이라 부른다. 콜백함수를 사용하는 이유 ✔ 명시적인 호출이 아닌 특정한 조건 혹은 행동에 의해 호출되도록 작성할 수 있음 ✔ '요청이 들어오면', '이벤트가 발생하면', '데이터를 받아오면'등의 조건으로 이후 로직을 제어할 수 있음 ✔ 비동기 처리를 순차적으로 동작할 수 있게.. 2022. 11. 4.

JavaScript에서의 This This 개요 ✔ 어떠한 object를 가리키는 키워드 ✔ JavaScript의 함수는 호출될 때 this를 암묵적으로 전달 받음 ✔ JavaScript에서의 this는 일반적인 프로그래밍 언어와 다르게 동작 ✔ JavaScript는 해당 함수의 호출 방식에 따라 this에 바인딩 되는 객체가 달라진다. ✔ 즉 함수를 선언할 때 결정되는 것이 아니라, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 동적으로 결정 this INDEX 전역 문맥에서의 this 함수 문맥에서의 this 단순 호출 Method(객체의 메서드로서) Nested 전역 문맥에서의 this ✔ 브라우저의 전역 객체인 window를 가리킨다. 전역 객체는 모든 객체의 유일한 최상위 객체를 의미 console.log(this) // .. 2022. 11. 3.

이전 1 2 다음

티스토리툴바