테크토크의 기술 블로그

여러분은 코딩을 하다가 이런 생각해 본 적 없으신가요?

하루에 몇 시간씩 코딩할까?

가장 많이 사용하는 언어는 무엇이지?

Editor는 어떤 걸 가장 많이 사용할까?

저는 코딩하다 문득 위와 같은 궁금증이 생겼습니다.

그러다가 WakaTime이란 서비스를 알게 되었고 그 이후로 계속 사용해오고 있습니다.

여러분들도 저와 같은 궁금증을 느끼셨으면 사용해 보시길 권해드립니다.

간략하게 설명드리면 사용하시는 IDE에 wakatime plugin을 설치하여 사용하게 됩니다.

자세한 설치 및 사용 방법은 아래와 같습니다.

1. WakaTime 사이트 방문 후 가입

wakatime.com

GitHub 계정과 연동도 가능합니다.

2. WakaTime 로그인 후 API Key를 복사

WakaTime API Key는 [프로필] - [Settings] - [Account] : API key 항목에서 찾을 수 있습니다.

아래 그림에 따라 API Key를 복사 해 둔 후 3번 단계를 진행해 주세요.

3. 사용 중인 IDE에 WakaTime plugin 설치

저는 VS Code를 기준으로 설명드리겠습니다.

3-1. VS Code 실행, [File] - [Preferences] - [Extension] 선택

3-2. Extensions: Marketplace에서 'wakatime' 검색 후 'Install'

3-2. 'F1'키 입력 후 'WakaTime API Key' 입력

3-3. 복사해 둔 API Key 입력

이제 VS Code에 WakaTime Plugin 설정을 모두 마쳤습니다.

참고로, WakaTime이 지원하는 IDE 목록은 아래와 같습니다. (wakatime.com/plugins)

4. Dashboard를 통해 다양한 정보를 확인합니다.

5. 참고로 Free버전에서는 일부 제약사항이 존재합니다.

전 Free버전으로 사용하고 있고, 개인 사용자라면 Free에서 제공하는 기능으로도 충분히 활용 가능하다고 생각합니다.

팀 또는 프로젝트에서 활용하고 싶으신 분은 아래 가격을 참고해주세요.

[Free인 경우]

- 2주 동안의 Dashboard history 제공

- 주간 & 일간 이메일 리포트

- integration 제약

- private leaderboard for 3 friends

Vimium이란?

보통 웹서핑을 할 때 마우스를 자주 활용하는데요,

아이디나 패스워드 입력할 때 키보드에 다시 손을 올리고 

마우스로 다시 손을 옮겨서 웹서핑을 하던 기억이 있지 않으신가요?

저 같은 경우 웹서핑을 할 때 오른손은 마우스, 왼손은 키보드 위에 올려놓는데요.

지금부터 얘기드릴 크롬 확장 프로그램을 설치하시면 키보드 하나만 가지고 크롬에서 웹서핑을 즐기실 수 있습니다!

처음에는 어색했지만 익숙해지고 나니 정말 편리하여 추천드리게 되었습니다.

설치하기

설치는 이곳에서 하시면 됩니다.

사용법

Vim을 사용해 보신 적이 있으신가요? 리눅스를 사용하면 한번쯤은 사용해 보셨을텐데요.

이 확장 프로그램은 브라우저 탐색 및 제어를 Vim 사용법으로 사용할 수 있습니다.

Vim을 사용해 보신 적이 없어도 몇가지 키 동작만 알면 금방 적응하실 수 있습니다.

예를 들면 아래 'j', 'k' 키로 마우스 휠 스크롤을 대신할 수 있습니다.

j : Scroll down

k : Scroll up

'j'를 누르면 화면이 내려가고, 'k'를 누르면 화면이 올라가게 되죠.

또한 가장 좋은 기능이라고 생각하는 건 'f' 버튼을 눌렀을 때 입니다.

웹서핑에서 마우스를 주로 사용하는 이유는 화면에 수많은 버튼들을 빠르게 누르기 위해서인데요,

Vimium을 설치하고 'f' 키를 눌러보면 신세계가 펼쳐집니다.

'f'키를 누른 후 화면에 나타나있는 키를 입력하면 해당 버튼을 클릭하게 됩니다.

위의 화면에서 'CC'를 누르면 '메일'을 클릭한 것과 같습니다.

이 3가지 키만으로도 웬만한 웹서핑을 키보드만으로 가능했습니다.

이 외에도 검색, 페이지 최상단 이동 등 유용한 키가 많으니 

아래 Vimium Help를 참고하셔서 사용하시기 바랍니다.

