Web (8) 썸네일형 리스트형 [Frontend] 로딩 성능 최적화 안녕하세요. 오늘은 프론트엔드의 로딩 성능을 최적화하는 방법에 대해 알아보도록 하겠습니다. (네이버의 TECH CONCERT 자료를 참고하여 작성했습니다.) 개발자 도구의 Network 탭을 활용하여 웹 페이지의 로딩 속도를 측정하고 분석할 수 있습니다. NAVER 사이트로 예를 들어보겠습니다. 위 그림의 오른쪽에 위치한 Waterfall이라는 것이 성능 개선 작업에서 가장 중요한 지표입니다. 이 Waterfall의 높이를 줄이고, 폭을 줄이고, 간격을 줄이는 것으로 로딩 속도를 개선할 수 있습니다. 1. 높이 줄이기 : Request 수 줄이기 브라우저는 호스트당 동시에 연결할 수 있는 Connection수가 정해져 있습니다. 그 수를 넘어가게 되면 대기시간이 발생하기 때문에, Request 수를 줄이.. [Web] Web Worker 웹 워커 안녕하세요. 오늘은 웹 워커에 대해서 알아보도록 하겠습니다. Javascript는 싱글 스레드로 동작하지만, 저희는 Web API와 Event Loop를 통해 멀티 스레드인 것 처럼 편리하게 사용하고 있습니다. 그런데 여기서 Web API를 사용하지 않고 시간이 많이 걸리는 작업은 어떻게 처리할 수 있을까? 하는 의문이 생깁니다. 이 문제를 해결할 수 있는 것이 바로 웹 워커입니다. 🔸 Web Worker란? 메인 스레드와 분리된 별도의 스레드에서 스크립트 연산을 수행할 수 있는 기술입니다. 웹 워커를 사용하면 메인 스레드가 멈추거나 느려지지 않고 동작할 수 있는 장점이 있습니다. 🔸 Web Worker 사용 이유 Web API의 일부 함수는 이미 멀티 스레드로 처리가 되는 것이 있습니다. 하지만 사용자.. [Web] REST API 안녕하세요. 오늘은 REST API에 대해 알아보도록 하겠습니다. REST API란 REST 제약조건을 지킨 API를 말합니다. 먼저 REST란 무엇인지 알아보도록 하겠습니다. 🔸 REST 등장 배경 REST는 Representational State Tranfer의 약자로, 로이 필딩(Roy Fielding)이 2000년에 박사학위 논문에서 최초로 소개되었습니다. 로이 필딩은 HTTP/1.0, HTTP/1.1 주요 저자 중 한 명으로, 웹을 망가뜨리지 않으면서 HTTP를 적용하기 위한 방법에 대해 고민하였다고 합니다. 그래서 HTTP Object Model을 고안하게 되고, 이것이 후에 REST로 불리게 됩니다. 로이 필딩은 REST를 분산형 하이퍼미디어 시스템(예 : 웹)을 위한 아키텍처 스타일이라고.. Cookie vs localStorage 안녕하세요. 오늘은 Cookie와 localStorage에 대해 알아보도록 하겠습니다. 아이디 저장하기, 일주일동안 팝업 그만보기 기능을 구현할 때 Cookie와 Local Storage 중 무엇을 사용하는 것이 좋을까요? 먼저, Cookie와 Local Storage에 대해서 알아봅시다. Cookie 자세히 서버가 사용자의 웹 브라우저에 전송하는 데이터이다. 특징 : 모든 request마다 쿠키가 함께 전송되어 성능 저하의 원인이 될 수 있다. 만료일 혹은 지속시간(duration)도 명시할 수 있다. localStorage 자세히 Web Storage API 중 하나로, 브라우저에 키/값 쌍을 직관적으로 저장할 수 있는 방법이다. 특징 : 유효기간 없이 데이터를 저장하며, JavaScript를 사용하.. Polyfill 이란? Polyfill 오래된 브라우저에서 지원되지 않는 최신 문법이 동작하도록 도와주는 코드이다. sessionStorage의 경우 최신 브라우저에서는 사용할 수 있지만, 옛날 버전의 브라우저에서는 사용하지 못한다. polyfill은 오래된 브라우저에서도 sessionStorage를 사용할 수 있도록 도와준다. (크로스 브라우징 기능을 제공하기 위해 만들었던 jQuery의 첫 번째 버전이 Polyfill의 예이다.) 참고 https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills 출처 https://remysharp.com/2010/10/08/what-is-a-polyfill https://developer.mozilla.org/ko/d.. URL을 입력하면 일어나는 일 (작성중....) 주소 창에 URL (naver.com)을 입력하면 일어나는 일에 대해 알아봅시다. 1. Chrome 창에 naver.com을 입력합니다. 2. HSTS Preload list를 조사합니다. : HSTS 목록에 naver.com이 있으면 https로 통신하게 됩니다. 3. DNS 질의 메시지를 생성하여 hostname (naver.com)을 IP 주소로 변환합니다. : 목적 IP 주소를 DNS IP 주소로 설정하고 Router를 통해서 DNS 에 도달하게 됩니다. DNS에 도착하면 hostname을 IP 주소로 변환하여 받습니다. 4. 223.130.195.200의 443 포트로 TCP Connection을 생성합니다. : https의 기본 포트는 443입니다. 4.1 Client에서 S.. [proj4] GRS80TM to WGS84 안녕하세요! 오늘은 GRS80TM 좌표를 WGS84 좌표로 변환하는 방법에 대해 알아보도록 하겠습니다. 저는 개인 프로젝트에서 서울시 공공데이터 API와 카카오 맵 API를 사용하고 있는데요. 개발을 하던 중, 서울시 공공데이터 API는 GRS80TM(WTM) 좌표를 사용하고, 카카오 맵은 WGS84 좌표를 사용하는 것을 알게되었습니다.. 서울시 공공데이터 API 좌표를 카카오 맵에 나타내기 위해서는 WGS84 좌표로 변환해야 했고, 구글 서치 끝에 변환 방법을 찾았습니다. 그럼 지금부터 변환 방법 2가지를 공유하겠습니다. 좌표 변환 방법 1. KAKAO MAP API를 사용한다. - 사용방법 보기 : https://apis.map.kakao.com/web/sample/transCoord/ - 단점 : .. React Kakao Map API 적용 안녕하세요. 오늘은 React APP에 Kakao Map API를 적용하는 방법에 대해 알아보겠습니다. 아래의 안내대로 천천히 따라오세요! 1. 카카오 개발자 사이트(https://developers.kakao.com/)에 가입하기 2. API 사용에 필요한 APP KEY를 발급 받기 https://apis.map.kakao.com/ 접속 후, 오른쪽 위의 'APP KEY 발급' 클릭하세요 애플리케이션 추가하기 버튼을 클릭하고, 상세 정보 입력한 후 저장 버튼을 누릅니다. (등록한 애플리케이션을 클릭하면 앱 키 정보를 볼 수 있습니다. 아래의 제 개인 앱 키 정보는 가려두었습니다.) 3. 플랫폼 등록하기 왼쪽의 플랫폼 메뉴를 클릭한 후, 자신이 사용할 로컬 주소를 등록합니다. 저의 경우 local 주소를.. 이전 1 다음
