테크토크의 기술 블로그

tmux란? 

tmux는 사용자가 단일 단말기 창 또는 원격 터미널 세션 안에서 여러 별도의 터미널 세션에 액세스 할 수 있도록 여러 가상 콘솔을 다중화하는 데 사용할 수 있는 응용 소프트웨어이다.

위의 설명만으로는 이해하기 어려울 수 있으니 실습해보면서 tmux가 왜 유용한지 살펴보겠습니다.

보통 ssh 접속을 통해 원격으로 서버에 접속해서 시스템을 관리하실텐데요.

일반적으로 ssh 접속 후 작업 도중에 ssh 연결이 끊어지게 되는 경우는 작업하던 내용이 사라지게 됩니다.

1. ssh로 원격으로 서버 접속 후 명령어 사용.

2. ssh 접속 클라이언트 프로그램 종료.

3. ssh 재접속.

ssh 재접속 후에는 1번에서 사용한 명령어들이 사라져 있는 것을 알 수 있습니다. 

이런 식으로 작업 도중에 예기치 못하게 ssh클라이언트가 종료되거나 네트워크가 끊어지면 작업하던 내용을 잃어버리게 됩니다.

이를 방지할 수 있는 게 바로 '가상 단말' 중 하나인 'tmux'입니다.

4. tmux 사용하기

tmux사용법은 아주 간단합니다.

명령어로 'tmux'를 입력하면 됩니다.

이제 아까 tmux에 대한 위키 설명을 다시 살펴볼까요?

"tmux는 사용자가 단일 단말기 창 또는 원격 터미널 세션 안에서 여러 별도의 터미널 세션에 액세스 할 수 있도록 여러 가상 콘솔을 다중화하는 데 사용할 수 있는 응용 소프트웨어이다."

1,2,3번의 경우가 사용자가 단일 단말기 창 또는 원격 터미널 세션 안에서만 작업하던 상황이었다면

4번의 경우 tmux를 이용해서 '터미널 세션에 액세스'를 한 상태입니다. 

위의 상태에서 아까처럼 명령어를 사용해보겠습니다.

5. ssh 접속 클라이언트 프로그램 종료.

6. ssh 재접속.

아까와 동일하게 작업 중이던 내용이 사라진 것처럼 보입니다.

7. 'tmux attach' 명령어

재접속 후 'tmux attach' 명령어를 입력합니다. 

해당 명령어는 tmux가 연결되어있는 별도의 터미널 세션이 있다면 연결한다라는 의미입니다.

위의 화면과 같이 이전에 작업 중이던(tmux에서 별도의 터미널 세션이 연결되어있던) 명령어 내용이 표시되는 것을 알 수 있습니다.

8. 'tmux detach' 명령어 ( CTRL + B + D )

이제는 tmux에 연결되어있는 별도의 터미널 세션에서 원래 터미널 세션으로 넘어오기 위한 명령어를 알아보겠습니다.

위의 상태에서 CTRL + B를 입력 후 D(detach)를 입력합니다. (=> CTRL + B + D)

명령어를 실행하면 원래의 세션으로 돌아오게 됩니다.

이때 다시 'tmux attach' 명령어를 입력하면 별도의 터미널 세션으로 다시 들어가게 됩니다.

9. 'tmux' 명령어 다시 입력

이때 'tmux' 명령어를 다시 입력하면 별도의 터미널 세션이 하나 더 연결되게 됩니다.

아래 화면은 'tmux'명령어를 통해 추가로 터미널 세션을 하나 더 연결한 화면입니다.

좌측 하단에 어떤 터미널 세션이 연결되어있는지 표시되어 있습니다.

테스트를 위해 현재 '0', '1', '2'의 세션이 연결되어있습니다.

특정 터미널에 접속하고 싶으면 아래 명령어 'tmux attach-session -t 2'와 같이 입력하면 됩니다.

10.  'exit' 터미널 세션 종료

터미널 세션에서 나가는 게 아니라 종료하기 위해서는 'exit'명령어를 입력하면 됩니다.

연결된 세션 내에서 'exit'명령어 실행 시 아래와 같이 [exited]되었다는 것을 알 수 있습니다.

이렇게 tmux에 대해 간단하게 알아보았습니다.

궁금하신 점이 있으시면 댓글로 남겨주세요.

윈도우 환경에서 개발을 하다보면 프로세스를 강제로 종료해야 하는 경우가 있습니다.

예를 들면 서버를 8080 Port로 띄워놓고 작업하다가 예기치 못하게 IDE가 종료되어 다시 실행 후 서버를 다시 띄우려고 할 때 Port가 이미 사용되고 있다고 나타날 때가 있습니다.

이런 경우에는 해당 Port를 사용하고 있는 프로세스를 찾아서 kill 해줘야 합니다.

1. 아래 명령어를 통하여 찾고자하는 Port를 사용하고 있는 프로세스의 PID를 찾습니다.

위의 명령어를 실행해서 나온 결과입니다. 마지막에 보이는 숫자가 바로 PID입니다. 

2. 찾은 PID로 프로세스를 kill 합니다.

1. yank 

