코딩일기

[카카오 애드핏] 애드핏 등록이 됐어요?

:lab — Wed, 26 Oct 2022 00:33:13 +0900

이번과 같은 카톡 사태가 다시 일어나지 않길 바랍니다! ( 티스토리 로그인도 안돼고.. 카톡도 안돼고.. 총체적 난국이었어요... )

지난번에 카카오 먹통 이후로

애드핏이 갑자기 등록 가능하길래 등록을 저렇게 했었거든요??

근데 신기하게도 원래 조건인 최근 글 개수 충족을 안했는데 (게으른 나 반성하세요)

저렇게 심사 진행까지 갔는데....

설마 되겠어 하는 마음으로 했는데...

분명 그랬는데...

~~이게 되네~~

글쎄 오늘 보니까 이게 승인 됐더라구요??!?

수익 가려야 된대서 가렸는데 이거 맞나요...? 어쨌든 기분이 좋아요 ㅎ히

수익도 났어요!!

미쳤따

예 일단 지금 기분이 매우 얼떨떨한데

일단 좋아요 좋습니다

이렇게 해보고 다음엔 텐핑하고 차이점을 써볼게요!!!

[Chrome] 구글 크롬 공룡 게임 가지고 놀기

:lab — Tue, 12 Apr 2022 23:42:17 +0900

크롬을 사용중 인터넷이 연결되지 않았을 때,

이런 공룡 한마리가 튀어나와 공룡 게임을 즐길 수 있습니다 :)

오늘은 크롬 공룡게임을 가지고 재밌게 놀아볼게요!!

공룡 게임 실행하기

보통은 공룡 게임을 플레이하기 위해 와이파이를 끄거나 데이터를 끄는 등 기기를 오프라인 상태로 만들지만,

오프라인 상태가 아니어도 이 공룡게임을 플레이할 수 있는 방법이 있습니다!

크롬 주소창에

chrome://dino

라고 쳐보세요!

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

그럼 공룡이 우릴 반갑게 맞이해줍니다 :)

이제 실행도 했겠다, 이제 공룡 게임을 커스텀해봅시다

공룡의 스피드 설정하기

우선 개발자 도구를 열어줍니다

맥: option-command-I
윈도우: F12

위의 단축키로 개발자 도구를 열어주시면,

이렇게, 무슨 소린지 모르겠는 외계어가 여러분을 반겨주실겁니다. (html 공부하신 분들은 예외 )

이 외계어들은 제쳐두고, 상단의 Console 탭을 눌러줍니다.

Console 클릭!

Console 탭으로 들어가서,

Runner.instance_.setSpeed(원하는 속도);

위와 같이 입력해줍니다. 이 코드는 공룡의 속도를 조절하는 코드입니다.

속도 부분에는 99.9, 0.01과 같이 정수뿐만 아니라 소수까지도 입력이 가능합니다.

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

위 영상에서도 보시다시피 명령어를 완전히 외울 필요는 없고 구글에 관련해서 쳐보거나, 아니면 저처럼 runner.instance.setspeed와 같이 간단히 외워놓으면 개발자 도구에서 알아서 추천을 해줍니다. 그 때, 엔터를 눌러주시면 자동완성이 됩니다 :)

공룡세계 중력 설정하기

자, 이제 속도를 바꾸는 법을 알았으니 공룡 세계의 중력을 바꿔봅시다!

중력은 다음과 같은 코드로 바꿀 수 있습니다.

Runner.instance_.tRex.config.GRAVITY = 원하는 값;

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

영상에서 보시는 바와 같이 중력값을 조절함에 따라

공룡이 뛴! 뛴!

거리다가

슈우우우우우웅

하고 날아갑니다

그럼, 이제 비슷하지만 또 다른, 공룡의 점프 능력을 향상시켜볼게요!

공룡이의 점프 능력을 멋지게 만들거나 안 좋게 만들기

자, 이제 글을 쓰다 보니 내적 친밀감이 생긴 우리 공룡이의 점프 능력을 멋지게 해봅시다!

점프는 다음과 같이 조절할 수 있습니다.

Runner.instance_.tRex.setJumpVelocity(원하는 값);

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

처음엔 공룡이의 점프 실력을 0으로 만들었는데

이상하게.. 약간씩 뛰는거 같습니다... 왜 그런진 잘 모르겠습니다 ㅋㅋ

그리고 점점 실력을 높여줬습니다.

이게 처음엔 비슷할 줄 알았는데 그게 아니였어요 ㅋㅋㅋ

약간 느낌이

중력을 조절했을 때는 우주에 있는 느낌이고

점프는 히어로가 착지하는 느낌입니다 ㅋㅋ

죽지않는 공룡이

이제, 공룡이를 슈퍼공룡으로 만들어보겠습니다

공룡게임에서 gameOver 함수는 공룡이가 죽게 되는 원인입니다

그래서 이 gameOver 함수를 빈 함수로 바꿔준다면 공룡이가 죽지 않는것입니다!

이 코드를 쓰면 gameOver 함수가 빈 함수로 대체되어 공룡이가 슈퍼공룡으로 변합니다 :)

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

게임오버 함수를 되돌리려면 새로고침을 하시면 되지만

새로고침이 싫으시다면 처음에 변수에 gameOver 함수를 저장해두고, 되돌릴때

Runner.prototype.gameOver = 변수이름

위처럼 작성해주시면 됩니다!!

무적으로 됐다가 다시 돌아온 모습

점수를 조작해봅시다

아니, 이게 어떻게 가능하냐구요?

가능합니다

Runner.instance_.distanceRan = 원하는 점수 / Runner.instance_.distanceMeter.config.COEFFICIENT

이렇게 쳐주시면

점수가 바뀌는 것을 볼 수가 있습니다 :D

참고로 공룡게임은 점수가 999999가 최대이므로, 원하는 점수로 999999를 하시면 시작하자마자 0에서부터 시작하는것처럼 보이실 겁니다 (이 점 참고해주세요! )

동영상 서비스가 종료되어 해당 콘텐츠를 재생할 수 없습니다.

자, 이렇게 점수를 바꿔보는 것까지 했습니다!

생각보다 다양한 방법들로 공룡게임을 커스텀할 수 있었습니다 :)

아직 두 가지의 재밌는 방법들이 남았지만 추후 추가 글로 남기겠습니다

다음에 봐요

[맥] 맥에서 안드로이드로 파일 전송하는 법 - Android File Transfer

:lab — Mon, 7 Mar 2022 14:16:39 +0900

여러 개의 글로 나누어 글을 올릴 예정입니다 :)

윈도우에선 안드로이드 폰을 아무 세팅 없이 연결해도 기기가 잘 뜹니다.

하지만, 맥을 처음 쓰실때 많이 당황하실 수 있는 부분이 안드로이드 폰을 연결했을때

기기가 뜨지 않는다는 것이죠.

그래서 오늘은 맥과 안드로이드 간에서 파일을 전송하는 법을 알려드리겠습니다!

Android File Transfer

안드로이드 사이트에서 지원하는 방법입니다.

유선 방식이기 때문에 와이파이가 필요없습니다.

(여길 클릭하거나 위에 볼드체로 표시된 제목을 눌러주시면 사이트로 이동합니다. 모든 링크는 볼드체로 표시된 이름을 눌러주시면 사이트로 이동합니다!)

사이트에 들어가서 DOWNLOAD NOW 를 눌러 dmg 파일을 다운받아줍니다.

dmg 파일을 클릭하면 이렇게 나오게 되는데, 왼쪽의 안드로이드 아이콘을 Applications 폴더로 드래그 해줍니다.

그리고 맥과 안드로이드를 유선으로 연결해줍니다.

그 뒤, Android File Transfer을 실행해 핸드폰에서 알림이 뜨면 모두 허용을 눌러 주시면

정상적으로 파일을 옮길 수 있습니다.

[맥] 맥북 한영키 전환이 느릴때 빠르게 하기!! | Karabiner 사용

:lab — Thu, 3 Mar 2022 13:10:29 +0900

맥북에는 CAPS LOCK키에 한영키가 있습니다!

이렇게 한/A라고 되어 있는 캡스락 키로 한영전환을 하는데요,

아마 이 글에 들어오신 분들은 이 캡스락 키로 한영전환을 할 때

반응이 느리거나, 또는 여러번 눌러야 한영전환이 되거나 하셔서 들어오셨을 겁니다.

저도 며칠 전까지만 해도 이 문제 때문에 많은 고민을 했고요.

그런데! 이 한영전환을 빠르게 할 수 있는 방법을 알려드리겠습니다!

사전 준비

아래에 나와 있는 프로그램을 깔아주시면 됩니다!

Karabiner Elements

Karabiner-Elements

A powerful and stable keyboard customizer for macOS.

karabiner-elements.pqrs.org

Karabiner-Elements로 한영키 만들기!

설치를 해주시면,

런치패드에 이렇게 두 아이콘이 생깁니다!

여기서 Karabiner-Elements를 실행해주세요!

그럼 이런 화면이 나옵니다!!

이 이미지에서

from right_command to f13

이 나와있는데, 이건 신경쓰지 않으셔도 됩니다! 저는 따로 설정을 한 상태라 이렇게 뜨는 거고, 원래는 아무것도 나와있지 않습니다 :)

여기서, + Add item 버튼을 눌러줍니다!

그럼, 이렇게 빈 입력창이 생기는데요!

각 빈칸을 클릭해주면

이렇게 어떤 키를 선택할지 나옵니다!

여기서 주의해야 할 점은, 여기서 From에 선택된 키는 원래의 기능을 하지 못하고 다른 키의 기능을 하게 된다는 것입니다.

따라서, 잘 안쓰는, 또 꼭 필요하진 않을 것 같은 키를 골라서 바꿔주세요!

간단히 말해, To에 들어가는 키의 기능을 From 키가 대체하는 것입니다!

따라서 From 키의 원래 기능은 쓸 수가 없게 되는 거죠.

하지만 오른쪽의 Remove를 눌러 삭제해주면 다시 원래의 기능을 사용할 수 있습니다 :D

저는 Command키도 왼쪽 Command만 쓰고, 마침 커맨드 키도 2개라 오른쪽 커맨드 키를 설정해 주었습니다.

그리고, To key에는 f13을 넣어주었습니다!

키보드에 보시면 F1~F12까지만 있으실 텐데, F13~F20까지 가상의 키가 존재합니다!

따라서 이 키는 평소엔 쓰일 일이 전혀 없으니 단축키가 잘못 인식된다거나 하는 일이 없어 F13을 To key에 넣어준 것이죠!

이렇게

From Key에는 안쓰는 키를,

To Key에는 f13~f20 사이의 키를

넣어주시면 됩니다!

이렇게 설정을 다 해주시고,

