JavaScript

JacaScript란?
웹 페이지의 동작을 정의하는 기능을 수행한다.

프론트엔드 하면 대표적으로 3가지를 들 수 있다.

1. HTML
2. CSS
3. JavaScript

물론, 위의 2개로만도 웹 페이지를 구성할 수 있지만 자바스크립트는 보다 다양한 기능들을 만들 수 있고 우리가 흔히 보는 웹 페이지(삐까뻔쩍한)를 만드려면 반드시 필요한 언어이다. 또한, 서버와의 통신을 할 때 필요한 언어이다.

일단, 대표적으로 알아야 하는 자료의 형태부터 알아보자.

1. 숫자
2. 문자
3. 논리
4. 리스트
5. 객체

나는 자바나 파이썬을 조금 공부해 봤기 때문에 낯설지 않은 형태들이었다. 자바스크립트를 처음 공부 하더라도, 언어들의 큰 틀은 비슷하기에 쉽게 적응할 수 있다.

일단, 5개의 자료의 형태 중에서 객체는 중괄호 { } 로 표현하며,

{ 이름 : 값 }

{key : value, key2 : value}

위와 같이 key, value로 표현한다.
또한, key나 문자 형태는 따옴표로 구분한다.
자바스크립트에서, 따옴표는 " ", ' ' 둘 다 사용 가능 하다.

객체를 조금 쉽게 생각하면, 여러 요소들을 가방 역할로 담아준다고 생각하면 된다.

const obj = { name: 'Mike', age: 20 }; 가방 역할!

자바스크립트를 사용하는 형태

코드를 처음 짜다보면, 제일 헷갈리는 것이 파일을 어떻게 적용하는지 이다.
자바스크립트의 파일은 확장자가 .js로 끝나며, 쓰는 형태로는 2가지가 있다.

1. script 안에 내용 넣기
   
   (cf. 맨 첫줄의 onclick으로 자바스크립트를 쓸 수도 있다.)
   위의 코드와 같이 스크립트 안에 정의하여 사용할 수 있다.

2. 외부 파일로 빼기
   이런 식으로 파일 소스를 따로 선언해 줌으로써 외부 파일에서 적용이 가능하기도 하다.
   
   작업하는 HTML파일과 같은 위치에 script.js 파일이 존재해야 하고, 내부에는 1번과 같은 같은 내용이 들어가 있다.
   코드의 규모가 커질 때 유지 보수 하기 쉬운 형태는 2번이 될 듯 싶다.

참고로, 나는 vscode를 사용하여 코드를 작성하기 때문에 vscode를 기준으로 예시를 정리했다.

어떤 코드든 내가 구현하는게 무엇인지 인지하고 작성하는 것이 중요하다.

console.log()
console.dir()

내가 쓰는 코드를 확인할 수 있는 2가지 코드이다. 내부적으로 확인할 수 있는 코드인데, 제대로 잘 출력되고 있는지 확인이 가능하다.

여기서, dir은 객체의 모든 속성을 확인할 수 있는 코드이다.

변수 선언은 let 으로 부터

let 변수 = "변수";

다른 언어와 조금 다른 점은 백틱(`)도 쓰인다는 점. (다른 언어에서도 쓰이는데 내가 모르는 걸지도..)

Q . 다른 변수에 같은 객체 값이 들어가면?

const dev1 = { name: 'dev'}; 

const dev2 = { name: 'dev'};

일단, 중괄호에 들어간 값은 객체이고, 이는 같은 주소 값을 공유한다. 그러므로 dev1의 값이 변한다면 똑같이 dev2의 값이 변한다!

리스트와 객체의 큰 차이점은 순서이다.
리스트는 순서가 중요하고, 객체는 순서가 상관이 없다.