전체 글153 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. Git : .gitignore 문법 및 사용법 정리 (추가: '!' 패턴 동작 안될때 해결법) .gitignore 란? git을 사용하면서 우리는 용량이 큰 파일이나 업로드해서는 안 되는 key파일 등등을 무시하고 소스코드를 업로드할 수 있도록 선언할 수 있습니다. 이는 .gitignore 라는 파일을 이용하면 되는데요, 단순하게 .gitignore 라는 파일을 작성하고 일련의 규칙에 따라 제외할 파일들의 목록들을 .gitignore 파일에 작성해주면 됩니다. gitignore.io Create useful .gitignore files for your project www.toptal.com 위 사이트를 통해서 원하는 개발 플랫폼에 따라 .gitignore파일을 쉽게 만들고 적용할 수 있습니다. .gitignore 문법 .gitignore 를 제대로 사용하기 위해 문법을 한번 살펴보도록 하겠습니.. 2022. 12. 16. Jeknins : pipeline을 이용하여 npm 빌드 후 S3 업로드 자동화 (+ cloud front 캐시 무효화) 서론 보통 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 파이프라인을 만.. 2022. 11. 28. 모바일 웹 : 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. AWS : Lambda 요청시 413 payload 에러 해결 최근에 Lambda를 통해 개발을 하였는데, 이를 개발할 때 여러 문제를 겪었는데요, 앞으로 Lambda를 실제로 사용하면서 사용하면서 발생하는 여러 가지 에러나 문제에 대해서 해결방법에 대해 포스팅할 예정입니다. 이번에 다뤄볼 주제는 AWS Lambda의 413 payload 에러입니다. Lambda에 대해서 좀더 알고 싶으시면 아래 글을 참고해주세요. AWS Lambda 기초 개념 및 간단 사용 413 payload 에러의 원인 413 payload에러는 보통 nginx나 nodejs와 같은 서버에서 request의 max-size를 선언한 뒤, 해당 크기를 초과하는 request가 요청으로 들어올 때 발생합니다. { "message": "Request Too Long" } Lambda의 reques.. 2022. 9. 8. Jenkins : apt-get install로 설치한 jenkins의 버전 업데이트하기 개요 Ubuntu에서 agt-get install로 설치한 jenkins를 최신버전으로 업데이트 하는 방법에 대해 알아보겠습니다. 해결법 1. 기존의 jenkins.war 파일 위치 찾기 먼저 jenkins.war파일의 위치를 찾습니다. apt-get으로 설치되어있을 경우 아래 경로에 jenkins.war파일이 위치해 있습니다. /usr/share/jenkins 2. jenkins 서비스 일시 정지하기 jenkins 서비스를 일시정지시킵니다. sudo service jenkins stop 3. 기존 jenkins.war 파일 백업하기 새로운 jenkins.war 파일로 업데이트 하기전에 안전을 위해 기존 jenkins.war 파일을 백업해줍니다. sudo mv jenkins.war jenkins.war... 2022. 8. 30. 안드로이드 : 웹뷰에서 주소창 없애기 개요 모바일 하이브리드 앱을 만들던 중에 웹뷰를 한번 만들어봤는데요, 잘 나오기는 하는데 주소창이 보이기 때문에 하이브리드 앱의 느낌이 아니라 브라우저의 느낌이 강하게 들었습니다. 그래서 안드로이드 웹뷰에서 주소창을 없애는 방법을 적용하였고, 이에 대해 간단하게 정리해보겠습니다. 해결법 package com.example.deso_android; import android.os.Bundle; import android.webkit.WebView; import android.webkit.WebViewClient; import androidx.appcompat.app.AppCompatActivity; public class MainActivity extends AppCompatActivity { privat.. 2022. 8. 30. AWS : 계정들간의 Route53 도메인 공유하기 보통 도메인을 구매하게 되면 호스팅 사이트에서 도메인을 구매하여 사용하게 됩니다. 이때 Route53의 네임서버를 호스팅 사이트에 네임서버로 교체를 해줘야 해당 도메인을 사용할 수가 있습니다. 하지만 AWS 계정이 2개 이상인 경우에는 어떻게 2개의 계정을 Route53과 연결시킬지 고민이 필요합니다. 왜냐하면 계정 하나에 대해 Route53의 네임서버를 등록하게 되면, 다른 계정에서는 해당 도메인을 이용할 수 없기 때문입니다. 이에 대해 어떻게 문제를 해결할 수 있을지 한번 정리해보겠습니다. 여러 AWS 계정에서 Route53 등록하기 문제를 해결하는 방법은 다음과 같습니다. AWS 계정에 도메인을 등록합니다. 이를 AWS 메인 계정이라고 하겠습니다. (ex: example.com) 나머지 AWS 계정.. 2022. 8. 10. Webpack : Webpack 빌드후 자동으로 S3로 배포하기 (webpack-s3-plugin) 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.. 2022. 7. 22. 이전 1 2 3 4 5 6 7 ··· 16 다음
