우분투 20.04 LTS 개발 환경 구축

Ubuntu 20.04 LTS 포멧 방법

우분투 OS상 문제 발생 시 원할한 포멧을 위해 중요 파일들은 항상 백업해둘 것

포멧 후 빠른 개발환경 구축을 위해서 본문에 주요 프로그램 기재

MSI 노트북 기준 듀얼부팅 포멧 방법 추후 기재

 

 

 

파이틱스 한글입력기 설치

한글 입력시 힌트창 꺼지지 않는 현상 발생 시 클릭

설치방법 추후 기재

 

 

 

구글 크롬 설치

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
//구글크롬 설치파일 다운로드

sudo apt install ./google-chrome-stable_current_amd64.deb
//구글크롬 설치하기

 

 

 

VSCode 설치

VSCode 다운로드 바로가기 ( .deb 확장자로 다운로드 할 것 )

 

 

 

VSCode 추천 플러그인

설치 직후 바로 적용되는 플러그인도 있지만

따로 사용환경을 구축해줘야하는 플러그인도 있으니 별도의 사용법 검색이 필요함

사용하지 않는 플러그인은 사용안함으로 전환해두고 언제든 사용으로 재전환 할 수 있음

 

 

 

1. Korean Language Pack

VSCode 한글판 패치

 

 

 

2. ESLint

 

코드를 분석해 문법적인 오류나 안티 패턴을 찾아주고 일관된 코드 스타일로 작성하도록 도와줌

 

 

 

3. indent-rainbow

코드 들여쓰기(여백) 공간을 색상으로 표현해줌

 

 

 

4. Bracket Pair Colorizer 2

소괄호, 중괄호, 대괄호를 여러 색상으로 표현해줌

코드를 쭉쭉 작성하다보면 여는 괄호가 어딘지 닫는 괄호가 어디로 도망간지 헷갈리는 경우가 있는데

여는 괄호와 닫는 괄호를 한세트로 묶어서 하나의 색상으로 표현해주기 때문에 유용함

 

 

 

5. Debugger for Chrome

작성한 코드를 크롬 개발자 도구 환경에서 확인할 수 있게 만들어줌

Live Server 플러그인과 차이점은 내가 개발자 도구 환경에서 보고 싶은 코드의 구간을 설정할 수 있음

 

 

 

6. Live Server

작성한 코드의 동작을 웹 상에서 확인 할 수 있음

 

 

 

7. Auto Rename Tag / Auto Close Tag

사실상 두개가 한 세트인 플러그인

여는태그와 닫는태그 동시작성, 여는 태그 수정 시 닫는 태그도 동시 수정, 동시 삭제 등

태그 작성 시 편의성이 압도적으로 높아짐

 

 

 

8. Quokka.js

특정 라이브러리의 함수가 어떤 결과를 출력하는지 잠깐 확인하고 싶거나

JS를 배우기 위해 결과를 보고 바로 실행해보고 싶거나

새로운 언어의 기능이나 프레임워크를 실험해보고 싶을때

VSCode 터미널상에서 실시간으로 피드백을 해줌

 

 

 

9. ES7 React/Redux/GraphQL/React Native snippets

컴포넌트 형태 단축키를 제공해줌

 

PrefixMethod

imp→	import moduleName from 'module'
imn→	import 'module'
imd→	import { destructuredModule } from 'module'
ime→	import * as alias from 'module'
ima→	import { originalName as aliasName} from 'module'
exp→	export default moduleName
exd→	export { destructuredModule } from 'module'
exa→	export { originalName as aliasName} from 'module'
enf→	export const functionName = (params) => { }
edf→	export default (params) => { }
met→	methodName = (params) => { }
fre→	arrayName.forEach(element => { }
fof→	for(let itemName of objectName { }
fin→	for(let itemName in objectName { }
anfn→	(params) => { }
nfn→	const functionName = (params) => { }
dob→	const {propName} = objectToDescruct
dar→	const [propName] = arrayToDescruct
sti→	setInterval(() => { }, intervalTime
sto→	setTimeout(() => { }, delayTime
prom→	return new Promise((resolve, reject) => { }
cmmb→	comment block
cp→	const { } = this.props
cs→	const { } = this.state

 

 

 

10. Auto Import

파일명을 입력하면 자동으로 Import

휴먼 에러 감소 개꿀

 

 

 

Git 설치

추후 기재

 

 

 

Node.js 설치

추후 기재

 

 

 

스티키노트 설치 (포스트잇)

sudo add-apt-repository ppa:umang/indicator-stickynotes
//계속하냐고 물어볼때 엔터

sudo apt-get update
//업데이트

sudo apt-get install indicator-stickynotes
//스티키 노트 설치

indicator-stickynotes
//실행커맨드

 

 

 

Kolourpaint (우분투 그림판)

sudo apt-get install kolourpaint4
//설치