본문 바로가기

웹 프론트/HTML | CSS | JS17

JS: 유니코드 문자열로 인코딩하기, 문자열 이스케이핑이란? (+encodeURIComponent, encodedURI, encodeURIComponent의 차이점) 서론 웹을 공부하다가 encodedURIComponent, decodeURIComponent 라는 window 객체의 메서드를 사용하여, 문자열 인코딩을 해야 할 일이 있었습니다. 그 당시에, 문제 해결을 위해서 어떤 함수인지, 문자열 인코딩이 무엇인지 모르고 복사해서 쓰곤 했는데 한번 정확하게 어떤 개념인지 알아두어야 할 필요가 있는 것 같아서 한번 정리를 해보게 되었습니다. 문자 집합 / 문자열 인코딩 먼저 문자열인코딩에 개념에 대해 알아보도록 하겠습니다. 문자 집합 (Charater Set) 이란 문자와 숫자가 매핑된 표를 의미합니다. Unicode 기반의 utf-8, 한글 코드 기반의 euc-kr 등이 문자집합이라고 볼 수 있으며, 보통 문자를 숫자로 나타내는 rule을 의미합니다. Unicode.. 2022. 12. 28.
CSS : 말풍선 만들기 (border 속성) 개요 회사에서 프로젝트를 하다 보니 CSS를 이용하여 말풍선을 만들어야 할 일이 생겼습니다. 간단하게 CSS의 border 속성을 등을 이용하여 만들 수 있었는데요, 해당 방법을 한번 공유해보도록 하겠습니다. 말풍선 만들기 예제 먼저 간단하게 Codepen으로 만든 예제를 공유드리겠습니다. See the Pen Untitled by jungwoole91 (@jungwoole91) on CodePen. Border 속성을 이용하여 말풍선 꼬리 만들기 border의 영역에 대해서만 먼저 한번 설명드리겠습니다. border는 크게 border-top, border-bottom, border-right, border-left로 이루어져 있는데 각각의 영역은 아래와 같습니다. 위 사진은 border-top, bo.. 2022. 12. 20.
모바일 웹 : Device Orientation Event란? ( feat: IOS 13+ 이상에서 Device Orientation Event 권한 얻어오기 ) 개요 Device Orientation 는 모바일 웹에서 기기의 위치나 회전에 대한 값을 얻어올수 있는 이벤트입니다. 보통 모바일웹에서 360도 파노라마 이미지를 보여주거나 Aframe과 같은 3D 프레임워크를 웹에서 사용할때 내부적으로 DeviceOrientation 이벤트가 사용되는 것을 알수 있습니다. 오늘은 모바일 웹에서 DeviceOrientationEvent 이벤트를 요청하는 방법에 대해 알아보겠습니다. DeviceOrientation 이란? Device Orientation은 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻합니다. 즉, Device Orientation은 모바일 웹에서 디바이스의 물리적 방향의 변화를 감지하기 위해 사용됩니다. 해당 이벤트를 이용하면 모바일 디바이.. 2022. 10. 12.
HTTP : 브라우저에서 axios 요청 보낼시 브라우저 캐시(from disk cache)로 부터 응답 되는 문제 해결하기 최근에 프로젝트를 진행하던 중에, 리소스 요청을 하는 Rest API Request를 날렸을 때 서버로부터 응답이 오는 것이 아니라 이전의 데이터를 반복해서 가져오는 문제가 발생하였습니다. 이를 해결하기 위해 열심히 구글링을 하여 원인을 찾아보았습니다. 문제 원인 문제의 원인은 인터넷 브라우저에서 get 함수를 호출했을 때 동일한 url이면 브라우저 자체에서 캐시 처리가 되어 실제 서버를 호출하지 않는 문제 때문이었습니다. 즉 새로운 요청을 서버로부터 받아와야 하는데 크롬 브라우저 자체의 캐시로 요청을 처리한 것입니다. 브라우저 캐시의 생명주기 위와 같은 이유가 일어나는 이유를 알기 위해서는 브라우저의 캐시 생명주기를 알아야합니다. 보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 .. 2022. 6. 21.
JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수 있는 최대 용량을 구하는 방법에 대해 간단하게 알아보겠습니다. 일단 blob에 대한 개념은 아래 링크를 통해 확인해주시면 됩니다. JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blo jw910911.tistory.com Blob 최대 용량 계산 공식 Blob의 최대 용량을 계산하는 공식입니다. OS 환경에 따라 할당할수 있는 Blob 사이즈가 달라지는 것을 확인 할 수 있습니다. 브라우저에서.. 2022. 3. 18.
JS : 모바일 웹앱에서 video 태그 자동재생 구현하기 ( + 추가적으로 IOS safari에서 자동 재생 시 저전력 모드일때 멈추는 문제 예외처리) 모바일 웹앱을 만들때 비디오를 자동 재생하는 부분에서 애를 먹곤 합니다. IOS의 Safari와 안드로이드의 Chrome에 맞춰서 비디오를 자동 재생을 시키려면 몇가지 유의해야 할 점이 있습니다. 이에 대해서 알아보고 추가적으로 IOS Safari에서 저전력 모드일때 자동재생이 막히는 부분에서 예외처리 방법에 대해 알아보겠습니다. 모바일에서 Video 태그 자동재생 보통 모바일에서 비디오 태그를 자동재생 시킬때 필요한 몇가지 속성들이 있습니다. Video 태그에 자동재생, 즉 autoplay를 활성화 시키려면 기본적으로 muted 속성이 필요합니다. muted 속성은 video태그에서 소리를 막아주는 속성값입니다. muted 속성이 필요한 이유는 웹 브라우저를 켰을때 유저가 원하지 않는데 자동재생되며 소.. 2022. 1. 29.
JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 마우스 오른쪽 클릭을 눌렀을 때 나오는 메뉴를 contextmenu라고 합니다. 모바일에서는 보통 `LongClick` 시에 해당 메뉴가 나오게 되는데, 때에 따라 해당 부분때문에 모바일 웹앱을 만들때 방해가 될 수 있습니다. 이럴때는 하단 태그에 다음과 같은 JS 파일을 삽입해주면 문제가 해결됩니다. // context 메뉴 출력시 호출되는 event handler window.oncontextmenu = function(event) { event.preventDefault(); // 기본 태그 기능 막기 event.stopPropagation(); // 이벤트 전달 막기 return false; }; 2021. 7. 21.
자바스크립트 : 깊은 복사 vs 얕은 복사 깊은 복사 깊은 복사는 변수에 다른 변수의 값을 대입했을때 각각의 변수가 독립적으로 존재하고 값만 복사 되었을 때를 말합니다. 즉 원본의 값만을 복사하여 반환 합니다. // 일반변수의 깊은복사 let a = 2; let b = a; console.log (a, b) // 2, 2 b = 3; console.log (a, b) // 2, 3 // 배열의 깊은복사 const a = [1, 2, 3, 4]; const b = [...a]; b[3] = 3 console.log(a) // 1, 2, 3, 4 console.log(b) // 1, 2, 3, 3 얕은 복사 반면 얕은복사는 배열이나 객체등에서 해당 객체의 참조값을 대입했을때, 해당 참조값의 복사가 일어나 같은 주소를 가르키게 될 경우를 의미합니다. .. 2021. 6. 15.
자바스크립트 : Slice vs Splice 차이점 비교 (깊은 복사, 얕은 복사) Javascript에서 배열의 slice 메서드에 대해 알아보겠습니다. 보통 Splice와 Slice는 배열의 일부분을 잘라내어 새로운 배열을 만들고 싶을때 보통 사용하는데요, 저도 Splice와 Slice의 차이점을 알지못하고 썼는데, 잘 알고 쓰면 좋을것 같아서 정리를 하게 되었습니다. Slice 사용법 (깊은 복사) slice는 원본 배열을 바꾸지 않습니다. slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 깊은 복사의 방법입니다. 즉 원본 배열의 값만을 복사해서.. 2021. 4. 20.
text-indent 속성 CSS text-indent text-indent 속성을 들여쓰기 효과를 지정합니다. 즉 문단의 첫번째 줄을 지정한 길이만큼 들여쓰기 한다고 생각하시면 됩니다. 2018. 10. 1.