Karabiner-Elements 앱은 꺼줍니다.

그리고,

시스템 환경설정 - 키보드 - 단축키 - 입력 소스

로 들어가줍니다!

그럼 이렇게 입력 메뉴에서 다음 소스 선택에 ⌃⌥스페이스(control+option+스페이스) 라고 되어 있는 걸 보실 수 있습니다!

(다행히 바꾸기 전에 미리 캡처해둔게 있었어요 )

입력 메뉴에서 다음 소스 선택을 더블클릭 해주고,

전에 From 키에 선택한 키(오른쪽 커맨드)를

눌러주시면,

그 전에 From키를 f13키로 대체했기 때문에,

이렇게, F13으로 바뀌는 것을 볼 수 있습니다!

그리고 이제 다시 설정하신 키(오른쪽 커맨드)를 눌러보시면...

한영 전환이 잘 되는 것을 확인하실 수 있습니다!!!

물론, 원래의 한영키(CAPS LOCK)도 잘 작동하고요.

이렇게

adㅇdㅁㄹafㅁfㄷfㄱㄹtgㅅhrthgfdgfㅋㅎㄹ

잘 바뀌는 것을 보실 수 있습니다~~!!

블로그에 텐핑 광고 달기

:lab — Wed, 2 Mar 2022 18:53:41 +0900

예전부터 블로그에 광고 달아서 버스비랑 간식값 정도는 벌고 싶다!고 종종 생각은 했었지만

한참을 미루다가

드디어 제 블로그에 광고를 달게 되었습니다!

물론 저만 좋은거겠...죠?

웬만하면 광고를 적게 달고도 비교적 큰 수익을 낼 수 있는 애드센스를 하고 싶었지만...

나이가 안돼서 할 수 없는 관계로

심사절차 없이 바로 시작할 수 있는 텐핑을 시작하게 되었습니다.

자 그래서 오늘은 저처럼 애드센스를 못 다시거나

아니면 그냥 심사가 귀찮다!

하시는 분들을 위해 텐핑 광고를 다는 방법을 소개해 드리겠습니다!

우선, 블로그 관리에 들어가주세요!!!

들어가서 보시면 이렇게 수익 탭이 보이실 겁니다!

(저는 이미 텐핑 연동을 해서 텐핑 관리가 뜨는데 연동 안하셨다면 안뜨시는게 정상이에요!)

수익을 눌러주시고, 광고 플랫폼 부분을 보시면,

이렇게 애드핏, 애드센스, 데이블, 텐핑이 있는데,

여기서 텐핑 칸에서 연동하기 버튼을 눌러줍니다!

(원래 상세 보기 칸에 연동하기가 있어요!)

그리고, 연동하기를 누르면

텐핑 로그인 버튼이 뜹니다!

그럼 로그인 창이 뜨는데,

통합 회원가입에서

휴대폰 번호를 입력해 주시고,

인증번호를 입력해줍니다!

그 뒤, 체크할 것들 다 체크해 주시고,

(텐핑스쿨, UUU몰.. 이건 선택이라 원하시면 체크해주세요!)

인증하기를 눌러줍니다!

비밀번호를 설정하고,

회원가입을 클릭해 주시면

회원가입이 완료됩니다!

그 뒤, 회원가입한 계정으로 로그인 해주시면 일단 연동이 완료됩니다!

그럼 아마 저처럼 아래와 같이 '상세 보기'가 뜰 텐데요,

상세 보기를 눌러주시면...

이렇게 수익이 뜨고..

(아직 1원도 못 벌었어요 ㅋㅋ 클릭 한번만 해주시면 안될까요? )

그 밑에 이렇게 광고 설정이 뜹니다!

본문 상단은 말 그대로 글 상단에 위치하고,

본문 중간은 제가 따로 광고를 글 쓸때 직접 넣어줘야 광고가 나옵니다!

본문 하단은 글 하단에 위치합니다.

그 외 다른 위치의 광고들도 직접 켰다 껐다 하시면서 미리보기를 눌러주시면,

어느 위치에 어떤 크기로 광고가 나오는지 알 수 있어요!

광고 사이즈는 다음과 같습니다!

SMALL

BIG

LIST

광고들이 이러한 모양이라고 생각하시면 됩니다!

원하시는 유형의 광고를 선택해주시고, 변경사항 저장을 해주시면,

광고가 달리게 됩니다!

하루에 천만원 넘게 버시는 분도 계십니다 ㄷㄷㄷㄷ

일단 가입심사가 없다는 점에서 마음에 듭니다! ㅋㅋ

++ 4.16 추가!

드디어! 광고 수익이 나오기 시작했습니다!!!

근데 아직까지는 클릭당 광고 수익이 애매한게 어떤건 한번 클릭에 50원 정도하고,

어떤건 한번 클릭에 130원이 들어오더라고요!?

아직 결론 내리기에는 데이터가 많이 없지만

일단 수익이 들어온다는게 행복합니다

[Unity] 난수를 생성하는 Random.Range

:lab — Mon, 21 Feb 2022 21:16:10 +0900

이 글은 유니티 문서를 찾아서 제 나름대로 정리한 글이며(사실상 그냥 번역한거나 다름 없어요.. ), 개인공부용으로 작성한 거라 반말로 작성되었어도 양해 부탁드립니다

Random.Range는 특정 범위 내에서 난수를 생성한다.

물론, 여기서 말하는 난수는 의사난수(난수인것처럼 보임)이다.

사용된 알고리즘

Xorshift 128 알고리즘을 사용했다고 한다.

난수 생성 형태

실수(float 형태)로 생성된다.

속도

UnityEngine.Random을 사용했을때, System.Random에 비해 20%에서 40%가량 빠른 속도를 낼 수 있다.

주의할 점

Random이라는 같은 이름을 공유하기 때문에, using을 통해 System과 UnityEngine을 같이 가져오면 CS0104

컴파일러 에러를 얻을 수 있으니 주의해야한다. 이는 using Random = UnityEngine.Random;을 하거나, using System을 제거하는 방식 등으로 해결할 수 있다.

사용방법

Random.Range(시작값, 끝값)

Random.Range는 위와 같은 식으로 쓸 수 있다.

여기서 중요한 것은

시작값과 끝값이 정수이면, 끝값은 제외되고,

시작값과 끝값이 실수라면, 끝값도 포함된다는 것이다.

이를 실제로

Debug.Log(Random.Range(0.0f, 9.5f));

와 같이 작성했을 때,

이러한 결과를 얻을 수 있었다.

참고

Unity - Scripting API: Random

This static class provides several easy game-oriented ways of generating pseudorandom numbers. The generator is an Xorshift 128 algorithm, based on the paper Xorshift RNGs by George Marsaglia. It is statically initialized with a high-entropy seed from the

docs.unity3d.com

SetEdit로 갤럭시 가상 램 용량 늘리는 법!

:lab — Fri, 14 Jan 2022 17:49:58 +0900

짜잔! 총 10GB의 램을 가졌습니다

갤럭시를 사용 중이신 분들은 비교적 최근에 생긴 가상 램(RAM Plus)을 보실 수 있으실 겁니다.

원래는 이 가상 램의 용량이 4GB로 되어 있었는데요, 이 방법을 쓰시면 용량을 바꾸실 수 있습니다

우선, 시작하기 전에 미리 준비를 해야합니다!

1. 사전 준비

이 방법은 adb(Android Debug Bridge)를 사용합니다. 따라서, 핸드폰과 연결할 기기가(저는 노트북을 사용했어요 :) 필요합니다!

또한, 이 방법은 SetEdit이 설치되어있다는 전제 하에 진행되므로, 아직 깔지 않으신 분은 설치해주시길 바랍니다.

(사실 노트북이랑 연결해서 그대로 터미널에서 adb 명령어로 SetEdit를 사용하지 않고 가상 램 용량을 바꿀 수 있지만, 아래 방법대로 하면 추후에 바로바로 핸드폰에서 설정을 변경할 수 있기 때문에 SetEdit를 사용하는 것이 좋을 듯 합니다 :)

일단, 핸드폰에서 설정으로 들어갑니다 :)

제 핸드폰은 개발자 옵션을 켜놓았기 때문에 이렇게 밑에 '개발자 옵션'이라고 뜨지만, 활성화를 해놓지 않으셨다면 뜨지 않으실 겁니다.

여기서 휴대전화 정보를 눌러줍니다.

소프트웨어 정보를 클릭해줍니다.

그럼 그 뒤에 '빌드번호'라고 적힌 부분이 나오는데, 빌드번호를 연타해줍니다. (OS 버전에 따라 비밀번호를 요구할 수도 있어요! 비밀번호를 입력해 주시고 진행해주시면 됩니다)

그렇게 연타하면 개발자 모드가 켜졌다는 알림(토스트 메시지)이 옵니다.

그 뒤부턴 개발자 모드가 보이게 됩니다 :)

개발자 모드가 활성화되면, 개발자 옵션을 눌러 디버깅-USB 디버깅에서 사용설정을 해줍니다.

그 다음엔 핸드폰과 기기(노트북)를 연결해줍니다!

이제, 노트북에서 adb를 설치해줍니다!

SDK 플랫폼 도구 출시 노트 | Android 개발자 | Android Developers

Android SDK 플랫폼 도구는 Android SDK의 구성요소입니다.

developer.android.com

여기에 들어가서, 각 운영체제에 맞는 Platform-Tools를 다운받아줍니다.

다운받은 후, 압축을 해제시켜줍니다.

그 뒤, 터미널에 들어가서

ln -s /Users/사용자 이름/tool/platform-tools/adb /usr/local/bin/adb

이 명령어를 쳐 주시고,

adb shell pm grant by4a.setedit22 android.permission.WRITE_SECURE_SETTINGS

아래 명령어를 입력해 SetEdit 앱에 권한을 부여해줍니다.

그럼 이제 다시 핸드폰에서 SetEdit로 들어가서, System Table에서 Global Table로 바꿔준 후,

ram_expand_size라고 적혀있는 부분을 눌러줍니다.

그러면 위 이미지처럼 뜰 텐데, 여기서 Edit Value를 선택해주고, 4096으로 되어있던 값(숫자)을 6144로 바꿔줍니다!(6GB로 설정 시)

4096, 6144는 1GB=1024MB이므로, 이를 이용해 숫자를 적어주시면 됩니다 :) (참고로 가상 램의 용량은 핸드폰의 여유공간의 용량보다 크면 안됩니다!! 또한 가상 램은 저장공간의 일부를 램처럼 쓰는 것이라, 가상 램 용량만큼은 항상 여유공간을 남겨놓아야 하기 때문에 적절히 용량을 타협해주시기 바랍니다!

찾아보니 1GB=1024MB인 줄 알았는데, 국제표준 IEEE1541-2002에 따르면 1GB=1000MB이라고 합니다 :)
여기서는 6000으로 값을 바꿨을 때 가상 램 용량이 5GB로 표시되어 1024를 기준으로 작성했습니다.
추후 이와 관련되어 글을 쓸 예정입니다!

