정적 웹사이트 호스팅을 무료로 할 수 있는 방법에 대해 알아보다가 github pages 라는 서비스를 알게 되어 이를 알아보고 적용한 과정을 정리해서 공유드립니다. branch 를 대상으로 설정하는 방법도 있지만, 본 글에서는 github action 과 tag 를 이용한 방법으로 공유 드리고자 합니다. github action yml 파일 작성.github/workflows/github-page-ci-cd.yml 파일을 생성 후 내용을 아래와 같이 작성해줍니다.name: github-page-ci-cdon: push: tags: # 레포지토리에 아래 패턴과 일치하는 태그가 생성될 때 아래 jobs 들이 진행됩니다. # 아래 예시같은 경우 레포지토리에 github-page-..

회사 내에서 운영되는 여러 프로젝트에서 공통으로 사용되는 패키지 같은 경우는 별도 저장소에 배포하여 각각의 프로젝트들이 해당 저장소에서 패키지를 내려 받아 사용하게 하는 것이 좋을 수가 있습니다. 직접 저장소를 구축할 때 여러 방법이 있겠지만, 여기서는 Nexus 를 이용하여 저장소를 구축 및 환경 설정 하는 방법에 대해 공유 드리고자 합니다. Nexus 도커 이미지 빌드 및 컨테이너 실행Nexus 를 직접 서버에 설치하고 환경 설정을 해주는 방법도 있겠지만, 여기서는 도커 이미지를 활용하는 방법을 공유드리겠습니다. 1) https://github.com/sonatype/docker-nexus3/blob/main/Dockerfile위 Dockerfile 을 다운로드 받습니다.2) 터미널을 실행 후, 위 ..

안드로이드 기기에 있는 브라우저 또는 웹뷰에 띄워놓은 웹사이트의 console log 를 확인해야 할 때 이를 PC 에서 확인할 수 있는 방법이 있습니다. 본 포스팅 글에서는 이 방법을 Mac OS 기준으로 설명하겠습니다. adb 설치 먼저 pc 에 adb 를 설치해야 합니다. (이미 설치가 되어 있으신 분들은 본 과정은 생략하시면 됩니다.) 아래 명령어를 이용해 설치를 진행합니다. brew install cask brew install android-platform-tools --cask 그리고 아래 명령어를 통해 설치 여부를 확인합니다. adb version 안드로이드 기기 개발자 옵션 활성화 안드로이드 기기의 개발자 옵션을 활성화해야 합니다. (이미 개발자 옵션이 활성화 되어 있는 분들은 본 과정은..

개발을 하다 보면 자주 사용되는 것들은 패키지화 하여 필요할 때 불러와 사용하곤 합니다. 저번 포스팅에선 github 에 패키지를 배포하는 과정에 대해 공유드렸었는데, 이번에는 github action 을 이용하여 npm 에 배포하는 방법에 대해 공유드리고자 합니다. ✻ 필요 패키지 설치 배포하고자 하는 패키지의 레포지토리의 루트 경로에서 아래 명령어를 통해 빌드시 필요한 패키지들을 설치합니다. npm i -D esbuild esbuild-css-modules-plugin 이 외에도 레포지토리에서 필요로 하는 패키지들은 모두 devDependencies 로 설치하거나 옮기실 것을 권장합니다. 나중에 esbuild 로 번들링 할 때 필요 패키지들은 같이 묶여서 번들링 될 것이기 때문입니다. ✻ packag..

이번 글에서는 현재 많이 사용되고 있는 리액트(React)의 역사에 대해 알아보고자 합니다. 리액트를 만든 곳 리액트는 메타(구. 페이스북)에서 만들어졌습니다. 리액트가 탄생하게 된 계기 메타(구. 페이스북)의 개발자들은 2010년 이후부터 페이스북 앱의 기능이 점점 더 많아짐에 따라 코드의 복잡도가 높아진 상태였고 어느 시점부터는 너무 높은 코드 복잡도 때문에 도저히 앱을 유지보수 하거나 신규 기능을 반영하기 어려운 수준까지 도달했습니다. 그래서 코드를 보다 더 효율적으로 관리할 수 있도록 해주는 무언가가 필요하였고, 이는 리액트가 탄생하는 계기가 되었습니다. 2010년 : 리액트의 프리퀄인 XHP 등장 리액트의 첫 시작은 2010년 xhp 로 시작되었습니다. https://github.com/face..

개요 사이트가 검색 결과에 잘 뜨게 하기 위해서는 검색 봇이 사이트의 주요 정보를 읽을 수 있게 meta 태그를 잘 작성해 놓는 것이 중요합니다. 그래서 과거에는 사이트가 검색 결과에 자주 노출 될 수 있도록 하기 위해 meta 태그의 keywords 에 무수히 많은 keyword 를 명시하곤 했었습니다. 하지만 요즘에는 meta 태그의 keywords 를 작성하는 것이 예전만큼 큰 의미가 없어졌다고 합니다. 무분별한 키워드 작성 meta 태그의 keywords 에는 사이트와 관련 있고 주요한 키워드만 작성하는 것이 일반적이나, 사이트가 조금이라도 더 많이 노출되게 하기 위해 사이트와 크게 관련 없는 키워드까지 무분별하게 작성하는 일이 빈번했다고 합니다. 이렇게 무분별하게 작성된 keywords 를 기반..

안녕하세요. 루루 개발자 입니다. 이번에는 안드로이드 모바일 기기에서 앱이 네이티브로 만들어졌는지 웹뷰로 만들어졌는지 혹은 섞여 있는지 등을 확인해볼 수 있는 방법을 공유드려보고자 합니다. 개발자 옵션 활성화 먼저 개발자 옵션을 활성화 해야 합니다. [설정] - [휴대전화 정보] - [소프트웨어 정보] 에 들어가신 후 빌드번호 탭을 여러번 탭 하셔서 개발자 옵션을 활성화 해주세요. 개발자 옵션의 "레이아웃 범위 표시" 옵션 활성화 [설정] - [개발자 옵션] - [레이아웃 범위 표시] 옵션을 활성화 해주세요. 확인하고 싶은 앱을 실행 네이티브로 만들어진 경우 네이티브로 만들어진 부분은 위 사진 처럼 각 버튼이나 아이콘별로 레이아웃이 잡혀 보이게 됩니다. 웹뷰로 만들어진 경우 웹뷰로 만들어진 부분은 위 사..

안녕하세요. 루루개발자 입니다. 회사에서 프론트엔드 개발을 진행중에 있는데, 프론트에서.. 즉 브라우저죠, 브라우저에서 mqtt 통신을 통해 토픽을 구독하고 이벤트를 받거나 토픽으로 메시지를 발행하여 여러가지 처리를 진행해야 하는 상황이 있었습니다. 처음에 회사에서 mqtt 를 사용해야 한다는 말을 들었을 때 mqtt 라는 단어를 처음 들어봤습니다. 그래서 이번에는 mqtt 에 대해 한번 알아보는 시간을 가져보려 합니다. MQTT 란? mqtt 는 경량화된 발행/구독 메시징 프로토콜(통신규격)을 의미합니다. 낮은 전력, 낮은 대역폭 환경에서도 정상 작동될 수 있도록 설계되었기 때문에 매우 가볍다고 표현되기도 하며, 이러한 특성 때문에 iot(사물인터넷) 같은 곳에서 자주 사용된다고 합니다. 발행과 구독..