TIL

Presentation Layer(표현 계층) 응용 계층으로부터 받은 데이터를 세션 계층에 보내기 전에 통신에 적당한 형태로 변환하고, 세션 계층에서 받은 데이터는 응용 계층에 맞게 변환하는 기능을 한다. 코드 변환, 데이터 암호화, 데이터 압축, 구문 검색, 정보 형식(포맷) 변환, 문맥 관리 기능을 한다. 이 계층에 데이터를 표현하기 위해서 사용되는 다양한 포맷들이 있다. 웹 브라우저에서는 HTML, XML, Javascript가 있고, 그림 파일에는 JPEG, GIF, PNG 그리고 오디오/비디오는 흔히 MPEG, MP3 같은 포맷을 사용한다. 암호화의 경우에는 TLS, SSL를 사용한다.

Application Layer(응용 계층) 응용 계층은 사용자가 OSI 환경에 접근할 수 있도록 서비스를 제공한다. 사용자가 네트워크 통신을 할 수 있는 인터페이스를 제공한다. 예를 들면 이메일을 보낼 때 사용하는 outlook이나 인터넷 검색을 사용할 때 쓰는 크롬을 같은걸 말한다. outlook이나 크롬 같은 응용 프로그램은 응용 계층 프로토콜과의 통신을 도와주는 역할을 한다. 실제 사용되는 application layer 프로토콜은 : 이메일 -> IMAP4, POP3, SMTP 웹 브라우저 -> HTTP, HTTPS 원격 접속 -> SSH, Telnet 등이 있다.

개발자를 준비하는 사람이라면 OSI 모델을 많이 들어봤을 거다. 네트워크 환경을 이해하기 위해서 OSI 모델을 아는 게 중요하기 때문이라고 생각한다. 그래서 OSI 모델은 무엇인가? OSI는 Open Systems Interconnection 모델의 약자다. 풀네임을 알 필요는 없지만 이 모델이 사실은 컨셉 프레임워크라는 사실은 알아야 한다. 컨셉 프레임워크라는 게 무슨 말이냐면 OSI 모델은 데이터가 네트워크에서 어떻게 움직이는지를 정리한 표 같은 거다. 실제 네트워크 환경에는 TCP/IP 모델이 적용되어있다. 그럼 왜 OSI 모델을 만들었나?? 그건 위에서 설명한 거처럼 네트워크가 어떻게 동작하는지 잘 이해하기 위해서 만들어졌다고 한다. OSI 모델에는 총 7개의 레이어(층)가 존재한다. 이 7개의 ..

컴퓨터들은 네트워크 프로토콜로 통신을 한다. 그렇다면 여기서 말하는 프로토콜은 무엇일까? 간단히 말해서 프로토콜은 기계들이 효율적으로 데이터를 주고받을 수 있게 만들어진 규칙이다. 프로토콜에는 여러 종류가 있지만, 위 그림처럼 이메일을 주고 받을주고받을 때 사용하는 프로토콜이 있고 파일을 주고받을 때 사용하는 프로토콜이 있다. 프로토콜은 두가지 요소를 가지고 있다. 1. 물리 프로토콜 물리 프로토콜은 말 그대로 물리적 요소를 말한다. 네트워크를 연결하는 케이블이나 신호를 주고받는 장치들을 말한다. 2. 논리 프로토콜 논리 프로토콜은 데이터가 언제 어떻게 보내지는지를 관리하는 소프트웨어를 말한다. 프로토콜의 몇가지 예를 살펴보면, 웹에는 우리가 흔히 들어본 http/https 프로토콜을 사용한다. 이메일은..

위와 같은 화면이 있다. 성을 입력하는 필드에 무언가는 입력하면 Hi! 옆에 입력된 글자가 나오고 이름 필드에 입력 한 글자는 Hi! 와 성 옆에 나오게 만들어보자. 즉, 아래와 같은 결과물이 나와야 한다. 우선 처음으로 만든 소스 코드를 보자. import React, { useState } from "react"; function App() { const [fName, setFName] = useState(""); const [lName, setLName] = useState(""); function updateFName(event) { const firstName = event.target.value; setFName(firstName); } function updateLName(event) { c..

컴포넌트 안에 메서드를 만들어서 간단한 이벤트를 처리해보자! 위와 같은 화면이 있고 요구사항으로는 1. 입력 버튼에 마우스가 올라가면 색이 변해야 한다. 2. 마우스가 버튼에서 나가면 색은 다시 돌아와야 한다. 3. 이름을 입력하고 버튼을 누르면 "안녕하세요"가 "감사합니다"로 변해야 한다. 우선 1, 2번을 해결해보자! import React, { useState } from "react"; function App() { const [isMousedOver, setMouseOver] = useState(false); function handleMouseOver() { setMouseOver(true); } function handleMouseOut() { setMouseOver(false); } ret..

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식입니다. MDND에서 가져온 구조 분해 할당에 대한 설명이다. 말 그대로 배열이나 객체를 분해해서 값을 가져올 수 있는 걸 말한다. const animals = [ { name: "cat", sound: "야옹" }, { name: "dog", sound: "왈왈" } ]; animals이라는 배열이 있다. 동물의 이름과 소리에 대한 정보를 가진 객체가 2개 있다. animals 배열을 분해해보자! import animals from "./data"; const [cat, dog] = animals; console.log(cat); console.log(dog); 우선 animals ..

import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( 0 + , document.getElementById("root") ); 오른쪽과 같은 UI가 있다. + 버튼을 누를 때마다 숫자가 하나씩 올라가게 만들어 보자! 왼쪽과 같은 html 코드로는 이 기능을 만들 수 없다. 증가되야하는 숫자를 변수로 만들고 +버튼이 눌릴 때마다 숫자를 올려주는 메서드를 만들면 될 거 같다! import React from "react"; import ReactDOM from "react-dom"; var count = 0; function increase() { count++; console.log("클릭!"); } ReactDOM.re..