본문 바로가기

분류 전체보기

 (59)
06. 멀리 있는 컴퓨터 간의 통신 - IP 프로토콜 구조 IPv4 프로토콜 IPv4가 하는 일 네트워크 상에서 데이터를 교환하기 위한 프로토콜 데이터가 정확하게 전달될 것을 보장하지 않는다 중복된 패킷을 전달하거나 패킷의 순서를 잘못 전달할 가능성도 있다 (악의적으로 이용하면 DoS 공격) 데이터의 정확하고 순차적인 전달은 그보다 상위 프로토콜인 TCP에서 보장 다른 네트워크의 특정 대상을 찾는 IPv4 프로토콜 보통 IP Option은 거의 사용하지 않고 20 Bytes 사용 Header는 20 ~ 60bits인데 주어진 건 4칸? (4bit - 최대로 표현할 수 있는 수 15) => Header / 4 수를 씀 일반적으로 5 사용 TOS는 현재 사용하지 않음 => 0 Total Length: Header + Payload의 길이 Identification와..
[React 기초] 03. Props Props 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있는 방법 스타일을 저장한 컴포넌트를 재사용할 수 있다면? 함수형태로 만든 컴포넌트에 인자 props를 전달 가능 props는 object형태로 받아서 props.property 형태로 인자 전달 가능 function Btn(props) { console.log(props); return ( {props.potato} ); } function ConfirmBtn() { return Confirm; } function App() { return ( ); } const root = document.getElementById("root"); ReactDOM.render(, root); JS 문법을 이용해서 props 부분 짧게 쓰는 방법 func..
[React 기초] 02. State State state: 데이터가 저장되는 곳 아래 예시에서 counter의 숫자 부분을 state로 대체 가능 버튼을 누를 때 전체가 render되게 됨 이렇게 구현해도 개발자 도구로 버튼을 누를 때마다 바뀌는 부분을 확인하면, 해당 부분 숫자만 바뀌는 것을 확인할 수있음 - react 짱 조금 더 rendering을 편하게 하는 방법은 없을까? useState [추가팁] JS 문법 const food = ["tomato", "potato"]; const [myFavFood, mySecondFavFood] = food; // same as myFavFood = food[0];, mySecondFavFood = food[1]; // myFavFood // 'tomato' useState를 사용해서 바뀐 부..
[React 기초] 01. Basics of React JS React JS를 사용하는 이유? React JS는 UI를 interactive하게 해준다! Vanilla JS html 요소를 먼저 생성 먼저 생성한 html 요소를 JS에서 지정 및 조작 Total clicks: 0 Click me React JS html에 직접 작성 x React object를 먼저 생성, ReactDOM으로 React object를 html에 작성 얻을 수 있는 효과 React JS가 결과물인 html을 업데이트 가능 => 유저에게 보여질 내용을 컨트롤할 수 있다 addEventListner를 속성처럼 부여할 수 있음 const btn = React.createElement( "button", { onClick: () => console.log("im clicked"), }, "..
05. 통신하기 전 반드시 필요한 ARP 프로토콜 ARP 프로토콜 ARP가 하는 일 IP 주소를 이용해 MAC 주소를 알아옴 ARP 프로토콜은 같은 네트워크 대역에서 통신을 하기 위해 필요한 MAC 주소를 IP 주소를 이용해 알아오는 프로토콜 같은 네트워크 대역에 통신을 하더라도, 데이터를 보내기 위해서는 7 계층부터 캡슐화를 통해 데이터를 보내기 때문에 IP주소와 MAC 주소 모두 필요 => IP 주소는 알고 MAC 주소는 모르는 경우에도, ARP를 통해 통신 가능 ARP의 구조 ARP 프로토콜의 통신 과정 IP 주소로 MAC 주소를 알아오는 과정 A 컴퓨터가 MAC 주소를 모르는 C 컴퓨터로 ARP 요청을 보내려고 함 ARP에는 목적지의 MAC 주소가 들어가는데 어떻게 요청을 보내지? Ethernet의 목적지 MAC 주소를 전부다 1로 하고 (FF)..
04. IP 주소 (3계층) 3계층의 기능 3계층에서 하는 일 다른 네트워크 대역, 즉 멀리 떨어진 곳에 존재하는 네트워크까지 어떻게 데이터를 전달할지 제어 LAN과 LAN을 이어줌 발신에서 착신까지의 패킷의 경로를 제어 3계층에서 쓰는 주소 WAN에서 통신할 때 사용하는 IP 주소 IPv4 주소: 현재 PC에 할당한 IP 주소 서브넷 마스크: IP 주소에 대한 네트워크의 대역을 규정 게이트웨이 주소: 외부와 통신할 때 사용하는 네트워크의 출입구 3계층 프로토콜 ARP 프로토콜 IP 주소를 이용해 MAC 주소를 알아옴 IPv4 프로토콜 WAN에서 통신할 때 사용 ICMP 프로토콜 서로가 통신되는지 확인할 때 사용 일반적인 IP 주소 Classful IP 주소 초기에 사용 낭비가 심함 100.0.0.0 ~ 100.0.0.31 까지 한..
03. 가까이 있는 컴퓨터 간의 통신 (2계층) 2 계층에서 하는 일 2 계층의 기능 하나의 네트워크 대역, 즉 같은 네트워크 상에 존재하는 장비들끼리 보내는 데이터를 전달 추가적으로 오류제어, 흐름제어 수행 2 계층의 네트워크 크기 2 계층은 하나의 네트워크 대역 LAN에서 통신할 때만 사용 다른 네트워크와 통신하기 위해서는 3 계층이 도와줘야함 3 계층의 주소와 3 계층의 프로토콜을 이용하여야만 다른 네트워크와 통신이 가능 2 계층에서 사용하는 주소 물리적인 주소 (MAC 주소) LAN에서 통신할 때 사용하는 MAC 주소 16진수로 구성 OUI: IEEE에서 부여하는 일종의 제조 회사 식별 ID 고유번호: 제조사에서 부여한 고유번호 2 계층의 프로토콜 Ethernet 프로토콜 빨간색 친 영역: 3 + 1/2 = 14byte Destination A..
[JS] 배열에서 특정 요소 삭제하기 Problem NodeJS에서 댓글 삭제 시, 해당 글에서 댓글의 정보를 담고 있는 배열에서도 해당 댓글을 삭제 하기 위해서 pop을 사용하였더니, 가장 최근에 작성된 댓글이 삭제되는 버그를 확인했다. video.comments.pop(comment._id); Scratch pop() 메서드는 input에 상관 없이 배열에서 마지막 요소를 제거하고 그 요소를 반환합니다. 따라서 배열에 있는 특정 요소를 제거하고 싶을 경우, 반복문을 사용하여 인덱스를 순회하면서 해당 요소가 나왔을 경우, 해당 인덱스에 해당하는 요소를 splice() 메서드를 사용하여 제거하는 방법이 있다. for (let i = 0; i < video.comments.length; i++) { if (String(video.comment..

티스토리툴바