코드캔버스

Network의 구조

우선 관련 용어와 개념을 살펴보자. 

1. Network Edge

• 용어 그대로 네트워크의 가장자리라고 할 수 있다.
• Network Edge는 Client와 Server로 구분되며, 둘을 합쳐 Hosts 또는 Endsystem이라고도 부른다.
• 서버는 흔히 데이터센터 안에 존재한다.

2. Access Network, Physical Media

• Access Network란 Network Core와 연결되는 네트워크를 의미한다. 즉, network edge들이 인터넷을 사용할 수 있도록 길을 만들어주는 네트워크를 의미한다.
• ISP (Internet Service Provider)가 Access Network를 제공하며, 그 예시로 스마트폰과 같은 모바일은 global ISP를 통해서, 학교나 기업 등의 특정 지역에서는 regional ISP를 통해서 access network를 제공한다.
• 이 네트워크가 연결되기 위해서 필요한 것이 Physical Media이다.

3. Network Core

• Network Core는 전체 네트워크 시스템의 중앙에 위치하여 데이터를 전송하는 핵심적인 역할을 한다.
• Network Core는 여러 라우터들로 구성되어 있으며, 이 라우터들은 communication link로 연결되어 있다.

이제 각각을 좀 더 자세히 알아보자.

Access Network

Access Network란 다른 Endsystem까지의 경로 상에 있는 첫 번째 라우터 즉, 가장 자리 라우터(edge router)에 연결되는 네트워크를 의미한다. 

Digital Subscriber Line (DSL)

지금도 사용되지만 2010년정도까지 많이 쓰였다. 기존에 사용하던 전화선을 사용한다는 것이 특징이다.

그림을 자세하게 살펴보자.

• DSL Modem : 각 가정에 있는 DSL Modem은 지역 중앙국(Central Office)에 위치한 DSLAM(DSL Access Multiplexer)과 데이터 통신을 위해 사용되는 장치로, 디지털 신호와 아날로그 신호 간의 변환을 수행한다. 
• Splitter : Splitter 또한 가정에 존재하며, 가정에 도착하는 디지털 신호(컴퓨터)와 아날로그 신호(전화)를 분리한다.
• DSLAM(DSL Access Multiplexer) : Central office에 DSLAM을 각 집에서 나오는 디지털 신호를 모아서 인터넷 쪽으로 보내주고, 나머지는 전화와 관련된 음성들은 기존의 telephone network로 전달이 된다.

특징

• 장점 : 기존의 telephone line을 사용할 수 있다. 그리고 central office DSLAM을 두고 디지털 신호를 모아서 ISP한테 보내줄 수 있다.
  • DSL phone line을 통해서 데이터를 전송하는 것은 인터넷으로
  • DSL phone line을 통해서 보이스는 telephone으로 간다.
•  2000년대 초반에는 download를 많이 하고, upload는 많이 하지 않았다. 그래서 전체 대역폭을 사용하지만 한계가 있기 때문에, downstream 쪽의 대역폭(frequency)을 더 많이 주게 되었다. 그래서 downstream 쪽은 24Mbps, upstream 쪽에는 2.5 Mbps까지 transmission rate를 두게 된다.
  • <2.5 Mbps upstream transmission rate (typically < 1Mbps)
  • <24 Mbps downstream transmission rate (typically < 10Mbps)
• xDSL (DSL의 종류)
  • ADSL : Asymmetric DSL 
  • HDSL : High-bit-rate DSL
  • SDSL : Symmetric DSL (-> upstream도 늘리자.)
  • VDSL : Very-high-speed DSL

Cable network, HFC (Hybrid Fiber Coax)

케이블 티비를 이미 사용하고 있는 사용자들에게 인터넷을 제공하겠다라는 개념에서 출발하였다. 초기에 나왔던 DSL보다 속도가 빠르다는 것이 특징이다.

그림을 자세히 살펴보자.

• Cable Modem : DSL Modem과 비슷하게 가정 안에 존재하여 똑같이 디지털 신호와 아날라고 신호 간의 변환을 수행한다. 이는 보통 케이블 티비 회사에서 렌트를 해준다.
• Splitter : 이 또한 DSL에서의 Splitter와 유사하다. 디지털 신호와 아날로그 신호를 분리하는 역할을 한다.
• HFC (Hybrid Fiber Coax) : 각 가정에서의 데이터와 TV 신호는 공유되는 케이블을 통하여 Cable headend에 연결된다. 이때 집과 cable headend까지는 coax 케이블을 사용하고, 그 이후에는 cable headend부터 ISP까지는 fiber로 연결한다.
  • Frequency Division Multiplexing : 다른 채널은 다른 주파수로 전달된다. 이는 DSL과는 다르게 Cable은 access network를 share하기 때문이다. -> 하단에서 조금 더 살펴보자.
