자바스크립트 공부 순서 4단계로 정리

 

 

자바스크립트 공부 순서를 정리해보겠습니다.

 

이 글은 자바스크립트 카테고리의 첫 글이므로, 처음 자바스크립트를 접하시는 분들도 쉽게 시작하실 수 있게 작성해보겠습니다.

 

개인적으로는 웹사이트 외주를 위한 실전 코딩 연습을 위해 이 연재를 시작하게 되었습니다.

 

하지만 퍼블리셔, 프론트 엔드 개발자를 목표로 하시는 분들에게도 분명히 도움이 될 것이라고 생각합니다.

 

 

이런 내용을 이야기할 것 입니다.

 

 

 

그럼 지금부터 차근차근 시작해보겠습니다.

 

자바스크립트 공부 순서

 

자바스크립트는 프로그래밍 언어입니다.

 

프로그래밍 언어 공부를 시작하는 방법은 대략 아래와 같다고 할 수 있습니다.

 

1. 언어의 특징, 역사, 구조 등의 이론
2. 프로그램 설치 등의 환경 설정
3. 프로그래밍 기초 문법
4. 실제 코드를 사용하는 코딩 실습

 

여기서 가장 부담스러운 것은 '문법'일 것 입니다. 하지만 집중해서 보시면 하루 정도면 '언뜻 이해'하실 수 있습니다.

 

완벽하게 이해하고 넘어가는게 아니고, 실제로 코딩 실습을 해보면서 점점 익숙해지면 되니까 너무 걱정하지 마세요.

 

1. 자바스크립트의 특징, 쓰이는 곳

 

자바스크립트의 특징

 

자바스크립트의 탄생이나 역사 등에 대해 자세하게 알아볼 수 도 있겠지만, 간단하게 말해서 HTML CSS를 동적으로 만들어주는 스크립트라고 이해해도 무방합니다.

 

단 하나 기억해야할 것이 있다면, 자바스크립트는 '객체' 기반 언어라는 점 입니다. 이게 가장 큰 특징입니다.

 

객체는 4.실습 순서에서 다루겠지만 미리 만들어진 기능을 가진 물체같은 것이라, 우리는 용도에 맞게 사용하기만 하면 됩니다. 기대되죠?

 

 

자바스크립트가 쓰이는 곳

 

자바스크립트는 웹, 앱, 프로그램, 게임 등등 자바스크립트로 못하는게 없을 정도로 팔방미인입니다.

 

하지만 주로 웹에서 많이 쓰이고, 앞으로 이야기할 자바스크립트 관련해서 연재할 내용도 주로 웹에서 쓰이는 UI 구현이나 웹 서비스에 필요한 기능 구현일 것 입니다.

 

웹, 앱, 프로그래밍, 게임 이외에도 다양한 자바스크립트의 활용 방법에 대해 궁금하시다면 진블로그의 '자바스크립트로 세상을 지배하는법'이라는 글을 읽어보시면 되겠습니다.

 

저도 이 글을 읽고 두근거리며 공부를 시작하게 되었었거든요.

 

언어의 역사나 구조 등은 코딩을 시작하는 시점에서는 몰라도 무방하다고 생각합니다. 지루하면 공부를 지속하기가 어렵잖아요.

 

얼른 재밌는 부분을 찾아야 공부를 지속할 수 있을 것 입니다. 그러니 빠르게 4. 코딩 실습으로 넘어가도록 해봅시다.

 

 

2. 환경설정

 

코딩 편집 프로그램에 해당하는 비주얼 스튜디오 코드는 홈페이지에서 다운받아 옵션없이 그대로 설치하시면 되니 어렵지 않으실 겁니다.

 

 

비주얼 스튜디오 코드에서 라이브서버(코딩 내용을 가상 서버에서 실시간 반영)하는 방법은 아래 글을 참고하시면 되겠습니다.

 

비주얼 스튜디오 코드에서 live server 실행하는 방법

 

또한 단축키로 빠르게 코딩하는 Emmet 설정도 해두시면 좋습니다. 작업 효율이 어마어마하게 늘어나거든요.

 

비주얼 스튜디오 코드 Emmet(단축키)사용법

 

이 밖에 들여쓰기 내어쓰기를 깔끔하게 자동 정리해주는 beautify 등의 확장프로그램도 필요하시면 유용하게 쓰실 수 있습니다.

 

 

3. 프로그래밍 기초 문법

 

프로그래밍의 문법은 언어마다 조금씩 다르지만, 변수와 자료형 연산자 제어문 등의 핵심은 동일합니다.

 

따라서 프로그래밍을 배우려면 한 번은 제대로 공부해야 나중에 헷갈리지 않고, 다양한 언어를 배울 기틀이 되기도 합니다.

 

자바스크립트를 이용해서 아래와 같은 기초 문법을 알아볼 것 입니다.

 

• 변수, 자료형
• 연산자
• 제어문(조건문, 선택문, 반복문)

 

이전에 제가 HTML CSS 카테고리에 연재했듯이, 어렵지 않게 꼭 알아야할 핵심적인 부분만 소개해드리도록 할테니 겁내지 마세요.

 

 

변수는 데이터를 저장하는 공간입니다. 변수에는 문자형, 숫자형 등 몇가지 타입이 있고 이런 자료형에 따라 취급을 달리 해줘야 합니다.

 

변수의 개념과 사용법, 자료형 정리

 

연산자는 계산을 하거나 문자를 이어 붙이거나, 값을 비교하거나 해서 원하는 값을 얻기 위해 꼭 알아야 합니다.

 

연산자 7종류 핵심 정리

 

제어문이야 말로 실제 코딩에서 가장 핵심적으로 쓰이는 문법이라고 할 수 있습니다. 코딩은 무언가를 제어하니까요.

 

제어문(조건문, 선택문, 반복문) 7가지 핵심 정리

 

마지막으로 함수에 대해 살펴보겠습니다.

 

 

 

4. 코딩 실습

 

자바스크립트 엔진에 미리 만들어진 내장 객체의 사용법에 대해 알아보세요. 문자열 객체, 배열과 같은 필수적인 내용이 나옵니다.

 

자바스크립트 객체 사용법, 3종류 객체 핵심 정리

 

브라우저 객체 모델을 이용해서 알림을 띄우거나, 새고로침, 사용자 디바이스의 정보 등을 가져오는 등 웹 브라우저의 기능을 쓸 수 있습니다.

 

브라우저 객체 모델 6가지 정리, 사용법

 

동적으로 HTML 문서를 다루려면 DOM에 대한 이해는 필수입니다. 문서 객체 모델과 노드에 대해 이해하는 시간을 가져볼까요?

 

문서 객체 모델(DOM), 노드 구조와 개념 정리

 

웹 API를 이용해서 HTML 문서의 요소를 자유자재로 생성하고 변경하고 삭제할 수 있습니다.

 

 

자바스크립트로 HTML을 조작하는 방법

 

이벤트와 스타일 조작에 대해서는 작성하는대로 링크하도록 하겠습니다.

 

 

이상으로 자바스크립트 공부 순서를 4단계로 정리해보았으며, 각 단계에 필요한 글들을 계속 작성해서 링크하도록 하겠습니다. 읽어주셔서 감사합니다.