환경세팅

1. 왜 환경을 세팅해야 할까요?2. TextEditer와 IDE의 차이점 VSC Tip 3. 로컬 환경설정 3.1 Atom 설치 및 사용 방법 3.2 테마 변경 3.3 유용한 기능 3.4 Emmet 패키지 사용법 4. 서버 환경설정 5. Ngnix 설치 및 구동(선택 사항)

1. 왜 환경을 세팅해야 할까요?

메모장에서도 충분히 코딩할 수 있어요. 그런데 왜 사용하기 어려운 여러 소프트웨어를 사용하여 편집해야 할까요? 메모장은 요리에 비유하자면 업무용 칼입니다. 업무용 칼로 물론 요리를 할 수 있지만, 여러가지 재료가 잘 썰리지 않겠죠. 생선회를 뜰 때 얼마나 다양한 칼을 사용하는지 아시나요? 이처럼 여러 기능을 제공하는 Coding용 TextEditer나 IDE를 사용하는 것은 프로그래머에게 필수 입니다!

2. TextEditer와 IDE의 차이점

자, 그럼 구체적으로 TextEditer와 IDE 차이점에 대해 알아봅시다. 그런데, 이 챕터는 넘어가셔도 좋습니다. 지금은 구분을 하지 않으시고, 추천하는 에디터를 사용하세요! 3가지를 추천합니다.

Visual Studio Code(VSC)

Sublime Text나 Atom

여기서는 Atom을 사용하는데요. 이유는 더 빠르다거나, 기능적으로 좋아서는 아닙니다. '초보자가 사용하기 쉬운 에디터'라서 선택을 하였습니다.

따라서 VSC를 사용하실 분들은 아래 영상을 참고해주세요.

VSC Tip

html 기본 완성 코드 커스터마이징 방법 : ! + Tab, html + Tab을 눌렀을 때 기본 템플릿 바꾸는 방법

오른쪽 하단에 톱니바퀴를 누르시고 사용자 코드 조각을 클릭해주세요.

HTML로 검색을 해주세요. 처음에는 HTML.json이 안뜨고 html로만 뜹니다.

아래 코드를 변경해주세요.

변경 전 코드


{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
}

변경 후 코드


{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }

	"Print to console": {
		"prefix": "htmlko",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"ko\">",
			"	<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>$1</title>",
			"</head>",
			"<body>",
			"	$2",
			"</body>",
			"</html>"
		],
		"description": "한국어 페이지용 html 템플릿"
	}
}

이제 기본 html template으로 우리가 설정한 템플릿을 사용할 수 있습니다.

3. 로컬 환경설정

21년도 하반기부터는 VSC를 추천합니다. 히스토리 보관차 Atom을 보관합니다.

Atom은 github에서 제작한 에디터 입니다. git을 쓰시는 분들에게는 이보다 좋은 에디터는 없을 것으로 보입니다. 아직 git을 사용해보시지 않으셨다면 한 번 사용해 보시길 권해드립니다. 추가 기능이 필요하시다면 패키지를 인스톨하여 원하는 에디터를 만들어갈 수 있습니다.

이 역시 영상으로 찍어두었는데요. 아래 텍스트로도 준비되어 있으니 편하신 콘텐츠로 보시길 권해드립니다.

3.1 Atom 설치 및 사용 방법

https://atom.io 홈페이지에 접속합니다. 구글에서 Atom을 검색하면 최상단에 있습니다. 설치 파일을 다운로드 받고 실행하셔서 설치를 진행하세요.

Atom을 실행하고 File > New File을 선택합니다. 단축키는 Ctrl + N 입니다.

untitled 창에서 File > Save 를 클릭해 저장합니다. 저장할 때는 파일명 .html로 저장해야 합니다. .html로 저장한 파일에서는 코드하이라이팅이 적용됩니다.

3.2 테마 변경

File을 누르고 Settings를 누릅니다. 단축키는 Ctrl + 콤마 입니다.

UI Theme에서 테마에 대한 설정을 변경할 수 있습니다. 이 책에서는 Atom Light 테마를 사용하도록 하겠습니다.

3.3 유용한 기능

File을 누르고 Settings를 누릅니다.

Install에서 Editor를 Customizing할 수 있는 몇 가지 Packages를 설치하도록 하겠습니다.

