본문 바로가기

OS & Network59

웹 최적화 - 구글 폰트 속도 빠르게 만들기 (TEST) 웹 사이트의 성능을 측정해 보았더니 구글 폰트를 다운 받는데 시간이 꽤 걸렸다. 브라우저 렌더링을 할 때, 폰트 다운로드가 끝날때까지 기다렸다가 다음 태그를 읽어와서 그런 것 같았다. 참고 블로그를 읽고 속성을 몇가지 수정해주었더니 놀랄만큼 개선 되었다. 최적화라는 게 대단한 기술과 지식을 요하는 거라고 생각했었는데, 약간의 관심을 더 가지고 찾아본다면 누구나 충분히 할수있는 개선점이라는 생각이 들었다. 자, 느낀점은 여기까지로 해놓고 얼마나 개선되었는지 확인하러 가보자 다음은 폰트 최적화를 위한 노력의 과정을 순서대로 담은 포스팅이다 :) 1. 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) - 이론을 먼저 공부해보자 웹 최적화 - 구글 폰트 속도 빠르게 .. 2022. 12. 13.
웹 최적화 - 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) 얼마전 웹사이트 속도를 측정하면서 구글폰트에 많은 시간을 할애한다는 것을 발견했다. 개선을 위해 이 아티클을 읽게 되었고, 아티클 기반으로 직접 테스트도 해본 과정을 포스팅해보려고 한다. 다음은 폰트 최적화를 위한 노력의 과정을 순서대로 담은 포스팅이다 :) 1. 구글 폰트 속도 빠르게 만들기 (Making Google Font Faster In 2022) - 이론을 먼저 공부해보자 웹 최적화 - 구글 폰트 속도 빠르게 만들기 (번역) 얼마전 웹사이트 속도를 측정하면서 구글폰트에 많은 시간을 할애한다는 것을 발견했다. 개선을 위해 이 아티클을 읽게 되었고, 아티클 기반으로 직접 테스트도 해본 과정을 포스팅해보려고 한 devbirdfeet.tistory.com 2. 구글 폰트 속도 빠르게 만들기 (TEST.. 2022. 12. 13.
Network - CDN 이란 (Content Delivery Network) 요즘 CDN 을 이용하여 정적인 파일들 처리를 하고 있다. AWS cloud front 를 통해 url 을 받아 보내주긴 하는데 도대체 이녀석이 무엇을 하는 친군지 어떻게 동작하는지 원리가 궁금해졌다. Network - CDN 이란 (Content Delivery Network) 인터넷 통신을 할 때는, 웹사이트(서버) - 사용자(클라이언트) 간의 물리적 거리가 영향을 받는다. 콘텐츠 전송을 받을 때, 서버와 먼 지역의 사람들은 로딩이 길고, 가까운 지역의 사람들은 로딩이 짧다. 지리적 제약 없는 전송 퀄리티 유지를 위해 cdn 이라는 기술이 등장하였다. cdn 은 지리적으로 분산된 여러개의 서버(캐시서버 / PoP) 이다. 여러 지리적 위치에 접속 지점(POP) 또는 CDN 엣지 서버 그룹을 세팅해 놓.. 2022. 8. 8.
안드로이드 - ADB 로 웹모바일뷰 디버깅 하기(USB연결) QA 하다가 막상 웹 브라우저에서 확인할 때와는 달리 휴대폰에서만 제대로 적용되지 않는 속성들을 발견했다. 하필 나의 갤럭시 A9 은 10 이었기 때문에(폰밍아웃) 무선기능이 되지 않아(11 이후 가능) USB 디버깅만 가능한 상태였다. 하지만 포기하려는 찰나 CTO님의 도우심으로 세팅을 무사히 끝내게 되었다 좋은 건 같이봐야하기 때문에 이 포스팅을 기록해본다 안드로이드 - ADB 로 웹모바일뷰 디버깅 하기 0. 휴대폰에서 개발자 도구 활성화하기 이건 이미 다른 블로그들에서 친절하게 설명이 잘 나와있다. 구글링으로 얼른 갤럭시 개발자도구 키고 돌아오시라 1. ADB 다운받기 (Mac용) https://developer.android.com/studio/releases/platform-tools SDK 플.. 2022. 6. 17.
Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) updated 01/12/24 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.c.. 2022. 6. 6.
Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 포스팅 한 포스팅 쌓아가다보면 지식이 쌓이지 않을지 기대해본다. 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해.. 2022. 6. 5.
Vim - 간단한 단축키 정리 내가 보려고 정리한 Vim 단축키 포스팅이다. 가끔 터미널에서 config 파일 등의 코드들을 간단히 수정해줘야 할일이 있다. 보통의 코드들은 vscode 를 통해 수정하지만, 설정관련 코드들은 포트 넘버 등의 간단한 세팅만 수정하고 저장하기 때문에 간단한 조작방법을 기억하기 위해 이 포스팅을 작성해보았다. Updated 12/08/23 Vim - 간단한 단축키 정리 Move the cursor h move one character left j move one row down k move one row up l move one character right Basic word movements (w / b / e) w move to beginning of next word (다음 단어의 첫 글자) b mo.. 2022. 6. 3.
Mac - Karabiner 설치하고 맥 한영키 변경하기 주말을 맞아 개발팀 팀원님의 추천으로 Karabiner 라는 앱을 사용해보려고 한다. 이 아이는 키매핑을 위한 앱이다. 한마디로 내가 사용하고 싶은 기능을 원하는 키로 설정할 수 있다. (맥북의 장점인 사용자 최적화와도 맞물려있다👍) 원래는 키보드를 마우스처럼 사용하기 위해 이앱을 선택했지만, 일단 한국 유저들사이에서 가장 유명한 기능인 한영키를 변경해보려고 한다. Mac - Karabiner 설치하고 맥 한영키 변경하기 설치하기 설치 1. 공식 웹사이트에서 일단 다운받자 https://karabiner-elements.pqrs.org/ 설치 2. 다운받은 파일을 실행해준다. 그럼 application 에서 아이콘 확인가능 하다. Karabiner-Element 를 클릭 해보자 설치 3. 그리고 Syst.. 2022. 5. 14.
Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) 세션 / 쿠키 / 캐시 / 토큰 기술면접과 정처기의 단골문제 였던 녀석들 😎 하지만 정작 일하다 마주치면 순간 햇갈려서 다시 블로그를 찾아보게 만들었던 녀석들이다. 이번에야 말로 확실하게 정리를 해보자. (아래 글은 제가 이해한 방식대로 정리해본 포스팅입니다. 혹시 잘못된 정보가 있다면 알려주세요!) Cookie(쿠키) / Cache(캐시) / Session(세션) / Token(토큰) (이들의 공통 키워드는 데이터를 "임시저장" 이라는 개념에 사용되는 아이들이다. 개인적으로 유저 정보 등의 임시 데이터들은 매번 서버를 찔러서 가져오기 힘드니 잠시 브라우저나 웹서버 내에서 hold(저장)하는 느낌이었다.) 내 예상이 얼추 맞았다. 이론적으로 알아보니 http 프로토콜은 통신 후, 클라이언트랑 칼같이 연을.. 2022. 4. 13.
반응형

티스토리툴바