번데기 개발자의 메모장

서론 웹을 공부하다가 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..

.gitignore 란? git을 사용하면서 우리는 용량이 큰 파일이나 업로드해서는 안 되는 key파일 등등을 무시하고 소스코드를 업로드할 수 있도록 선언할 수 있습니다. 이는 .gitignore 라는 파일을 이용하면 되는데요, 단순하게 .gitignore 라는 파일을 작성하고 일련의 규칙에 따라 제외할 파일들의 목록들을 .gitignore 파일에 작성해주면 됩니다. gitignore.io Create useful .gitignore files for your project www.toptal.com 위 사이트를 통해서 원하는 개발 플랫폼에 따라 .gitignore파일을 쉽게 만들고 적용할 수 있습니다. .gitignore 문법 .gitignore 를 제대로 사용하기 위해 문법을 한번 살펴보도록 하겠습니..

서론 보통 React 앱을 빌드 후 배포할 때 S3 + Cloud front를 통해 배포를 하곤 했는데요, 이렇게 하다 보니 항상 빌드 후에 Drag-Drop으로 S3 버킷에 업로드한 뒤 Cloud Front 캐시 동기화를 눌러줘야 하는 번거로움이 있었습니다. Jenkins를 이용하여 이를 자동화하는 방법이 있어서 회사에서는 Jenkins를 적용하여 자동화를 구축하였는데요, 이에 대해 간단하게 알아보도록 하겠습니다. Jenkins pipeline을 이용한 S3 및 CloudFront 자동화 순서 Jenkins 파이프라인 자동화를 로직은 다음과 같습니다. 1. github 및 AWS 관련 Credential 을 등록한다. (+AWS Credential Plugin 설치) 2. Jenkins 파이프라인을 만..

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