전체 글 썸네일형 리스트형 [Session] Session 이란? 세션(Session)이란 무엇인가요? 웹은 본질적으로 "상태를 기억하지 못하는(stateless)" 구조입니다.즉, 사용자가 로그인한 후에 다음 페이지로 이동하면,서버는 "누가 로그인했는지"를 자동으로 기억하지 못하는데요그래서 이를 해결하기 위해 세션(Session)이라는 개념이 등장했습니다. 한줄로 요약하면 서버가 사용자에 대해 기억하고 있는 '정보' 입니다 세션 예시사용자가 로그인하면,서버는 "이 사람은 로그인한 사용자다"라는 정보를 세션에 저장이후 사용자가 어떤 페이지를 가도, 서버는 세션을 보고"아 이 사람 로그인했네? OOO 유저구나" 하고 인식이걸 통해 사용자 맞춤 서비스 제공이 가능합니다 세션의 작동 원리1. 서버가 세션 ID를 생성로그인 성공 시, 서버는 임의의 세션 ID(예: abc.. 더보기 [화상채팅] Docker, Janus, Redis를 사용하는 아키텍쳐 설계 아키텍쳐 설계 Janus를 사용하고 방 생성, 삭제 및 유저 간 peer 연결 등을 미들웨어를 만들어서 관리해 줄 것이다클라이언트는 몇 번 구성을 해봤지만 전체적인 것을 혼자 구성해 보는 것은 처음이기 때문에아키텍처 설계부터 확실히 해두려고 한다 1. 개요Janus 미디어 서버를 기반으로 한 화상 통신 시스템의 설계 명세를 다룹니다. 본 시스템은 다음 두 가지 시그널링 모드를 모두 지원하는 구조로 설계됐습니다Direct Mode: 클라이언트가 Janus 서버에 직접 WebSocket으로 연결Proxy Mode: 클라이언트가 미들웨어를 통해 시그널링을 수행 (제한망 대응용) 2. 시스템 구성 요소 구성 요소 설명 클라이언트Unity/React 기반 앱. 두 모드 모두 지원미들웨어방 생성, Janus 인.. 더보기 [React] React Router를 이용한 페이지 전환 React Router로 페이지 전환하기 React Router 설치npm install react-router-domReact Router v6 기준입니다 기본 구성: BrowserRouter, Routes, Route import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( } /> } /> );} BrowserRouter: 라우팅 기능 전체를 감싸는 컴포넌트Routes: URL 경로에 따라 어떤 컴포넌트를 보.. 더보기 [React] Props 란? Props란 무엇인가? props(프롭스)는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 방법입니다.React에서는 컴포넌트를 함수처럼 호출하고, 인자를 전달하듯 props를 이용해 데이터를 주고받습니다. 위 코드는 Welcome이라는 컴포넌트에 "홍길동"이라는 값을 name이라는 이름으로 전달한 것입니다. 기본 예제function Welcome(props) { return 안녕하세요, {props.name}님!;}function App() { return ;} Welcome 컴포넌트는 props.name을 받아서 화면에 출력합니다.App 컴포넌트는 name이라는 props로 "홍길동"을 전달합니다. 구조 분해 할당을 통한 간단한 작성 function Welcome({ name.. 더보기 [React] React Component 분리 React 컴포넌트 분리란? React는 UI를 작은 단위의 컴포넌트들로 나누어 재사용하고 유지보수를 쉽게 하는 것이 핵심 철학입니다하나의 컴포넌트가 너무 길거나 여러 역할을 동시에 하고 있다면, 이를 역할별로 나누어 분리하는 것이 좋습니다 컴포넌트 분리의 장점 장점 설명 재사용성여러 페이지나 화면에서 같은 UI를 재사용할 수 있음가독성 향상각 컴포넌트의 역할이 명확해짐유지보수 용이특정 기능만 수정할 수 있어 코드 변경이 쉬움테스트 편리개별 단위로 테스트 가능 컴포넌트 분리가 필요한 경우하나의 컴포넌트에서 여러 역할(입력, 출력, 버튼 처리 등)을 할 때비슷한 형태의 UI가 반복될 때UI 일부를 다른 곳에서도 쓸 가능성이 있을 때길이가 너무 길어 가독성이 떨어질 때 컴포넌트 분리 실습 예제 .. 더보기 [화상채팅] Docker / Janus WebRTC 로컬 테스트 Janus 활용 로컬 테스트 Janus WebRTC 서버 도커 이미지 생성부터 데모 실행까지 (로컬 테스트 환경 구성기) Janus 서버 이미지 빌드 TURN서버는 일단 Google STUN 서버를 사용하기 때문에 이번 테스트에선 생략먼저 Dokcerfile과 docker-compose.yml 파일을 만들어야한다아직 스스로 만들 수 있을 만큼 숙달되지 않아서 chat gpt를 괴롭혀 만들었다 DockerfileFROM debian:bullseyeRUN apt-get update && apt-get install -y \ git build-essential automake libtool \ pkg-config gengetopt libconfig-dev libssl-dev \ libjansson-.. 더보기 [React] Hook이란 무엇인가? Hook 이란? Hook은 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 상태(state) 관리나 생명주기(lifecycle) 같은 기능을 사용할 수 있게 해주는 함수입니다.기존에는 이런 기능들을 클래스 컴포넌트에서만 사용할 수 있었지만,Hook을 사용하면 훨씬 더 간결하고 가독성 좋은 함수형 코드로 동일한 작업을 수행할 수 있습니다. 대표적인 Hook 종류 Hook 이름 설명 useState컴포넌트 내부 상태를 관리useEffect컴포넌트 생명주기처럼 동작 (렌더링 후 동작 수행)useRefDOM 요소나 값을 기억하는 참조값 저장useContext전역 상태(데이터)를 여러 컴포넌트에서 공유useMemo, useCallback렌더링 최적화 관련 훅 1. useState – 상.. 더보기 [React] React JSX 기초 문법 React 기본 개념컴포넌트 기반 구조가상 DOM (Virtual DOM) 사용단방향 데이터 흐름JSX 문법 지원 JSX 란? JSX(JavaScript XML)는 JavaScript에 XML 문법을 확장한 문법입니다.React에서 UI를 구성할 때 사용하는 특수한 JavaScript 문법으로,마치 HTML을 작성하듯 컴포넌트의 구조를 선언할 수 있게 해줍니다.예를 들어, 일반 JavaScript에서는 DOM을 만들기 위해 복잡한 createElement() 코드를 작성해야 했지만,JSX를 사용하면 아래처럼 훨씬 간단하게 UI를 표현할 수 있습니다: JSX 예시const element = Hello, world!; 위 코드는 React 내부에서 아과 같이 변환됩니다:const element = Reac.. 더보기 이전 1 2 3 4 5 ··· 8 다음
