- [ IT 기타 ]안드로이드 기기 브라우저(or 웹뷰)의 console log 를 PC 에서 확인하는 방법2023-10-16 20:48:45안드로이드 기기에 있는 브라우저 또는 웹뷰에 띄워놓은 웹사이트의 console log 를 확인해야 할 때 이를 PC 에서 확인할 수 있는 방법이 있습니다. 본 포스팅 글에서는 이 방법을 Mac OS 기준으로 설명하겠습니다. adb 설치 먼저 pc 에 adb 를 설치해야 합니다. (이미 설치가 되어 있으신 분들은 본 과정은 생략하시면 됩니다.) 아래 명령어를 이용해 설치를 진행합니다. brew install cask brew install android-platform-tools --cask 그리고 아래 명령어를 통해 설치 여부를 확인합니다. adb version 안드로이드 기기 개발자 옵션 활성화 안드로이드 기기의 개발자 옵션을 활성화해야 합니다. (이미 개발자 옵션이 활성화 되어 있는 분들은 본 과정은..
- [ IT 기타 ]npm 에 내가 만든 패키지 배포하기 (feat. github action 으로 배포 자동화)2023-09-15 20:26:23개발을 하다 보면 자주 사용되는 것들은 패키지화 하여 필요할 때 불러와 사용하곤 합니다. 저번 포스팅에선 github 에 패키지를 배포하는 과정에 대해 공유드렸었는데, 이번에는 github action 을 이용하여 npm 에 배포하는 방법에 대해 공유드리고자 합니다. ✻ 필요 패키지 설치 배포하고자 하는 패키지의 레포지토리의 루트 경로에서 아래 명령어를 통해 빌드시 필요한 패키지들을 설치합니다. npm i -D esbuild esbuild-css-modules-plugin 이 외에도 레포지토리에서 필요로 하는 패키지들은 모두 devDependencies 로 설치하거나 옮기실 것을 권장합니다. 나중에 esbuild 로 번들링 할 때 필요 패키지들은 같이 묶여서 번들링 될 것이기 때문입니다. ✻ packag..
- [ IT 기타 ]리액트(React)의 역사2023-08-26 22:13:21이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..
- [ IT 기타 ]meta 태그의 keywords 는 이제 seo 에 영향을 주지 않는다?2023-08-24 22:54:12개요 사이트가 검색 결과에 잘 뜨게 하기 위해서는 검색 봇이 사이트의 주요 정보를 읽을 수 있게 meta 태그를 잘 작성해 놓는 것이 중요합니다. 그래서 과거에는 사이트가 검색 결과에 자주 노출 될 수 있도록 하기 위해 meta 태그의 keywords 에 무수히 많은 keyword 를 명시하곤 했었습니다. 하지만 요즘에는 meta 태그의 keywords 를 작성하는 것이 예전만큼 큰 의미가 없어졌다고 합니다. 무분별한 키워드 작성 meta 태그의 keywords 에는 사이트와 관련 있고 주요한 키워드만 작성하는 것이 일반적이나, 사이트가 조금이라도 더 많이 노출되게 하기 위해 사이트와 크게 관련 없는 키워드까지 무분별하게 작성하는 일이 빈번했다고 합니다. 이렇게 무분별하게 작성된 keywords 를 기반..
- [ IT 기타 ]네이티브? 웹뷰? 앱이 무엇으로 만들어졌는지 확인해보자!2023-08-09 23:43:36안녕하세요. 루루 개발자 입니다. 이번에는 안드로이드 모바일 기기에서 앱이 네이티브로 만들어졌는지 웹뷰로 만들어졌는지 혹은 섞여 있는지 등을 확인해볼 수 있는 방법을 공유드려보고자 합니다. 개발자 옵션 활성화 먼저 개발자 옵션을 활성화 해야 합니다. [설정] - [휴대전화 정보] - [소프트웨어 정보] 에 들어가신 후 빌드번호 탭을 여러번 탭 하셔서 개발자 옵션을 활성화 해주세요. 개발자 옵션의 "레이아웃 범위 표시" 옵션 활성화 [설정] - [개발자 옵션] - [레이아웃 범위 표시] 옵션을 활성화 해주세요. 확인하고 싶은 앱을 실행 네이티브로 만들어진 경우 네이티브로 만들어진 부분은 위 사진 처럼 각 버튼이나 아이콘별로 레이아웃이 잡혀 보이게 됩니다. 웹뷰로 만들어진 경우 웹뷰로 만들어진 부분은 위 사..
- [ IT 기타 ]MQTT 에 대하여2023-07-22 18:50:25안녕하세요. 루루개발자 입니다. 회사에서 프론트엔드 개발을 진행중에 있는데, 프론트에서.. 즉 브라우저죠, 브라우저에서 mqtt 통신을 통해 토픽을 구독하고 이벤트를 받거나 토픽으로 메시지를 발행하여 여러가지 처리를 진행해야 하는 상황이 있었습니다. 처음에 회사에서 mqtt 를 사용해야 한다는 말을 들었을 때 mqtt 라는 단어를 처음 들어봤습니다. 그래서 이번에는 mqtt 에 대해 한번 알아보는 시간을 가져보려 합니다. MQTT 란? mqtt 는 경량화된 발행/구독 메시징 프로토콜(통신규격)을 의미합니다. 낮은 전력, 낮은 대역폭 환경에서도 정상 작동될 수 있도록 설계되었기 때문에 매우 가볍다고 표현되기도 하며, 이러한 특성 때문에 iot(사물인터넷) 같은 곳에서 자주 사용된다고 합니다. 발행과 구독..
- [ IT 기타 ]github 에 내가 만든 react frontend package 배포하기2023-07-22 13:31:00안녕하세요. 루루개발자 입니다. 이번 시간에는 github action 을 활용하여 github package 저장소에 npm package 를 배포하는 방법에 대해 기술해보고자 합니다. 본 글에서는 typescript 기반의 react 와 프론트엔드(브라우저)에서 사용되는 패키지를 기준으로 하며 레포지토리의 패키지 개발 코드들이 src 폴더 밑에 있다고 가정하고 배포하는 방법을 설명하기 때문에 이 점 참고해주세요. :) 1. personal access token 발급 받기 github action 에서 github package 저장소로 패키지를 publish 하기 위해서는 해당 권한이 있는 토큰이 필요하므로 아래 과정을 참고하여 토큰을 발급받아 주세요. https://github.com/ githu..
- [ IT 기타 ]안드로이드 디바이스가 절전모드일 때 발생한 이슈2022-10-01 18:05:42안녕하세요. 루루개발자 입니다. 최근 안드로이드 디바이스의 절전모드로 인해 겪었던 이슈에 대해 공유드리고자 합니다. 이슈가 생긴 서비스의 플로우는 어떻게 되나? 어떤 서비스의 로그인 페이지가 있습니다. A 앱에서는 이 로그인 페이지를 웹뷰로 표시하고, 로그인 페이지에서 "로그인" 버튼을 클릭하면 B 앱이 위에 표시되며 로그인이 진행 된 후 B 앱이 종료되며 다시 A 앱의 웹뷰 화면으로 돌아가게 됩니다. 발생한 이슈는 무엇인가? 문제는, B앱이 호출된 직후 A앱 Webview 페이지의 javascript 에서 이후 로직이 진행되어야 하는데 해당 로직이 진행되지 않아 팝업창이 표시되지 않는 현상이 발생하였습니다. 다양한 케이스로 테스트를 해본 결과 원인은 절전모드에 있었습니다. 안드로이드 디바이스의 절전모드..