TIL 검색 결과

해당 글 108건

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

Network address translation(Network masquerading, IP-masquerading) IP 패킷이 지나갈떄 src, dst의 재작성을 포함함 왜 도입되었고 유명한가 IP address의 결핍 극복 공공 아이피 공유: 많은 수의 호스트는 적은 량의 공공 아이피 주소를 공유할수 있음. 돈,IP 주소 공간 절약 확장 쉬움: 로컬 네트워크 기기가 사설 주소화되어있고, 각각이 공공 아이피 주소를 가질 필요가 없기에, 로컬 네트워크에 클라이언트 추가하기 펴함 로컬 컨트롤 좋음: 관리자는 사설 네트워크에서 오는 장점들을 가질수 있지만 여전히 인터넷에 접근 가능 보안성 증가 NAT translation은 간접 접근의 레벨을 높인다. 따라서 기관의 네트워크와 공공 인터넷 사이의 방화벽의..
TIL 2021. 11. 18. 00:21

TIL 2021-11-16 ARP, cross-env, Tailwind CSS with Webpack

ARP Switching과 Routing의 차이 Swithcing은 datalink layer에서 어느 인터페이스로 나가야하는지를 정해줌 Routing은 IP Layer에서 어떤 routing path를 통해 destination에 도착할 것인지를 정함 Header의 Type이 0x8060인 경우에 ARP임. Hardware Type: 어느 네트워크를 사용하는지(Ethernet 0x0001) Protocol Type : 어떠한 유형의 프로토콜 사용하는가? ARP은 IPv4에서 사용하므로 0x0800 Hardware address length -> MAC -> 48bit -> 6byte Protocol address length -> 32bit -> 4byte Operation code : Request ..
TIL 2021. 11. 17. 00:05

TIL 2021-11-15 ICMP 2, Proxy ARP

RS, RA Multicast Link에서의 사용을 위한 Router Advertisement, Router Solicitations 호스트가 Router Solicitation을 보내면 라우터들이 Advertisement를 보내줌 각각의 라우터는 주기적으로 각각 멀티캐스트 인터페이스들에게 그 인터페이스의 IP 주소를 알려주는 RA를 Broadcast한다 default rate은 7~10분, lifetime은 30분 링크에 연결된 호스트가 시작되면 즉시 advertisement를 요청하는 RS를 broadcast할수 있음 Router discovery message는 라우팅 프로토콜을 구성하지 않음. 이웃된 라우터의 존재를 호스트에게 알려주지만 어떤 것이 제일 좋은지는 알려주지 않음 만약 호스트가 특정 ..
TIL 2021. 11. 15. 23:53

TIL 2021-11-14 ffmpeg.wasm, cross-origin isolation,webpack

mp3를 mp4로 변환하는 방법을 찾으면서 생각해본 방법은 두가지였다. 1. video tag에 mp3를 달았을떄 동영상 컨트롤러처럼 나오느냐? 2. FFMPEG을 통한 MP3 -> MP4 변환 1의 경우에는 된다면 간단하니 정말 좋고 안되면 말면 식으로 생각해본 방법이었는데, 역시나? 안되었다. 그래서 어쩔수 없이 FFMPEG을 통해서 변환하는 방법을 사용하기로 하였다. 근데 내가 만들고 싶은 것은 MP3파일에 사진을 붙여 MP4 파일을 만드는 홈페이지고, 브라우저 상에서 운용되어야하였다. 따라서 웹어셈블리 형식으로 포팅된 FFMPEG.WASM이란 라이브러리를 사용하기로 하였다. FFMPEG.WASM이란 순수 자바스크립트와 FFMPEG를 통해 브라우저 내에서 바로 녹화, 변환등을 실행해줄수 있도록 해주..
TIL 2021. 11. 14. 23:36

TIL 2021-11-13 Tailwind CSS// input type file

Tailwind CSS는 쉽게 인라인 css를 만들수 있는 라이브러리다. 이와 비교군에 있는것이 Materialize CSS, Bootstrap이 있을텐데, 이 두개와는 조금 다른것이 Bootstrap과 Materialize같은 경우는 미리 정의된 컴포넌트들을 사용하거나 커스텀하는 느낌이라면, Tailwind CSS는 그런 컴포넌트 없이 CSS Helper로써의 기능을 충실히 수행해주는 느낌이다. 부트스트랩 같은 경우에는 이미 만들어진 컴포넌트들이 있다는 것이 장점이자 단점인데, 별도의 CSS 수정 없이도 이미 깔끔하고 이쁘게 만들어진 컴포넌트를 바로 사용할 수 있다는 강력한 장점이 있지만, 반대로 부트스트랩으로 만든 사이트들은 전부 비슷한 디자인이라는 생각을 받을수도 있다. 만약 Bootstrap 같은..
TIL 2021. 11. 13. 23:27

TIL 2021-11-11 Puppeteer와 Cheerio

크롤링 사이트를 만들기 위해서 Node에서 돌아가는 라이브러리를 찾아보니 이 둘을 같이 사용하는 경우를 자주 보았다. Puppeteer 같은 경우에는 브라우저 상의 작업들을 자동화해주는 라이브러리고, chromium 같은 google chrome headless browser에서만 돌아간다. Headless browser는 GUI가 없는 브라우저를 뜻한다. 사이트의 PDF를 생성할수 있고, SPA를 크롤링하여 prerendered content를 생성할 수 있다. 또한 UI 테스트, 키보드 조작 등이 가능하다. 그리고 자동화 테스트 환경을 구성할수 있다. Cheerio는 jquery 기반의 마크업 분석 및 조작을 담당하는 라이브러리다. CSS, 리소스 로딩, 자바스크립트 실행, 이런 것들이 없으며 따라서..
TIL 2021. 11. 11. 22:45