숫자와 적절히 타협해주시고, 다시 설정으로 들어가보면...!

이렇게 가상 램의 크기가 변경됩니다

[맥] 과 android간에서 연속성 기능 구현(?)하기!

:lab — Sat, 18 Sep 2021 22:07:36 +0900

갤럭시 에코시스템 소개 페이지

애플 연속성 소개 페이지

안드로이드와 윈도우, 또는 아이폰과 맥 간에서는 '연속성' 기능을 사용할 수 있습니다.

연속성 기능을 통해 전화 및 메시지를 수신할 수 있고, 핸드폰에서 쓰던 창을 컴퓨터에서 쓸 수 있으며, 간단하게 빠른 파일공유가 가능합니다.

흔히 말하는 애플 연속성 기능, 갤럭시 에코시스템이 이에 속하죠!

그런데, 이 기능은 정말 편리하겠지만(저는 아직 연속성 기능을 한 번도 못 써봤습니다 :ㄷ ),

안드로이드-윈도우 / 아이폰-맥과 같이 동일 제조사 또는 윈도우를 사용중일때(윈도우의 My Phone 기능)만 가능합니다.

아쉽게도 저와 같이 맥-안드로이드를 사용하는 분들께는 이러한 기능을 맛볼 수가 없는 줄 알았습니다 :ㄷ

그런데! 며칠간 틈날때마다 삽질을 해본 결과!

조금이나마 이런 연속성을 체험할 수 있는 방법을 찾았습니다!

기기간 인터넷 탭 공유 Sharing Tabs

안드로이드에서 쓰던 웹사이트를 그대로 컴퓨터에서도 사용할 수 있는 기능입니다 :D

이 기능을 구현하기 위해서, 저는 웨일 브라우저를 핸드폰과 노트북에 설치했는데요, 같은 네이버 계정으로 되어 있으면,

서로 간의 탭 공유가 자동으로 됩니다!

노트북에선, 웨일-방문 기록-다른 기기의 탭 칸에 같은 계정으로 연결된 다른 기기의 탭이 나온다는데.. 저는 나오질 않아서 ㅠㅠ

(혹시 해결방법을 아시는 분은 댓글로 알려주세요..! :ㄷ)

(크롬도 마찬가지로 탭 공유를 지원하기 때문에 크롬도 좋은 대안이 될 듯합니다!)

그래서 저는! 아쉽게도 이 기능 대신에!

웨일의 다른 기능인(웨일 홍보 아닙니다;; ㅎㅎ) PC로 보내기 기능을 사용했습니다!

참고로 맥에서 전송되었다는 알림이 안 뜰 텐데(뜨시면 이건 무시해주세요) 그럴 때는

설정-알림 및 집중 모드-네이버 웨일-알림 허용을 해주시면 됩니다! (참고로 카톡도 이거 허용해주시면 윈도우처럼 메시지 알림이 떠요!)

또한 노트북에서 핸드폰으로 보낼 땐 Alt-C라는 앱을 이용해 보냈고요!

(Alt-C에서 Auto Lanuch에 링크를 복사하면 열게 설정했습니다!)

이렇게 하니 연속성의 편리함을 좀 알게 되더라고요..!

클립보드 공유 Sharing Clipboard

클립보드 공유는 아까 잠깐 나왔던 Alt-C를 이용해서 쓸 수 있습니다 :O

양쪽에 Alt-C를 설치하고 기기를 등록한 후,

맥에서 Option+C로 텍스트를 복사하면 됩니다! (⌘+C도 가능하지만 일반적인 복사이고, 기기간 클립보드 공유는 되지 않습니다!)

매직 키 ⎇+C

눌러보세요 ⌨️

⎇+C

클립보드 공유.

마치 마법처럼.

파일 공유 Sharing Files

파일 공유는 아까 말했던 웨일 브라우저로 공유할 수 있습니다!

파일 선택 후, 공유를 눌러, PC로 보내기를 눌러 주시면 됩니다!

파일 선택.

공유.

PC로 전송.

전화 및 메시지 Calling & Message

이건 제가 아직 써보진 못했는데,

AirDroid를 이용하면 가능하다고 합니다 :)

이 역시 두 기기 전부 설치해야 합니다!

갤럭시 사용 시 When you use Samsung Smartphones

SideSync라는 지금은 지원중단된 프로그램이 있는데, 아직도 찾아보시면 다운은 하실 수 있습니다.

그런데, 문제는 제 맥북 기준으로는 설치가 안돼서.. 위에서 빼긴 했는데

맥에 설치가 정상적으로 되신다면 SideSync도 좋은 방법일 것 같습니다!

(파일 공유, 전화 및 문자 메시지 송/수신, 미러링(?) 기능이 있습니다!)

저는 지금 파일/클립보드/탭 공유 중인데, 이정도만 돼도 꽤 좋습니다 ㅎㅎ

맥과 안드로이드 기기를 가지고 계시다면 이렇게 연속성 기능을 구현하는 것도 나쁘지 않을 것 같습니다!

Naver Whale

네이버 웨일 브라우저

일상을 여는 새로운 시작 네이버 웨일

whale.naver.com

Alt-C

Alt - C

Step 1 Install the app on your PC and your Smartphone or Tablet Step 2 Open both apps and enter the code shown on the Smartphone/Tablet into the PC Application Step 3 Wait for Syncing to complete, and use the Global Hotkey to Copy away!

altcopy.net

AirDroid

Download AirDroid Personal | File transfer and remote control app

Download AirDroid for Windows, Mac, iOS, or Android for remote control Android devices, screen mirroring, file transfer and management. Download AirMirror for AirDroid and iOS to remote control Android devices from Android, remote camera, and provide remot

www.airdroid.com

SideSync

SideSync - Connect your mobile to your PC | Samsung Support UK

Download SideSync for Windows or MAC to share the screen and data between your Samsung mobile device and your PC. Learn how to use it here.

www.samsung.com

[React Native] React Native(Expo CLI) 설치하기!

:lab — Sun, 12 Sep 2021 17:23:45 +0900

오늘은 React Native(Expo CLI)를 설치해보겠습니다!

일단, editor를 아직 설치하시지 않은 분들은 editor를 설치해주세요!

(editor는 개발을 위한 메모장(?)이라고 생각하시면 됩니다)

제가 추천하는 editor는 Visual Studio Code입니다!

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

홈페이지에 들어가시면 위와 같이 나오는데, 여기서 파란색 박스 안의 Download [운영체제] 로 되어있는 버튼을 눌러 설치파일을 다운받아주시면 됩니다!

그리고 다음으로는 Node.js를 설치해 주겠습니다!

NodeJS는 맥 기준으로 크게 두가지 설치 방법이 있는데, 하나는 공식 홈페이지에서 설치 프로그램으로 다운받는것과,

Homebrew를 통해 설치하는 방법이 있습니다!

1. 설치 프로그램을 이용하여 다운받기(Mac, Windows 상관X)

설치 프로그램을 이용하시려면

공식 홈페이지를 들어가셔서 다운로드 해주시면 됩니다!

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

홈페이지 화면

이 화면에서 두 개의 큰 초록색 버튼이 나오는데, 원하시는 버전을 다운받으시면 됩니다!

저는 LTS(Long Term Support) 버전을 다운받으시는 걸 추천드립니다 :)

2. Homebrew를 사용하여 다운받기(Mac, Linux에서만 가능)

맥 또는 리눅스를 사용중이시라면 Homebrew를 설치하셔서 다운받으시는 걸 추천드립니다!

Homebrew는 패키지 관리자인데요, 이걸 설치하시면 터미널(윈도우의 CMD)에서

명령어 한 줄 만으로 프로그램을 설치하실 수 있습니다!

Homebrew

The Missing Package Manager for macOS (or Linux).

brew.sh

터미널을 여시고,

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

위 명령어를 입력해주세요!

그럼 이렇게 암호를 입력하라고 나오는데요, 사용자 암호를 입력하시고 계속 진행하시면 됩니다!

(암호 입력하셔도 **** 같은 표시가 없어요! 그래도 입력중인 거니 다 누르시고 Enter 해주시면 됩니다!)

Homebrew를 다 설치하셨다면,

이제 아주 간단한 방법으로 NodeJS를 설치하실 수 있습니다!

이제 터미널에

brew install node

이 명령어만 치시면 nodeJS 설치가 시작됩니다!

nodeJS를 설치하시면 npm이라는 것도 같이 설치되는데, npm은 React Native 개발하면서 패키지를 다운할 때 유용합니다!

그래도 전 yarn을 좋아하기 때문에 yarn도 설치해주겠습니다!

yarn 설치(필수 X)

아까 nodeJS를 설치하시면 npm도 같이 설치된다고 했었죠?

이제 npm으로 yarn을 설치할겁니다! :)

터미널(또는 CMD)에

npm install --global yarn

위 명령어를 입력하시면 자동으로 yarn이 설치됩니다!

expo-cli 설치

이제! (시뮬레이터가 필요하지 않으시다면)마지막으로 expo를 설치해 주겠습니다!

expo를 설치하기 위해서, 아래 코드 중 하나를 입력해주시면 됩니다!

(npm 이용)

npm install --global expo-cli

또는

(yarn 이용)

yarn global add expo-cli

Xcode 또는 Android Studio 설치(선택)

이제, 개발하면서 iOS, Android 시뮬레이터를 이용하여 테스트하기 위해

Xcode(iOS 시뮬레이터를 이용하기 위함), Android Studio를 설치하겠습니다 :D

또는 그냥 Web으로 테스트하시거나 실제 기기로 테스트하셔도 됩니다!

(Web은 프로젝트를 만들고 터미널에서 yarn start 후 w 입력, 실제 기기는 expo앱을 설치 후 QR코드 스캔)

Xcode

Android Studio

Xcode 설치

Xcode는 우선 맥에서만 설치가 가능해요!

(그래도 다른 시뮬레이터들이 있으니 윈도우이셔도 상관없어요! 윈도우를 사용중이시라면 XCode 부분은 넘어가주세요 :)

Xcode는 설치가 간단합니다!

맥 App Store에서 Xcode를 치시고 설치해주시면 됩니다!

다 다운 받으시고 Preferences > Locations > Command Line Tools에서 Xcode OO.O.O (O 부분은 버전입니다 :) 선택해주시면 됩니다!

Android Studio

Download Android Studio and SDK tools | Android Developers

developer.android.com

안드로이드 스튜디오는 위 홈페이지에서 설치해주시면 됩니다!

https://docs.expo.dev/workflow/android-studio-emulator/