• Cable Headend : 유선 TV 방송을 위해 전파를 증폭, 조정, 변환, 투입차단 또는 혼합하여 선로로 송출하는 장치들과 신호를 간선 케이블로 송출하는 모든 설비를 말한다.
• CMTS (Cable Modem Termination System) : 케이블 모뎀으로부터 송신된 아날로그 신호를 다시 디지털 포맷으로 변환하는 역할. 이는 DSL 네트워크의 DSLAM와 유사한 기능을 한다. 여기서 해당 신호가 ISP로 가야하는 것인지 또는 Cable TV 방송국으로 가야하는 것인지 등이 결정된다.

특징

• DSL은 dedicated한 반면 Cable은 shared access network이다.
• 왜냐하면 Cable Headend가 보내는 모든 패킷이 모든 링크의 downstream 채널을 통해서 모든 가정을 전달되고, 가정에서 보내는 모든 패킷은 upstream channel을 통해 Cable Headend로 전달되기 때문이다.
• 그렇기 때문에 위에서 봤듯이, 다른 채널마다 다른 주파수로 전송해야하는 frequency division multiplexing이 필요해지는 것이다. 
• 하지만 그럼에도, 각 사용자가 같은 채널을 사용하거나, 다른 데이터를 수신중이라면 속도는 느려질 수 밖에 없다.

FTTx : 요즘은 무엇을 쓸까?

• cable tv를 쓰는 집도 많이 있다.
• FTTx : Fiber to the x
  • FTTH : fiber to the home (새로운 집들)
  • FTTC : fiber to the curb
  • FTTO : fiber to the office
• 시골이나 수요가 없는 곳들은 FTTx가 힘들다. Fiber를 설치하는데에 돈이 드니까. 그래서 아직도 DSL도 쓴다. 미국같은 곳들도 아직도 DSL을 쓰는 곳들도 있다고 한다.

Home Network

집에서 일반적으로 사용되는 access network를 그림으로 표현하면 다음과 같다.

• wired Ethernet (1 Gbps)
• wireless devices : 스마트폰, laptop
• wireless access points (54 Mbps)
• cable 또는 DSL modem -> 위에서 살펴보았다.
• router, firewall, NAT

이제 각각을 자세하게 알아보자.

Enterprise access networks (Ethernet)

• 회사, 학교 등에서 ethernet을 설치하여 사용한다.
• Endsystem들은 Ethernet switch로 연결되며, Ethernet Switch 또는 상호연결된 스위치들의 네트워크는 다시 더 큰 인터넷으로 연결된다.
• transmission rate : 10 Mbps, 100Mbps, 1Gbps, 10Gbps 등 (현재는 테라 단위)

Wireless access networks

• endsystem을 router로 연결하는 공유된 무선 access network이다.
• 이는 access point라고 불리는 base station을 통해서 연결된다.
• 무선 access network에는 크게 wireless LAN과 wide-area wireless access가 있다.

Wireless LAN

• 건물 내에서 사용.
• 무선 랜 환경에서 사용자들은 네트워크에 연결된 AP (Access Point)로 패킷을 송수신한다.
• AP는 다시 유선 네트워크에서 연결된다.

Wide-area wireless access

• 광역무선접속
• 수십 미터 반경 내에 있어야 하는 와이파이와 다르게, 기지국(tellco, cell tower)의 수십 킬로미터 반경 내에 있으면 된다.

Hosts (Endsystem) 

• application message가 발생하면 Hosts는 데이터를 보낼 때 그냥 보내지 않고, 인터넷의 경우 작은 청크 단위로 잘라서 보낸다. 이때 이 단위를 packet이라고 부른다. (L bits)
• 이때 패킷을 송수신하는 데에 필요한 시간을 계산하는 것이 중요하다.
• link transmission rate = link capacity = link bandwith R이라고 할때

Host : sends packets of data

