Socket.IO란? 실시간, 양방향, event기반 통신을 제공한다. 한마디로, 실시간 통신을 제공하는데 개발자가 발생하는 이벤트를 임의로 설정하고, 다룰 수 있다는 것이다. websocket이라는 web api의 부가 기능이 아니라, 실시간 통신을 위해 존재하는 여러 기능중 websocket이라는 기능을 사용할 뿐이다. 따라서 특정 브라우저나 모바일 환경에서 websocket api를 지원하지 않아도, socket.io는 다른 기능을 찾기 때문에 항상 실시간 통신이 지원된다. 기본적인 연결 과정 이해하기 1. 일단 서버 열기 (pug 템플릿을 기반으로한 서버를 열었다) import express from "express"; import http from "http"; import { Server } ..

websocket이란?websocket은 프로토콜. 즉, 통신의 기술이다. 웹에서 통신프로토콜 하면 http프로토콜이 생각난다. 하지만 이 프로토콜은 실시간 통신에 한계가 있다. http프로토콜의 stateless특성에 따라 응답을 받으면 연결을 끊어버리기 때문이다. websocket은 이를 해결하고자 나온 프로토콜이다. 연결을 유지하며, 양방향 통신을 지원해주기 때문에 실시간으로 대화가 가능하다. 그림을 보면 이해가 편하다! 이제 기본적인 websocket의 기능을 이용해 실시간 통신을 느껴보자코딩 서버측 js 코드를 짜보자. 기본적으로 express 와 ws를 설치해야한다. 1. http 서버 열기, index.html연결const express = require("express"); const ap..

인기영화 추천 사이트를 구현하다 간단해 보이지만 해결되지 않는 오류를 발견했다. 여기서는 movie라는 프로퍼티를 받을 수 없다는데 그럴리가 없다... 오류 부분의 코드를 보자 import { useEffect, useState } from "react"; import { useParams } from "react-router-dom"; const Detail = () => { const [detail, setDetail] = useState({}); const { id } = useParams(); const getDetail = async () => { const json = await ( await fetch(`https://yts.mx/api/v2/movie_details.json?movie_id..

1. 안되는 이유와 , ChatGPT의 답변 ChatGPT의 답변은 다음과 같다. React에서 input 태그의 value 속성에 상태값을 넣으면, 그 값은 읽기 전용 상태가 되어 변경할 수 없습니다. 대신, onChange 이벤트 핸들러를 사용하여 입력 값을 변경해야 합니다. 이유는 React에서는 단방향 데이터 흐름을 사용하여 컴포넌트의 상태를 업데이트하고 렌더링하는 방식으로 작동하기 때문입니다. 그래서 input 태그의 value 값이 변경되면 React는 이를 새로운 상태로 인식하고, 이에 따라 컴포넌트를 다시 렌더링합니다. 그러나 value 값이 읽기 전용이기 때문에 이를 변경할 수 없으므로, onChange 이벤트 핸들러를 사용하여 상태를 업데이트하고 새로운 값을 입력하는 것이 필요합니다. ..

coin의 정보를 가져올때, 렌더링시 단 한번만 가져오면 되기 때문에, useEffect를 다음과 같이 이용한다. useEffect(()=>{}, []) []인자에 아무것도 적지 않으면, 렌더링 후 딱 한번만 실행된다. 예시 상태값 coins에 api를 저장하고, coins.map을 통해 내부요소를 그려보는 코드다. https://api.coinpaprika.com/v1/tickers import React, { useEffect } from "react"; function App() { const [coins, setCoins] = React.useState([]); useEffect(() => { fetch("https://api.coinpaprika.com/v1/tickers") .then((res..

useState는 컴포넌트에서 변경되는 값을 관리하기 위해 사용된다. React.useState()는 [state, modifier]를 반환한다. 이해를 위한 예시는 다음과 같다. const [값, 값 세팅 함수] = React.useState(초기값); 카운터를 만드는 예시. import React, { useEffect } from "react"; function App() { const [counter, setCounter] = React.useState(0); const handleClick = () => { setCounter(counter + 1); }; return ( {counter} CLICK ); } export default App; 상수인const로 선언을 했는데도 counter를 ..

효율성 JSX는 JavaScript의 확장 문법이다. JSX를 처음 접했을 때 html과 js를 js공간에서 자유자제로 다룰 수 있는 걸 보고 놀라웠다. 아니나 다를까 JSX는 JavaScript XML의 약자였다. 다룰때는 요런식으로 다룬다. const element = Hello, world; React에서 JSX사용이 필수는 아니지만, 대분의 사람은 js코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다고 한다. React에서 JSX를 사용하지 않고 위의 element와 같은걸 선언 하려면 다음과 같이 작성해야한다. const element = React.createElement("h1", {id: "greet"}, "Hello World"); 보기도 불편하고, 정말 끔찍하다...