자세한 설명은 expo 공식 문서를 참고해주시면 좋을 것 같아요 :)

Expo 모바일 앱 설치(선택)

마지막으로, 실제 기기에서 테스트해보시려면,

-안드로이드-

Expo - Google Play 앱

Expo는 JavaScript 및 React를 사용하여 앱을 제작하는 무료 및 오픈 소스 플랫폼입니다.

play.google.com

-아이폰-

‎Expo Go

‎Start building projects using web technologies with just your iOS device and your computer. Expo is a developer tool for creating experiences with interactive gestures and graphics using JavaScript and React. Note: some programming experience is recomme

apps.apple.com

위 링크들에서 앱을 다운받으시고,

Scan QR Code 또는 카메라에서 QR 코드를 스캔하시면 됩니다!

자, 여기까지 오셨다면 이제 React Native를 사용할 준비가 다 되셨습니다!!! :D :D :D

혹시라도 잘못된 부분이나 추가해야 할 부분이 있으시면 언제든지 댓글로 말씀해주세요 :)

당신의 립싱크 점수를 매겨주는 사이트 - Lipsync by Youtube

:lab — Thu, 4 Mar 2021 16:06:09 +0900

유튜브에서 만든 립싱크 점수를 매겨주는 사이트입니다!

(이 사이트는 안지는 꽤 됐는데 이제서야 올리네요...ㅎㅎ)

플레이해보니까 상당히 재밌네요 ㅎㅎㅎ

혹시 입을 계속 뻥긋거리면 높은 점수가 나오지 않을까 했는데

역시나 입만 뻥긋거렸더니 별 1개를 받았습니다;;; (ㅋㅋㅋㅋ)

★★★★

재밌어서 한번 더 해봤는데

다행히도(?) 점수가 잘 나왔습니다 :)

★

~~(별 반개가 없어서 3.5점인데 4점으로 올린건 안 비밀)~~

설명을 보니까 구글 Tensorflow로 립싱크가 얼마나 비슷한지 알아낸다고 합니다!!

플레이해보실 분들은 아래 링크로 들어가주세요 :D

lipsync.withyoutube.com/

[JS] tilt.js 사용하기

:lab — Mon, 22 Feb 2021 17:04:29 +0900

Vanilla-tilt.js 깃허브 Repo

micku7zu/vanilla-tilt.js

A smooth 3D tilt javascript library. Contribute to micku7zu/vanilla-tilt.js development by creating an account on GitHub.

github.com

tilt.js를 사용하면

html에 tilt 효과를 줄 수 있습니다.

설치

깃허브에서 직접 코드를 복사해 js파일을 만들어도 되고,

npm으로도 설치할 수 있다고 합니다.

npm install vanilla-tilt

(이 vanilla-tilt.js는 바닐라 스크립트(jQuery 이용 X, 순수한 자바스크립트)로 작성되었습니다.)

기본 사용

vanilla-tilt.js를 사용하려면 위에서 설치를 완료한 후,

<!-- at the end of the body -->
<script type="text/javascript" src="vanilla-tilt.js"></script>

이 코드를 html의 body 태그 가장 아래에 넣어주면 됩니다.

("이 코드는 vanilla-tilt.js를 불러오겠다"라는 의미입니다.)

(참고로 티스토리에선 따로 파일을 추가할 경우 images 폴더 안에 저장되기 때문에 src를./images/vanilla-tilt.js로 바꾸어주어야 합니다.)

이렇게 불러온 후,

원하는 개체에 tilt 효과를 적용해줍니다.

data-tilt 넣기

<div class="your-element" data-tilt></div>

JS 이용

<script type="text/javascript" src="vanilla-tilt.js"></script>
<script type="text/javascript">
	VanillaTilt.init(document.querySelector(".your-element"), {
		max: 25,
		speed: 400
	});
	
	//It also supports NodeList
	VanillaTilt.init(document.querySelectorAll(".your-element"));
</script>

이렇게 직접 개체 뒤에 data-tilt를 넣어주어도 되고,

자바스크립트를 작성해 vanilla-tilt.js 밑에 넣어 원하는 클래스의 개체에 적용시켜주는 방법도 있습니다.

속성 추가

• data-tilt를 사용한 경우

<div class="your-element" data-tilt data-tilt-max="50" data-tilt-speed="400" data-tilt-perspective="500"></div>

data-tilt를 넣은 경우에는 data-tilt 뒤에 data-tilt-max="50"과 같이 넣어주는 방법이 있습니다.

• JS로 적용시킨 경우

VanillaTilt.init(document.querySelector(".your-element"), {
	max: 25,
	speed: 400
});

이렇게 속성을 추가해 줄 수 있습니다.

• 기본값

{
    reverse:                false,  // reverse the tilt direction
    max:                    35,     // max tilt rotation (degrees)
    startX:                 0,      // the starting tilt on the X axis, in degrees.
    startY:                 0,      // the starting tilt on the Y axis, in degrees.
    perspective:            1000,   // Transform perspective, the lower the more extreme the tilt gets.
    scale:                  1,      // 2 = 200%, 1.5 = 150%, etc..
    speed:                  300,    // Speed of the enter/exit transition
    transition:             true,   // Set a transition on enter/exit.
    axis:                   null,   // What axis should be disabled. Can be X or Y.
    reset:                  true    // If the tilt effect has to be reset on exit.
    easing:                 "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
    glare:                  false   // if it should have a "glare" effect
    "max-glare":            1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
    "glare-prerender":      false,  // false = VanillaTilt creates the glare elements for you, otherwise
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    "mouse-event-element":  null    // css-selector or link to HTML-element what will be listen mouse events
                                    // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
    gyroscope:              true    // Boolean to enable/disable device orientation detection,
    gyroscopeMinAngleX:     -45     // This is the bottom limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the left border of the element;
    gyroscopeMaxAngleX:     45      // This is the top limit of the device angle on X axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the right border of the element;
    gyroscopeMinAngleY:     -45     // This is the bottom limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the top border of the element;
    gyroscopeMaxAngleY:     45      // This is the top limit of the device angle on Y axis, meaning that a device rotated at this angle would tilt the element as if the mouse was on the bottom border of the element;
}

예제 코드

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 2

:lab — Mon, 22 Feb 2021 00:47:04 +0900

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 1

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 1

오늘은 Python에서 간단하게 웹뷰를 만들 수 있는 pywebview라는 모듈에 대해 알아보겠습니다 :) (이번 글은 pywebview에 대한 아주 아주 아주 아주 간단한 예제와 설명입니다!) 우선, 이 pywebview는 아주

codingdiary26.tistory.com

지난번에는 다양한 예제로 Pywebview를 만나보았는데요!

오늘은 드디어 웹뷰앱을 만들어보도록 하겠습니다 :)

import webview

Pywebview를 임포트해줍니다.

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com')
# create_window('창의 제목!', '사이트 주소')

창을 생성해주고,

webview.start()

창을 띄워줍니다.

실행 화면

그러면 이렇게 웹뷰 앱이 실행됩니다.

여기서 끝났다고 생각하실 수도 있습니다!

(물론 사이트에 따라 이 과정이 필요없을 수도 있어요..;;)

제 경우에는 블로그에 링크를 새 창으로 띄우는 옵션이 선택되어 있습니다!

[html] link의 종류

html link의 target이 _blank라면 새 탭에서 링크를 띄운다. _self라면 그 링크를 클릭한 탭에서 링크를 띄운다. 실제 적용된 모습 티스토리 블로그를 html 모드로 바꿔 적용했다. target을 _blank로 설정했을

codingdiary26.tistory.com

눌러보시면 아마 새 창에서 뜨실 겁니다.

따라서, 현재 우리가 만든 웹뷰 앱으로는 링크를 눌렀을 때 이 창이

기본으로 설정되어있는 다른 브라우저(IE, 엣지 등)에서 열리는 상황이 생깁니다.

그리고 새 창으로 띄우는 것은 링크에서 target이 _blank일때 발생합니다.

즉, 새 창으로 띄우지 않게 하기 위해선 이 _blank를 바꿔주어야 한다는 것이죠.

링크를 클릭했을 때 클릭한 창에서 페이지가 열리게 하려면

_blank가 아니라 _self로 target을 바꿔줘야 합니다.

근데 이건 제 블로그를 열었을 때라 제가 블로그에서 새 창에서 열기를 없애주면 되지만,

자신이 그런 것을 변경할 수 없거나 이 웹뷰 앱에서만 _self를 적용할 수 있게 하려면 어떻게 해야 할까요?

저도 이런 건 해본 적이 아직 없었던 터라 구글에 검색해봤습니다.

(역시 구글)

구글에 검색해본 결과,

이건 JS를 통해 바꿀 수 있었고,

$(function(){ $('[target]').attr('target', '_self'); });

이렇게 코드를 작성하면 _self로 창을 띄울 수 있다는 것을 알게 되었습니다.

그리고,

webview에서 JS(자바스크립트)를 실행하려면

def evaluate_js(window):
    result = window.evaluate_js(
        """
        JS코드 쓰기
        """
    )

이런 식으로 코드를 작성하고,

webview.start(evaluate_js, window)

이렇게 webview.start에 evaluate_js를 불러오게 하면 되기 때문에

import webview

def evaluate_js(window):
    result = window.evaluate_js(
        """
        $(function(){ $('[target]').attr('target', '_self'); });
        """
    )

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com')
# create_window('창의 제목!', '사이트 주소')
webview.start(evaluate_js, window)

이렇게 코드를 작성하게 되었습니다.

그리고, 실행해본 결과....

처음에는 제대로 _self로 바꾸는 듯 했으나...

그 뒤부터 작동을 하지 않더군요...

(아마도 시작할 때만 JS와 CSS를 실행하는 듯 합니다... 그래서 다른 링크를 클릭하면 JS와 CSS를 다시 적용하지 않아 그냥 사이트가 똑같이 나오는 것 같습니다...)

그래서 이 문제를 해결하기 위해 조금 고민해봤습니다..!

1. URL이 변경되면 다시 JS를 불러오기

Pywebview에 URL을 알아내는 기능이 있었지만
다시 똑같은 URL을 불러올 수 있으니 이 방법은 사용하지 않았습니다.

2. 페이지가 로드될 때마다 JS 불러오기

페이지가 로드될 때 불러오게 하면
같은 url의 페이지여도 상관없이 JS를 불러올 수 있을 것 같아 이 방법으로 코드를 짰습니다 :)

결국 페이지가 로드될 때마다 JS를 불러오게 했습니다..!

그리고 이것도 처음 한번만 실행되지 않도록

Pywebview의 페이지 로드 이벤트 예제를 조금 수정했습니다.

import webview