wrap-guide로 검색하면 wrap-guide package가 나올 것입니다. 에디터 안에서 오른쪽에 라인을 그려주는 Package인데 지워 사용하는 편이 더 깔끔하기 때문에 Disable 시키도록 하겠습니다. Disable 버튼을 눌러주시면 아래와 같이 화면이 바뀝니다.

이번에는 minimap이라는 패키지를 설치하도록 하겠습니다. minimap이라고 검색하고 minimap에 install 버튼을 눌러주세요! Code의 긴 줄을 한눈에 보기 편하도록 오른쪽에 작은 Map을 그려주는 유용한 Package입니다.

emmet 패키지는 웹 관련 코드를 자동완성 시켜주는 패키지 입니다. 상당히 유용하지만 사용법을 어느정도 숙지해야 하기 때문에 뒷장부터 사용법을 언급하도록 하겠습니다. 가능하다면 YouTube 영상을 시청해주세요!

이번에는 Editor로 들어와서 Soft Wrap에 체킹을 해줍니다. 라인이 허용치를 넘어가면 옆으로 스크롤이 생기는데 스크롤이 생기지 않고 아래로 넘어가도록 하는 옵션입니다.

3.4 Emmet 패키지 사용법

emmet 패키지 사용법을 어느정도 숙지해 두는 것은 생산성을 높여줍니다. 가장 먼저 파일을 .html로 저장해주세요. 저장하지 않으면 emmet문법이 작동하지 않습니다! 자, 이제 !를 입력해주시고 Tab을 눌러보세요. 아래와 같이 HTML의 기본 골격이 한번에 만들어지는 것을 볼 수 있습니다.

이번에는 위와 같이 입력하고 하나의 라인 끝에서 Tap을 눌러보세요. 예를 들어 아래와 같이 h1 뒤에서 Tab을 눌러보십시오. 그러면 그 아래 화면과 같이 변하는 것을 볼 수 있습니다. 위의 예제를 모두 실습하면 그 원리에 대해 이해하실 수 있으실 겁니다.


<body>
	h1
	h1+h1
	h1*3
	h1{hello world}*3
	table>(tr>th*3)+(tr>td*3)
	h1#one+div.two+div.three.four.five
	h1.test$$*3
</body>

공식문서의 치트시트

Cheat Sheet

https://docs.emmet.io/cheat-sheet/

4. 서버 환경설정

서비스를 운영하기 위해서는 서버가 필요합니다. 그러나 서버를 직접 사기에는 너무 고가이고, 또 배송이 온다고 해서 끝이 아니라 설치를 하는 것도 매우 큰 리소스가 드는 작업입니다. 우리는 그래서 이 서버를 빌려서 사용합니다. 빌리는 것을 클라우드 서비스라 하고, 이 서비스는 크게 3가지로 나눌 수 있습니다.

SaaS(Software as a Serviece)

SaaS는 가장 사용자 단에 친밀한 서비스이며 네트워크를 통해 애플리케이션 기능을 이용할 수 있는 서비스입니다.

PaaS(Platform as a Service)

PaaS는 윈도우와 리눅스 같은 운영체제를 제공하고 개발 가능한 플랫폼도 함께 제공되는 클라우드 서비스입니다.

IaaS(infrastructure as a Service)

IaaS는 인프라를 제공하는 클라우드 서비스입니다. 기업에서 특히 많이 쓰입니다.

구름IDE 환경설정을 해보도록 하겠습니다. 아래 화면을 보시면서 빨간색 네모를 따라 그대로 따라하시면 됩니다.

회원가입을 해야 합니다. 무료계정도 컨테이너 5개를 사용할 수 있는 강력한 서비스입니다. 회원가입을 하면 자동적으로 대시보드에 들어갑니다. 만약 메인화면으로 나오셨다면 대시보드를 눌러주세요.

다음은 대시보드 화면입니다. 새 컨테이너 생성을 누르셔서 컨테이너를 생성해 주세요. 하나의 컨테이너는 하나의 컴퓨터를 세팅하는 것과 같습니다. Python을 선택하신 다음 생성하기를 눌러주세요.

컨테이너가 만들어지고 있다는 화면이 나오고 곧 컨테이너 생성이 완료되었다고 뜹니다. 컨테이너 실행을 누르지 마시고 대시보드로 이동해주세요.

대시보드로 이동한 다음에 Run 옆에 있는 버튼을 눌러주세요. 우리는 Classic으로 실행합니다. Modern 버전이 가끔 애러가 나기 때문입니다. 컨테이너 실행을 누르셔서 컨테이너 안으로 들어가주세요.

