▣ 시작하기 전에
향후 진행할 내용 중 문법 관련은 최소한의 설명만 덧붙일 예정이며 가급적 모질라 개발자 네트워크 문서를 참조할 것입니다. 그리고 라이브러리(Library) 또는 프레임워크(Framework)를 사용하지 않고 소스 코드 중심으로 실습할 예정이며, 대체 불가한 경우를 제외하고는 전문 용어를 지양하고 일반적인 어휘로 설명하도록 하겠습니다.
MDN Web Docs
Hacks Blog Read more at hacks.mozilla.org For the last couple of years, we've run the MDN Web Developer Needs Assessment (DNA) Report, which aims to highlight the key issues faced by developers building web sites and applications. This has proved to be an
developer.mozilla.org
그럼 이제부터 HTML, CSS 그리고 자바스크립트까지 포함한 코딩 실습을 위해 로컬 환경(Local Environment)의 설치 및 설정과 관련된 부분들을 아래와 같이 살펴 보겠습니다.
▣ Visual Studio Code 설치
많은 종류의 코드 편집기(Code Editor) 또는 텍스트 편집기(Text Editor)가 있으므로 선택하여 사용합니다. 본 내용에서는 VS Code를 주로 활용합니다.
마이크로소프트 VS Code 공식 사이트를 통해 설치할 컴퓨터의 OS와 일치하는 Installer를 선택합니다.
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
▣ VS Code 익스텐션 설치
VS Code에는 마이크로소프트(Microsoft)사 또는 수많은 서드파티(Third party)사들로 부터 제공되는 익스텐션(Extension)들을 설치하여 활용할 수 있습니다. 익스텐션은 일종의 플러그인(Plug-in) 프로그램으로 VS Code 기능을 확장시켜 다양한 편의 기능을 통해 코딩의 효율과 생산성을 높이는데 큰 역할을 합니다.
다음의 확장 플러그인들은 활용도가 높은 대표적인 것들로 VS Code 설치 후 아래의 링크를 통해 설치하거나, VS Code 프로그램을 작동시켜 왼쪽 사이드바(Side bar - Activity bar)에 위치하고 있는 'Extensions' 탭을 클릭하여 검색을 통해 설치할 수도 있습니다.
1. Live Server
Live Server - Visual Studio Marketplace
Extension for Visual Studio Code - Launch a development local Server with live reload feature for static & dynamic pages
marketplace.visualstudio.com
별도의 코드 실행(Run)과 브라우저 리로드(Reload) 과정없이 변경 사항을 저장하면 바로 적용되어 편리합니다.
2. Javscript (ES6) code snippets
JavaScript (ES6) code snippets - Visual Studio Marketplace
Extension for Visual Studio Code - Code snippets for JavaScript in ES6 syntax
marketplace.visualstudio.com
자주 사용해서 번거로운 코드들을 간단한 단축문자로 작성할 수 있어 유용합니다.
Bracket Pair Colorizer 2 - Visual Studio Marketplace
Extension for Visual Studio Code - A customizable extension for colorizing matching brackets
marketplace.visualstudio.com
짝이 같은 괄호끼리는 같은 색깔로, 그리고 여러 개의 괄호들을 다양한 색깔로 보여주어 눈에 잘 띄며, 괄호 누락을 방지할 수 있습니다.
Prettier - Code formatter - Visual Studio Marketplace
Extension for Visual Studio Code - Code formatter using prettier
marketplace.visualstudio.com
코딩 스타일을 일관성 있게 유지할 수 있도록 도와주며, 사소하지만 신경 쓰이는 띄어쓰기나 들여 쓰기 등으로부터 좀 더 자유로워질 수 있습니다.
Auto Rename Tag - Visual Studio Marketplace
Extension for Visual Studio Code - Auto rename paired HTML/XML tag
marketplace.visualstudio.com
HTML 태그를 작성할 때 시작 태그를 작성하거나 수정할 경우 끝 태그의 이름 또한 자동으로 작성되거나 변경되는 기능을 제공합니다.
▣ 크롬 웹 브라우저 설치
크롬 웹 브라우저(Chrome web browser)는 자체로 자바스크립트 엔진이 장착된 가상 머신의 역할을 하기 때문에 웹 개발(Web development) 과정 중 브라우저 환경에서 디버깅(Debugging)이나 프로토타이핑(Prototyping) 등을 실행해 볼 수 있는 훌륭한 개발도구입니다.
Chrome 웹브라우저
더욱 스마트해진 Google로 더 심플하고 안전하고 빠르게.
www.google.com
아래와 같이 크롬을 설치하고 상단 메뉴에서 보기(View) - 개발자(Developer) - 자바스크립트 콘솔(JavaScript Console)을 찾아 실행하면 자바스크립트 콘솔을 작동시킬 수 있으며, 간단한 코딩을 실습해 볼 수 있습니다.
▣ VS Code 에서 웹 페이지 열기
1. 작업 폴더 만들고, VS Code 실행하여 작업 폴더 열기
3. 작업 폴더 내에 파일 폴더와 파일 만들기
4. 간단한 기본 HTML 코딩 후 저장한 파일 브라우저에서 열기
<html>
<head>
<title>Web Site</title>
</head>
<body>
<h1>Welcome to my web site</h1>
<p>This is my first web site</p>
</body>
</html>위와 같이 간단히 웹 페이지를 작성하고 저장한 다음에 이를 브라우저에서 여는 방법에는 두 가지가 있습니다.
① 경로를 복사하여 브라우저 창에 붙여 넣기
② 파일을 브라우저를 이용하여 열기
두 가지 방법 중 어느 것이든 실행한 결과는 아래와 같습니다. 주소창에는 파일의 경로가 나타납니다.
▣ 작업 환경 설정
사용자마다 선호하는 작업 환경이 다르므로 특별히 따로 정해져 있는 것이 아니며, 단지 좀 더 효율적인 실습을 위한 화면 내의 작업 공간 배치에 대한 내용을 정리하였습니다.
1. 기본 화면 구성
2. 코드 변경 후 브라우저에 적용
위와 같이 화면을 구성한 이후에 작업을 하다 보면 번거로운 점이 하나 있습니다. 추가한 코드를 저장해도 변경된 부분이 바로 적용되지 않아 일일이 리로드를 해주어야 한다는 것입니다.
3. Live Server 이용
위와 같은 불편함을 해결하기 위해 작성한 웹 페이지 파일을 마우스 오른쪽 클릭하여 Open with Live Sever를 선택하면 아래와 같이 주소창의 특정 IP주소와 함께 열립니다.
코드를 추가하고 파일을 저장하면 변경된 내용이 바로 적용되는 것을 확인할 수 있습니다.
3. 자바스크립트 콘솔 이용
<script></script> 태그를 이용하면 자바스크립트로 코드를 작성하여 브라우저의 콘솔 창을 통해 실행 결과를 확인해 볼 수 있습니다.
뿐만 아니라 <script src="app.js"></script> 태그를 이용하면 HTML 파일의 외부에서 자바스크립트 파일을 별도로 작성할 수 있습니다.
별도의 자바스크립트 파일에서 실행된 결과는 HTML 파일에서 작성했을 때와 동일합니다.
이 정도면 기본 환경 설정은 마무리된 것 같습니다. 이외에도 다양한 확장 플러그인이나 코드 편집기들을 직접 활용해 보고 선호하는 스타일을 찾아보길 바랍니다.
'자바스크립트 > 바닐라 JS' 카테고리의 다른 글
| [자바스크립트] TIL5 : 배열 메서드를 이용한 배열의 요소 변경 / 템플릿 문자열의 이용 방법 (0) | 2021.04.11 |
|---|---|
| [자바스크립트] TIL4 : 스트링 메서드를 이용한 문자열 처리 / 매스 객체를 이용한 수학적 연산 (0) | 2021.04.11 |
| [자바스크립트] TIL3 : 자료형의 종류와 확인 및 변환 방법 (0) | 2021.04.10 |
| [자바스크립트] TIL2 : 변수 선언과 할당 및 초기화 방법 / 변수 영역(스코프)의 정의 (0) | 2021.04.09 |
| [자바스크립트] TIL1 : 크롬 웹 브라우저의 자바스크립트 콘솔 이용 방법 (0) | 2021.04.07 |
댓글