def on_loaded():
    # 리스너 제거
    webview.windows[0].loaded -= on_loaded
    print("Loaded")

    # 모두 _self로 열리게 하기
    webview.windows[0].evaluate_js(
            """
            $(function(){ $("[target]").attr("target", "_self"); });
            """
        )

    # 다음번에 로드되었을 때 다시 적용할 수 있도록 함.
    window.loaded += on_loaded 

window = webview.create_window('아주 멋진 웹뷰 앱', 'https://codingdiary26.tistory.com/')
# create_window('창의 제목!', '사이트 주소')
window.loaded += on_loaded
webview.start()

최종적인 코드는 이렇게 작성했습니다.

window.loaded += on_loaded를 on_loaded 함수 맨 밑에 둠으로써

리스너를 다시 추가해줬습니다.

(근데 몇 분 지나고 보니까 그냥 리스너를 추가하고 없애는 코드를 아예 제거해도 될 듯합니다..)

(그래도 일단 페이지가 다 로드된 후에 적용시키는 게 나을 것 같아 이대로 해봤습니다.)

이렇게 코드를 작성하고 실행한 결과

제대로 _self로 바꾸게 되었습니다!

다음시간에는 이제 더 오류를 발견하지 못하면

빌드로 넘어가보도록 하겠습니다!

(제발... 오류 없어라..)

아 참!

Ionicons를 로드하지 못하는 오류(?)와

System.AggregateException: 하나 이상의 오류가 발생했습니다.

라며 뜨는 오류가 있는데

이건 webview.start()에

gui='cef'를 넣어주시면 해결됩니다 :)

(조금 더 공부해서 이유를 알아보겠습니다...)

그리고

$(function(){ $("[target]").attr("target", "_self"); });는 jQuery 코드입니다.

티스토리 블로그는 기본적으로 jQuery를 불러와서 webview 앱에서 따로 jQuery를 불러오지 않아도 된 것 같은데,

만약 사이트가 jQuery를 불러오지 않는다면 따로 jQuery를 불러올 수 있도록 해주시면 좋을 것 같습니다!

참고

Changing target="_blank" to target="_self" - in5 Answer Exchange

I believe the target attribute is ignored for email links, but you can target email links with the following jQuery: $('[href^=mailto]') Used in the code above, it would look like: $(function(){ $('[href^=mailto]').attr('target', '_self'); });

ajarproductions.com

Events | pywebview

Events Subscribe and unsubscribe to pywebview events.

pywebview.flowrl.com

[CSS] -prefix-free 사용하기

:lab — Sun, 14 Feb 2021 18:04:58 +0900

Gif 대신 apng로 넣어봤습니다;;

- Vendor Prefix 알아보기 -

[CSS] Vendor Prefix란?

vendor prefix가 무엇일까요? 우선, prefix에 대해 알아보겠습니다 :) Prefix의 뜻 알아보기 우선 prefix를 네이버 사전에서 찾아보면 위와 같이 "접두사"라는 뜻이 나옵니다. 자, 그럼 CSS에서 vendor prefix는.

codingdiary26.tistory.com

Vendor Prefix를 사용할 때,

일일이 CSS 속성에 각 브라우저의 Vendor Prefix를 입력하는 것은 매우 귀찮은 일입니다.

그런데, 마침 이 Vendor Prefix를 작성하지 않아도 알아서 자동으로 Vendor Prefix를 넣어주는 방법이 있습니다 :D

Prefix free: Break free from CSS vendor prefix hell!

-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. Test drive Test the prefixing that -prefix-free would do for this browser, by w

projects.verou.me

그 방법은 바로 이 사이트를 이용하는 방법인데요!

사이트에 들어가서,

파일을 다운받아줍니다!

prefixfree.min.js

0.01MB

파일을 다운받으셨다면,

적용하고 싶은 웹사이트의 Html 파일 <head>부분에

 <script src="prefixfree.min.js"></script>

위 코드를 넣어줍니다!

이 코드는 html에서 "prefixfree.min.js라는 파일을 불러오겠다"라는 의미입니다 :)

(CSS 파일 로드 부분 밑에 넣는 것을 권장합니다!)

이렇게 넣어주면 끝입니다!

(참고로 이 Prefix Free는 IE 9+, 오페라 10+, 파이어폭스 3.5+, 사파리 4+ 그리고 크롬과,

모바일 사파리, 안드로이드 브라우저, 크롬과 오페라 모바일 버전을 지원하고 있으며,

IE 8과 같은 오래된 버전의 브라우저에서는 CSS가 깨지지는 않지만, prefix가 자동으로 적용되지 않는다고 합니다 :)

[CSS] Vendor Prefix란?

:lab — Sun, 14 Feb 2021 16:11:27 +0900

vendor prefix가 무엇일까요?

우선, prefix에 대해 알아보겠습니다 :)

Prefix의 뜻 알아보기

우선 prefix를 네이버 사전에서 찾아보면

위와 같이 "접두사"라는 뜻이 나옵니다.

자, 그럼 CSS에서 vendor prefix는

영어의 un-, pre-처럼 앞에 붙여 쓸 수 있을 것 같다는 생각이 드실겁니다!

그럼 이제 한번 vendor prefix가 뭔지 알아봅시다!

Vendor Prefix 알아보기

Vendor Prefix

Vendor(판매 회사, 즉 브라우저 공급업체) Prefix(접두사)

CSS에서 vendor prefix는

-moz-, -webkit-과 같이 쓸 수 있습니다.

그런데, 이게 무슨 역할을 하는 걸까요?

Vendor Prefix는 실험적인 CSS 기능을 사용할 수 있게 도와줍니다.

최신 브라우저들에서는 CSS 기능을 따로 vendor prefix를 작성하지 않아도 많은 기능들을 지원하지만,

오래된 버전의 브라우저들에서는 지원하지 않는 기능들이 있습니다.

그렇다면,

CSS 코드를 열심히 작성했는데 오래된 버전의 브라우저에서는 그 CSS 코드가

제대로 적용되어 나타나지 않을 수가 있겠죠?

그래서 이러한 것을 방지하기 위해

Vendor Prefix라는 것을 사용합니다.

브라우저별 Vendor Prefix

이 Vendor Prefix는 각 브라우저에서 제공하는데,

주요 브라우저들의 Vendor Prefix

이렇게 브라우저마다 -webkit-, -ms-, -moz 등 각각의 vendor prefix를 갖고 있습니다.

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

실제로는 이렇게 활용할 수 있습니다.

이렇게 각 속성들에 브라우저들의 vendor prefix를 추가하면

페이지의 호환성을 높일 수 있습니다 :)

참고한 사이트

Vendor Prefix - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

Browser vendors sometimes add prefixes to experimental or nonstandard CSS properties and JavaScript APIs, so developers can experiment with new ideas while—in theory—preventing their experiments from being relied upon and then breaking web developers'

developer.mozilla.org

오류-python | error: Microsoft Visual C++ required 오류 해결 방법 [error: Microsoft Visual C++ OO.O or greater is required. Get it with "Microsoft C++ Build Tools"]

:lab — Sun, 14 Feb 2021 13:55:35 +0900

pyaudio 라이브러리를 pip 명령어로 설치하던 중

계속해서 에러가 뜨며 설치가 되지 않았습니다.

왜 그런지 에러 내용을 봤는데

error: Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools":https://visualstudio.microsoft.com/visual-cpp-build-tools/

이런 내용이 있었습니다.

잘 보니 그냥 Microsoft Visual C++ 14.0 이상의 버전이 필요하다고 설치해야 한다는 내용이었습니다.

따라서 저 오류 내용 안에 있는 링크를 통해 다운을 받으시면 됩니다 :)

다만 용량이 약 6GB 정도로 크기 때문에 미리 저장공간을 여유있게 확보해 두시고 설치하시는 것을 추천드립니다!

용량이 그리 많지 않다면 Microsoft Visual C++ 14.0 버전을 다운받으시는 것을 추천드립니다 :)

(크게 차이는 없지만 딱 이 용도로만 사용하실 거면 14.0을 다운받으셔서 몇 GB 정도는 아낄 수 있습니다!)

visualcppbuildtools_full.exe

3.14MB

참고하면 좋은 사이트

Configure Visual Studio Code for Microsoft C++

Configure the C++ extension in Visual Studio Code to target Microsoft C++ on Windows.

code.visualstudio.com

[블로그 꾸미기] 마우스 커서 바꾸기! - (사이트 이용)

:lab — Fri, 12 Feb 2021 16:10:16 +0900

블로그에서

내가 원하는 마우스 커서를 적용하게 하고 싶었던 적이 있나요?

내가 원하는 마우스 커서로 바꾸려면

https://www.cursors-4u.com

이 사이트를 이용하면 블로그 마우스 커서를 바꿀 수 있다고 하네요 :D

(보니까 CSS 코드를 이용해 적용시키는 방법이 있는데 이걸 통해 CSS 코드를 직접 짜서 마우스 이미지를

원하는 마우스 이미지로 바꿀 수 있을 듯 합니다.)

이 사이트에 들어가보시면

아주 다양한 마우스 커서들이 있는데요!

여기서 원하시는 마우스 커서를 고르시면 됩니다!

또한, 마우스 커서를 검색할 수 있으니 찾으시는 마우스 커서가 없다면 한번

검색을 통해 찾아보세요 :)

원하시는 커서를 찾고 스크롤을 내려보시면

이렇게 공통으로 적용할 수 있는 코드가 나옵니다!

티스토리는 Tumblr, Blogger, Blospot이 아니기 때문에

Universal에서 코드를 복사해

적용해볼게요!

우선, 여기에는 두 가지 방법이 있는데,

Html에서 <style>형식으로 Css 코드를 짜는 방법과,

CSS 파일 안에서 그냥 코드를 짜는 방법이 있습니다!

(이건 그냥 자기가 하고 싶은 방식을 선택하시면 됩니다!)

저는 CSS 파일 안에서 적용을 해보겠습니다.

그 전처럼 CSS 안에 작성을 해줍니다.

작성을 해주고, 적용을 눌러주시면 블로그에 적용이 되신 것을 알 수 있습니다!

CSS 작성

2020/12/15 - [블로그/꾸미기] - 티스토리(Tistory) 블로그에서 폰트 적용하기!!

티스토리(Tistory) 블로그에서 폰트 적용하기!!

안녕하세요!! 오늘은 티스토리에서 폰트를 적용하는 방법에 대해 알려드리려고 합니다!! 우선, 티스토리는 자유롭게 블로그를 꾸밀 수 있다는 장점이 있어요! 그래서!! 폰트도 내가 원하는 폰트

codingdiary26.tistory.com

2021/02/04 - [블로그/꾸미기] - [티스토리_꾸미기] 이미지 없을 때 표시되는 이미지 바꾸기 (대체이미지 바꾸기 :)