vim에서 복사, 붙이기, 되돌리기를 할 때 사용합니다.

클립보드라고 생각하시면 됩니다.

우선 vim으로 작업할 파일을 오픈합니다.

노멀 모드에서 작업하고자 하는 위치로 이동합니다.

'V'키를 입력해서 비주얼 모드로 전환 후 커서를 이동하면서 영역을 선택합니다.

이 상태에서 Yank 명령어인 'Y'키를 입력하면 클립보드에 선택한 영역의 텍스트가 복사되게 됩니다.

붙이고 싶은 위치까지 커서를 이동 후 'SHIFT'+'P' 키를 입력합니다.

추가로 붙이고 싶은 횟수를 입력 후에 'SHIFT' + 'P'키를 입력하면 입력한 횟수만큼 붙여쓰기 됩니다.

아래는 붙이고 싶은 횟수 '2'와 'SHIFT' + 'P'를 입력한 결과입니다.

2. fg

리눅스에서는 'CTRL' + 'Z'가 다른 의미로 동작합니다.

윈도우에서는 되돌리기지만, 리눅스에서는 지금 실행 중인 애플리케이션을 일시 정지하라는 명령어입니다.

vim에서 작업 중에 'CTRL' + 'Z'를 눌러보겠습니다.

그럼 작업중이던 vim이 Stopped이 되었다고 화면에 표시됩니다.

위에서 설명드린대로 작업 중이던 vim이 'CTRL' + 'Z'키 명령어로 일시정지 상태가 됩니다.

이렇게 일시정지 된 상태의 애플리케이션을

다시 실행할 때 사용하는 명령어가 바로 'fg' 명령어입니다. (ForeGround)

'fg'키를 입력하자 일시정지되었던 vim작업 화면으로 다시 돌아간 것을 확인할 수 있습니다.

자바스크립트의 Package Manager 중 하나인 yarn을 설치하는 법을 알아보겠습니다.

또 다른 Package Manager인 npm을 사용하시려는 분은 아래 글을 참고해 주세요.

https://frontmulti.tistory.com/35?category=895878

이번 글에서는 윈도우에서 yarn을 설치하는 방법을 알아보겠습니다.

1. 윈도우 설치 파일로 설치하는 경우

공식 사이트 : classic.yarnpkg.com/

공식 사이트에 접속 후 'INSTALL YARN' 버튼을 선택합니다.

원하는 버전을 선택 후 'Download Installer' 버튼을 선택합니다.

다운로드한 설치 파일로 설치를 진행합니다.

설치가 완료되었으면 yarn 명령어가 동작하는지 확인해보겠습니다.

명령 프롬프트를 열어 아래 코드를 입력합니다.

> yarn --version

설치된 버전이 출력된다면 정상적으로 설치가 완료된 상태입니다.

2. Chocolatey로 설치하는 경우

윈도우를 위한 패키지 매니저인 Chocolatey가 설치되어 있다면 아래 명령어를 통해 손쉽게 yarn을 설치할 수 있습니다.

명령 프롬프트를 열어 아래 코드를 입력합니다.

> choco install yarn

위의 화면처럼 에러가 발생한다면 명령 프롬프트를 관리자 권한으로 실행 후 설치 명령어를 입력해 주세요.

이렇게 윈도우에서 yarn을 설치하는 방법을 알아보았습니다.

다음 글에서는 Mac에서 yarn을 설치하는 방법을 알아보겠습니다.

1. grep

다양한 문자열을 한 번에 검색하고자 할 때 사용합니다.

global regular expression print : 파일 전체에서 정규 표현식과 일치하는 위치를 출력

사용법

grep -r {검색하고자 하는 문자열} /home/test

grep : grep 명령어

-r : 서브 폴더까지 검색하도록 지정

-E : 정규표현식을 사용

-i : ignore case, 알파벳 대문자 소문자 차이를 무시하고 검색

경로 : 찾을 파일이 있는 폴더의 경로

2. vim

vi의 강화판. 터미널에서 대화형으로 파일을 편집하고자 할 때 사용한다.

설치되어 있지 않다면 아래 명령어로 설치할 수 있다.

sudo apt-get install vim
또는
yum install vim

vim을 사용하려면 우선 vim에는 여러 가지 모드가 존재하고 그에 대해 알고 있어야 합니다.

- Normal mode : 가장 처음 실행되는 홈 화면과 같은 상태.

다른 모드에서 'ESC'키를 입력해서 'Normal mode'로 돌아올 수 있음.

또한 Normal mode에서 'Command-line command'를 사용할 수 있음. (저장하기 등)

- Insert mode : 일반 에디터처럼 조작 가능 (화살표 키로 커서 이동, 문자 입력, 문자 지우기 등)

Normal mode로 파일을 열어서 Insert mode에서 편집하고 Normal mode에서 저장하고 종료한다가

가장 기본적인 vim의 사용 방법입니다.

그러면 실제로 파일을 생성하고 내용을 작성하는 예제를 통해 사용법을 알아보겠습니다.

아래 명령어를 통해 파일을 열거나 생성합니다.

(Noraml mode상태)

vim test.txt

"i"키를 입력하여 Insert mode로 변경합니다.

