반응형 IT151 [모두의 네트워크] 4장: 데이터 링크 계층: 랜에서 데이터 전송하기 📌 데이터 링크 계층의 역할과 이더넷 데이터 링크 계층(data link layer): 네트워크 기간에 데이터를 전송하고 물리 주소를 경정 이더넷: 랜에서 데이터를 정상으로 주고받기 위한 규칙 컴퓨터 네트워크 기술 중 하나로 전 세계의 사무실이나 가정에서 일반적으로 사용되는 랜에서 가장 많이 활용되는 기술 규격 이너넷은 데이터 충돌을 막기 위한 규칙으로 CSMA/CD 방식을 사용 **CSMA/CS** CS: 데이터를 보내려고 하는 컴퓨터가 케이블에 신호가 흐르고 있는지 확인하는 규칙. MA: 케이블에 데이터가 흐르고 있지 않으면 데이터를 보내도 된다는 규칙 CS: 충돌이 발생하고 있는지 확인하는 규칙 지금은 효율이 좋지 않아서 거의 사용하지 않으며 **스위치(switch)**라는 네트워크 장비를 사용 📌.. 2022. 3. 30. [모두의 네트워크] 3장. 물리 계층: 데이터를 전기 신호로 변환하기 📌 물리 계층의 역할과 랜 카드의 구조 물리 계층: OSI 모델의 최하위 계층 컴퓨터와 네트워크 장비를 연결하고 컴퓨터와 네트워크 장비 간에 전송되는 데이터를 전기 신호로 변환하는 계층 전송 매체를 통해 데이터를 통신할 수 있는 전기적인 신호로 바꾸어 전송하는 일 전기 신호 종류: 아날로그 신호, 디지털 신호 전기신호: 전압이 일정 패턴으로 변하여 생기는 일련희 흐름으로 전압의 변화가 모여서 만들어진 신호 전기신호들을 주고받음으로써 네트워크에서 사진이나 문서 등을 주고받을 수 있다. 디지털 신호: 아날로그 신호와 대비되는 신호 형테 아날로그 신호를 전류의 유무나 극성, 위상의 동일이나 반대 등 물리적 현상을 이용하여 컴퓨터가 인식하는 0 또는 1의 2진수에 대응시켜 나타내는 신호 아날로그 신호는 전화 회.. 2022. 3. 30. [모두의 네트워크] 2장. 네트워크 기본 규칙 📌 네트워크의 규칙 프로토콜: 통신하기 위한 규칙 📌 OSI 모델과 TCP/IP 모델 ISO(International Organization for Standardization): 국제 표준화 기구 📌 캡슐화와 역캡슐화 헤더: 데이터를 보낼 때는 필요한 정보를 데이터에 추가해야 하는데 이 정보를 헤더라고 함 캡슐화: 데이터를 상대방에게 보낼 때 각 계층에서 헤더(데이터 링크 계층의 트레일러도 포함)를 붙여 나가는 것 역캡슐화: 데이터를 수신할 때 각 계층에서 헤더(데이터 링크 계층의 트레일러도 포함)를 제거해 나가는 것 OSI 모델에서 데이터 송신 측은 응용 계층 → 전송 계층 → 네트워크 계층 → 데이터 링크 계층 순서로 캡슐화 반대로 수신 측은 데이터 링크 계층 → 네트워크 계층 → 전송 계층 → 응.. 2022. 3. 30. [모두의 네트워크] 1장. 네트워크 첫걸음 📌 네트워크의 구조 네트워크: 컴퓨터 간의 연결 인터넷: 전 세계의 큰 네트워크부터 작은 네트워크까지 연결하는 거대한 네트워크 패킷: 컴퓨터 간의 데이터를 주고받을 때 네트워크를 통해 흘러가는 작은 데이터 조각 큰 데이터는 작은 패킷으로 분할 대역폭(bandwidth): 일반적으로는 네트워크에서 이용 가능한 최대 전송 속도로 정보를 전송할 수 있는 단위 시간당 전송량 📌 정보의 양을 나타내는 단위 컴퓨터는 0과1 밖에 이해하지 못한다 비트: 정보를 나타내는 최소단위 바이트: 비트 여덟개를 1 바이트라고 함 문자코드: 숫자와 문자의 대응표 📌 랜과 왠 랜(LAN, Local Area Network): 건물 안이나 특정 지역을 범위로 하는 네트워크 왠(WAN, Wide Area Network): 인터넷 서비.. 2022. 3. 30. 문자열 치환 (replace, RexExp, match) 문자열 치환 (replace, RexExp, match) 일치하는 문자열을 강조하기 검색어와 일치하는 단어 강조표시 하기 String.prototype.replace() - JavaScript | MDN RegExp - JavaScript | MDN replace 메서드와 RegExp 사용하기 RegExp RegExp 생성자는 패턴을 사용해 텍스트를 판별할 때 사용 replace() 어떤 패턴에 일치하는 일부 또는 모든 부분이 교체된 새로운 문자열을 반환 패턴은 문자열 또는 정규식(RegExp)이 될 수 있다. 변수와 일치하는 단어 강조하기 RegExp 생성자와 replace의 조합으로 검색어와 일치하는 단어를 강조할 수 있다. input element에 값을 입력하고 해당 단어가 포함된 단어들을 서버에.. 2022. 3. 13. TypeScript vs PropTypes https://blog.logrocket.com/comparing-typescript-and-proptypes-in-react-applications/ Comparing TypeScript and PropTypes in React applications - LogRocket Blog Compare TypeScript and PropTypes, tools for type checking, to determine which one best suits your project's needs. blog.logrocket.com "Comparing TypeScript and PropTypes in React applications"을 번역한 내용입니다. PropTypes 와 TypeScript는 목적이 비슷하지만,.. 2022. 3. 9. [CSS] BEM (Block Element Modifier) BEM 의미 BEM은 Block, Element, Modifier로 구성된 클래스 이름을 짓는 CSS 방법론이다. BEM 방법론은 id에서 사용하지 않으며, 오직 class명에만 활용할 수 있다. "어떻게 보이는가"가 아니라 "어떤 목적인가"에 따라 이름을 짓는다. Block Element Modifier 재사용 가능한 독립적인 블록 블록을 구성하는 종속적인 하위 요소 블록 또는 요소의 변형 (모양, 상태, 동작) BEM을 사용하는 이유 BEM 명명 규칙은 세 가지 뚜렷한 이점을 제공 BEM은 목적 또는 기능을 전달 BEM은 구성 요소의 구조를 전달 BEM은 선택자 특이성을 항상 낮은 수준으로 유지 BEM 특징 의미론적 클래스 선택자 작명 규칙 약어 사용 피하기 다른 형식의 선택자 사용을 제한 --, _.. 2022. 2. 22. [Web] 브라우저 렌더링 브라우저 렌더링 우리는 매일 같이 크롬, 사파리 등의 다양한 브라우저를 통해 편리하게 웹사이트를 접속하고, 사용하고 있다. 어떤 방식으로 브라우저에서 웹 페이지가 렌더링 되는지, 그 과정을 정리해보자 한다. 브라우저란 무엇일까? 브라우저의 주요 기능 은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다. 먼저 브라우저는 서버에서 받아온 HTML 문서를 W3C(World Wide Web Consortium)에서 정한 HTML과 CSS 명세에 따라 명세를 따라 HTML를 해석한다. 브라우저의 구조 브라우저는 크게 화면을 조정하는 영역과 데이터를 조작하는 영역으로 구분 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분.. 2022. 2. 9. 리액트(React.js) vs 뷰(Vue.js) 리액트(React.js) vs 뷰(Vue.js) 2021년 StackOverFlow에서 조사한 웹 프레임워크 사용 순위에서 react.js가 1위를 했다. vue의 사용이 증대되고 있지만 아직까지 크게 순위적인 차이가 나지 않은 것 같다. 리액트와 뷰의 차이점이 라이브러리와 프레임워크라는 것은 알고 있었지만, 정확한 차이점에 대해서 인지하지 못한 채 리액트만 사용해왔다. 뷰 역시 사용해 볼 계획이기 때문에 뷰를 학습하기 전 어떠한 차이점이 있는지 궁금했다. 내가 사용하고 있는 도구가 어떤 장점과 단점이 있는지 파악해 보고 사용하도록 하자. UI 라이브러리 vs 프레임워크 react와 vue의 차이점에 있어 가장 대표적인 것은, 먼저 react는 UI 라이브러리이며 Vue는 프레임워크라는 것이다. 라이브러.. 2022. 1. 26. 이전 1 2 3 4 5 6 7 ··· 17 다음 728x90 반응형