[티스토리_꾸미기] 이미지 없을 때 표시되는 이미지 바꾸기 (대체이미지 바꾸기 :)

이 글은 작성일 기준 제가 사용하고 있는 'Letter' 스킨 기준이므로 각 스킨마다 조금씩 다를 수 있습니다 :) 오늘은 티스토리에서 글에 이미지가 없을 때 표시되는 이미지를 바꿔보겠습니다!! 간

codingdiary26.tistory.com

[html] link의 종류

:lab — Sun, 7 Feb 2021 23:26:59 +0900

html link의 target이

_blank라면

<a href="https://www.tistory.com" target="_blank">

새 탭에서 링크를 띄운다.

_self라면

<a href="https://www.tistory.com" target="_self">

그 링크를 클릭한 탭에서 링크를 띄운다.

실제 적용된 모습

티스토리 블로그를 html 모드로 바꿔 적용했다.

target을 _blank로 설정했을 때

target을 _self로 설정했을 때

[티스토리_꾸미기] 메뉴 하단 sns 설정 바꾸기(sns 아이콘 및 링크 바꾸기)

:lab — Sat, 6 Feb 2021 16:33:39 +0900

이 글은 현재 제가 사용하고 있는 Letter 스킨 기준으로 작성되었습니다 :)

오늘은 티스토리 메뉴 하단의 sns 아이콘과 링크를 바꿔보겠습니다!

바로 여기에 있는 아이콘들!

우선, 스킨 편집으로 들어가줍니다!(https://블로그주소.tistory.com/manage/design/skin/edit#/)

1. 링크 수정

여기서, 페이스북 링크, 트위터 링크, 인스타그램 링크가 각각 있는데

이 링크를 각각 원하는 링크로 수정해줍니다! (예시: 깃허브 링크, mailto:자신의 지메일링크 등.....)

아이콘 변경을 하지 않으실 거라면 이 단계만 해주시고 적용해주시면 됩니다 :D

2. 아이콘 수정

이제 아이콘을 바꿔야겠죠!

여기서 html 편집을 눌러줍니다.

html 편집을 클릭해줍니다.

그리고 상단에 있는 탭 선택 부분에서

css를 클릭합니다.

여기서 CSS라고 써져있는 부분을 클릭합니다.

css 탭으로 가서,

Ctrl+F를 누르고,

fb를 입력해줍니다.

그럼 이렇게 fb라는 글자가 있는 위치로 가게 됩니다.

페이스북 아이콘은 images 폴더의 ico_fb.png인 것으로 보입니다!

여기서!

이 fb가 페이스북 버튼이 맞는지 꼭! 확인해주세요!

파일 업로드 탭으로 가서

images/ico_fb.png를 확인해보면(마우스를 갖다대면(호버하면) 나옵니다!)

그럼 이렇게

페이스북 아이콘이 나오는데요!

이걸 삭제하고

이 사진과 같은 이름(ico_fb.png)의 사진을 올리시거나,

아니면 그냥 다른 사진을 올려 Css에서 바꿔주시는 방법이 있습니다!

저는 구분을 위해 이름이 다른 새 사진을 올리겠습니다 :)

자, 우선 아이콘을 구글이나 네이버에서 찾는 것도 방법이긴 하겠지만,

그렇게 하면 저작권 관련 문제가 생길 수도 있고, 번거롭기 때문에

아이콘 사이트에 들어가줍니다.

저는 제가 좋아하는 아이콘 사이트인 ionicons에서 다운받았습니다!

Ionicons는 100% 무료인 오픈소스이기 때문에

부담없이 사용하실 수 있을 것 같아요 :)

Ionicons: The premium icon pack for Ionic Framework

Ionicons is an open-sourced and MIT licensed icon pack.

ionicons.com

다른 사이트에서 다운받으셔도 됩니다 :D

Material Icons

Get Material Icons

material.io

Simple Icons

1745 Free SVG icons for popular brands.

simpleicons.org

홈페이지

이렇게 ionicons에 들어가주시면,

아이콘을 검색할 수 있고,

또한, Outline, Filled, Sharp 이 세가지 선택을 하실 수 있습니다!

우선, 저는 깃허브 아이콘을 넣을 거기 때문에

Github라고 입력을 해주겠습니다!

그럼 이렇게 깃허브 아이콘이 나오는데요! (참고로 로고는 Outline, sharp 등의 선택이 불가합니다 :)

저는 Svg를 사용할 거기 때문에

Svg 다운 버튼을 클릭해줍니다!

클릭해서 원하는 위치에 저장해주시고,

다시 티스토리 스킨 편집으로 돌아와서,

방금 다운받은 svg 파일을 업로드해줍니다!

이렇게 업로드 해주시고,

다시 CSS 탭으로 돌아가서

images/ico_fb.png를 업로드한 파일의 위치로(images/파일이름) 바꿔줍니다!

그리고 나머지도 이렇게 해주시고

적용 버튼을 눌러주시면....

이렇게 정상적으로 아이콘들이 적용된 것을 볼 수 있습니다!!

[Python] Pywebview를 이용한 웹뷰앱 만들기! - 1

:lab — Sat, 6 Feb 2021 00:40:53 +0900

오늘은 Python에서 간단하게 웹뷰를 만들 수 있는 pywebview라는 모듈에 대해 알아보겠습니다 :)

(이번 글은 pywebview에 대한 아주 아주 아주 아주 간단한 예제와 설명입니다!)

우선, 이 pywebview는 아주 아주 아주 아주 아주 간단하게 웹뷰를 생성할 수 있는 모듈이에요!

코드 몇줄이면 바로 만들 수 있습니다!

기본 사용

우선, 설치를 해야겠죠!

pip install pywebview

이렇게 명령어를 입력해줍니다!

(pip에다가 3을 붙이면 python 3 버전용으로 설치된다고 하니 참고해주세요)

자, 설치가 되었으면

바로 한번 시작해보도록 하죠~~~!!

import webview

먼저, 임포트를 해줘야 사용할 수 있기 때문에

임포트를 먼저 해줍니다!

임포트를 해주고,

창을 만들가 위해

window = webview.create_window('Woah dude!', 'https://pywebview.flowrl.com')

이렇게 코드를 작성해줍니다.

webview.create_window('창 제목', '사이트 주소')

webview.create_window는 창을 리턴(반환)해줍니다!

그리고!

webview.start()

webview.start()로

창을 띄워주면..!

:ㅇ

이렇게 지정한 사이트가 나옵니다!

최종코드

import webview

window = webview.create_window('Woah dude!', 'https://pywebview.flowrl.com')
webview.start()

이렇게 단 3줄로 간단한 웹뷰를 만들어 보았습니다!

Html 코드 넣기

그리고, 이 웹뷰가 되게 매력적인게,

webview.create_window('html 코드 띄우기', html='<h1>Html Code!<h1>')

이렇게 창을 생성하는 부분인

webview.create_window 부분에 주소 대신 html=''을 이용해

따옴표('') 안에 html 코드를 넣어주면 이렇게 코드를 넣어 실행시킬 수도 있습니다!

실행화면

최종코드

import webview

webview.create_window('html 코드 띄우기', html='<h1>Html Code!<h1>')
webview.start()

Html 파일 불러오기

또한, html 파일을 불러올 수도 있습니다!!

index.html을 불러온 모습

app.py(파이썬 파일)

import webview

webview.create_window('html 코드 띄우기', 'index.html')
webview.start()

index.html(Html 파일)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html</title>
</head>
<body>
    <h1>Hello!</h1>
</body>
</html>

Web Engine 변경

가장 마음에 들었던 부분입니다 :D

크롬, 크로미움(원조 크롬, 오픈소스) 엣지, 기본엣지, 인터넷 익스플로러까지!

이걸 이용하면

IE에서만 지원되는 사이트들을 문제없이 들어갈 수 있을 것 같습니다!

(너무 마음에 드는 기능이라 이걸로 앱을 만들게 되면

꼭 한번 웹 엔진 설정을 만들어 원할 때마다 원하는 엔진을 사용하게 하고 싶었어요 :)

사용방법은

webview.start(gui='cef')

이렇게 start 부분을 gui='코드이름'으로 수정해주시면 됩니다

Platform	Code	Renderer	Provider	Browser compatibility
GTK	gtk	WebKit	WebKit2
macOS		WebKit	WebKit.WKWebView (bundled with OS)
QT	qt	WebKit	QtWebEngine / QtWebKit
Windows	edgechromium	Chromium	> .NET Framework 4.6.2 and Edge Runtime installed	Ever-green Chromium
Windows	edgehtml	EdgeHTML	> .NET Framework 4.6.2 and Windows 10 build 17110
Windows	mshtml	MSHTML	MSHTML via .NET / System.Windows.Forms.WebBrowser	IE11 (Windows 10/8/7)
Windows	cef	CEF	CEF Python	Chrome 66

여기서 Code 부분을 gui='' 안에 써주시면 됩니다.

cef(Chrome)로 설정했을때. 구글에서도 크롬으로 인식합니다 ㄷㄷ

참고

pywebview 문서

++혹시나 cef로 설정했을 때 에러가 나신다면 pip install pywebview[cef]로 cef 관련 라이브러리를 설치해보세요!

cef 관련 라이브러리 설치하시면 잘 되실 겁니다!! (명령어 치면 자동으로 cef에 필요한 라이브러리가 설치됩니다 :)

[티스토리_꾸미기] 이미지 없을 때 표시되는 이미지 바꾸기 (대체이미지 바꾸기 :)

:lab — Thu, 4 Feb 2021 23:41:17 +0900

이 글은 작성일 기준 제가 사용하고 있는 'Letter' 스킨 기준이므로 각 스킨마다 조금씩 다를 수 있습니다 :)

오늘은 티스토리에서

글에 이미지가 없을 때 표시되는 이미지를 바꿔보겠습니다!!

텍스트로 써놓은 이미지입니다.

간단하게 대체이미지라고 하겠습니다 :D

이 대체이미지를 바꾸고 싶은데, 어떻게 해야 할지 잘 모르겠어서 이 글을 읽고 계실 거라고 생각합니다.

자, 우선 이 대체이미지를 바꾸는 건 아주 간단합니다 :o

우선, 스킨 편집으로 들어가주세요(https://블로그주소/manage에서 스킨편집 클릭!)

그리고 여기서

html 편집

을 눌러줍니다.

눌러주셨다면

기본적으로 HTML 수정 탭으로 들어가셨을 겁니다.

여기서!

먼저 새 대체이미지를 업로드해야 하기 떄문에 파일업로드로 가서

파일을 업로드 해줍니다.

저는 Unsplash에서 다운받은 이미지를 사용하였습니다.

Beautiful Free Images & Pictures | Unsplash

Beautiful, free images and photos that you can download and use for any project. Better than any royalty free or stock photos.

unsplash.com

이렇게 업로드를 해주셨으면,

이번에는 상단에 있는 메뉴에서 CSS를 눌러줍니다.

그리고,

코드가 있는 부분을 한번 클릭하고 ctrl+F를 눌러

thumbnail을 검색해줍니다.

그 다음, 아까 업로드한 이미지의 상대경로를 입력해줍니다.

ex) images/noPhotos_unsplash.jpg