그럼 모두들 즐겁고 편한 웹서핑 하세요~!

Vimium Help

아래 화면은 '?'키를 입력하면 나오는 화면입니다.

키에 대한 동작을 확인할 수 있습니다.

이전 글에서 환경 설정을 모두 마쳤다면, 이제 React Native App을 생성 후 실행해보겠습니다.

환경 설정을 하지 않으신 분이라면 이전 글을 보고 환경 설정을 진행해주세요.

frontmulti.tistory.com/61

1. React Native App을 아래 명령어를 실행하여 생성합니다.

npx react-native init [Project Name]

2. React Native App 실행하기.

아래 명령어는 React Native의 서버를 실행하는 명령어입니다.

React Native의 서버만 실행헀을 경우는 디바이스에서 앱 화면을 볼 수 없기 때문에, 아래 3번 항목과 같이 Android 또는 iOS에서 앱을 실행시킵니다.

그 후에 해당 창을 통해 React Native App의 상태 및 Console로그 등을 확인할 수 있습니다.

npx react-native start

3. Android 또는 iOS에서 React Native App 실행하기.

아래 명령어를 실행하면 AVD(Android Virtual Device) 또는 실제 디바이스에서 해당 앱이 실행되게 됩니다.

AVD의 경우 안드로이드 에뮬레이터로 컴퓨터에서 안드로이드 OS를 실행하여 앱을 테스트할 수 있습니다.

npx react-native run-android

위 명령어를 실행하면, React Native 서버가 실행되고 AVD가 실행되어 React Native App이 실행되게 됩니다.

React Native App 생성해보았습니다.

iOS에서 실행하는 법은 다음 글에서 다뤄보겠습니다.

ReactNative 개발 환경 설정을 진행할 때 사용하는 방법은 2가지가 있습니다.

1. Expo CLI Quickstart
2. React Native CLI Quickstart

Expo CLI Quickstart의 경우 쉽게 설정할 수 있지만, 몇가지 제약 사항으로

React Native CLI 를 이용해서 개발환경을 설정해보겠습니다.

우선 필요한 프로그램들을 설치합니다. 공식 문서에서 설치하라고 하는 프로그램은 아래와 같습니다.

• Node
• Watchman
• React Native command line interface
• JDK
• Android Studio

1. Node와 Watchman의 경우 Homebrew를 이용해서 설치하면 됩니다.
   Homebrew가 설치되어 있지 않으시면 https://brew.sh/ 에 방문하셔서 가이드에 따라 설치하시면 됩니다.

brew install node
brew install watchman

Node이 경우 10 버전 이상이 설치되어야 합니다.

2. Java Development Kit 을 설치합니다. Homebrew를 이용해서 설치합니다.

brew cask install adoptopenjdk/openjdk/adoptopenjdk8

3. Android 개발 환경 설정

https://developer.android.com/studio 사이트에서 Android Studio를 다운받아 설치합니다.

1. Android Studio를 설치합니다.

2. Android SDK 를 추가로 설치합니다.

• Android 10 (Q) SDK 필요
  • Android SDK Platform 29
  • Intel x86 Atom_64 System Image 또는 Google APIs Intel x86 Atom_64 System Image
    (저는 Intel x86 Atom_64 System Image 를 설치했습니다.)

• SDK Tools 29.02 필요

3. ANDROID_HOME 환경 변수 설정

아래 경로의 config file에

$HOME/.bash_profile or $HOME/.bashrc

zsh 를 사용 중이라면 ~/.zprofile or ~/.zshrc

아래 코드를 추가합니다.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

이제 필요한 프로그램들 설치와 설정이 완료되었습니다.

다음 글에서는 ReactNative App을 생성하는 법을 다루겠습니다.

마크다운이란?

위키에서는 이렇게 정의하고 있습니다.

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다. 일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML과 리치 텍스트(RTF) 등 서식 문서로 쉽게 변환되기 때문에 응용 소프트웨어와 함께 배포되는 README 파일이나 온라인 게시물 등에 많이 사용된다.

보통 github에서 README.md 파일을 많이 보셨을 텐데요. 그 README.md 파일이 마크다운을 사용해 작성된 파일입니다.

사용해보기

1. github README.md 파일

github에서 repository를 생성할 때 'Add a README file'을 체크한 후 생성하면 README 파일이 자동으로 생성됩니다.

github에서 제공하는 edit을 통해 웹페이지에서도 바로 마크다운 문법을 사용하여 문서를 작성할 수 있습니다.

