안녕하세요, 윤인성님의 혼공 자바스크립트를 통해 자바스크립트를 처음부터 공부하고 있습니다. 공부한 내용을 정리해보려고 합니다.
개발을 처음 시작할 때 개발을 할 수 있게 해주는 환경을 개발 환경 (dvelopment environment) 이라고 부릅니다.
개발 환경에는 코드를 작성하는 텍스트 에디터와 코드를 실행하는 코드 실행기가 필요한데요.
다양한 툴들이 있지만 저는 텍스트 에디터는 비주얼 스튜디오 코드를 사용하고, 코드 실행기는 구글 크롬 웹 브라우저를 사용합니다.
가장 대중적으로 사용되는 웹 개발 툴입니다.
[1] 코드 실행기: 구글 크롬
구글 크롬 설치하기ㅇ
Chrome 웹브라우저
더욱 스마트해진 Google로 더 간편하고 안전하고 빠르게.
www.google.com
링크로 들어가셔도 되고 직접 검색을 하셔서 다운로드 받으셔도 됩니다. 아마 대부분 웹서핑을 위해서라도 구글 크롬이 깔려있을것으로 생각됩니다.
텍스트 에디터: 비주얼 스튜디오 코드
자바스크립트는 메모장으로도 개발할 수 있습니다.
하지만 개발을 조금 더 쉽게 할 수 있도록 도와주는 개발 전용 에디터를 설치해서 사용하는 것이 좋습니다.
가장 많이 사용되는 개발 전용 에디터인 비주얼 스튜디오 코드를 사용합니다.
덧붙여서 다양한 프로그래밍 언어도 비주얼 스튜디오로 개발이 가능합니다.
비주얼 스튜디오 코드 설치하기
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
비주얼 스튜디오 코드 홈페이지에 접속해서 [Download for Windows] (또는 Mac) 를 클릭하여 설치 파일을 다운로드 합니다.
비주얼 스튜디오 코드 한국어 언어팩 설치하기
비주얼 스튜디오의 화면 왼쪽 툴바의 확장을 선택합니다. [Korean Language Pack for Visual Studio Code] 를 선택하고 설치합니다.
코드 실행하기(1): 구글 크롬 콘솔에서 실행하기
구글 크롬의 주소창에 about:blank 를 입력해 크롬이 기본적으로 제공하는 빈 페이지로 들어갑니다.
여기에서 단축키 Ctrl+Shift+I 를 눌러 개발자 도구를 실행해주세요.(Mac은 Command+Option+I) [Console] 탭을 클릭합니다.
코드를 입력하고 Enter 키를 누르면 곧바로 코드 실행을 확인할 수 있습니다.
코드 실행하기(2): 파일 만들고 저장해 실행하기
1단계: HTML 페이지 생성하기
비주얼 스튜디오에서 새 파일 만들기
생성한 파일을 저장합니다. 폴더를 지정하고 OOOO.html 이름으로 저장합니다.
- 비주얼 스튜디오 코드의 보조 기능 지원 사용하기
VSCode는 파일의 확장자를 기반으로 해당 파일의 언어를 확인해 다양한 코드 작성 보조 기능을 지원해줍니다. HTML 파일을 만든다면 반드시 ‘OO.html’ 형태로 확장자를 붙여주세요.
이 보조 기능은 Ctrl + SpaceBar 키를 눌러 띄울 수 있습니다.
2단계: HTML 페이지 작성하기
새 창에 html 이라고 입력합니다. 입력하는 중에 자동 완성 기능이 나오면 [html:5] 를 선택하고 Enter 키를 누릅니다.
HTML 코드의 기본적인 형태가 자동 완성 기능으로 만들어집니다.
자바스크립트를 사용하려면 기본 HTML 페이지의 <head> 태그 사이에 다음과 같이 <script> 태그를 삽입합니다. <script> 태그 사이에 자바스크립트 코드를 입력합니다.
<script> 태그는 <head> 태그 안에 넣으면 코드를 살펴보기 편리하므로 특별한 경우가 아니라면 <head> 태그 안에 위치시킵니다.
3단계: HTML 페이지 실행하기
생성한 html 파일을 크롬 브라우저에 드래그&드롭해서 놓으면 출력됩니다.
웹 페이지를 한 번 실행한 후에는 코드를 변경하고 저장할 때마다 웹 브라우저를 [새로고침] 해서 변경된 내용을 확인할 수 있습니다.
'스터디 > 웹개발' 카테고리의 다른 글
| 혼자 공부하는 자바스크립트 2주차! 03. 조건문 (0) | 2022.01.24 |
|---|---|
| 자바스크립트 시작하기: 오류와 표준 스타일 (0) | 2022.01.11 |
| 자바스크립트 시작하기 (1) 개요 (0) | 2022.01.09 |
| Do it! 반응형 웹만들기 스터디 1회 (0) | 2021.10.03 |
| Do it! 반응형 웹 만들기 스터디 0회 (0) | 2021.10.03 |