그리고, 제대로 적용되었는지 확인하기 위해 새로고침 버튼을 클릭해줍니다.

원래 이미지가 없어 기본 대체 이미지였습니다. 바꾼 후 모습입니다.

그리고, 이미지가 제대로 잘 적용이 되었다면

적용 버튼을 눌러 변경사항을 적용시켜줍니다.

그러면 대체이미지가 잘 나오게 됩니다. :D

변경된 모습

변경 전

변경 후

h 태그란? (<h1>, <h2>, <h3>.....)

:lab — Mon, 1 Feb 2021 23:36:48 +0900

html을 작성하면서, html 소스를 보면서 흔히 <h1>과 같은 것들을 볼 수 있었을 겁니다.

처음에는, "이게 뭐지?" 하며 궁금해합니다.

그렇다면, 과연 이게 뭘까요?

h 태그의 개념

h 태그는 <h1>, <h2>를 부르는 태그입니다.

h 태그라는 개념 안에 h1, h2, h3 등 태그들이 있는 것이죠!

우선, 간단하게 말하자면,

h 태그는 제목을 나타내는 태그입니다.

h1, h2... 순으로 글자의 크기가 작아지죠.

h1

h2

h3

h4

h5

h6

h 태그는 6가지가 있으며,

위에 나와있는 h1부터 h6까지가 바로 그것입니다.

h 태그의 사용

h 태그를 사용하기 위해서는

다른 html 태그와 같이

<>와 </>로 감싸주면 됩니다.

따라서, body 태그 안에 다음과 같이 써줄 수 있습니다.

<h1>h1입니다.</h1>
<h2>h2입니다.</h2>
<h3>h3입니다.</h3>
<h4>h4입니다.</h4>
<h5>h5입니다.</h5>
<h6>h6입니다.</h6>

이렇게, h 태그에 대해 배워보았습니다!

도움이 되셨길 바랍니다 :)

[Github] 깃허브 프로필 꾸미기

:lab — Sun, 31 Jan 2021 17:07:21 +0900

깃허브를 보다 보면 이렇게 자신에 대한 소개가 나와있는 경우가 있는데요!!

이런 소개는 어떻게 할까요?

오늘은 이런 소개글을 만들 수 있는 방법에 대해 알아보겠습니다 :D

자, 우선 소개글을 만들기 위해 새 Repository를 만들어 줍니다.

여기서 주의하실 점은 Repository의 이름을 자신의 닉네임과 같이 써야 합니다 :)

그러면 이렇게 고양이가 나오며 비밀을 찾았다고 나옵니다!!

그리고, 이제 README.md가 보여질 거기 때문에 미리 Add a README file을 체크해서 자동으로 생성되게 해줍니다.

그 다음

를 눌러줍니다.

그럼 Repository가 생성이 되고 README.md 파일도 생성이 됩니다.

이 README.md 파일을 수정해 주시면 됩니다.

그리고, 이 README.md 파일은

이렇게 메인 화면에 노출됩니다 :)

자, 그럼!!

이제 README 파일을 꾸며볼 껀데요!!

(Markdown에 대해 잘 설명된 글이 있습니다!! Markdown에 대해 알고 싶으신 분은 아래 링크를 클릭해주세요!!)

MarkDown 사용법 총정리 > https://heropy.blog/2017/09/30/markdown/

### About Me  



##### Favorites ♥ 
* Coding ♥

