ETC (31) 썸네일형 리스트형 [#. HTML] HTML에서 font-face 설정하기, preload 사용해서 폰트 버벅이는 문제 해결하기 웹에서 기본 폰트가 적용되어 있지만 특정 페이지에서 다른 폰트를 적용하려고 한다 먼저 폰트 포맷을 살펴보면 TTF, OTF, WOFF, WOFF2 4가지 타입이 있다 Font Format 포맷 특징 TrueType Fonts (TTF) 가장 일반적 대부분의 브라우저 OpenType Fonts (OTF) TTF 기반 TTF에서 지원하지 않는 기능 사용 가능 The Web Open Font Format (WOFF) OTF와 TTF로 이루어져 있는 압축된 폰트 경량 The Web Open Font Format (WOFF 2.0) 향상된 WOFF https://caniuse.com/ttf https://caniuse.com/woff https://caniuse.com/woff2 *포맷별 지원 가능한 브라우저 및.. [#. chart] billboard.js 사용해서 그래프 그렸을 때 bar 색상에 gradient 사용하기 naver에서 지원하는 billboard.js를 사용해서 그래프를 그리고 있다 https://naver.github.io/billboard.js/release/latest/doc/index.html Home - billboard.js API doc billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js. The name "billboard" comes from the famous billboard chart which everybody knows. Documents Playground Play with the diverse options generating on the fly! https://naver. na.. [#. ETC] 웹 브라우저에서 URL을 입력했을 때 과정(OSI 7계층) 브라우저에서 www.tistory.com을 입력했을 때 어떤 일이 일어나고 어떤 과정을 거치게 되는지 알아보자 1 브라우저를 연 후 주소입력창에 URL을 입력한다(www.tistory.com) DNS를 통해 www.tistory.com의 IP를 알아낸다 2 OS(운영체제)에게 www.tistory.com의 IP와 HTTP PORT인 80을 기준으로 TCP 연결을 해달라고 요청한다 OS는 www.tistory.com 80번 PORT에TCP 3-way-handshakes를 요청하며 패킷을 보낸다 3 3-way-handshakes가 성공적으로 이루어졌다면 웹 브라우저는 http를 통해 https://www.tistory.com HTML 파일을 보내달라는 데이터를 적는다 4 응용 계층(응용+표현+세션)에서 H.. [#. R] package ‘KoNLP’ is not available for this version of R, R 4 version 이상에서 발생하는 문제 해결 워드클라우드를 만들기 위해 R에서 KoNLP를 사용하려고 하는데 package ‘KoNLP’ is not available for this version of R 사용할 수 없다고 뜬다 R 4.1.3 버전을 사용해서 발생하는 문제다 ① R 설치(Window 기준) ⒧ R console https://cran.r-project.org/bin/windows/base/ Download R-4.1.3 for Windows. The R-project for statistical computing. If you want to double-check that the package you have downloaded matches the package distributed by CRAN, you can compare .. [#. Web] HTTP, Web Socket, Web RTC란? HTTP(HyperText Transfer Protocol) 텍스트 기반의 통신 규약으로 인터넷에서 데이터를 주고받을 수 있는 프로토콜이다 이렇게 규약을 정해두었기 때문에 모든 프로그램이 이 규약에 맞춰 개발해서 서로 정보를 교환할 수 있다 브라우저(클라이언트)가 서버에 요청(Requst)하고 서버가 브라우저에 응답(Response)하면 브라우저-서버 간 통신은 끝난다 따라서 HTTP는 연결 상태를 유지하지 않는 비연결성 프로토콜이다 Request Method GET POST PUT DELETE Request Status Code 1XX (Information responses, 조건부 응답) : 서버가 요청을 받았으며, 서버에 연결된 클라이언트는 작업을 계속 진행한다 2XX (Successful res.. [#. ETC] 디자이너 없이 개발할 때 참고하기 유용한 사이트(color, gradient, svg, png, background) ColorSpace 원하는 색상 하나를 지정하면 그 색상과 어울리는 색상들을 뽑아준다 https://mycolor.space/ ColorSpace - Color Palettes Generator and Color Gradient Tool Just Enter a Color! And Generate nice Color Palettes mycolor.space * gradient = 한 가지 또는 그 이상의 색을 자연스럽게 변화시켜 색상 변화를 단계별로 표현한 것 CSS Gradient https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient generator tool, this website le.. [#. Browser] Canary란? Chrome Canary, Microsoft Edge Canary 자바스크립트 엔진 자바스크립트 엔진의 기본적인 역할은, 개발자가 작성한 자바스크립트 코드를 브라우저에 의해 해석되거나 어플리케이션에 임베드 될 수 있는 빠르고 최적화된 코드로 변환하는 일이다 실제로 JavaScriptCore는 스스로를 ‘최적화 가상 머신’ 이라 부른다 더 자세하게 말하면, 각각의 자바스크립트 엔진은 특정 버전의 ECMAScript를 구현한다 ECMAScript가 발전하는 만큼, 자바스크립트 엔진도 발전한다 수많은 자바스크립트 엔진이 존재하는 이유는 각각의 엔진이 서로 다른 웹브라우저, 헤드리스(headless) 브라우저, Node.js와 같은 런타임 등에서 동작하도록 만들어졌기 때문이다 자바스크립트 엔진을 다른 말로는 ECMAscript라고 도 부른다고 한다 웹 브라우저마다 사용하는 엔.. [#. VSCode] Mac에서 code . 명령어로 VSCode 실행하기 * Mac을 사용하고 oh-my-zsh을 사용하고 있다 ① command + shift + p 입력 후 Shell 서치 Shell command 'code' successfully installed in PATH. 클릭해 준다 ② .zshrc에 설정하기 $ vim ~/.zshrc 아래 내용을 복사해서 입력하고 저장해 준다 code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" --args $* ;} ③ .zshrc 변경사항 실행하기 $ source ~/.zshrc ④ code . 명령어로 실행하기 프로젝트 폴더 경로에서 아래 명령어를 입력하면 VSCode가 실행되는 것을 볼 수 있다 $ code . 이전 1 2 3 4 다음
