본문 바로가기

전체 글154

JS : 모바일에서 오른쪽 클릭 시 옵션메뉴 안나오게 하기 마우스 오른쪽 클릭을 눌렀을 때 나오는 메뉴를 contextmenu라고 합니다. 모바일에서는 보통 `LongClick` 시에 해당 메뉴가 나오게 되는데, 때에 따라 해당 부분때문에 모바일 웹앱을 만들때 방해가 될 수 있습니다. 이럴때는 하단 태그에 다음과 같은 JS 파일을 삽입해주면 문제가 해결됩니다. // context 메뉴 출력시 호출되는 event handler window.oncontextmenu = function(event) { event.preventDefault(); // 기본 태그 기능 막기 event.stopPropagation(); // 이벤트 전달 막기 return false; }; 2021. 7. 21.
Letsee : WebAR 프로젝트 목록 제가 현재 직장인 Letsee를 다니며 제가 직접 개발을 했던 간단한 WebAR 프로젝트들을 정리해보았습니다. 아래 데모들은 Letsee의 public github에 공개 되어 있습니다. Letsee Public Github 주소 https://github.com/letsee 추가적으로 WebAR에 관심이 있으신분은 Letsee SDK를 살펴봐 주시기 바랍니다. 모바일 웹브라우저에서 AR에 대한 깊은 지식이 없어도 쉽게 AR 컨텐츠를 제작할수 있도록 도와줍니다. :) https://www.letsee.io/ko/ HOME :: 웹AR SDK - Letsee 렛시 WebAR SDK는 별도의 앱 설치없이 즉시 배포가 가능합니다. 웹AR 제작으로 현실세계와 가상세계를 넘나들며 몰입감 높은 새로운 경험을 시작해.. 2021. 7. 18.
성경 프로젝트 (The Bible) - React Native The Bible 성경 프로젝트 소개 성경책 간편하게 읽을 수 있고, 매일 제공되는 성경 문제를 풀며 간단한 큐티 공부를 할수 있는 어플리케이션입니다. 좋은 성경 구절을 메모로 남겨보거나, 형광펜으로 강조표시를 할 수 있습니다. 하루에 성경 퀴즈 5개가 매일 정각에 갱신되며, 문제를 풀며 성경 지식을 키워나갈수 있습니다. 개발 기간 2020년 01월 ~ 2020년 06월 기능 구현 React-Native를 통하여 성경앱 프론트엔드 페이지 개발 Sqlite 로컬 데이터베이스를 통한 성경 데이터 저장 / 불러오기 기능 구현 Firestore를 Serverless DB로 사용 (공지사항, 회원 관리) Firebase Cloud Function을 통해 매일 정각에 xlsx파일을 파싱후, 5개의 성경 퀴즈를 Fi.. 2021. 7. 10.
AWS : Auto-Scaling과 예약 인스턴스(RI) 사용시 비용 산정 (동시 사용) 예약 인스턴스(RI)와 Auto-Scaling이란? AWS를 사용할 때 오래 사용할 인스턴스는 예약 인스턴스를 사용하여 이용합니다. 예약 인스턴스는 약정 기간을 정해놓고 미리 지불하여 사용하는 인스턴스를 말합니다. (꼭 미리 결제할 필요는 없지만 선결제가 할인율이 가장 큽니다.) 예약 인스턴스에 대한 내용은 아래 블로그에 잘 정리되어 있습니다. https://wooono.tistory.com/121 Auto-Scaling 이란 트래픽에 따라 서버의 수를 늘리고 줄이는 자동 조정을 하는 AWS 기술입니다. 예를 들어 하나의 인스턴스의 CPU 사용률이 5분 동안 80% 이상을 넘어서면 Auto Scaling 그룹에서는 똑같은 인스턴스를 하다 더 생성합니다. 이후 하나 더 생성된 인스턴스를 통해 분산처리가 되.. 2021. 7. 1.
자바스크립트 : 깊은 복사 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.
React-Native : toast 메세지 구현하기 (react-native-easy-toast) React Native를 사용하다 보면 Toast 메세지를 사용해야할 때가 있습니다. Toast 메세지는 안드로이드 개발을 할 때 한번쯤은 접해봤을 텐데요 React-native에서도 쉽게 Toast 메세지를 사용할수 있는 라이브러리가 있습니다. react-native-easy-toast 라는 라이브러리 인데요 이를 이용하면 쉽게 Toast 메세지를 구현할수 있습니다. react-native-easy-toast 설치 아래와 같이 설치합니다. npm i --save react-native-easy-toast react-native-easy-toast 사용법 사용법은 무척 간단합니다. 요즘 Hooks를 쓰는 방법이 일반화되어있으니, React Hooks를 기준으로 설명드리겠습니다. 먼저 Toast에 대한 값.. 2021. 6. 14.
React Native : splash 화면 적용하기 React Native에서 데모 앱을 만드는데 Splash를 구현해야 할 일이 생겼습니다. React Native에서 splash를 적용하는 방법에 대해 알아보겠습니다. 1-1) Splash 구현을 위한 준비 단계 (Android) React Native에서 Splash를 구현하기 위해서는 react-native-splash-screen 라는 npm 라이브러리를 사용하는 것이 편리합니다. 1. react-native-splash-screen 라이브러리 설치 (공통) npm i react-native-splash-screen --save 2. android/app/src/main/ 맨 하단에 있는 MainActivity.java 파일 수정하기 (Android) package com.lottoproject;.. 2021. 5. 25.
자바스크립트 : Slice vs Splice 차이점 비교 (깊은 복사, 얕은 복사) Javascript에서 배열의 slice 메서드에 대해 알아보겠습니다. 보통 Splice와 Slice는 배열의 일부분을 잘라내어 새로운 배열을 만들고 싶을때 보통 사용하는데요, 저도 Splice와 Slice의 차이점을 알지못하고 썼는데, 잘 알고 쓰면 좋을것 같아서 정리를 하게 되었습니다. Slice 사용법 (깊은 복사) slice는 원본 배열을 바꾸지 않습니다. slice는 인자가 1개일때는 첫번째 인자로 받은 배열의 인덱스로부터 마지막 배열값 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 인자가 2개일때는 첫번째 인자로 받은 배열의 인덱스부터 마지막 인자로 받은 인덱스 -1 까지의 값들로 만든 새로운 배열을 반환합니다. slice는 깊은 복사의 방법입니다. 즉 원본 배열의 값만을 복사해서.. 2021. 4. 20.
GIT : github에 100MB 이상 파일 올리기 (LFS) github에 100MB 이상 파일 업로드 github에 push를 할 때, 50MB 이상의 파일이 포함되면 경고 메시지를 띄우고, 100MB 이상의 파일이 포함되면 에러가 발생합니다. 하지만 부득이하게 동영상 파일이나, 3D모델, psd파일 등을 git으로 올려야 할 때, 위와 같은 제약 때문에 무척 불편할 때가 많습니다. (gitlab은 파일별로 용량제한은 없는 것 같고 프로젝트 단위의 용량 제한을 하는 것 같아서 편하던데..) github에서는 100MB이상을 올리기 위해서는 어떻게 해야 할까요? LFS (Large File System) git에서는 LFS(Large File System)을 이용하여 이와 같은 문제를 해결할 수 있습니다. LFS는 github에서 크기가 큰 파일을 다루기 위해서 .. 2021. 4. 18.
AWS : Route 53 요금 및 비용 산정 Route 53 사용 시 요금 발생 문제 AWS에서 Free Tier 요금을 사용하던 중에 Route53을 사용할 일이 생겼습니다. 분명히 Free Tier로 사용하고 있는데 Route53에서 비용이 청구되는 것을 확인하여서, Route53 요금에 대해서 궁금증을 가지게 되었습니다. 요금 발생 내용은 아래와 같습니다. Route53 요금 발생 상황 요금이 발생한 상황을 분석해보니 제가 구매한 도메인을 Route 53에 연결했기 때문에 비용이 발생한 것이었습니다. Route53에 도메인 연결만 해두어도 돈이 나가는 것은 몰라서 이번에 알게 된 것 같습니다. Route53 과금 방식 좀 더 살펴보니 Route 53은 호스팅 영역을 등록 할때마다 과금을 하는 방식이었습니다. 여기서 호스팅영역이란 쉽게 말해서 .. 2021. 4. 6.