[![사용자이름's GitHub stats](https://github-readme-stats.vercel.app/api?username=사용자이름)](https://github.com/anuraghazra/github-readme-stats)


<!--
**사용자이름/사용자이름** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.

Here are some ideas to get you started:

-   I’m currently working on ...
-   I’m currently learning ...
-   I’m looking to collaborate on ...
-   I’m looking for help with ...
-   Ask me about ...
-   How to reach me: ...
-   Pronouns: ...
- ⚡ Fun fact: ...
-->

자, 이렇게 간단하게 Readme 파일을 만들어 보았습니다!!

마크다운 문법만으로 간단히 짤 수도 있지만,

이렇게 고수분들이 만든 오픈소스도 사용할 수 있습니다!!

저는 여기서

github-readme-stats

라는 오픈소스를 이용했는데요!!

바로 이렇게 자신의 깃허브 상태를 표시해주는 오픈소스입니다!!

사용은

[![사용자이름's GitHub stats](https://github-readme-stats.vercel.app/api?username=사용자이름)](https://github.com/anuraghazra/github-readme-stats)

이렇게 할 수 있는데요!!

여기서 ?username= 부분의 이름을 자신의 깃허브 닉네임으로 수정해주시면 됩니다!!!

REHeader

Header Image를 생성해주는 사이트입니다!

문구를 수정해 간단히 Header Image를 만들 수 있습니다 :)

그리고 밑에 Add To Your GitHub README Repo에 있는 Add to 버튼을 누르면 자동으로

헤더 이미지가 추가되는 것 같네요 :D

(저는 깜박이는 효과와 iOS 이모지 때문에 직접 만들었습니다...ㅎㅎ

그래도 이 사이트로 생성해봤을 때 되게 좋더라구요.

간단하게 만들고 싶으시다면 아주 편하게 만드실 수 있을 것 같습니다.)

1990s style Visitor Counter

실제 적용해보니 이렇게 생겼습니다 :D

![Visitor Count](https://profile-counter.glitch.me/{깃허브아이디}/count.svg)

이 한줄만 추가하면 적용이 됩니다!

(주의하실 점은 중괄호{ } 안에 깃허브 아이디를 넣으셔야 합니다 :)

Hits

방문자 수 카운터를 만들어주는 사이트로,

Markdown 말고도 Html, Embed(Notion)까지 지원해

다양한 플랫폼에서 사용할 수 있습니다 :)

이 밖에도 여러 오픈소스들을 이용하여 자신의 깃허브 프로필을 꾸밀 수 있습니다!!

[언어비교] C언어와 파이썬의 변수형 변환

:lab — Sat, 30 Jan 2021 15:19:41 +0900

float 형식으로 생성된 변수(ex)1.232322131323)에서 정수만 남기려면 어떻게 해야 할까요?

바로! 변수형을 변환해주면 해결할 수 있습니다!!

변수형을 int로 변환해주면 int는 정수형 변수이기 때문에 값은 정수만 남게 됩니다!!

그럼 변환은 어떻게 하냐구요?

// a를 int형 변수로 변환하기 - C언어

float a = 3.14159265358979323

(int)a

C언어에서는 이렇게 float형 변수가 있으면, (int)변수이름을 통해 int형 변수로 변환할 수 있습니다!!!

자, 파이썬에서는 어떻게 할까요?

파이썬은 C언어의 변환과 아주 비슷합니다!!

a = 3.14159265358979323

int(a)

이렇게 변환할 수 있습니다!!

정리

C	Python
(int)a	int(a)

[Python - pyautogui] locateCenterOnScreen

:lab — Thu, 28 Jan 2021 12:02:56 +0900

locateCenterOnScreen은 pyautogui의 기능 중 하나로,

지정된 이미지를 찾아 그 찾은 곳의 중간 x,y 좌표를 알아내는 코드입니다.

흔히, 이미지의 좌표값을 모를 때 사용됩니다. ( 외부 앱의 버튼의 좌표 등 )

import pyautogui

pyautogui.locateCenterOnScreen('Hello.png')

위 코드와 같이 사용하며, 위 코드를 실행시키면 폴더 내의 Hello.png와 같은 게 있는지 화면상에서 찾아줍니다.

찾아준 x, y의 값을 변수에 저장하려면 아래와 같이 작성하면 됩니다.

import pyautogui

x, y = pyautogui.locateCenterOnScreen('Hello.png')

또한, confidence를 추가하여 일치율이 일정 값 이상이면 감지하게 할 수도 있습니다.

(OpenCV를 설치해야함.)

import pyautogui

x, y = pyautogui.locateCenterOnScreen('Hello.png', confidence=0.7)

confidence를 이용하면,

이미지의 미묘한 변화, 밝기의 차이, 윈도우의 야간 모드(블루라이트 필터) 상황에서도

문제없이 감지할 수 있습니다.

confidence가 없을때는 100% 일치해야만 인식하는 것을 보아

스크린샷을 찍어 감지하는 것 같습니다.

또한, 1920x1080 해상도에서는 실행시간이 1~2초 정도 걸린다는 것을 보아

위에서 아래로 차례로 감지하는 듯 합니다.

따라서, 저의 경우에는 confidence를 추가하여 블루라이트 필터가 적용됐거나, 이미지에 미묘한 변화가 있을 때

인식을 할 수 있게 만들었습니다.

grayscale을 추가하여 이미지를 흑백으로도 구별할 수 있습니다.

import pyautogui

x, y = pyautogui.locateCenterOnScreen('Hello.png', grayscale=True, confidence=0.7)

locateCenterOnScreen 속성

이름	기능	값	기본값
confidence	정확도 설정.	0.x	1.0
grayscale	흑백으로 구별할지 설정.	True, False	False

python Pyinstaller 오류 관련

:lab — Wed, 27 Jan 2021 01:55:04 +0900

Python에서 py파일을 exe 파일로 만들 때 pyinstaller을 많이 사용합니다.

그런데 pyinstaller을 사용할 때 exe 파일로 생성이 안되는 경우가 있습니다.

제가 겪었던 오류들은 다음과 같습니다.

exe 빌드가 안될때
failed to execute script 에러

이 두 에러의 해결 방법은 다음과 같았습니다.

1. exe 빌드가 안될때

제 경우는 굉장히 사소하지만 자주 일어날 수 있는 상황입니다.

바로 경로 설정입니다.

제 경우는 icon 파일의 경로가

assets/Icons/아이콘파일이름.ico였는데

pyinstaller 명령에 icon path를 Icons/아이콘파일이름.ico로 입력해

icon을 열 수 없다는? 그런 오류가 떠서 exe 빌드가 되지 않았습니다.

그 뒤 제대로 입력하니 exe 파일 빌드가 정상적으로 되었습니다.

2. failed to execute script

exe 파일을 빌드하고 실행했을 때 위와 같은 내용의 Alert창이 뜨며 exe가 실행이 되지 않을 때가 있는데,

그럴 때는 py파일에서 지정했던 이미지와 같은 것들의 경로에 그 이미지가 없는 것입니다.

상대경로로 "./assets/Img.png"를 설정했다면 ./이 자신이 위치한 폴더이기 때문에 자신이 위치한 폴더에서 assets라는 폴더 안의 Img.png를 찾는다는 말이 됩니다.

그런데, pyinstaller은 exe 파일을 생성할 때 dist 폴더 안에 생성하기 때문에 dist 폴더 안에 assets/Img.png가 없으면 이러한 에러를 표시합니다.

그렇기 때문에, assets 폴더를 dist 안에 복붙하거나, 경로를 수정하여(절대경로로 바꾸기) 에러를 해결할 수 있습니다.

Python 기본 연습 - 1.print

:lab — Sun, 24 Jan 2021 00:40:08 +0900

Python에서 무언가를 출력하려면 어떻게 해야 할까요?

print를 사용하여 출력할 수 있습니다!

이 print는 C언어의 printf나 js의 console.log라고 할 수 있습니다.

print의 기본 형태는

print("Hello World!! :D")

다음과 같습니다.

또한 print 안에 문자열만이 아닌, 변수와 문자열 안에 변수를 넣는 형식이 가능합니다.

변수를 넣은 형태(변수를 그대로 출력)

a = "Hello World!! :D"

print(a)

문자열 안에 변수를 넣음(변수+문자열 형태)

a = "Hello"

print(a+" World!! :D")

문자열 안에 변수를 넣음(format을 이용한 형태)

a = "Hello"

print("{} World!! :D".format(a))

위와 같은 형태로 print를 사용할 수 있습니다.

이 중, format을 이용한 형식은 문자열 안에 변수를 대입한다고 생각하시면 될 것 같습니다.

format은 "텍스트{ }".format(변수이름)과 같은 형식으로 쓰며, 이 중 변수의 값은 중괄호 { } 안에 들어가게 됩니다.

위 코드들을 각각 실행해보시면 모두 출력결과가 Hello World!! :D로 나오는 것을 알 수 있습니다.

2번째(변수를 넣은 형태 - print(a) 코드.)는 변수에 Hello World!! :D를 문자열 형식으로 담아 그대로 출력했습니다.

따라서 그대로, Hello World!! :D가 나오게 되는 것입니다.

3번째(변수+문자열)도 마찬가지로 a라는 변수에 Hello를 문자열 형식으로 담았지만, 그 뒤에 " World!! :D"를 넣어 줌으로써 결과적으로 똑같이 Hello World!! :D라고 출력이 됩니다.

마지막(.format이용) 형태는 a에 Hello를 문자열 형식으로 담았지만, .format을 이용해 변수의 값을 { }에 대입해줍니다.

따라서, 얘도 마찬가지로 Hello World!! :D라고 출력이 됩니다.

그런데, 변수+문자열과 .format의 방식이 뭐가 다른지 궁금하실 겁니다.

우선, 변수+문자열은 말 그대로 변수에 문자열을 이어 붙여 출력합니다.

그리고, .format은 "{ } 텍스트입니다."에서 { } <<< 이렇게 생긴 그릇에 변수를 담아 출력합니다.

변수를 여러개 넣어야 할때는 { }의 개수를 늘려 .format의 괄호 안에 변수이름을 차례대로 입력해주면 됩니다.

변수+문자열에서는 a+"텍스트"+b와 같이 +를 이용해서 이어 붙여주면 됩니다.

자, 그럼 이번엔 문제를 내볼까요?

lang = "Python"

print("I'm "+lang)

위와 같이 코드를 작성하고 실행했을 때, 어떻게 출력될까요?

I'm Python

이렇게 출력이 됩니다.

자, 그럼 이번엔 조금 더 어려운 문제를 내보겠습니다.

(\n은 줄바꿈입니다. enter와 같은 역할을 합니다.)

lang = "python"
greeting = "Helloo!!"

print("I'm "+lang+" :D\n{}".format(greeting))

I'm python :D
Helloo!!

위와 같이 출력이 됩니다.

이렇게 .format과 +형태를 섞어 쓸 수 있습니다.

마지막으로, print가 어떤 용도로 자주 사용되는지 알아보겠습니다.

이 print는 보통 개발을 할 때 프로그램이 잘 실행되고 있는지, 또는 아무것도 출력되지 않고, 프로그램만 실행되고 있을 때 print로 시각적인 요소를 추가함으로써 조금이나마 사용할 때 지루해하지 않을 수 있습니다. 그리고, 위와 같이 간단한 메시지를 출력하는 용도로 쓰이기도 합니다.

제 부족한 지식으로 도움이 되셨길 바랍니다..!!

font-family란?

:lab — Tue, 15 Dec 2020 14:56:27 +0900

자, 코딩하시는 분들이 아마 한 번쯤은 들어보셨을

font-family는 무엇일까요?

(못 들어보셨어도 괜찮습니다 :)

font-family란 무슨 폰트로 지정해줄지 정해주는 코드입니다!!

자, 그럼 font-family는 어떤 형식으로 쓸까요?

font-family: 'Noto Sans', sans-serif;

각 언어마다(css, React Native....)

font-family가 조금씩 다르겠지만, 아마 위와 비슷할 겁니다.

우선 이 코드는 'Noto Sans'라는 폰트와 산세리프라는 폰트를 쓴다는 의미입니다.

(물론 'Noto Sans'는 따로 먼저 <link>나 @import로 불러와주어야 합니다.)

span {
	font-family: 'Noto Sans', san-serif;
}

이렇게 해주면, span 태그 안에 있는 글자들은 모두 Noto Sans와 san-serif체가 적용될 겁니다.

(물론, 따로 거기서 font-family를 지정해주지 않았을 때 말이죠.)

(index.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <span>Hellooo :D</span>
</body>
</html>




(style.css)

span {
	font-family: 'Noto Sans', san-serif;
}

그런데, 만약 위와 같은 코드로 작성했을 때,

정말로 'Noto Sans'폰트와 san-serif 폰트가 모두 적용되는 걸까요?

(Noto Sans를 불러왔다고 가정했을 때)

정답은

NO입니다.

왜냐하면, font-family에서는 앞에서부터 폰트를 쓰기 때문입니다.

그 글자를 지원하면, 맨 앞에 있는 'Noto Sans'가 적용이 되고, san-serif는 적용이 되지 않는 것입니다.

반대로, 그 글자를 'Noto Sans'가 지원하지 않으면, 그 글자는 san-serif체가 적용이 되는 것이죠.

이 상황에서는, Hellooo :D라는 말을 'Noto Sans'폰트로 표시할 수 있기 때문에,

'Noto Sans'가 적용되어 보입니다.

그러면, 영어만 지원하는 폰트를 제일 앞에 쓰고, 한글과 영어 모두 지원하는 폰트를 2번째로 쓸 때,

어떻게 될까요?

우선, 첫 번째 폰트가 영어를 지원하기 때문에, <span>태그 안의 말 중 영어는 모두 첫번째 폰트가 적용될 겁니다.

그리고, <span> 안에 한글이 있다면, 그 한글만 두 번째 폰트가 적용될 거예요.

이렇듯, 순서에 따라 폰트의 우선순위가 정해진다고 볼 수 있을 것 같습니다!!

도움이 되셨으면 좋겠습니다!!

티스토리(Tistory) 블로그에서 폰트 적용하기!!

:lab — Tue, 15 Dec 2020 14:31:53 +0900

안녕하세요!!

오늘은 티스토리에서 폰트를 적용하는 방법에 대해 알려드리려고 합니다!!

우선, 티스토리는 자유롭게 블로그를 꾸밀 수 있다는 장점이 있어요!

그래서!!

폰트도 내가 원하는 폰트를 짜잔!! 하고 바꿀 수 있어요!

자!!

그럼!!

이 에서 폰트를 어떻게 바꾸냐!

하시는 분들이 많으실 거라 생각해요ㅎㅎ

우선, Google Fonts에 들어가줍니다.

(폰트를 따로 다운받거나, 다른 사이트에서 해도 됩니다!!)

들어가주시고,

자신이 원하는 폰트를 선택합니다.

저는 깔끔한 Noto Sans KR로 했어요!!

그러면, 이렇게 폰트에 대해 나옵니다.

여기서!!

원하시는 폰트 스타일(굵기)을 골라줍니다. (+ Select this style 버튼)

추가해주시면,

이렇게 오른쪽에 창이 뜹니다.

여기서, 밑에 있는 코드를 복사해줍니다. 저는 <link>형식으로 불러올게요!

먼저, 블로그 설정을 들어가줍니다. (https://자신의 블로그 주소/manage)

그러면, 이렇게 왼쪽에 사이드바(위 이미지)가 보이실 텐데요,

여기서, 스킨 편집을 눌러주시면,

이렇게 편집 화면이 나옵니다!!

여기서!! 우측에 있는 html편집을 눌러서 들어간 뒤,

먼저 HTML 칸을 눌러줍니다.

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;400;900&display=swap" rel="stylesheet">

-Noto Sans 기준-

그리고, 아까 복사했던 코드를 <head>와 </head>사이에 넣어줍니다.

(이 과정은 폰트를 사용하기 전에 폰트를 로드하는 작업입니다!! 즉, 내가 이 폰트를 쓰기 위해 준비하는 것이죠!)

이렇게 넣어주면, 이제 폰트 로드 부분은 끝났습니다!!

<head>와 </head> 사이에 넣기

그리고, 이제 CSS 칸을 눌러줍니다.

그러면,

코드들이 막 써져 있는 것을 보실거에요.

여기서!! 당황하지 마시고,

자신이 바꾸고자 하는 곳을 찾아줍니다.(저는 글의 제목으로 했어요!!)

Ctrl+F를 눌러 검색을 해줍니다.(제목은 title_post)

위와 같이 검색을 하게 되면 자동으로 title_post라는 글자를 찾아줍니다!! 편리하죠?

여기서!!

font-family 부분을 찾아줍니다!!

font-family에 대해 더 알고 싶으신 분들은 이 글을 참고해주세요!!

자, font-family를 찾으셨다면, 그 뒤에 있는 폰트 이름을 추가할 폰트 이름으로 바꿔줍니다!!

구글 폰트 사이트에 각 폰트를 font-family로 설정하는 방법이 나와있습니다!!

font-family: 'Noto Sans KR', sans-serif; /*Noto Sans 폰트.*/

이렇게 코드를 복사해,

아까 title_post 부분 { } (중괄호)안에 넣어줍니다.

.area_view .article_header .title_post {
	font-family: 'Noto Sans KR', sans-serif;
  	display: block;
  	font-size: 40px;
  	line-height: 1.5em; 
  }

그리고, 새로고침 버튼을 눌러주시면,

이렇게 폰트가 적용됩니다!!

이 상태로 적용 버튼을 눌러주시면

끝입니다!!