2. VSCode를 이용한 마크다운 작성

VSCode를 이용하면 손쉽게 md파일을 생성하고 preview도 볼 수 있습니다.

2-1. VSCode 마크다운 파일 작성 방법

New File -> 마크다운 작성 -> 파일 저장 시 .md로 저장

2-2. Preview 보기

VSCode 우측 상단에 'Open Preview to the Side (Ctrl + K V) 를 선택

마크다운을 작성하기 위한 준비는 모두 마쳤으니,

다음 시간에는 마크다운의 문법에 대해 설명하겠습니다.

(｡･∀･)ﾉﾞ

윈도우 10에서 이모티콘을 사용하는 방법을 소개하겠습니다.😁 

예전 윈도우에서는 ㅁ(자음) + '한자' 키를 이용해서 특수기호들을 사용했었는데요.

윈도우 10에서는 이모티콘(이모지)를 사용할 수 있는 기능이 생겼습니다.

윈도우키 + 마침표(.) 키를 입력하면 아래 이미지 처럼 다양한 이모티콘들을 입력할 수 있는 화면이 나타납니다.

🙄여담이지만, 특수기호를 입력할 때 어느 방식으로 입력하느냐에 따라 세대를 나눈다고 하네요.(❁´◡`❁)

익숙해지면 다양한 표현을 이모티콘을 통해 할 수 있으니 우리 모두 사용해보아요.😊

에어팟 프로 구매 후 갤럭시 노트9에서 사용하는 도중, 주기적으로 끊김 현상이 발생하였습니다.

인터넷 검색 후 이것저것 시도해 보았지만 끊김 현상이 계속 발생하였는데, 

현재까지는 끊김 현상이 발생하지 않는 방법을 찾아서 공유드립니다.

테스트 기기 정보 : 갤럭시 노트9, 안드로이드 버전(10)

우선 안드로이드 개발자 모드를 활성화 시켜야 합니다.

1. 안드로이드 폰 개발자 모드 활성화

[설정] - [휴대전화 정보] - [소프트웨어 정보] - [빌드 번호] 를 계속 터치합니다.

터치하다보면 개발자 모드가 몇단계인지 나오다가 PIN 확인 화면이 나타납니다.

그때 PIN번호를 입력해주시고. 다음을 누르면

'개발자 모드를 켰습니다'라는 메시지가 나타나고

[설정] - [개발자 옵션] 메뉴가 나타난 것을 볼 수 있습니다.

2. 개발자 옵션 중 블루투스 AVRCP 버전 설정

[설정] - [개발자 옵션] - [블루투스 AVRCP 버전] 선택 후

기본으로 설정되어 있는 AVRCP 1.4(기본) 대신에 AVRCP 1.6을 선택합니다.

위의 설정 후 아직까지 끊김 현상은 발생하지 않고 있네요.

혹시 끊김 현상이 발생하시면 댓글 부탁드립니다.

윈도우 터미널 실행 명령어

저는 윈도우를 사용하면서 Win+R(실행) 키를 자주 사용하는데요.

Win+R(실행) 후 'cmd' 명령어를 통해 기존 터미널 앱을 사용했었습니다.

실행 명령어를 통해 윈도우 터미널을 실행할 수 있을 것 같아서 찾아보았습니다.

결론부터 얘기드리면

'wt' 명령어를 통해 윈도우 터미널을 실행 시킬 수 있습니다.

몇 가지 옵션도 같이 알려드립니다.

명령줄 구문

wt 명령줄은 옵션 및 명령의 두 가지 값을 허용합니다. 옵션은 wt 명령줄의 동작을 전체적으로 제어할 수 있는 플래그 및 기타 매개 변수의 목록입니다. 명령은 구현할 작업 또는 작업 목록을 세미콜론으로 구분된 형식으로 제공합니다. 명령을 지정하지 않으면 기본적으로 명령을 new-tab으로 간주합니다.

wt [options] [command ; ]

사용 가능한 명령줄 인수를 나열하는 도움말 메시지를 표시하려면

wt -h, wt --help, wt -?, wt /?

를 입력합니다.

옵션

wt 명령줄을 지원하는 옵션의 목록입니다.

옵션	설명	명령줄	실행화면
--help, -h, -?, /?	도움말 메시지를 표시합니다.
--maximized, -M	터미널을 최대화하여 시작합니다.
--fullscreen, -F	터미널을 전체 화면으로 시작합니다.

위의 내용은 MS의 공식 문서를 참조하였습니다.

docs.microsoft.com/ko-kr/windows/terminal/command-line-arguments?tabs=windows