• application message가 발생을 하면, 데이터를 보낼때 그냥 보내지 않고, 인터넷의 경우 잘라서 보낸다.
  • smaller chunk : packet, Lbits
• link transmission rate = link capacity = link bandwidth R이라고 할때

•  packet transmission delay = link로 L-bit packet을 보내는데에 필요한 시간 = L bits / R (bits/sec)

Physical Media (물리 매체)

물리매체를 알아보기 전에 비트에 대해서 먼저 알아보자.

하나의 Endsystem에서 여러 링크와 라우터를 걸쳐 다른 Endsystem으로 비트가 전달되는 상황을 생각해보자. 이 비트는 여러 라우터를 거치게 된다. 즉, 비트는 목적지로 전달될 때 여러 라우터를 걸쳐 전송되며, 일련의 송신기(transmitter)-수신기(receiver) 쌍을 거치게 된다. 이 비트를 전송하기 위하여 필요한 것이 물리매체(physical media)이다. 비트는 물리 매체 상에 전자파나 광 펄스를 전파함으로써 전송된다.

물리매체는 여러 형태이며, 경로상의 각 송신기-수신기 쌍에 대해 같은 유형일 필요는 없다. 예시로는 꼬임쌍선, 동축케이블, 다중모드 광섬유케이블 등이 있다.

물리매체는 크게 두가지로 구분된다.

• 유도 매체 (guided media) : copper, fiber, coax와 같은 solid media를 통해서 전파되는 물리매체이다.
• 비유도 매체 (unguided media) : radio와 같이 무선으로 자유롭게 전파되는 물리매체이다.

Physical Media : coax, fiber

• Coaxial Cable : 동축 케이블
  • two concentric copper conductors : 꼬임쌍선처럼 2개의 구리선으로 되어 있으나, 두 구리선이 평행하지 않고 동심원 형태를 이루고 있다.
  • bidirectional : 데이터가 양방향으로 왔다갔다할 수 있다.
  • 사용 : 케이블 TV 시스템
• fiber optic cable : 광섬유
  • 비트를 나타내는 빛의 파동을 전하는 가늘고 유연한 매체
  • high-speed operation : 초당 10~100기가비트에 이르는 높은 비트율을 지원한다.
  • 광장비는 고가이므로 근거리 전송(LAN, 가정)에는 이용하기 어렵다.
  • 특징 
    • 전자기성 간섭에 영향을 받지 않는다.
    • 100 km까지는 신호 감쇠 현상이 매우 적다.
    • 태핑(tapping, 도청)하기가 어렵다.
  • 사용 : 해저링크, 광역 전화 네트워크

Physical Media : Radio

• unguided media
• 물리적인 wire가 존재하지 않고, 전자기 스펙트럼으로 신호를 주고 받는다.
• bidirectional : 양방향
• 전파가 될 때 환경과 거리에 영향을 받는다.
  • Reflection : 반사되거나
  • Obstruction : 막히거나
  • Interference : 방해되거나

유형

• Terrestrial Microwave (지상 마이크로파) : 유선의 전송 매체를 사용하기 어려운 강, 사막 등의 장애물을 가로질러 장거리 통신 서비스를 제공하기에 적합하다. 파라볼라 안테나를 사용한다는 것이 특징이다.
• LAN : WIFI가 예시이다. 근거리 네트워크(십~수백미터)로 동작하는 채널 
• Wide-area : Cellular 기술이 예시이다. 최근에는 6G까지 논의되고 있다.
• Satellite : 위성은 지구 표면에서 약 36,000km 위에서 궤도를 돌며 네트워크를 제공한다. 위성 통신은 신호가 이동해야 하는 거리 때문에 평균적으로 약 280msec의 종단 간 지연(End-to-End Delay)이 발생한다. 일부 위성은 인터넷 서비스를 제공하기 위하여 낮은 고도에서 운영되며, 이는 지연 시간을 줄이고 성능을 향상시키는 데 도움이 된다.

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

[스프링 입문기 5] 스프링 웹개발 기초

• 정적 컨텐츠
• MVC와 템플릿 엔진
• API 방식

정적 컨텐츠

• 서버에서의 변형 없이 정적 파일을 그대로 웹 브라우저에게 넘겨줌
• Spring Boot에서는 /static 폴더에서 정적 컨텐츠를 사용할 수 있도록 제공한다.

