TIL 2021-11-17 NAT, WOFF, Tailwind Custom Font 적용

Network address translation(Network masquerading, IP-masquerading)

 

IP 패킷이 지나갈떄 src, dst의 재작성을 포함함

 

왜 도입되었고 유명한가

 

IP address의 결핍 극복

• 공공 아이피 공유: 많은 수의 호스트는 적은 량의 공공 아이피 주소를 공유할수 있음. 돈,IP 주소 공간 절약
• 확장 쉬움: 로컬 네트워크 기기가 사설 주소화되어있고, 각각이 공공 아이피 주소를 가질 필요가 없기에, 로컬 네트워크에 클라이언트 추가하기 펴함
• 로컬 컨트롤 좋음: 관리자는 사설 네트워크에서 오는 장점들을 가질수 있지만 여전히 인터넷에 접근 가능
• 보안성 증가
• NAT translation은 간접 접근의 레벨을 높인다. 따라서 기관의 네트워크와 공공 인터넷 사이의 방화벽의 일종을 자동적으로 생성하는 것이다. 이것은 클라이언트 디바이스가 직접적으로 악성적인 누군가와 접ㅈ근하는 것이 어렵다. 왜냐하면 클라이언트는 공공에 알려진 IP 주소를 가지고 있지 않기 떄
• 투명함
• NAT 구현은 대부분 투명하다. 왜냐하면 하나 또는 몇개의 라우터에서 변화가 일어나기 때문이다. 겁나 많은 수의 호스트들은 변하는게 없음

 

 

NAT 개요

 

로컬 주소(사설 주소)

도메인들을 떼어주기 위해 내부적으로 사용되는 재사용 가능한 주소

Address Allocation for Private Internet

• 10.0.0.0 - 10.255.255.255(24bit)
• 172.16.0.0 - 172.31.255.255(20bit)
• 192.168.0.0 - 192.168.255.255(16bit)

 

전역 주소(공공 주소)

전역적으로 Unique 주소

 

NAT 단점

• 복잡성
• 추가적인 시스템이니까 복잡성 증가
• 공공 IP가 없어서 호스트 클라이언트는 몇몇 어플리케이션 구동 못할수도 있음
• 클라이언트가 공공 아이피가 없음. 악성 유저에게서 방어하는 역할도 되지만 반면에 네트워크 클라이언트에게 적합한 접근을 하기가 어려움
• 기관 웹사이트는 NAT 없이 설정됨

 

NAT 종류

 

• Basic NAT
• NAPT(Network Address Port Translation)

 

IPv4 주소를 절약하기 위한 용도인 NAPT가 일반적인 NAT 기기 타입.

모든 Router는 NAPT 지원함

 

 

Basic NAT 동작

 

1. 호스트는 이전과 동일하게 행동

2.호스트로부터 NAT가 패킷을 받았을때, Address Binding과 translation을 해줌

 

3. NAT가 서버로 부터 패킷을 받으면 Translation

 

4. 만약 호스트가 너무 많아서 Binding table이 가득 차면?

 

5. Address Unbinding

특정 시간동안 엔트리에 패킷이 흐르지 않았다면 그 세션 엔트리를 제거함

 

정의

 

사설 네트워크의 노드는 동적으로 사설 주소와 글로벌 네트워크 주소와 매핑하여 Externel network와 통신할수 있게 해줌

 

1:1 translation

 

Mapping: Outbound traffic :

사설 SRC IP 주소 -> 공공 SRC IP 주소

공공 DST IP 주소 -> 사설 DST IP 주소

 

Packet Modification: translation할때 packet 정보가 변함

 

Outbound : SRC IP 주소, IP Header Checksum

 

Inbound : DST IP 주소, IP Header Checksum

 

 

NAPT

 

사설 네트워크의 노드는 NAPT의 aid로 single registered IP 주소를 통해 Externel network에 동시 다발적으로 접근할수 있음.

 

 

WOFF와 WOFF2

 

woff는 Web Open Font Format으로 압축된 TTF, OTT 및 다른 메타데이터를 가질 수 있다.

 

ZIP 압축파일과 비슷하며, 현재는 WOFF보다 더 나은 압축 알고리즘을 가진 WOFF2가 나왔따.

 

Can I use 를 통해 본 Compatiblity

 

WOFF2가 아무래도 더 최신 기술이다보니, IE 측에서는 지원하지 않는 모습을 보인다.

 

그래도 이외의 브라우저에서는 비슷하게 지원하는 중

 

Tailwind Custom Font

 

src/style.css파일에서

 

layer base에서 폰트를 추가해주면 된다.

@layer base {
	@font-face {
		font-family: 'bm-hanna-pro';

		font-weight: 500;
		src: url('./fonts/BMHANNAPro.woff2') format('woff2'),
			url('./fonts/BMHANNAPro.woff') format('woff'),
			url('./fonts/BMHANNAPro.ttf') format('truetype');
	}
	@font-face {
		font-family: 'bm-hanna-air';
		font-weight: 500;
		src: url('./fonts/BMHANNAAir_ttf.woff2') format('woff2'),
			url('./fonts/BMHANNAAir_ttf.woff') format('woff'),
			url('./fonts/BMHANNAAir_ttf.ttf') format('truetype');
	}
	@font-face {
		font-family: 'bm-euljiro';
		font-weight: 500;
		src: url('./fonts/BMEULJIROTTF.woff2') format('woff2'),
			url('./fonts/BMEULJIROTTF.woff') format('woff'),
			url('./fonts/BMEULJIROTTF.ttf') format('truetype');
	}
	@font-face {
		font-family: 'Spoqa Han Sans Neo', 'sans-serif';
		font-weight: 500;
		src: url('./fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'),
			url('./fonts/SpoqaHanSansNeo-Medium.woff') format('woff'),
			url('./fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype');
	}
}

base layer은 element들에 추가적인 기본 스타일을 적용하는 layer인데, 이곳에다 폰트를 불러오면 된다.

 

tailwind.config.js

module.exports = {

	theme: {
		fontFamily: {
			sans: ['Spoqa Han Sans Neo'],
			hanAir: ['bm-hanna-air'],
			hanPro: ['bm-hanna-pro'],
			euljiro: ['bm-euljiro'],
		},
		extend: {},
	}
};

theme 부분만 가져왔는데, 이곳에서 fontFamily를 적용해주어

 

<div class="font-sans">

<div class="font-hanAir">

 

등으로 해당 요소에 폰트를 적용할 수 있다.

 

이를 적용하면서 생긴 작은 문제는 자바스크립트로 이 폰트들을 적용한 텍스트를 Canvas에 작성하려 하였는데, 제대로 되지 않은 것

 

tailwind.config.js

purge: {
		content: ['./public/*.html', './src/*.js'],
	},

이는 purge option에서 ./src/*.js에서 알아서 자바스크립트에서 사용한 폰트들이 purge에서 제외될 것이라고 안일하게? 생각한 것이 문제였다.

 

일차원적으로 생각해보면 그냥 커스텀 폰트를 FontFace Object로 불러와 실제로 사용하면 purge에서는 제외될 것으로 보이나,

 

FontFace 객체는 IE에서 지원하지 않고 있어 이왕이면 범용성 있는 방법으로 해결하고 싶었다.

 

purge: {
		content: ['./public/*.html', './src/*.js'],
		safelist: ['font-serif', 'font-euljiro', 'font-sans', 'font-hanPro'],
	},

그래서 safelist에 이 폰트들을 추가하여 purge에서 제외하도록 하였다.