본문 바로가기

분류 전체보기451

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.
데비안 apt update 오류 - The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 23F3D4EA75716059 라즈베리파이로 사용하고 있는 미니 서버에 데비안 OS를 사용 중인데요. 오랜만에 설치된 패키지들 업그레이드를 하려고 "sudo apt update"를 실행했는데 다음과 같이 에러가 발생했습니다. 똑같은 내용이 반복적으로 나오는데 공용키가 검증이 되지 않아서 생기는 문제인가 봅니다. The following signatures couldn't be verified because the public key is not available: NO_PUBKEY 23F3D4EA75716059 인터넷을 검색해보면 여기에 언급된 키를 우분투 키 서버에 등록하면 문제가 해결된다는 그런 설명을 쉽게 찾을 수 있습니다. sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80.. 2022. 9. 15.
테슬라 Model Y Long Range(2022) 계약부터 인도까지 길고긴 인고의 시간 기록 제 블로그에서 다루는 제품 중 가잔 비싼 제품이고 앞으로도 그럴 것 같네요. 1년이 넘도록 기다리고 기다렸던 테슬라 모델 Y를 드디어 인도받게 되었습니다. 저에게는 영겁과도 같았기에 그 지난했던 시간을 한번 다시 되돌아보면서 출고의 벅참을 오롯이 느껴보고자 합니다. 2021년 8월 12일 (D-375) - 시승 및 주문!! 청라 쪽에 있는 시승센터에 가서 시승 한번 해보고 그날 바로 주문했습니다. 그냥 테슬라가 가지고 싶었기 때문에 시승은 사실 큰 의미는 없었던 것 같습니다. 이거 도저히 못 타겠는데 하는 감상만 아니라면 구매의사를 되돌릴 생각이 없었으니까요. 예상 출고는 22년 1분기가량으로 생각하고 상담을 받았는데, 상담해주시는 분께서 지금 바로 주문하셔야 한다고 해서 그날 바로 얼른 주문했습니다. .. 2022. 8. 26.
갤럭시 워치5(SM-R900) 오픈런 구매품 배송완료 - 워치4에서 달라진점은? 지난 8월 12일 오픈런 판매 마지막 날 주문을 했던 갤럭시 워치 5가 도착을 했습니다. 16일부터 순차 배송이라고 해서 내일이나 모레쯤 물건 받아보겠구나 했는데 광복절 연휴가 끝나자마자 바로 배송이 완료되었네요. 천천히 사용기를 올려야지 생각했는데 생각보다 물건이 빨리 와서 얼른 개봉기를 올리기로 맘을 바꿨습니다. 집에 왔을 때 시계가 배송된 것 치고는 배달 박스가 너무 큰 게 와있어서, 워치 5가 왔다는 생각은 못하고 이게 뭐지?! 했었는데, 이번 오픈런 행사의 사은품인 풀커버 케이스와 충전 거치대가 동봉되어 있어서 큰 박스에 배달이 되었네요. 박스 안에 푸짐하게 들어있으니 선물 받은 거 같고 (아직은) 기분이 좋네요. 갤럭시 워치5 개봉 바로 워치 5부터 살펴보겠습니다. 포장은 전작인 워치 4와 같.. 2022. 8. 17.
갤럭시 워치 5 시리즈 오픈런 [2022.08.11 ~ 2022.08.12] 갤럭시 워치 5 시리즈의 오픈런 판매가 오늘 마감됩니다. 이전 모델이었던 갤럭시 워치 4 시리즈가 워낙 인기가 좋아 품귀현상까지 있어서 저는 고민만 하다가 구매시기를 놓쳐서 약간 후회를 했었던 기억이 있습니다. 그래서 이제 갤럭시 액티브 2를 사용한 지 오래되기도 했기 나중에 또 후회할지도 모른다는 생각에 오픈런 행사 광고가 보이자마자 구매를 했습니다. 이왕 구매를 하는 거 혜택을 하나라도 더 받으면 좋으니까요. 체험단 신청을 먼저 하고 나서 제품 구매를 하면 되는데요. 근데 제품 구매는 오늘까지이고 체험단은 15일까지입니다. 그러고 나면 16일부터 제품이 배송된다고 하는데, 받고 나서 31일까지 각종 미션을 수행하고 소소한 혜택을 챙기면 됩니다. 구매 시 삼성카드를 사용하면 7% 할인 혜택을 볼 수 있.. 2022. 8. 12.
모든 콘센트를 완벽하게 사용할 수 있는 멀티탭, 현대일렉트릭 SIDE C-63 멀티탭 많이 사용하실 텐데요. 충전기, 컴퓨터, 모니터, 선풍기, 스피커, 프린터기 등등 기본적으로 사용하는 플러그들이 기본적으로 대여섯 개씩 되니까 멀티탭 필수죠. 보통 많이들 사용하는 게 이런 형태의 멀티탭입니다. 그런데 이런 통상적인 모델의 멀티탭에는 치명적인 단점이 있습니다. 바로 사용하는 플러그 사이즈가 좀 큰 녀석들을 사용하게 되면 저 사이에 있는 콘센트 구멍은 좁아서 사용할 수가 없다는 거죠. 여러 개 한 번에 쓰려고 멀티탭 쓰는데 4 구든 5 구든 그 구멍을 온전히 사용하지 못하니 또 멀티탭에 멀티탭을 연결하는 사태까지 발생하기도 합니다. 이런 어려움을 해결코자 찾다가 괜찮은 물건을 발견했습니다. 현대일렉트릭이라는 회사에서 판매하는 SIDE C-63이라는 모델의 멀티탭입니다. 생긴 건 좀 .. 2022. 7. 25.
아이패드에서 CODE-SERVER 폰트 변경하기 최근에 잡다한 취미생활을 잠시 뒤로 미루고 Java-Script라는 장난감에 빠져서 살고 있었습니다. 리액트를 주로 공부했는데 code-server라는 온라인 VSCode와 찰떡궁합인지라 노트북 없이 아이패드만으로도 불편함 거의 없이 잘 사용을 했었습니다. code-sever를 이용해서 아이패드를 정말 노트북처럼 사용할 수 있는 방법은 아래 링크를 참고해 주세요. [code-server + 라즈베리파이] 아이패드를 코딩 머신으로 활용하는 가장 완벽한 방법 코딩 공부를 하시는 분들 중에 아이패드 유저 시라면 아이패드를 코딩에 활용해보고 싶은데 마땅히 IDE로 쓸만한 게 없어서 안타까우셨던 분들 많으셨을 겁니다. 게다가 요즘 아이패드는 노트북 kwonkyo.tistory.com 물론 몇몇 아쉬운 점이 있긴 .. 2022. 7. 11.
ESPHome 개발환경 구축 ESPHome은 제가 참 좋아하는 IOT 설루션입니다. ESP8266 모듈과 함께 하면서 원래 아두이노로 하던 프로젝트까지도 모두 ESPHome으로 다시 뒤집어엎을 정도로 주로 사용하고 있습니다. 워낙 잘 만들어져 있고, 업데이트도 부지런히 이루어지고 있어서 뭐 더 바랄 게 없지만 가~끔 거의 1년에 1번 될까 말까 한 빈도로 소스를 좀 고쳐보면 어떨까 하는 그런 상황이 생길 때가 있습니다. 그러면 저 같은 경우 시도했던 방법이 ESPHome 공식 저장소를 포킹 한 다음 소스코드를 살짝 수정하고 Home Assistant(HA)에 수정한 저장소를 연결해서 새로운 Addon을 설치하고 잘 되는지 확인을 하는데요. 이렇게 하면 오타 나서 글자 하나 수정하려고 해도 HA에 깔아놓은 수정된 ESPHome을 지웠.. 2022. 4. 7.