[React] 드래그 가능한 사이즈 조절 컴포넌트 구현

useState와 이벤트 리스너를 활용한 커서 기반 사이즈 조절 기능 구현함 import { useEffect, useState } from 'react';import './App.css';import LeftContent from './components/LeftContent';import RightContent from './components/RightContent';import './index.css';import { checkPrimeSync } from 'crypto';import { AnySoaRecord } from 'dns';function App() { const [width, setWidth] = useState(200); const [isDragging, setIsDrag..

• format_list_bulleted React
• · 2024. 9. 22.
• textsms

페이지네이션

const ProductsList = () => { const [currentPage, setCurrentPage] = useState(1); const {data: products, isLoading, isError} = useQuery('products', ProductsList); const handlePageChange = newPage => { setCurrentPage(newPage); }; return ( );};   const Pagination = ({currentPage, itemsPerPage, totalItems, onPageChange}) => { const totalPage = Math.ceil(totalItems /..

• format_list_bulleted React
• · 2024. 8. 12.
• textsms

리액트 폴더구조 : 재귀적으로 컴포넌트 구조

01. 데이터 구조const folderData = [ { id: 1, name: "Root Folder", children: [ { id: 2, name: "Sub Folder 1", children: [ { id: 3, name: "File 1" }, { id: 4, name: "File 2" } ] }, { id: 5, name: "Sub Folder 2", children: [ { id: 6, name: "File 3" } ] } ] }]; 02. 재귀 컴포넌트 구조import React f..

• format_list_bulleted React
• · 2024. 7. 28.
• textsms

#06 네트워크 기초 : OSI 3계층(2) : IP, ICMP, IP 조각화 (WireShark)

01. 3계층 IP가 하는 일 : 멀리 있는 컴퓨터끼리 데이터 주고 받음 => IPv4: 데이터가 정확하게 전달 보장 X: 중복 패킷 전달 가능 & 패킷 순서의 잘못 전달 가능 => DoS 공격이 됨: 데이터의 정확하고 순차적인 전달은 tcp에서 보장! * 총 20바이트 (옵션이 있어서 최대 60바이트, 일반적으로 옵션 없이 사용)  * Version : IP버전 4 Or 6 (4)* IHL : 헤더의 길이/4 = 최소 20바이트 ~최대 60바이트 (15) (예시로 20바이트 = 5 => 0101(2) ) * Type of Service(= Differentiated Services Field)  = 초기에 사용했지만 요즘은 사용 안해서 0으로 처리 * Total Length : Payload까지 합쳐진..

• format_list_bulleted 네트워크
• · 2024. 5. 22.
• textsms

#05 네트워크 기초 : OSI 3계층(1) : ARP (WireShark)

01. 3계층 ARP가 하는 일 : Address Resolution Protocol: ARP는 같은 네트워크 대역에서 통신하기 위해 IP주소를 이용해서 상대방의 MAC 주소 알아오는 프로토콜: 같은 네트워크 대역에서 통신한다고 해도  7계층부터 캡슐화를 통해 데이터를 보내기 때문에 IP주소 MAC주소 모두 필요함 * Hardware type : 2계층에서 사용하는 프로토콜 타입 (이더넷 0001)* Protocol Type  :  Source Protocol의 타입 (IPv4 0800) 16진수 = 4비트 * Hardware Address Length : MAC주소의 길이 (6바이트 = 06)* Protocol Address Length   : IPv4주소의 길이  (4바이트 = 04)* Opcode ..

• format_list_bulleted 네트워크
• · 2024. 5. 22.
• textsms

#04 네트워크 기초 : OSI 7계층 : HTTP

01. 7계층에서 하는 일 : HTTP (HyperText Transfer Protocol): www에서 쓰이는 핵심 프로토콜 (문서의 전송에 사용) (1) HTTP 1.0 특징: 연결 수립, 동작, 해제의 단순함이 특징: 문제점 = 단순동작의 반복으로 통신 부하 문제 발생=>  HTTP 1.1 보완 (연결했으면, 데이터 다 받아가고 종료해라) 02.  HTTP 요청 프로토콜* 요청타입 : GET, POST 등* 공백 : space* URI : 주소 전체  (ex. https://www.youtube.com/watchv=2ikhZ_fNP5Y&list=PL0d8NnikouEWcF1jJueLdjRIC4HsUlULi&index=30)=> 인터넷 상에서 특정자원(파일)을 나타내는 유일한 주소* HTTP 버전 :..

• format_list_bulleted 네트워크
• · 2024. 5. 21.
• textsms