본문 바로가기

분류 전체보기488

리눅스 환경에서 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.
윈도 네트워크, Wifi / Cellular / Ethernet 동시접속 활성하기 노트북의 경우 네트워크 선택 옵션이 다양하죠. 유선 랜을 사용할 수도 있고 wifi를 쓸 수도 있고 그리고 usim이 있으면 모바일 데이터도 사용할 수 있습니다. 그런데 요즘 윈도에서는 네트워크 중복 접속을 기본적으로 차단하도록 되어 있네요. 어차피 사용하는 네트워크는 하나만 있으면 되니까 효율적인 측면에서 당연한 기능인데, 어떤 필요에 의해서 중복 연결이 필요할 때는 어떻게 해야 할까요? 보시는 것처럼 윈도에서는 셀룰러 네트워크의 사용 우선순위를 정할 수 있는 옵션이 있습니다. 와이파이가 가능할 경우에 데이터를 사용할 것인지 와이파이를 우선으로 사용할 것인지 정할 수 있죠 하지만 동시에 접속은 되지 않습니다. 이럴 때는 그룹 정책을 통해서 활성화해주면 됩니다. 시작 버튼을 누르고 검색창에 gpedit를.. 2022. 12. 22.
리액트 빌드 결과 빈화면만 보일때 - 상대경로 설정하기 오늘은 리액트를 시작하는 저 같은 초보들은 한 번쯤 경험했을 법한 문제라고 생각하는데 이상하게도 여느 리액트 강의에서도 메인으로는 다루지 않는 빌드 시에 관련되는 경로에 관한 내용입니다. 그런데 생각해보면 리액트도 html, java script, css라서 그런 기본 소양을 가지고 있다는 전제를 깔고 가기 때문에 이런 건 당연한 내용이라고 여겨서 강의에서 다루지 않는지도 모르겠네요. 아무튼 리액트 프로젝트를 만들고 나서 빌드 스크립트를 실행하면 "build"라는 이름의 폴더가 생기면서 안에 배포에 사용할 결과물이 생성됩니다. 위에 보시는 것처럼 빌드 폴더 안에 보면 여러 가지 파일들이 생성되어 있는데 이 중에서 웹을 시작하게 하는 파일은 index.html입니다. 상식적으로 리액트로 만든 웹앱을 실행하.. 2022. 12. 12.
React 배포시 원본 코드 구조 숨기기 (Source map 만들지 않기) 리액트로 앱을 만들어서 배포를 하고 브라우저 개발도구에서 소스를 살펴보면 내가 짠 코드의 원본을 그대로 확인할 수 있습니다. 중간에 빌드라는 과정을 거쳤기 때문에 최소한 코드 압축 정도는 되어 있을 줄 알았는데 말 그대로 코딩했던 폴더구조가 그대로 드러납니다. 이런 게 가능한 이유가 바로 소스 맵(Source Map)이 있어서라고 하는데요. 소스 맵은 빌드된 파일과 원본을 연결시켜주는 역할을 합니다. 소스 맵은 배포된 앱에서 문제가 발생했을 때 디버깅을 쉽게 해주는 이점이 있습니다. 하지만 보안적인 문제라던가 비루한 코드가 공개되는 부끄러움 때문에라도 요걸 숨기고 싶을 때가 있는데 그럴 때는 빌드 시에 소스 맵을 작성하지 않도록 하면 됩니다. 위 그림은 크롬 개발도구에서 리액트로 만들어진 웹의 소스를 확.. 2022. 12. 4.
BOSE QC Earbuds2 - Best 노이즈 캔슬링 또 한번의 업그레이드 BOSE의 노이즈 캔슬링 이어폰 신제품에 대한 개봉기 및 간단 리뷰입니다. 오늘 예약 구매했던 QuietComfort Earbuds II(이하, Earbuds2) Soapstone 색상을 수령했습니다. 한 달 전 즈음에 검은색이 먼저 출시가 되었기 때문에 검은색으로 구매했다면 바로 물건 받아 볼 수 있었지만 개인적으로 어두운 색보다는 밝은 색이 더 좋아서 배송이 조금 더 늦더라도 참기로 했습니다. 먼저 택배박스를 뜯고서 가장 인상적으로 느낀 부분은 사이즈였습니다. 제품 포장의 크기에서부터 전작보다 얼마나 작아졌는지 느낄 수 있습니다. 전작인 Earbuds 1에서 성능면에서는 보스가 노이즈 캔슬링 이어폰의 왕좌를 차지했다고 생각하지만 지못미 디자인 때문에 대중에게는 외면을 받았다고 생각을 합니다. 무엇보다.. 2022. 11. 25.
styled-components 사용법 [part 2 /2] 지난 포스팅에 이어서 styled-components 사용법에 대한 내용이며 이번에는 좀 더 헷갈렸던 고급 사용법에 대해서 공부해 보겠습니다. 의사 선택자(pseudo-selector) 선택자에 옵션을 줘서 일부 요소만 선택하는 방법입니다. 영어로는 pseudo라는 명칭을 사용하던데 많은 CSS 자료에서 "의사"라고 번역을 하네요. & (ampersand) "&"기호를 하나만 사용하게 되면 '모든 요소'를 의미합니다. 그냥 이렇게만 얘기하면 무슨 얘기인지 잘 이해가 안 되죠?! 저는 그랬습니다. ㅡ.,ㅡ 암튼 예제를 보면 이해가 쉽게 됩니다. 이 예제는 'styled-components' 공식 홈페이지의 예제를 그대로 가져와서 주석만 번역했습니다. 그리고 아래 내용을 이해하기 위해서는 CSS의 기본 문법.. 2022. 11. 14.
CSS의 기본 - 개념, 문법, 용법 정리 "styled-components"를 공부하던 중 계속 진도를 나가기 위해서는 CSS에 대한 지식이 좀 더 필요하겠다고 느껴서 CSS에 대해서 한번 짚고 넘어가려 합니다. CSS란 CSS는 Cascading Style Sheet의 약자로 HTML 문서의 요소들을 어떻게 보여줄지를 정의한 서식 문서입니다. HTML4부터 서식 설정을 HTML 문서로부터 분리하는 게 가능해져서 CSS라는 별도의 파일로 관리하게 되었고 그래서 사이트의 스타일을 손쉽게 관리해 줄 수 있도록 해주는 역할을 합니다. CSS는 W3C라는 기관에서 표준안을 관리하는데 1996년에 최초 표준 권고안이 제정되었고 지금까지 계속 개발이 이어지고 있다고 합니다. 참고로 지금 최신 버전은 CSS2.1입니다. CSS 문법 CSS는 선택자와 선언부.. 2022. 11. 7.
Apple TV 4K 2세대 약 10개월 사용 후기, 시리는 명불허전 하지만 애플팬이 아니라면 조심하세요 애플의 요물 같은 제품이죠. Apple TV 4K(2세대)인데요. 편의상 애플TV라고 하겠습니다. 저는 이 제품을 지난 1월인가부터 사용 시작한 것 같은데 약 10개월 정도 매일매일 사용해보고 느낀 후기 말씀드립니다. 애플TV를 샀으니 이놈도 분명 앱등이 겠구나 생각하실 수 있으시겠지만 전 앱등이는 아닙니다. 제가 사용하는 다른 애플 기기는 아이패드, 에어팟이 전부입니다. 에어팟은 갤럭시, 아이폰 유저 관계없이 많이들 쓰시니 아이패드 하나 쓴다고 볼 수도 있겠죠?! ㅋ 아이폰은 한 번도 써본 적도 없고 MacOS도 한번 만저본적 없습니다. 앱등이도 아니라면서 애플TV를 왜 샀는가? 애플TV를 구매한 이유는 단순합니다. 저는 IPTV로 BTV를 이용 중입니다. 그런데 BTV 셋톱박스가 답답해도 너~무 답답.. 2022. 10. 31.
[React] styled-components 사용법 [part 1 / 2] styled-components는 리액트에서 CSS를 더 편하게 사용할 수 있도록 만들어주는 유용한 도구인데요. 저는 아직까지도 CSS가 마치 하나의 코딩 언어처럼 어렵게만 느껴지다 보니 styled-components에서는 이건 또 무슨 소리인가 싶더라고요. 그래서 기초부터 찬찬히 다시 봐야겠다는 생각이 들었습니다. "styled-components"에 대한 특징이나 기본적인 설명은 생략하고 넘어가겠습니다. 어치피 styled-components 좋은거 잘 알고 이미 잘 사용하고 있기 때문에 어떻게 사용하는지가 중요한 거 아니겠습니까?! 설치 styled-components 사용을 위해서는 먼저 설치하고 프로젝트에 추가해 줍니다. npm, yarn 등을 이용해서 설치합니다. # with npm npm .. 2022. 10. 27.
Windows 11 22H2 버전에서 WPA2-Enterprice WIFI 접속 이슈, 해결안됨 윈도 11에 22H2버전이 도착했습니다. 제가 체감할 수 있는 기능적인 측면에서 변화된 부분은 찾을 수 없지만 뭔가 새로운 게 있으면 설치해 보고 싶기 때문에 얼른 설치했습니다. 그런데 22H2 설치하고 나서 의외의 골치 아픈 문제가 발생했습니다. 바로 WPA2-Enterprice, PEAP 인증을 사용하는 네트워크에 접속을 할 수가 없는 상태가 되었습니다. 윈도 업그레이드하기 전까지는 아무 문제없이 잘 사용하던 네트워크인데 갑자기 안됩니다. 첨엔 네트워크가 문제인가 했는데 인터넷을 찾아보니 새로운 윈도가 원인인 것 같습니다. 윈도의 강화된 보안이 원인인지 아니면 윈도의 버그인지 잘 이해하지는 못했지만 아무튼 업그레이드 때문에 안 되는 거였습니다. SSID를 지웠다가 다시 해보고 리부팅도 여러 번 해 봤.. 2022. 10. 20.
Baseus 인기템, GaN 100W급 고속충전기 겸 220V연장 케이블 - PowerCombo PowerStrip Baseus에서 출시한 또 다른 인기템인 100W급의 GaN(질화갈륨) 고속충전기 리뷰입니다. GaN충전기 그 자체는 이미 다양한 상품들이 있기 때문에 특별한 게 아닌데요. 고속충전기에 200V AC 콘센트를 결합해서 충전기인 동시에 연장선으로도 쓸 수 있는 아이디어 상품 되겠습니다. USB 충전할 기기들도 많고 220V 전기를 써야 하는 기기들이 많기 때문에 이 제품 딱 보자마자 이유는 모르겠지만 그래 이거닷! 했던 제품입니다. 제품이 출시된지는 이미 시간이 좀 되긴 했지만 아마 저와 비슷한 생각을 했던 사람들이 많았던지 초반에 품귀현상으로 구매가 쉽지 않았습니다. 지금은 이미 살 사람들은 다 산 건지 재고에 여유가 좀 있는 것 같은 느낌입니다. 알리에서 지금 약 9만 원에 구입할 수 있는데 사실 9만.. 2022. 10. 13.

티스토리툴바