반응형

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

 

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

 

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

 

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

명령어 실행 결과

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

 

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

명령어 실행 결과

 

반응형
반응형

1. yank 

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

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

 

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

 

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

작업하고자 하는 위치로 커서 이동

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

'V' 입력 -> VISUAL 모드 진입
커서 이동으로 영역 선택

 

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

'Y'키 입력으로 클립보드에 선택 영역 복사

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

붙이고 싶은 위치로 커서 이동
'SHIFT' + 'P' 입력으로 붙이기

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

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

'2' + 'SHIFT' + 'P' 키 입력

 

2. fg

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

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

 

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

작업 중인 vim 화면

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

vim 작업 중에 'CTRL' + 'Z'키 입력 후 화면

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

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

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

'fg' 키 입력

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

일시정지 상태였던 vim 화면 표시

 

반응형
반응형

 

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

 

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

 

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

 

NVM 설치 가이드 (윈도우)

※ 기존에 Node.js 가 설치되어 있다면 삭제하고 진행할 것을 권장합니다. 1. 해당 사이트에서 최신 버전의 'nvm-setup.zip' 파일을 다운로드 받는다. https://github.com/coreybutler/nvm-windows/releases 2. 다..

frontmulti.tistory.com

 

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

 

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

 

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

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

공식 사이트에서 'INSTALL YARN' 버튼을 선택

 

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

'Download Installer' 버튼 선택

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

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

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

> yarn --version

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

 

2. Chocolatey로 설치하는 경우

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

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

> choco install yarn

'choco install yarn' 명령어 입력 화면
관리자 권한이 아닌 경우 위 화면처럼 에러 발생

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

설치 완료 화면
yarn 동작 확인 화면

 

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

 

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

반응형
반응형

1. grep

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

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

 

사용법

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

grep 명령어 실행 화면

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

test.txt 파일 생성

 

 

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

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

"i" 입력 시

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

Insert mode에서 'hello vim'을 입력한 화면

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

※ ESC : Normal mode로 전환

esc키 입력하여 Normal mode로 돌아온 화면

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

':wq' 명령어 실행 : Write & Quit 

 

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

test.txt 파일이 저장된 화면

 

이상으로 기본적인 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. 심사를 기다립니다.

 

반응형
반응형

오늘 공유드릴 내용은 '있어 보이게 코드 공유하는 방법' 입니다.

여러분은 보통 코드를 공유할 때 어떤 방법을 쓰시나요?

 

대부분은 글을 작성하는 곳에 있는 코드 공유 기능을 사용하실 텐데요.

저도 티스토리에서 제공하는 '코드블럭' 기능을 사용했습니다.

Tistory 코드블럭

 

코드블럭 입력 화면

console.log('share your code')

위의 코드가 '코드블럭' 기능을 사용해서 보여지는 코드 화면입니다.

 

전 뭔가 아쉬워서 좀 더 이쁘게 코드를 공유할 수는 없을까? 

 

고민하다가 발견한 방법을 공유드리려고 합니다.

 

거두절미하고 결과물부터 보여드리겠습니다!

Carbon을 사용한 코드 공유 화면

어떤가요? 훨씬 깔끔하고 '있어' 보이지 않나요?

 

이제 사용방법을 설명드리겠습니다.

 

1. Carbon 사이트를 방문한다.

carbon.now.sh

 

Carbon

Carbon is the easiest way to create and share beautiful images of your source code.

carbon.now.sh

 

2. 공유하고자 하는 코드를 화면에 입력한다.

Carbon 사이트 메인 화면

 

3. 원하는 방법으로 코드를 가져와서 사용한다.

  - 저는 보통 'Copy to clipboard'로 이미지를 클립보드에 복사한 뒤 공유하고자 하는 곳에 붙여넣기해서 사용하고 있습니다.

Copy to clipboard

4. (Option) 자신의 취향대로 화면을 꾸민다.

  - 바탕에 사용되는 색상 변경

바탕 색상 변경

  - 코드 내부 바탕 색상 변경

  - 프로그래밍 언어 선택

Bash 선택
Bash를 선택한 후 주석 표시 화면

  - 그 외의 설정에서 Presets 지정, Window, Editor, Misc 에 대한 개인 설정을 적용할 수 있습니다.

 

 

5. (Option) 원하는 경우 해당 이미지를 다운로드 받는다.

  - 원하는 경우 이미지 파일을 브라우저에서 열거나 다운로드 받을 수 있습니다.

이미지 파일 다운로드

 

이제부터 있어보이게 코드를 공유할 수 있게 되었습니다!

더 좋은 활용법을 알고 계시다면 댓글 부탁드려요.

반응형

+ Recent posts