[SeSAC] 웹 풀스택 과정_CSS/JavaScript

 2주 차 첫 수업에서는 CSS의 display, visibility, animation 등 속성과 유명한 레이아웃 배치 기능 중 하나인 flex에 대해 개념 학습과 실습을 진행했습니다. flex 기능을 사용해서 레이아웃을 조정하는 실습은 지난주에 position으로 레이아웃을 잡는 것보다 어렵게 느껴졌습니다. 그리고 JavaScript의 작성방식(내장, 링크)과 변수 선언/할당 Js의 자료형의 개념 학습과 실습을 진행했습니다.

 

JavaScript

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어 또는 프로그래밍 언어입니다. JavaScript는 가볍고, 인터프리터를 사용하는 프로그래밍 언어입니다.

웹 브라우저에서 사용될때.. 브라우저에 내장된 자바스크립트 엔진(인터프리터)이 JavaScript 코드를 번역하고 실행해 주기때문에 우리는 브라우저에서 JavaScript코드로 이루어진 화면을 볼 수 있습니다.

 

1. 변수 선언과 할당

- 변수 선언이란, 변수명을 등록하는 것 입니다. 자바스크립트에서 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름입니다.

- 변수 할당이란, 변수가 선언된 후 대입 연산자(=) 를 통해 변수에 값을 대입하는 것 입니다.

 

2. 변수 선언 키워드

JavaScript 에서는 아래 3가지 키워드를 사용해서 변수를 선언 합니다.

 

var:

 - ES5 이전 버전에서 사용되던 변수 선언 키워드입니다. 함수 스코프를 가지며, 호이스팅(hoisting)으로 인해 변수가 선언되기 이전에도 접근할 수 있습니다.

 - 변수 선언전에 값을 할당할 수 있는 특이점이 있습니다. 

 - var 로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하고 마지막에 할당된 값이 변수에 등록됩니다.

 

let:

 - ES6(ECMAScript 2015)에서 추가된 변수 선언 키워드로, 블록 스코프를 가집니다. let으로 선언된 변수는 호이스팅되지만, 실제 할당이 이루어진 위치 이전에 접근하면 ReferenceError가 발생합니다.

 - 중복 선언은 불가능 합니다.

 

const: 

 - ES6에서 추가된 변수 선언 키워드로, 상수를 선언하는 데 사용됩니다. const로 선언된 변수는 재할당이 불가능하며, 블록 스코프를 가집니다.

 - 선언시 할당을 동시에 진행해야만 합니다.

 

 

3.  var로 선언된 변수가 선언되기 이전에도 접근할 수 있는 이유 (feat. 스코프&호이스팅)

https://dksl00.tistory.com/42

 

4. JavaScript의 타입과 자료구조

자바 스크립트는 동적 타입 언어

느슨한 타입의 동적 언어이다. 변수의 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당과 재할당이 가능하다.

>> 무슨뜻일까? 자바스크립트에서 var, let, const 만 사용해서 변수를 선언하는것 부터 특이하다 생각 했습니다..

>> 자바에서는 int 타입의 변수 A 라는 말로 설명할 수 있는데,

>> Js 에서는 let 타입의 변수 A 가 아니잖아요

>> 여기서 '변수는 어떤 특정 타입과 연결되지 않으며' 가 이해됐습니다.

>> '모든 타입의 값으로 할당과 재할당이 가능하다' 는 아래 코드를 보며 이해가 됐습니다.

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

// 자바에서는 이런식의 타입변환은 각각 방법이 있었던걸로 기억합니다.
// Js는 느슨한 타입이라는게 이해가 갑니다.

 

느슨한 타입의 언어란?

JavaScript의 변수들이 데이터 타입에 대해 엄격한 제한을 갖지 않는다는 것을 의미합니다. 엄격한 제한을 갖지 않는다는게 무슨 영향을 끼칠까요?

• 변수를 선언할 때 해당 변수에 어떤 타입의 데이터를 저장할지 미리 정의할 필요가 없습니다. 동적으로 결정됩니다. (짧게 줄이면 변수의 동적 타입 결정)
• 서로 다른 타입의 데이터를 연산하거나 비교할 때 JavaScript는 필요에 따라 자동으로 형 변환을 수행합니다.

let num = 5;
let str = "10";

console.log(num + str); // "510" (숫자와 문자열의 덧셈은 문자열 연결을 수행합니다.)

 

유연한게 장점이자 단점

• 장점은 빠른 개발과 유연성입니다. 편하잖아요
• 단점은 타입 체크가 덜 엄격하기 때문에 프로그래머가 의도하지 않은 타입 오류를 만들기 쉽습니다. 프로그램이 한번 걸러주는게 없는거죠. 타입에 대한 명확한 제약이 없으니 작성자 스스로가 조심하고 적절한 타입 체크와 테스트가 더 중요해 집니다.

 

5. 느슨할 뿐이지 언어의 타입은 당연히 존재한다.

JavaScript 언어의 타입은 원시(primitive)타입 과 객체(object) 타입으로 나뉩니다.

 

6. 자바스크립트 작성방식

작성방식은 몇가지 있는데, 수정하려는 HTML과 CSS 코드보다 JavaScript를 먼저 불러와 실행해버리면 오류가 발생할 수 있습니다. 이점을 유의해서 사용해야 합니다. (예를 들어 적용해야 할 코드의 아래에 스크립트를 적는다거나 그렇게 수행되도록 해야합니다.)

 

내장 방식 :

 - <script> 태그를 사용. head 내부든 body 내부든 작성 가능합니다.

링크 방식 :

 - <script> 태그에 src 속성을 사용합니다.

 - <script> 태그에 defer 속성을 사용해서 페이지가 모두 로드된 후에 해당 외부 스크립트가 실행되도록 할 수 있습니다. ** 외부 스크립트를 참조하는 경우에만 가능 합니다.

 

7. 문자와 변수를 섞어서 출력하기 (feat. 템플릿 리터럴)

let text = '안녕하세요';
let text2 = '하이';
let gender = '남자';
console.log(text)
console.log(text2)
console.log(text + text2)
console.log(text, text2, "가나다라")

// 템플릿 리터럴 방식
console.log(`${text} 저는 tgkim 입니다. 저의 성별은 ${gender} 입니다.`)

 

---

Ref) https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures#bigint_%ED%83%80%EC%9E%85

JavaScript의 타입과 자료구조 - JavaScript | MDN