Web Socket이란? WebSocket은 웹 브라우저와 웹 서버 간의 양방향 통신을 지원하는 프로토콜입니다. 기존에는 클라이언트에서 서버로 요청을 보내고, 서버에서 클라이언트로 응답을 보내는 단방향 통신이었지만, WebSocket을 이용하면 클라이언트와 서버 간의 양방향 통신이 가능해집니다. WebSocket은 HTTP를 기반으로 하며, TCP를 사용하여 실시간 양방향 통신을 제공합니다. HTTP와 달리, 클라이언트와 서버 간의 연결을 유지하여 데이터를 전송할 수 있습니다. 이를 통해, 서버는 클라이언트로 데이터를 즉시 보낼 수 있으며, 클라이언트는 언제든지 서버로 데이터를 보낼 수 있습니다. WebSocket은 실시간 채팅, 온라인 게임, 주식 시장, 알림, 스트리밍 등 다양한 웹 애플리케이션에서 ..
WebRTC 란? WebRTC(Web Real-Time Communication)는 웹 브라우저에서 실시간 음성 통화, 영상 통화, 파일 공유 등의 기능을 제공하는 오픈 소스 프로젝트입니다. 웹 기술을 사용하여 통화를 시작하고, 통화 중인 두 사용자 간에 통화 데이터를 전송하며, 통화 종료를 관리하는 API를 제공합니다. 즉, 웹 애플리케이션과 사이트가 중간자 없이 브라우저 간에 오디오나 영상 미디어를 포착하고 마음대로 stream할 뿐 아니라, 임의의 데이터도 교환할 수 있도록 하는 기술입니다. WebRTC는 일반적으로 브라우저에서 JavaScript 및 HTML5과 같은 웹 기술을 사용하여 구현됩니다. 이 기술은 특별한 소프트웨어나 브라우저 플러그인을 설치할 필요 없이 웹 애플리케이션에서 실시간 음성..
SockJs란? SockJS는 WebSocket 프로토콜의 대안으로 사용되는 브라우저 클라이언트와 웹 서버 간의 양방향 통신을 지원하는 자바스크립트 라이브러리입니다. WebSocket은 브라우저 클라이언트와 웹 서버 간의 양방향 통신을 지원하지만, 모든 브라우저에서 지원되지는 않습니다. SockJS는 WebSocket이 지원되지 않는 브라우저에서도 양방향 통신을 가능하게 하기 위해 개발되었습니다. SockJS는 다양한 전송 프로토콜을 지원합니다. 이를 통해, 브라우저와 웹 서버 간에 최적의 프로토콜을 선택하여 통신할 수 있습니다. SockJS는 다음과 같은 전송 프로토콜을 지원합니다. WebSocket HTTP streaming HTTP long-polling Iframe-based transport S..
React 로 무한스크롤 구현하기! Intersection Observer API 를 사용하는 방법? Intersetction Observer API란? Intersection Observer API는 뷰포트 내 요소의 교차(intersection) 상태를 관찰하는 API입니다. 뷰포트는 웹 페이지에서 보이는 영역을 말하며, Intersection Observer API를 사용하면 이 영역 내에서 요소들이 어떤 상태인지를 비동기적으로 관찰할 수 있습니다. Intersection Observer API는 크로스 브라우징을 지원하며, 모바일 기기에서도 정상적으로 작동합니다. 이 API를 이용하여 웹 페이지에서 무한 스크롤, 광고 배너 로딩, 이미지 지연 로딩 등 다양한 용도로 활용할 수 있습니다. Inter..
[Namoldak] TroubleShooting_RefreshToken
✔️ HTTP 헤더 결론 : http header는 대소문자를 구분하지 않음 HTTP 헤더는 클라이언트와 서버가 요청 또는 응답으로 부가적인 정보를 전송할 수 있도록 해줍니다. HTTP 헤더는 대소문자를 구분하지 않는 이름과 콜론 ':' 다음에 오는 값(줄 바꿈 없이)으로 이루어져있습니다. https://developer.mozilla.org/ko/docs/Web/HTTP/Headers 문제 : token 재발급 api 호출 시 refreshtoken 값을 담아줘야 했으나 request header에 RefreshToken이라는 항목 자체가 없었음 원인 : header에서 refreshtoken 소문자로 key name을 줘야 했음 ✔️ access token 만료 시 refreshtoken 을 이용하여..
eslint 설치 yarn add -D eslint-plug eslint 시작 설정 yarn eslint --init airbnb 코드 스타일 적용을 위한 패키지 설치 npx install-peerdeps --dev eslint-config-airbnb prettier eslint extenstions 설치 필요 vs code 설정에서 format JavaScript 검색하고 JavaScript > Format:Enable 체크 비활성화 Format On Save 를 검색해서 체크를 활성화 ESLint 를 검색해서 Auto Fix On Save 체크를 활성화 .prettierrc 파일 만들고 아래의 내용 복사하여 붙여넣기 { "singleQuote": true, "semi": true, "useTabs"..
📌 폰트 적용 방법 1. 폰트 다운로드 받아서 적용 - assets 안에 fonts 폴더 oft 폰트 파일 넣기 - font.css 파일에 @font-face{} 넣기 *여기서 font-family 이름을 쓰기 쉽게 바꿔도 됨 2. 웹 폰트 적용 - index.html 안에 link href rel 쓰기 - GlobalStyle.js 의 body 안에 fontfamily 쓰기 import reset from 'styled-reset'; import { createGlobalStyle } from 'styled-components'; const Globalstyle = createGlobalStyle` ${reset} *{ box-sizing: border-box; } body{ font-family: '..
댓글 업데이트 commentList.jsx 수정 전 const handlePatch = () => { dispatch(patchComment({ comment, id: params.id })); }; 수정 후 const handlePatch = (comment) => { dispatch( patchComment({ id: comment.id, detailId: comment.detailId, comment: content, }) ); }; content는 새롭게 수정한 comment 내용임. 객체 자체를 갈아끼우는 것이므로 그 형식에 맞게 id, detailId(게시글 id), comment 모두 적어야 함! 수정 전 { handlePatch(); }} > 수정 후 {comments && comments..
[Project] React_TodoList
[index.jsx] import React from 'react'; import {useState} from 'react; import {ActiveCard} from '@component/Card/ActivityCard'; export default function index(){ const [todoList, settodoList] = useState([ { id: 1, title: "리액트", content="공부하기", isDone="false"} ]); const onClick = () => {}; return( Following {todoList.map((todo) => { return })} ) } list가 가지..
✔️ Front ⭐️ RESTful API 공부! Post db에 저장 Get db에서 불러오는 것 RESTful API 에 대해 더 공부해보면면 이해가 될 것임 ⭐️ 인라인 vs style 어떻게 다를까? 화면이 그려지는 과정=랜더링 브라우저에서 랜더링을 하기 위해 진행하는 여러 과정이 있는데, 이 때 인라인 요소와 스타일로 속성 준 것에 따라 차이가 있음 ⭐️ Font 브라우저가 폰트파일을 다운로드 받아서 보여주는데, 눈누처럼 웹폰트 방식으로 보여줄 수도 있고 폰트 파일 자체를 프로젝트 폴더에 넣을 수도 있고, 로컬 환경 사용자가 쓰는 곳에 넣어놓고 쓸 수도 있음! - 유저가 접속한 로컬 환경에 그 폰트가 없으면 어떤 폰트를 적용할 것인지? - 크로스 브라우징: 브라우저마다 폰트 규격이 안 맞는 / ..