본문 바로가기

분류 전체보기483

삼성 갤럭시 탭4 10.1 SM-T530 안드로이드 9(LineageOS 16) 업그레이드 배경 딸아이 유튜브 머신으로 겨우 목숨만 부지하고 있는 갤럭시 탭 4 SM-T530 모델의 생명연장 프로젝트입니다. 원래 친척이 사용하던 웅진씽크빅용 태블릿이었는데 본분을 다하고 폐기를 기다리는 신세였으나 우리 딸이 너무 어려서 이 정도면 유튜브 보여주는 용도로는 충분하겠다 싶어서 데려왔습니다. 그런데 그렇게 새 인생을 시작하고도 5년이 더 지나서 이제는 정말 한계에 온 것 같습니다. 순정 상태에서 안드로이드 버전은 4.4.2입니다. 이 안드로이드로는 유튜브 키즈는 사용가능한데 그냥 유튜브 앱은 실행/설치 모두 안되고, 게다가 원래 깔려있던 기본 앱들도 일부 업데이트가 불가능한 지경에 이르렀습니다. 그런데 커스텀 펌웨어를 통해서 안드로이 10, 11까지도 설치가능하고 그렇게 되면 또 5년 정도는 거뜬히 .. 2023. 3. 24.
전역변수 없이 속성으로 자식 컴포넌트에 데이터 전달하기 전역변수를 사용하지 않고 컴포넌트 속성으로 데이터를 자식 컴포넌트로 전달하는 방법입니다. 다음과 같은 예가 있습니다. 드롭다운에서 선택한 값에 따라서 하위 컴포넌트가 변경됩니다. 이런 기능을 구현하는 방법은 가장 먼저 떠오르는 것이 드롭다운의 선택값을 저장하는 변수를 useState로 정의하고 이 값의 변화에 따라 랜더링 되는 컴포넌트를 구별해서 작성하는 겁니다. import { useState } from "react"; const Result = ({ type }) => { return {type}; }; export default function App() { const [state, setState] = useState(""); const Type = () => { return ( 선택: setS.. 2023. 2. 27.
JavaScript, 파일에 데이터(문자열, 바이너리) 저장하기 데이터를 로컬디스크에 파일로 저장하는 방법을 알아보겠습니다. 지난 포스팅(JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기)에서는 로컬디스크에 저장된 데이터를 가져와서 JS에서 다루는 방법에 대해서 공부했었는데 오늘은 그 반대입니다. JS에서 직접 파일에 저장하는데 문자열을 저장하는 방법 및 바이너리 데이터로 저장하는 방법입니다. 파일에 문자열 저장하기 먼저 문자열을 저장해 보겠습니다. 다음과 같이 Textarea에 문자를 입력하고 하단에 버튼을 누르면 입력된 문자가 파일로 입력되는 예제입니다. 로컬 저장장치에 접근하기 위해서 윈도 파일시스템을 다루는 showSaveFilePicker(), createWritable() 두 가지 메서드를 사용했습니다. export default funct.. 2023. 2. 21.
github에서 비밀번호 숨기는 팁(--assume-unchanged) github에 코드를 올릴 때 비밀번호 등 개인정보를 숨기고 업로드하는 팁입니다. 와이파이 모듈을 사용한 아두이노 프로젝트나 API를 사용하는 웹 프로젝트 등을 하다 보면 비밀번호나 API 토큰 등을 하드코딩 할 때가 있습니다. 그런데 이런 정보를 숨기지 않고 github에 그대로 푸시하면 내 개인정보가 만천하에 노출되게 됩니다. 그래서 저는 그동안 코드 푸시하기 전에 비민번호를 지우거나 다른 임의의 문자로 교체한 뒤에 업로드하기도 했는데, 그런데 이렇게 해 놓으면 다음 작업을 위해서는 또다시 원래 비번으로 돌려야 하고 푸시할 때는 또다시 임의 문자로 교체해야 하고... 그러다가 가끔 까먹고 그냥 올려서 비밀번호가 올라가 버리기도 하고. 정말 환장할 노릇입니다. 컴파일러에서 환경변수를 별도로 지원하는 경.. 2023. 2. 15.
JavaScript, 파일에서 데이터(문자열, 바이너리) 불러오기 파일에서 데이터를 불러오는 방법입니다. 한번 해보면 어렵지 않은데 처음에는 비동기에 대한 개념도 부족해서 한참 헤맸던 부분이라서 정리해 봅니다. 바로 코드부터 보겠습니다. 파일에서 문자열 읽기 파일에서 문자열을 읽어오는 코드입니다. import { useState } from "react"; export default function App() { const [data, setData] = useState([]); const readFileData = (e) => { const reader = new FileReader(); try { reader.onload = (result) => { setData(result.target.result); }; reader.readAsText(e.target.file.. 2023. 2. 10.
JavaScript에서 바이너리 데이터 처리 - (ArrayBuffer, TypedArray) 고성능의 데이터 처리를 위해서는 데이터를 바이너리로 다루어야 한다고 합니다. 바이너리란 말 그대로 컴퓨터가 이해하는 이진수라는 건데 코딩을 하다 보면 자주 접하는 개념인데 기초를 좀 다져야 할 필요가 있을 것 같아서 정리해 봤습니다. ArrayBuffer JS에서 바이너리를 다루는 기본적인 객체는 "ArrayBuffer"입니다. ArrayBuffer는 메모리상의 고정된 영역을 참조하는 객체입니다. const buf = new ArrayBuffer(32); 위와 같은 표현으로 객체를 생성할 수 있는데요. 'buf' 변수는 메모리상에 32바이트 크기로 할당된 메모리 영역을 가리키게 됩니다. 할당된 메모리는 모두 "0"으로 초기화됩니다. "ArrayBuffer"는 그냥 메모리의 어떤 영역이며 그 안에는 0과 .. 2023. 2. 5.
ESPHome 커스텀 컴포넌트 추가해서 Home Assistant에 설치 ESPHome 커스텀 컴포넌트가 필요했던 이유 ESPHome 처음 접했을 때가 한 3년 전인가 그랬던 거 같은데 그때도 참 대단한 프로젝트라고 생각을 했었습니다. 그런데 쉬지 않고 업데이트가 거듭되면서 시간이 지난 지금도 개선되는 내용을 보면서 놀라움을 금치 못하고 있습니다. 지원되는 컴포넌트만 해도 400가지가 넘고 사용성도 좋아져서 범용 솔루션이라고 할 수 있을 것 같습니다. ESPHome에 대한 경험이 많지는 않지만 그중에서도 유용하게 사용하는 프로젝트가 바로 ESP8266 모듈에 RS485 변환모듈을 연결해서 아파트 월패드 컨트롤러로 사용하는 건데요. 한동안 뭣도 모르면서 따라 하느라 고생 좀 했던 거라서 블로그에도 시리즈로 3편이나 포스팅을 했었더랬죠. (Home Assistant, 더샵 아파트.. 2023. 1. 29.
UART 시리얼 통신의 기본 아두이노에서 여러 기기들 간의 통신에 시리얼 통신(Serial Communication)을 많이 사용합니다. 저도 시리얼(Serial or UART)로 정보를 주고받는 기기들을 종종 사용하긴 하지만 대부분의 경우 라이브러리를 사용하기 때문에 깊이 있는 이해가 부족했습니다. 그러다 보니 문제가 생기면 어디서부터 접근해야 할지 막막한 경우가 생기더군요. 저도 이번에 시리얼 포트로 연속적으로 수신되는 데이터를 처리해야 하는데 생각처럼 잘 되지 않았고 그래서 시리얼에 대해서 되도록이면 기초부터 공부를 해야 할 필요를 느껴서 정리를 좀 했습니다. 시리얼 통신은 직렬 통신 시리얼(Serial) 통신이라는 건 전달해야 할 데이터를 직렬로 전달하는 방법을 지칭하는데요. 직렬이라는 건 데이터를 순서대로 차례차례 주고받는.. 2023. 1. 25.
JS를 배우고 있다면 꼭 알아야 "모던 JavaScript 튜토리얼" 코딩 공부 할 때 웬만해선 인터넷에 공개된 자료들이 많아서 책을 사지 않고도 공부할 수 있는데, 특히나 JavaScript같이 인기 있는 언어는 더 그렇죠. 저도 JS 공부 처음 시작할 때는 무료 온라인 코딩 코스부터 수강하고 시작했고 그 후로는 막히는 게 생기면 모질라 재단의 MDN web docs를 검색해서 답을 찾고 있습니다. 그런데 최근에 "모던 JavaScript 튜토리얼(https://ko.javascript.info/)"이라는 프로젝트를 알게 되었는데 JS 공부한다면 필수적으로 알고 있으면 좋을만한 사이트라고 생각해서 소개합니다. 모던 JavaScript 튜토리얼 ko.javascript.info 문법이나 예제 등을 검색하다 보면 자주는 아니지만 종종 "The Modern JavaScript.. 2023. 1. 19.
SSH Tunneling으로 방화벽 우회하기 방화벽 때문에 접근을 할 수 없는 사이트가 있을 때 살짝 우회해서 사용할 수 있는 팁입니다. 만약, 기업이나 기관 등의 네트워크에서 사용할 경우 정보보안 정책을 위반할 수 있다는 점은 유의하셔야 합니다. SSH 터널링(Tunneling)이란 SSH Tunneling이라는 것은 다른 말로 SSH Port Forwarding 이라고도 하는데요. SSH가 연결되는 암호화 채널을 이용해서 여타 다른 연결을 우회하는 방법입니다. 그래서 말 그대로 마치 막혀있는 벽에 터널을 뚫는듯한 효과가 있는 거죠. 예를 들어 방화벽에서 네이버 서버로 접속하는 "https://www.naver.com" 도메인을 막고 있다거나 아니면 특정 서비스 포트가 막혀 있을 때 통신 채널을 강제로 SSH 터널을 통과하도록 하는 겁니다. 이렇.. 2023. 1. 16.
리눅스 환경에서 NodeJS 설치하기 윈도의 WSL이나 리눅스 환경에서 "NodeJS"를 설치하는 방법입니다. Package 설치로 간단하게 가능하지만 설치할 때 되면 꼭 찾아보게 돼서 기록합니다. sudo apt-get install nodejs 위 명령어로 간단히 설치 가능합니다. 이렇게 설치하면 "npm"도 같이 설치됩니다. 어! 그런데 개발할 때 버전이 중요하던데 어떤 버전이 설치된 거지?? ㅡ.,ㅡ 설치버전은 다음과 같이 "node -v" / "npm -v" 명령으로 확인할 수 있습니다. 그럼 LTS 말고 최신 버전이나 다른 버전을 설치하고 싶을 때는 아래 링크를 참고하면 되겠습니다. GitHub - nodesource/distributions: NodeSource Node.js Binary Distributions NodeSour.. 2023. 1. 10.
MS Surface Pro 8 - 동적 주사율(Dynamic refresh rate) 기능 업데이트 글을 시작하기 앞서 제가 사용하는 디바이스 환경에 대해서 말씀드리겠습니다. 저는 마이크로소프트사의 Surface Pro 8 모델에 윈도 11 22H2 버전을 사용 중입니다. 그런데 한동안 잠잠하던 윈도 업데이트 알람이 오늘 무더기로 올라왔습니다. 그중에서 가장 눈에 뜨인 건 Surface system 관련 업데이트였습니다. 펌웨어 업데이트도 있었고요. 저는 surface pro8 모델 사용하면서 오류가 아닌가 의심하고 있던 게 하나 있었는데 바로 스마트 충전기능이었습니다. 윈 11 환경에서 배터리를 80%까지만 충전하도록 해서 배터리를 보호해주는 기능이 기본적으로 동작한다고 했는데 제 Surface에서는 이 기능이 아직 동작하지 않고 있었습니다. 그래서 뭔가 문제가 있는 거니 윈도던 Surface 던 업.. 2023. 1. 5.
노트북 배터리 상태(열화) 확인하기 먼저 윈도 OS를 사용하는 노트북에 해당하는 방법입니다. 터미널 열고 아래 명령어 입력하면 배터리의 상태와 최근 충/방전 기록을 확인할 수 있는 배터리 보고서를 만들어 줍니다. powercfg /batteryreport 명령어를 실행하면 보고서가 생성되었다는 안내가 나타납니다. 해당 위치에 가보면 있는 html파일을 브라우저로 열어서 확인하시면 되겠습니다. 요건 2년 이상 사용한 노트북 배터리입니다. 설계 용량대비 약 77% 수준으로 가용 용량이 많이 떨어져 있네요. 처음 1년 동안은 아무 생각 없이 사용했기 때문에 100% 완충 상태가 상당히 오래 지속되었고 후반 1년은 80%로 충전 제한기능을 사용했었습니다. 업무용으로 사용하는 노트북이고 대부분 전원에 연결된 상태로 사용되었기 때문에 Cycle co.. 2023. 1. 4.
리버스 프록시를 통한 iptime 공유기 외부접속 이슈(CSRF 차단) AS 후기 오늘은 ipTime 공유기의 CSRF 차단 기능과 ipTime의 고객지원 기술팀에 대한 포스팅입니다. 리버스 프록시를 이용해서 공유기 설정 페이지로 접속할 때 CSRF 공격으로 오인해서 접속이 차단되는 문제가 있었으나 ipTime의 빠른 대응으로 이틀 만에 해결이 되어 그 후기 남깁니다. 유무선 공유기 많이들 사용하시는데요. 집에 공유기만 하나 설치해 놓으면 여러모로 편리한 기능들을 많이 사용할 수 있습니다. 공유기가 다양한 기능을 제공하기 때문인데요. 이 기능들을 사용하기 위해서는 컴퓨터에 조금 관심 있으신 분들은 다 아시다시피 공유기 설정 페이지에 접속해야 합니다. 다른 공유기들도 마찬가지겠지만 iptTime공유기 설정 페이지는 일단 최초 설정 시 로컬 네트워크로 접속을 해야 합니다. 보안을 이유로 .. 2022. 12. 27.
실바니안 불이 안켜지는 삼층집을 불이 켜지는 삼층집으로 오래전에 작업했던 장난감 개조 프로젝트 실바니안 불이 켜지는 3층집입니다. TV에서 불이 켜지는 이층 집을 한창 광고하고 있을 때, 3층집을 싸게 팔더라고요. 2층집은 불이 켜진다는 이유로 3층집보다 2배 이상 가격이 비쌌던 거 같은데 암튼 아이에게는 미안하지만 3층집으로 선물을 했었습니다. 그런데 실바니안이 얼마나 요망했는지 딸아이가 이 인형집을 너무 좋아해요. 그래서 불이라도 켜지게 해주자 싶어서 간단히 LDE 작업해 봤습니다. 우선 집안에 전등을 설치할 수 있는 장소를 확인합니다. 3층집이지만 2층과 3층을 구분하는 슬라브는 착탈식이라서 천장에 전등을 설치할 수 없습니다. 그래서 1층 천장과 3층 천장 가운데에 전등 달아볼 생각입니다. LED를 고정할 틀을 3D 프린터로 간단하게 만들었습니다. 지금.. 2022. 12. 27.

티스토리툴바