1. 웹 브라우저에서 localhost:8080/hello-static.html 경로로 들어가면 내장 톰켓 서버가 요청을 받는다.
2. 가장 먼저 hello-static과 관련된 컨트롤러가 존재하는지 찾아본다. (컨트롤러가 우선순위)
3. 없다면 resources : static/hello-static.html를 찾는다.

MVC와 템플릿 엔진 

• MVC란 하나의 애플리케이션을 만들 때의 개발 패턴으로, Model(모델), View(뷰), Controller(컨트롤러)이라는 세 가지 구성 요소로 소프트웨어를 구조화하는 방법을 말한다. 
• Model : 모델이란 데이터와 비즈니스 로직을 담당하는 부분으로서, 애플리케이션의 데이터를 처리하고, 상태를 유지하는 역할을 말한다.
• View : 뷰는 사용자 인터페이스(UI)를 담당하는 부분으로, 데이터를 시각적으로 표현하여 사용자에게 보여주는 역할을 담당한다.
• Controller : 컨트롤러는 모델과 뷰 사이의 상호작용을 관리하는 부분이다.
• "name"을 파라미터로 받고, 리턴은 templates/hello-template.html인 컨트롤러를 만들었다.

@GetMapping("hello-mvc")
    public String helloMvc(@RequestParam(value = "name") String name, Model model){
        model.addAttribute("name", name); // key : name, value : name
        return "hello-template";
    }

• "hello-template.html"에서는 모델의 attribute인 name값을 파라미터로 받은 value로 변경하여 html 내용을 동적으로 바꿀 수 있다. 

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaft.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p th:text="'hello '+ ${name}">hello! empty</p>
</body>
</html>

• 파라미터는 GET 방식처럼 "http://localhost:8080/hello-mvc?name=spring!"처럼 설정해 줄 수 있다. 

API 방식

• @ResponseBody를 사용. 

@GetMapping("hello-api")
@ResponseBody
public Hello helloAPI(@RequestParam("name") String name){
    Hello hello = new Hello();
    hello.setName(name);
    return hello; //hello라는 객체 자체를 반환
}

static class Hello{
    private String name;
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

• API 방식은 템플릿 방식과 다르게 viewResolver 대신에 HttpMessageConverter가 작동한다. (JSON 포맷으로 변형)
• 기본 문자는 StringHttpMessageConverter, 기본 객체는 MappingJackson2HttpMessageConverter가 처리한다. byte처리와 같은 다른 형식들도 기본적으로 HttpMessageConverter가 탑재되어 있다.

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

[스프링 입문기 4] 빌드 및 실행하기

빌드하고 실행하기

1. 터미널로 이동 
2. './gradlew build' -> build 폴더가 생성됨
3. 'cd build/libs' 로 이동 
4. 'java -jar hello-spring-0.0.1-SNAPSHOT.jar' 
5. 실행되는지 확인

+) 빌드 파일 지웠다가 다시 실행하고 싶을 때에는? './gradlew clean build'

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

[스프링 입문기 3] Welcome 페이지 만들기

Welcome Page 만들기

• 사용자가 도메인을 타고 들어왔을 때 보이는 첫 화면이 된다.
• 경로 : src/main/resources/static/index.html
• index.html 파일 추가해주기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Hello</title>
</head>
<body>
    hello
    <a href="/hello">hello</a>

</body>
</html>

• 서버를 다시 실행해주면 다음과 같은 화면을 확인할 수 있다. 

• 이와 같이 static 폴더 안에 index.html 파일을 추가하면, 스프링 부트에서 자동적으로 이 index.html 파일을 홈화면으로 기능한다. 

thymeleaf 템플릿 엔진

• index.html은 정적(static) 페이지이기 때문에, 내가 원하는 대로 페이지를 수정하기 위해서는 템플릿 엔진이 필요하다.
• Spring Boot 템플릿 엔진 종류
  • FreeMarker
  • Groovy
  • Thymeleaf (가장 많이 사용되는 템플릿 엔진 중 하나)
  • Mustache

Controller 만들기

• Controller는 web application의 첫 진입점이 된다.

• hellospring 폴더 내부에 controller 패키지를 하나 만들어준다. 

• controller 패키지 안에 HelloController 클래스를 생성해준다.

• HelloController 클래스 내에 다음 코드를 작성한다.