※ i : 텍스트 편집 (Insert 모드 : 일반 에디터처럼 조작 가능)

그 상태에서 'hello vim' 텍스트를 입력합니다.

"esc"키를 입력하여 Noraml mode로 변경합니다.

※ ESC : Normal mode로 전환

":wq"명령어를 입력하여 write & quit 명령을 실행합니다.

실제 저장된 파일을 확인합니다.

이상으로 기본적인 vim의 사용방법을 알아보았습니다.

더욱 상세한 내용은 다음 기회에 알아보도록 하겠습니다.

보통 윈도우를 자주 사용하고 있었으나

개발을 하다보니 리눅스에 대한 사용 빈도가 점점 느는 것을 알 수 있었습니다.

조금씩 사용해보며 어설프게 다룰 수는 있었고 언제 시간을 들여 학습해야지라고 생각하고만 있었다가 

이제야 학습을 시작하고 그 내용을 정리하고자 글을 적게 되었습니다.

1. Linux란?

나무 위키에 따르면, 

컴퓨터 OS 커널의 일종인 리눅스 커널, 또는 리눅스 커널을 사용하는 운영 체제를 가리키는 말이라고 합니다.

중요한 것은 리눅스는 오픈소스 소프트웨어라는 점입니다. 그렇기에 리눅스 커널을 활용한 수많은 운영체제들이 만들어져 있습니다. Ubuntu, Debian, Android 등등

2. SSH란?

Secure Shell의 약자로 SSH를 이용하면

다른 PC에 네트워크 경유로 로그인해서 자신의 PC처럼 사용할 수 있습니다.

SSH 서버와 SSH 클라이언트가 SSH Tunnel로 통신하여 리모트 조작이 가능합니다.

3. 접근 권한

리눅스는 모든 파일이나 폴더에 권한을 설정합니다.

"이 파일은 누구의 것인가, 누가 읽고 쓸 수 있나를 설정하죠."

이게 바로 접근 권한(=퍼미션, Permission)입니다.

접근 권한은 파일 소유자가 아니면 바꿀 수 없지만 관리자 권한을 가진 특별 사용자라면 

파일 접근 권한을 자유롭게 변경하거나 다른 사람 파일을 수정하는 등의 일을 할 수 있습니다.

'root'가 바로 관리자 권한을 가진 특별 사용자입니다.

'root'는 특정 사용자에게 자신과 같은 권한을 부여할 수 있습니다.

이걸 일반 관리자 사용자라고 합니다.

4. sudo

sudo는 3번에서 설명한 관리자 권한을 사용하기 위한 명령어입니다.

sudo rm -r /var/share/test

sudo 명령어 + 실제 명령어 형태로 사용합니다.

학습을 좀 더 진행하다보면 실제로 리눅스 명령어를 실행하는 실습도 같이 진행 할 예정입니다.

앱에서 화면을 이동하기 위해 Drawer 네비게이션을 사용하는 방법을 알아보겠습니다.

※ 구현하기 위해 사용한 라이브러리에서 Drawer navigation이라고 표현하고 있습니다만,

화면 마다 용어의 차이가 있을 수 있습니다. 저는 Side Navigation Bar라는 용어가 더 이해하기 쉬울 것 같네요.

그럼 시작해보겠습니다.

1. 사전 준비

필요한 라이브러리를 설치합니다.

npm install @react-navigation/native

1-1. Expo로 프로젝트를 구성하셨다면 아래 명령어를 입력해주세요.

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

1-2. React Native로 프로젝트를 구성하셨다면 아래 명령어를 입력해주세요.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

2. 이제 '@react-navigation/drawer' 라이브러리를 설치합니다.

npm install @react-navigation/drawer

3. App.js 파일에 코드를 구현합니다.

필요한 라이브러리를 import하고 

<NavigationContainer> - <Drawer.Navigator> - <Drawer.Screen> 순으로 네비게이션에 필요한 코드를 작성합니다.

그리고 <Drawer.Screen>에 메뉴에 보여질 화면을 지정해줍니다.

아래 샘플 코드에서는 HomeScreen, Sample1, Sample2 화면을 구현하였습니다.

HomeScreen은 같은 파일에 작성하였고, Sample1, 2는 파일을 분리하였습니다.

실제 앱을 구현하실 때는 Sample1, 2처럼 분리해서 작성하시는 걸 권장합니다.

4. 실행 화면

5. 더욱 자세한 라이브러리 내용 및 사용법을 확인하고 싶으시면 아래 라이브러리 문서를 참고하시기 바랍니다.

reactnavigation.org/docs/drawer-based-navigation

지금부터 AdFit 광고 연동하는 방법을 공유드리겠습니다.

1. 티스토리 블로그 관리자 화면에서 '수익' 메뉴를 선택합니다.

2. 'AdFit 광고 연동하기' 메뉴를 선택합니다.

3. '카카오 로그인'을 진행해 주세요.

4. 본인 확인 화면에서 필수 선택 체크 후 '동의'를 선택해주세요.

5. kakaoAdFit 회원가입을 진행해주세요.

6. 심사를 기다립니다.