크롬 앱 만들기 1. JavaScript 기본 문법 익히기(1)

이 프로젝트는 '바닐라 JS로 크롬 앱 만들기'입니다.

이 주제의 경우, NOMAD CODERS에서 누구든지 들을 수 있는 수업입니다.

노마드 코더 Nomad Coders – Clone Startups. Learn to Code.

노마드 코더 Nomad Coders

 

크롬 앱을 만들던 어떠한 프로젝트를 하던 중요한건 프로그래밍 문법이죠

그래서 시작하기 전 JS(JavaScript)에 기초적인 문법에 대해 익히는 시간을 가지도록 했습니다.

 

카테고리가 프로젝트와 연관이 있는 만큼 깊고 구체적인 해석을 하지는 않고 JS가 어떠한 문법으로 사용한 지에 대해 알아보도록 하겠습니다. 저의 경우에는 컴퓨터공학과 학부생이기도 하고 C++,Python,Java 등 다양한 언어를 공부한 경험이 있어 쉽게 익힐 수 있었습니다.

---

코드를 작성하는 프로그램의 경우 Visual Studio Code(VScode)를 사용하였으며, 기본적으로 간단한 코드는 구글 크롬(google Chrome)으로도 충분히 구동이 가능하기 때문에(대부분의 브라우저는 자바스크립트가 내장되어 있습니다.) 다른 프로그램으로도 충분히 할 수 있었습니다. 

변수 선언의 경우, C++,C언어 등과 달리 변수 타입을 달리 적지 않고 선언합니다. 선언할 때에는 let과 const를 주로 사용합니다. 물론 그 외로 var라는 방법도 있지만 많은 사람들이 var를 사용하지 않는 것을 권장하고 있습니다. 이 이야기는 조금 뒤에 다루겠습니다.

 

먼저 const에 대해 알아보자면, constant의 약어로, 상수를 선언할 때 사용합니다. 상수의 경우에는 재할당 및 재선언을 할 수 없습니다.

//상수는 다음과 같이 적으면 에러를 출력한다.
const a;
a=10;

다음과 같은 코드는 오류가 생긴다. 상수로 선언해야하는 경우에는 선언할 때 바로 할당해주어야 하며, 많은 프로그래밍 언어와 비슷하게 관습적으로 대문자로 표기합니다. 대문자로 표기하지 않는다고 해서 에러가 생기지 않으나 다른 사람들과 코드를 공유하거나 보여주는 일이 있다면 대문자로 적으시는 걸 권장합니다.

const NUM = 10;​

 

다음은 let 입니다. let의 경우 블록 안에서 유요한 변수, 즉 지역변수를 선언할 때에 사용하는 방법입니다.

앞서 말했듯 그 변수가 integer가 되었던, string이 되었던 간에 앞에 변수 타입을 미리 선언하지 않는 방식이기 때문에 모두 let을 붙여 사용할 수 있습니다.

//let을 이용한 변수 선언
let n;
let i;
let m=10;
let name="HaDaBle";
//한 번에 여러 개를 선언하고 초기화 가능
let a,num;
let age=20 , major = "Computer";

앞서 var 라는 명령어를 사용하지 않는다고 말했는데, var의 경우에는 let과 달리 블록을 벗어나도 전역변수처럼 프로그램이 끝날 때 까지 유효하기 때문에 코드가 길어지고 복잡해질수록 문제를 일으킬 가능성이 큽니다. 그렇기 때문에 var를 사용하지 않으며, 대부분 let과 const를 사용하여 프로그램을 제작합니다.

---

다른 프로그래밍 언어과 같이 배열(Array)를 선언하여 사용할 수도 있습니다.

배열의 경우 대괄호( [ ] )를 사용하여 선언할 수 있고 원소에는 다양한 타입이 들어갈 수 있습니다.

//빈 배열 선언
let arr1=[];
//이후 원소를 추가해서 넣을 수도 있다.
arr[0]='a';
arr[1]='b';

//초기값 할당
let arr2=[1,2,3,4];

//자바스크립트의 경우, 다른 타입의 원소가 포함될 수 있다.
let arr3=[1,'abc',true,null];

이미 만들어진 배열에 주로 사용하는 명령어는 push와 pop이 있고 다음과 같이 사용합니다.

const arr=[1,2,3,4,5,6];
arr.push(7);
console.log(arr);
//3번 라인의 출력 결과 : [1,2,3,4,5,6,7]
arr.push(8,9);
console.log(arr);
//6번 라인의 출력 결과 : [1,2,3,4,5,6,7,8,9]
arr.pop();
console.log(arr);
//9번 라인의 출력 결과 :[1,2,3,4,5,6,7,8]

그 외에도 맨 앞에서 값을 추가하거나 삭제하는 unshift , shift가 있습니다만 넘어가도록 하겠습니다.

 

-다음에 계속-