번데기 개발자의 메모장

서론 웹을 공부하다가 encodedURIComponent, decodeURIComponent 라는 window 객체의 메서드를 사용하여, 문자열 인코딩을 해야 할 일이 있었습니다. 그 당시에, 문제 해결을 위해서 어떤 함수인지, 문자열 인코딩이 무엇인지 모르고 복사해서 쓰곤 했는데 한번 정확하게 어떤 개념인지 알아두어야 할 필요가 있는 것 같아서 한번 정리를 해보게 되었습니다. 문자 집합 / 문자열 인코딩 먼저 문자열인코딩에 개념에 대해 알아보도록 하겠습니다. 문자 집합 (Charater Set) 이란 문자와 숫자가 매핑된 표를 의미합니다. Unicode 기반의 utf-8, 한글 코드 기반의 euc-kr 등이 문자집합이라고 볼 수 있으며, 보통 문자를 숫자로 나타내는 rule을 의미합니다. Unicode..

개요 회사에서 프로젝트를 하다 보니 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..

개요 Device Orientation 는 모바일 웹에서 기기의 위치나 회전에 대한 값을 얻어올수 있는 이벤트입니다. 보통 모바일웹에서 360도 파노라마 이미지를 보여주거나 Aframe과 같은 3D 프레임워크를 웹에서 사용할때 내부적으로 DeviceOrientation 이벤트가 사용되는 것을 알수 있습니다. 오늘은 모바일 웹에서 DeviceOrientationEvent 이벤트를 요청하는 방법에 대해 알아보겠습니다. DeviceOrientation 이란? Device Orientation은 중력을 기준으로 기기의 물리적 방향의 변화(event)를 뜻합니다. 즉, Device Orientation은 모바일 웹에서 디바이스의 물리적 방향의 변화를 감지하기 위해 사용됩니다. 해당 이벤트를 이용하면 모바일 디바이..

Webpack으로 웹 애플리케이션을 빌드한 뒤에 S3로 업로드를 해야 하는 경우가 있습니다. 보통 S3를 통한 정적 웹페이지 배포를 할 때, 또는 특정한 버킷 위에 Webpack으로 bundling 한 js파일을 업로드해야 할 경우가 있을 때 이러한 경우가 발생하게 됩니다. 수동으로 dist폴더 안에 있는 파일들을 drag-end-drop을 통해 S3로 업로드 할 수도 있지만, Webpack 명령어 사용 후에 자동으로 S3 Bucket에 올려주는 플러그인이 있어 한번 소개해드리도록 하겠습니다. webpack-s3-plugin 오늘 설명해드릴 플러그인은 바로 webpack-s3-plugin 인데요, 아래 링크를 누르시면 npm 설명 페이지를 확인하실 수 있습니다. webpack-s3-plugin Uploa..

React-Native로 몇 개의 앱을 만들어 보았는데 항상 안드로이드 배포를 할 때마다 찾아보고 고생을 많이 한 것 같습니다. 그래서 간단하게 안드로이드 배포시 꼭 필요한 부분만 정리해서 포스팅을 해보았습니다. Release 빌드 준비해야할 것 1. Icon 준비하기 2. 구글 개발자 등록하기 3. keystore 발급하기 4. android/gradle.properties 편집하기 5. release apk 만들기 6. Play Store에 앱 등록하기 1. Icon 준비하기 먼저 기본적으로 안드로이드 앱을 만들고 플레이스토어에 등록하기 위해 준비해야 할 이미지는 아래와 같습니다. 최소 2개의 스크린샷 (측면 최소 320픽셀, 최대 3840픽셀의 JPG 또는 24비트의 PNG) 그래픽 이미지 (102..

최근에 프로젝트를 진행하던 중에, 리소스 요청을 하는 Rest API Request를 날렸을 때 서버로부터 응답이 오는 것이 아니라 이전의 데이터를 반복해서 가져오는 문제가 발생하였습니다. 이를 해결하기 위해 열심히 구글링을 하여 원인을 찾아보았습니다. 문제 원인 문제의 원인은 인터넷 브라우저에서 get 함수를 호출했을 때 동일한 url이면 브라우저 자체에서 캐시 처리가 되어 실제 서버를 호출하지 않는 문제 때문이었습니다. 즉 새로운 요청을 서버로부터 받아와야 하는데 크롬 브라우저 자체의 캐시로 요청을 처리한 것입니다. 브라우저 캐시의 생명주기 위와 같은 이유가 일어나는 이유를 알기 위해서는 브라우저의 캐시 생명주기를 알아야합니다. 보통 웹브라우저가 서버에서 지금까지 요청한 적이 없는 리소스를 요청하게 ..

웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blob이란? blob은 binary large object의 약자입니다. 이름처럼 바이너리 형태로 큰 객체를 저장하며, 이 객체는 주로 이미지, 비디오, 사운드 등과 같은 멀티미디어 객체들을 나타냅니다. blob의 경우 Chrome에서 954MB 정도의 이진 데이터를 저장할 수 있고, 이는 환경에 따라 다릅니다. blob으로 저장할 수 있는 최대 용량을 구하는 방법에 대해 궁금하신 분들은 아래 링크를 참조해주세요. JS: chrome 브라우저에서 blob 최대 용량 구하기 브라우저에서 blob에 저장할수..

브라우저에서 blob에 저장할수 있는 최대 용량을 구하는 방법에 대해 간단하게 알아보겠습니다. 일단 blob에 대한 개념은 아래 링크를 통해 확인해주시면 됩니다. JS : blob에 대해 알아보고 data URL을 통해 표현하기 (createObjectURL, removeObjectURL) 웹 개발을 하다 보면 blob과 dataUrl을 종종 사용하게 됩니다. 단순하게 웹에서 data를 표현하는 방식으로 알고 있었는데 많이 사용을 해봤지만 깊게 알아본 적이 없어서 한번 정리를 해봤습니다. Blo jw910911.tistory.com Blob 최대 용량 계산 공식 Blob의 최대 용량을 계산하는 공식입니다. OS 환경에 따라 할당할수 있는 Blob 사이즈가 달라지는 것을 확인 할 수 있습니다. 브라우저에서..

웹 개발을 하게 되면 HTTP에 대해 조금 알아두는 것이 좋습니다. 그중에서 Content-Type에 대한 이해가 부족한 것 같아 정리를 해보았습니다. Content-Type Content-Type은 api 연동시에 보내는 자원을 명시하기 위해 보통 사용합니다. Content-Type을 깊게 이해하기 위해서는 HTTP의 request의 구조를 이해하는 것이 좋습니다. HTTP의 Request는 다음과 같이 4개의 파트로 나눌 수 있습니다. 위 그림에서 Message Body에 들어가는 타입을 HTTP Header에 명시해줄 수 있는데 이때 명시해줄 수 있도록 해주는 필드가 바로 Content Type입니다. 예를 들어 api 요청 시 request에 실어 보내는 데이터(body)의 type정보를 표현합니..

React Native를 개발하다 보면 절대 경로 설정을 하고 싶을 때가 있습니다. 이때 헤메시는 분들을 위해 간단하게 정리해보겠습니다. 1. babel-plugin-module-resolver 설치하기 먼저 아래와 같은 babel-plugin-module-resolver를 설치하여 줍니다. npm i babel-plugin-module-resolver 2. babel.config.js에서 alias 설정하기 babel.config.js는 기본적인 babel에 대한 설정을 저장하고 있는 config 파일입니다. 기본적으로 React-Native 프로젝트는 다음과 같이 babel.config.js가 구성되어 있습니다. module.exports = { presets: ['module:metro-react-..