번데기 개발자의 메모장

인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌는 아래 인프런 강좌를 참고해주시면 됩니다. 강좌 바로가기 문제 설명 N개의 평면상의 좌표(x, y)가 주어지면 모든 좌표를 오름차순으로 정렬하는 프로그램을 작성하세요. 정렬기준은 먼저 x값의 의해서 정렬하고, x값이 같을 경우 y값에 의해 정렬합니다. 입력 설명 첫째 줄에 좌표의 개수인 N(3 { if (a[0] === b[0]) { return a[1] - b[1] } }) return answer; } 좌표의 x를 비교하여 배열을 정렬한다. 정렬된 배열을 다시 비교한다. 이때 좌표의 x가 같으면 y를 기준으로 정렬한다. 인프런 해답 function solution(arr){ let answer=arr; arr.sort((a, b)=>{ i..

개요 최근에 사이드 프로젝트를 진행하던 도중 SQLite의 DB를 firebase의 firestore DB로 옮겨야 하는 상황이 발생하였습니다. firestore에 DB를 이전하기 위해서는 SQLite로 되어있는 DB를 Json 파일로 변환해야 하는 일이 생겼습니다. 웹에서 여러 SQLite => JSON 변환사이트도 돌려보았지만 에러가 계속 나서 방법을 찾던 중 가장 간단한 방법이 있어서 한번 공유드립니다. (실패한 변환 사이트 => https://mygeodata.cloud/converter/sqlite-to-json) SQLite란? 먼저 SQLite란 무엇인지 간단하게 살펴보겠습니다. SQLite는 서버가 아닌 응용프로그램에 넣어 사용하는 비교적 가벼운 데이터 베이스입니다. PostgreSQL이나..

서론 AWS 웹 서비스를 구축하다 보면, EBS항목으로 요금이 청구될 때가 있습니다. 보통 EBS는 EC2 인스턴스를 생성할 때 자동으로 생성이 되는 저장소라고만 알고 있었는데요, 오늘은 EBS가 무엇인지 알아보고 요금은 어떻게 정산되는지 한번 정리를 해보도록 하겠습니다. EBS란? EBS란 Elastic Block Store의 약자로 일종의 하드디스크라고 생각하시면 됩니다. 보통 EC2와 비교해서 생각하면 EC2는 메모리, 그래픽카드 등 하드 디스크를 제외한 컴퓨터의 모든 부분이라고 생각하면 되며, EBS는 컴퓨터의 하드디스크라고 생각하면 됩니다. EBS의 약자에서 Block Store라는 의미를 이해하시려면, Object Storage와 비교하시면 이해가 쉽습니다. S3와 같은 Object Stora..

인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌는 아래 인프런 강좌를 참고해주시면 됩니다. 강좌 바로가기 문제 설명 정보 왕국의 이웃 나라 외동딸 공주가 숲속의 괴물에게 잡혀갔습니다. 정보 왕국에는 왕자가 N명이 있는데 서로 공주를 구하러 가겠다고 합니다. 정보왕국의 왕은 다음과 같은 방법으로 공주를 구하러 갈 왕자를 결정하기로 했습니다. 왕은 왕자들을 나이 순으로 1번부터 N번까지 차례로 번호를 매긴다. 그리고 1번 왕자부터 N 번 왕자까지 순서대로 시계 방향으로 돌아가며 동그랗게 앉게 한다. 그리고 1번 왕자부터 시 계방향으로 돌아가며 1부터 시작하여 번호를 외치게 한다. 한 왕자가 K(특정숫자)를 외치면 그 왕자는 공주를 구하러 가는데서 제외되고 원 밖으로 나오게 된다. 그리고 다음 ..

문제 인프런 JS 알고리즘 강좌 문제를 한번 풀이해보겠습니다. 강좌 바로가기 문제 해석 해당 문제는 스택을 이용한 풀이 문제입니다. 후위식 연산이란 연산자가 피연산자 뒤에 있는 표기식입니다. 예를 들어 중위표기식이 3+5*2 를 후위표기식으로 표현하면 352*+ 로 표현됩니다. 만약 다음과 같이 연산 최우선인 괄호가 표현된 식이라면 (3+5)*2 이면 35+2* 로 바꾸어야 합니다. 노트 메모 (끄적) 내 해답 function mySolution(s){ const stackNumber = []; let result = -1; for (let i of s) { if (isNaN(i)) { let a, b, op; op = i; if (result === -1) { a = stackNumber.pop(); ..

서론 웹을 공부하다가 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은 모바일 웹에서 디바이스의 물리적 방향의 변화를 감지하기 위해 사용됩니다. 해당 이벤트를 이용하면 모바일 디바이..