만족

const str= '😅';console.log(str.length); 위 코드를 실행하면 콘솔에는 어떻게 표시될까? '1글자니까 1이겠지' 라고 생각할 수 있지만 2가 표시된다.  왜 이렇게 표시되는지 알아보자 써로게이트 페어 (surrogate pair) 기본적으로 js에서 string은 UTF-16으로 다뤄진다. UTF-16은 문자를 표현할 때 2바이트 또는 4바이트를 가변적으로 사용한다. 한국어 문자(가, 나, 다...)는 2바이트로 표현이 가능하지만일부 한자나 이모지 등은 2바이트로 표현이 불가능해 2바이트를 더 사용해야 한다, 따라서 기본적으로는 2바이트를 사용하되, 2바이트로 표현 가능한 범위 바깥의 문자열들은 2바이트를 더 사용하여 표현한다. 두 글자만큼의 공간을 한 글자를 표현하는데 사..

CLS(Cumulatie Layout Shift) 누적 레이아웃 변경 수치를 말한다. 예를 들어 img 태그에 가로/세로값을 지정하지 않았을 때, 이미지 로딩이 끝난 이후에야 크기를 추정할 수 있으므로 이미지 로딩 중에는 크기가 0으로 추정되고 로딩이 끝나고 나면 크기가 결정되어 레이아웃의 위치가 변경된다. 네트워크의 속도가 느리거나, 크기를 지정하지 않은 이미지의 갯수가 많은 경우 많은 레이아웃 이동이 발생하고, 레이아웃의 이동은 사용자가 의도하지 않은 항목의 클릭과 같은 문제로 UX가 저해된다. 이것을 수치화시킨 것이 CLS 수치이다. (lower is better) CLS 측정하기 크롬 개발자 도구의 lighthouse 를 이용해 측정할 수 있다. 이미지와 글밖에 없는 간단한 html이지만 벌써부터..

위와 같이 스크립트 태그를 선언하고 사용했을 것이다. script에서 지정한 js에서 import/export를 사용하기 위해서는 type='module'을 사용해야 한다. 이제 /path/js/code에서 import/export를 사용할 수 있다. 사용해보기 // /path/js/lib.js export const foo= ()=>{ console.log('hello'); } lib.js 파일을 만들고 위 내용을 작성한다. lib.js는 script태그에 넣어주지 않아도 된다. // /path/js/code.js import {foo} from './lib.js'; foo(); /path/js/code.js에는 위와 같이 import를 사용해 lib.js에서 export한 변수를 사용할 수 있다. 주..

MDN문서 내용을 바탕으로 설명할 것이다. https://developer.mozilla.org/ko/docs/Web/HTTP/CORS#%EA%B8%B0%EB%8A%A5%EC%A0%81_%EA%B0%9C%EC%9A%94 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org CORS는 무엇이고, 왜 필요하며, 어떻게 CORS 문제를 해결하는지는 평소 개발할 때도 크게 도움이 되고, 웹 개발 직무 면접 시에도 자주 등장하는 만큼 반드시 ..

window.addEventListener('online', ()=>{ /*끊김->연결로 변경될 때 호출*/}); window.addEventListener('offline', ()=>{ /*연갤->끊김으로 변경될 때 호출*/}); window.navigator.onLine //true== connected, false == disconnected 몇몇 웹사이트는 네트워크 끊김/연결될 때 시각적으로 알려주던게 신기해서 한번 알아봤다.

network reqeust를 아주아주 편하게 만들어주는 작고 직관적인 라이브러리인 axios에 대해 알아보자. 설명하기에 앞서, 만약 당신이 제이쿼리를 사용하고 있고 제이쿼리에서 사용하는 기능이 쿼리셀렉트(ex: $("#test") )와 네트워크 통신(ex: $.get(...))뿐이라면 쿼리셀렉트를 기본 API로 변경하고 네트워크 부분은 axios로 교체하는 것을 추천한다. (왜냐면 compress되었다 하더라도 제이쿼리자체가 파오후라 어쩔 수 없이 로딩이 좀 걸린다) 실전압축으로다가 빠르게 알아보자. Installation 을 삽입하거나 npm을 사용중이라면 터미널에 yarn add axios를 사용해 설치하자. Axios를 사용해보자 많고많은 함수들이 구현되어 있지만, 딱 하나만 잘 써도 단물 다 ..

바닐라 자바스크립트로도 쿠키를 사용할 수는 있지만, JQuery를 이용하면 아주 간단하게 쿠키를 관리할 수 있다. 쿠키는 특정 정보를 서버에 저장하지 않고 대신에 사용자의 로컬에 저장하는 방법을 말한다. 먼저 Cookie 관련 메소드를 사용하기 위해서는 별도의 jquery-cookie.js 를 임포트 해야 한다. https://github.com/carhartl/jquery-cookie 위의 링크에서 다운로드 받고, 쿠키를 사용할 html에서 로 임포트한다. 먼저 쿠키 생성은 $.cookie(key, value)의 형태로 한다. 생성할 때, 유효기간이나 보안방법 등을 추가로 설정할 수도 있지만, 여기에서는 다루지 않는다. 생성한 쿠키값을 가져오려면 $.cookie(key) 처럼 key를 기반으로 valu..

외부 Library없이 사용하기 // get JSON with using pure javascript var xhr= new XMLHttpRequest(); var paramVal= "paramVal"; var target= "URL"; xhr.open("GET", target+ "?paramName="+ paramVal); xhr.send(); xhr.onreadystatechange= function(){ if(xhr.readyState=== XMLHttpRequest.DONE){ if(xhr.status== 200){ let loadedJSON= JSON.parse(xhr.responseText); $("#content").html("resultCode: "+ loadedJSON.resultCode..