package hello.hellospring.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {
    @GetMapping("hello")  // 웹 어플리케이션이 /hello로 들어오면 이 함수를 실행
    public String hello(Model model ) {
        model.addAttribute("data", "hello");
        return ("hello"); // template 중에서 hello.html을 실행하라는 의미
    }
}

템플릿 추가하기

• src/main/resources/templates 폴더 안에 hello.html 파일을 추가한다.

• hello.html 파일에 다음 코드를 작성해준다.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaft.org">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Hello</title>
</head>
<body>
  <p th:text="'안녕하세요. '+ ${data}">안녕하세요 손님.</p>
</body>
</html>

• localhost:8080/hello로 들어가보면 다음과 같이 "data" 속성에 저장했던 "hello"값으로 바뀌어 출력되는 것을 볼 수 있다.

작동 원리

1. 웹 브라우저에서 /hello 로 접근 하면 스프링 부트에 내장되어 있는 톰켓 서버에서 이를 받아 spring 컨테이너에 던져줌.
2. 컨트롤러 내부에 @GetMapping("hello")를 찾아서 해당 메서드를 실행
3. model에는 key:value 값을 저장 (여기서는 data:hello!!)
4. return "hello"를 하면 templates/hello.html를 찾아감. (thymeleaf 템플릿 엔진 처리)
   • 컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리한다.
   • 스프링 부트 템플릿엔진 기본 viewName 매핑 
   • 'resources/templates/' + {viewName} + '.html' 

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

[스프링 입문기 2] 라이브러리 살펴보기

라이브러리 살펴보기

• Gradle은 의존 관계에 있는 라이브러리를 함께 다운로드 한다.
• Gradle이란 오픈소스 빌드 자동화 툴이다. 거의 모든 타입의 소프트웨어를 빌드할 수 있다고 한다.
• 오른쪽 사이드바에 있는 Gradle 버튼을 눌러서 Dependencies를 확인할 수 있다.

스프링 부트 주요 라이브러리 

• spring-boot-starter-web 
  • spring-boot-starter-tomcat : 톰캣 -> 웹서버를 담당
  • spring-webmvc : 스프링 웹 MVC
• spring-boot-starter-thymeleaf : 타임리프 템블릿 엔진 -> 뷰를 담당
• spring-boot-starter(공통) : 스프링 부트 + 스프링 코어 + 로깅
  • spring-boot
    • spring-core
  • spring-boot-starter-logging 
    • logback, slf4j

테스트 주요 라이브러리

• spring-boot-starter-test
  • junit : 테스트 프레임워크
  • mockito : 목 라이브러리
  • assertj : 테스트 코드를 좀 더 편하게 작성하도록 도와주는 라이브러리
  • spring-test : 스프링 통합 테스트 지원

❗️이 포스팅은 인프런의 [스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB접근 기술] 강의를 정리한 내용입니다.❗️

[스프링 입문기 1] 프로젝트 환경설정

준비

• Java 17 설치
• IntelliJ 설치

스프링 프로젝트 생성

https://start.spring.io/ : 스프링 부트 스타터

• Project : Gradle - Groovy
• Spring Boot : 3.1.2 (SnapShot이라고 되어 있는 것은 아직 정식 출시가 안 된 버전을 의미)
• Language : java
• Java : 17
• Dependencies : Spring Web(웹 기반 프로젝트), Thymeleaf(템플릿 엔진 중 하나) 추가해주기

-> 하단에 Generate 버튼 눌러주기

-> 다운받은 폴더를 압축 풀기해주기

-> 폴더 안에 있는 build.gradle 파일을 IntelliJ에서 열어주기

폴더 계층 살펴보기

1. src 폴더

• main 폴더와 test 폴더로 나누어져 있음.
  • main 폴더 : java 폴더 / resources 폴더(실제 자바 코드를 제외한 xml, html파일이나 설정 파일이 포함)
  • test 폴더 : test code가 들어 있음. (요즘 개발 트렌드에서는 Test code가 매우 중요하다.)

2. .gitignore

• git에는 딱 필요한 소스코드만 올라가야 함. 
• build된 결과물 등은 필요하지 않기 때문에 이를 관리해주는 파일.

3. build.gradle 파일

• 초기 설정한 version이나 dependencies 내용이 들어 있는 파일.

Spring Boot 실행해보기

• src -> main -> hello -> hellospring -> HelloSpringApplication 파일 
• main 함수 실행 (왼쪽에 초록색 run 버튼 클릭)