[바닐라JS] 자바스크립트를 시작해보자

 html, css만 알음알음 할줄 알지 자바스크립트는 개념조차도 모르는 상태다. 하지만 뭔가 만들고 싶다하면 죄다 자바스크립트를 기반으로한 코드들이라 답답함이 목까지 차올랐다. 제이쿼리를 잠깐 공부해보기도 했지만 같이 일하는 개발자와 소통이 되지 않아서 이왕 하는김에 자바스크립트로 ... 그래서 오늘부터 공부 시작 !

* 참고: 이 글은 사회과학 졸업 + 비개발자인 제가 공부하며 계속 수정해나가는 내용이라 정확하지 않을 수 있습니다

 

 자바스크립트는 브라우저를 위해 만들어진 프로그래밍 언어이며 역사가 오래되었고 계속 발전하고 있다. 처음에는 브라우저를 위해 만들어졌지만 지금은 다양한 곳에서 활용 되고 있다. 서버에서 node.js를 활용하거나 api 개발시 사용되기도 하고, 데스크탑 어플리케이션을 개발할 때 사용되기도 하며(electron프레임워크) 리액트나 네이티브 프레임워크도 있다. 그리고 iot 개발에서도 사용될 수 있다고 한다. 

 

다양한 변형(일렉트론, 리액트 등)의 가장 기본이 되는 것은 바닐라 자바스크립트이며 따로 정의한 라이브러리나 프레임워크가 없어서 빠르고 호환성이 좋다. 베이스가 없는 난 순수 자바스크립트인 바닐라로 시작해보기로 했다. 

---

준비물

• 코드 에디터(vscode, atom 등..)
• 확장자가 .js인 비어있는 파일
• 이해해보려고 노력하기 위한 집중력

---

기초 개념

1) 출력

자바스크립트의 가장 기본은 console.log 이다. 이걸 '출력'이라고 하는데 단어 뜻 그대로 프린트기에 종이(화면)를 넣으면 컴퓨터에서 입력해둔 내용(코드)이 종이(화면)에 출력되는 것이다.

 

2) 선언

개발에서는 조건이나 개념을 정의할 때 '선언'이라고 하는 것 같다. 영어 사전, 국어 사전처럼 어휘 뜻을 정리해두는 개념이다. 내가 이 자바스크립트로 노트북을 '사과'라고 부르기로 했다면 그때부터 노트북은 노트북이 아니라 '사과'가 되는 것이다. (학창시절 문학 교과로 본 작품 중에 이런 내용이 있었던 것도 같은데....?)

 

3) 참과 거짓(boolean)

true와 false다. 예전에 어디선가 컴퓨터에게는 0과 1만 있다는 내용을 읽은 적이 있다. 학창시절 수학시간에 참과 거짓 개념이 스쳐지나간 것 같기도 하다.

 

4) 없는 것(null)과 아직 정하지 않은 것(undefined)

둘다 현재 '없다'라는 개념이지만 쓰이는 상황은 엄연히 다르다.

---

기본 규칙

1) 세미콜론(;) 입력은 선택사항이다

CSS에서는 세미콜론이 필수라서 그 습관으로 계속 입력하게 될 것 같다

 

2) 작은 따옴표, 큰 따옴표는 원하는 스타일로 선택하면 된다

쉬프트 한번더 누르기 번거로우니까 난 작은 따옴표만 써야지

 

3) var 보다는 let(변수선언)과 const(상수선언)를 사용하자

아직 정확한 이유는 모르겠지만 var는 이제 잘 쓰지 않는 선언이라고 한다

 

---

출력하기

console.log(천재);

 

저장하면 개발자 도구 - console 창에서 천재라는 글자가 보인다.

html, css 작업할 때는 js파일이 html과 잘 연결되어 있는지 확인할 때 쓰곤 했다. 

자바스크립트에서는 내가 입력한 코드, 연산이 어떤 결과를 내는지 확인할 때 쓰인다.

---

선언하기

변수 선언은 let, 상수 선언은 const로 시작한다

let value = 1; // 값은 1입니다
const a = 2; // a는 2입니다

 

한번 선언한 것을 다른 값으로 똑같이 선언하거나 값을 변경하면 안된다.

값은 1 이라고 말해놨는데 나중에 값이 2 라고 하면 안되고

a = 1 이라고 말해놨는데 나중에 a = 2라고 하면 안된다는 뜻이다. 

 

그냥 한마디로 말 바꾸지 말라는 뜻.

* var는 let과 비슷하지만 같은걸로 여러번 선언할 수 있다고 한다

---

데이터 타입

선언하면서 쓸 수 있는 값은 당연하게도 숫자와 문자다. 문제는 둘이 쓰는 방식이 다르다는 것

 

숫자는

let value = 1;

 

문자(문자열)는 

let value = '글자';

 

이렇게 작은 따옴표를 붙여준다. 쌍따옴표("")도 가능하지만 내 취향은 작은 따옴표