아래 화면은 컨테이너가 로딩되는 화면입니다.

자, 로딩이 완료되었습니다. 여러분만의 클라우드 컴퓨터입니다!

폴더 구조를 볼 수 있는 공간입니다. 우측 상단에 보시면 새로고침 버튼이 있어요. 콘솔창에서 뭔가 작업을 했는데 보이지 않는다면 새로고침을 해보시기 바랍니다.

txt, html, py파일 등 다양한 파일을 edit 할 수 있는 공간입니다.

콘솔창입니다. 우리는 대부분의 명령어를 이곳에 입력하게 됩니다.

오른쪽에는 협업을 위한 공간이 하나 열렸을 텐데, 우리는 사용하지 않을 것이니 접어둡시다! 이 공간은 채팅 등 협업을 위한 다양한 기능을 제공합니다.

자, 이제 간단한 실습을 해보도록 합시다.


print('Welcome to jejucodingbasecamp!! :)')


python index.py

왼쪽 프로젝트 바에서 index.py를 클릭합니다. 그러면 오른쪽 창에 해당 파일의 소스코드가 보입니다. 안에 있는 내용을 수정해보세요.

안에 있는 내용을 수정하면 상단 화살표로 그려 넣은 곳이 *로 바뀝니다. 해당 표시는 저장이 안되었다는 표시입니다. Ctrl + S를 누르시면 저장이 되고 다시 X로 돌아옵니다.

저장이 되신 다음 아래 콘솔창에서 python index.py를 입력해보세요. 작성하신 문서가 실행됩니다!

실행되는 화면입니다.

프로젝트를 누르시고 실행 URL과 포트를 눌러보세요. 앞으로 사용될 URL과 포트입니다!

만약 등록이 되어 있지 않다면 위에서 원하는 url을 입력하고 PORT는 80으로 하여 등록버튼을 눌러주세요.

프로젝트를 클릭한 화면인 위 화면에서 실시간 린트 토글 체크박스 버튼이 빠져있죠? 이렇게 빼주시면 Error를 잡지 않습니다. 구름IDE에서 아직은 제대로 Error를 잡지 못하니 이걸 빼줍시다!

5. Ngnix 설치 및 구동(선택 사항)

서버가 어떻게 작동하는지 알기 위해서 웹 서버(HTML, CSS, JS, PHP Serving)를 서버로 구동시켜 보겠습니다. 동작 방식은 이러합니다. 누군가 우리 URL로 접속하면, 해당되는 페이지를 서빙하는거죠.

* 여기서 부터는 선택사항입니다. 안해보셔도 괜찮습니다.


root@goorm:/workspace/컨테이너명# python --version


root@goorm:/workspace/컨테이너명# mkdir web


root@goorm:/workspace/컨테이너명# cd web


root@goorm:/workspace/컨테이너명/web# sudo apt-get update


root@goorm:/workspace/컨테이너명/web# sudo apt-get install nginx


root@goorm:/workspace/컨테이너명/web# vi /etc/nginx/sites-available/default

vi 에디터를 이용하여 root /var/www/html; 을 root /workspace/컨테이너이름/web; 으로 고치세요.

(i를 누르면 편집이 됩니다. 편집을 다 하신 후에는 ESC, :, wq!를 순서대로 입력하세요.)


root@goorm:/workspace/컨테이너명/web# sudo service nginx start

멈추고 싶을 때에는 sudo service nginx stop를 입력합니다.


root@goorm:/workspace/컨테이너명/web# sudo service nginx stop

작업하신 파일이 안보이실 때에는 새로고침 버튼을 클릭해주세요.

구름IDE에서 HTML, CSS, Javascript을 순차적으로 실행해보도록 하겠습니다.

기본 HTML


<html>
<head>
</head>
<body>
	<h1>test</h1>
</body>
</html>

CSS 포함


<html>
<head>
	<style>
		h1{color:blue;}
	</style>
</head>
<body>
	<h1>test</h1>
</body>
</html>

JavaScript 포함


<html>
<head>
	<style>
		h1{color:blue;}
	</style>
</head>
<body>
	<h1 id="hojun">test</h1>
	<script>
		document.getElementById("hojun").innerHTML = "Hello World";
	</script>
</body>
</html>

자, 이렇게 저장해주시고, 프로젝트에 실행 URL과 포트를 눌러주세요.

이제 URL을 클릭하시고 실행이 되는지 확인해주세요!