Hello world Hello world

프로젝트 구조 main.jsx// node_modules의 모듈에서 react,react-dom 가져와서 임포트import { StrictMode } from 'react'import { createRoot } from 'react-dom/client'import './index.css'import App from './App.jsx'import App01 from './App01.jsx'import App02 from './App02.jsx'import App03 from './App03.jsx'import App04 from './App04.jsx'import App05 from './App05.jsx'createRoot(document.getElementById('root')).render( ..

1) 리액트 프로젝트 생성 ．npm create vite@latest 프로젝트 이름 ．y ．react 선택 ．JavaScript 선택 2) 리엑트 관련 모듈 설치 ．npm i ( 기본 라이브러리 설치 ) ．npm i react-router-dom ( 라우터 모듈 ) dev - 개발 ．npm run devbuild - 배포 ．npm run buildpreview - 점검 ．npm run preview

1. 리액트를 배우는 이유① 컴포넌트 기반 구조- UI를 작은 단위의 컴포넌트로 나누어 개발할 수 있어, 코드의 재사용성과 유지보수가 뛰어납니다.② 빠른 렌더링과 성능- Virtual DOM을 활용해 실제 DOM 조작을 최소화하여, 빠르고 효율적인 화면 업데이트가 가능합니 다.③ React Native로 모바일 앱 개발 확장- 리액트의 개념을 그대로 사용해 모바일 앱(Android, iOS) 개발도 할 수 있습니다.④ 풍부한 생태계와 커뮤니티.⑤ 대기업 및 다양한 프로젝트에서 사용 2. DOM이란 무엇일까? 춤추는 로봇을 만든다고 가정할때, 로봇의 도면(HTML) → 공장(브라우저) ① 공장(브라우저)에서는 도면(HTML)을 받아서 로봇(DOM)을 생성② 도면(HTML)인해 로봇(DOM)으로 실체화됨③..

코드 구현부 즉시 보기 ( ctrl + shift + i )  변수 자동 완성( ctrl + alt +v )  파라미터 자동 완성 ( ctrl + alt + p ) 컴파일 및 실행⦁ 코드 자동 정렬 ( ctrl + alt + i )  ⦁ 전체 컴파일 ( ctrl + F9 ) ⦁ 부분 컴파일 ( ctrl + shift + F9 ) ⦁ 실행 ( alt + shift + F10 )  검색⦁ 클래스 검색 ( ctrl + n ) ⦁ 파일 검색 ( ctrl + shift + n ) ⦁ 메서드 검색 ( ctrl + shift + alt + n ) ⦁ 파일 내 전체 검색 ( ctrl + shift + f )  최근 열었던 파일 보기 ( ctrl + e ) 에디터 탭 전환 ( alt + 방향키 좌우 )

폴트 톨런트와 로드 밸런싱폴트 톨런트 : 미리 장애에 대비를 해놓는 것. 장애 대비책으로 대부분 이중 구조를 의미- 전체 네트워크가 하나의 지점에서 발생한 장애로 인해 영향을 받는 것을 방지하기 위한 대책 ⓵ 평소 라우터1를 사용 (2.라우터는 동작 X)⓶ 라우터1가 고장시, 라우터2가 동작하게 된다   로그 밸런싱 : 로드를 분산하는 것. - 한 대의 서버로 부하가 집중되지 않도록 트래픽을 관리해 각각의 서버가 최적으로 운영 될 수 있도록 한다 로드 밸런싱 적용 전  로드 밸런싱 적용 후  대부분의 로드 밸런싱은 폴트 톨런트가 가능하다반대로 폴트 톨런트는 로드 밸런싱이 안된는 경우도 있다 네트워크 분야에 있는 사람들도 로드 밸런싱과 폴트 촐런트에 대해서 혼동하는 경우가 많다고 한다 폴트 톨런트는 미리 ..

Looping루핑(Looping) : 데이터 전송이 불가능해지는 상태를 말한다 루핑(Looping)은 프레임이 네트워크상에서 무한정으로 뱅뱅 돌기 때문에 이더넷의 특성(CSMA/CD)상 네트워크가 조용해야 데이터를 전송할 수 있다  그림에서 처럼 두 호스트 사이에 스위치 또는 브리지가 두 개 있다고 가정.하나의 호스트에서 다른 호스트로 가는 경로가 두 개 이상 만들어진다(왼쪽 브리지를 통해서 가능 길 하나와 오른쪽 브리지를 통해서 가능 길 하나가 있습니다) 보통 이렇게 구성하는 것은 하나의 경로가 끊어져도 다른 경로를 쓰기 위한 것인데아무 생각 없이 이렇게 구성을 하게 되면 루핑이 발생하게 된다 ⓵ 호스트 A가 브로드캐스트 패킷을 보내게 된다 (양쪽 스위치로 전달)⓶ 양쪽 스위치는 Flooding(플로딩..

글자 크기설정 할때마다 setting 하기가 번거로워 찾아보던중  [Ctrl + 마우스 휠] 로 크기 조절이 가능하다는 사실을 알았다    위 설정후 Ctrl + 마우스 휠로 포트 조정이 된다

브리지와 스위치의 차이점일반적으로 브리지와 스위치는 같다고들 한다스위치와 브리지는 데이터 링크 레이어(Data Link Layer) 즉 같은 레이어의 장비이면서 하는 일도 비슷하다  차이점브리지스위치소프트웨어 처리 방식하드웨어 처리 방식(소프트웨어 보다 빠름)포트들이 같은 속도포트에 따라 서로 다른 속도를 지원Store-and-forward 방법만 사용Cut-through, Sote-and-forward 사용   방식1) 스토어-앤-포워드(Store-and-forwarding) 방식 : 스위치나 브리지가 일단 들어오는 프레임을 전부 받아들인 후 처리를 시작하는 방식 ⓵ 프레임을 모두 받아들이고 나면 프레임이 제대로 들어왔는지, 에러는 없는지, 출발지 주소는 어디인지, 목적지 주소는 어디인지를 파악한다 ⓶..