데브코스 06일차 ( 24.10.21 월 ) JavaScript

워니·2024년 10월 31일

Programmers Front-end

목록 보기

6/27

[Section 01] JavaScript 기초

< 00. 자바스크립트란? >

JavaScript
: html, scc로 작성 되어 있는 정적 웹 페이지에 동적 효과를 주기 위해 개발

1. 자바스크립트 코드 작성 방법 / 실행 방법

1.1. 내부 스크립트

script 태그 사용
script 태그의 콘텐츠로 자바스크립트 코드를 작성하는 방법

ex)
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  **<script>
    console.log("Hello")
  </script>**
</head>

1.2. 외부 스크립트

별도의 파일에 자바스크립트 코드를 작성하는 방버
확장자가 .js 로 끝나는 파일
실무에서 가장 많이 사용하는 방법

ex)
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  **<script src="./js_file/script.js"></script>**
</head>

※ 내부 스크립트와 외부 스크립트를 같이 사용하면 안 된다.
- 외부 스크립트를 사용할 땐 콘텐츠를 비워둬야 한다. (주의!!)
ex) **<script src="./js_file/script.js">console.log("Hello")</script>
    → 안 됨!!**

2. 스크립트 작성 위치

head 와 body 안에서만 작성해야 함
html 다운 → script 다운 → script 실행 순으로 진행됨

2.1. `head` 태그 안에 사용하는 경우

html 요소를 제어해야 하는 코드라면 작동을 하지 않음
head 태그까지만 html을 다운로드하고 멈춘 다음,
script를 다운 및 실행하기 때문에 script 뒤에 있는 html 인식 못함

2.2. `body` 태그 안에 사용하는 경우

body 태그 안에서 마지막에 작성하면 html 요소를 모두 인식하여 적용
( 오류가 생기지 않으므로 과거에 가장 일반적인 사용 방법이었다.)

2.3. `async` 속성

script과 html을 같이 다운하고, script실행할 때 html 다운 멈춤
단점 : script 파일 중 먼저 다운이 되는 것이 있다면 실행이 되면서, 뒤에 다운되는 script 가 제대로 작동하지 않을 수도 있다
html 요소를 조작하지 않을 때 많이 사용
- 개발자 도구에서 확인 가능한 DOMContentLoaded 시간이 극적으로 줄어듦 (defer는 줄지 않음)

ex)
<script src="./js_file/script.js" async></script>

2.4. `defer` 속성

html 과 script를 동시에 다운하고,
html 다운로드가 끝난 후 script 를 작성된 순서대로 실행함
defer를 사용할 땐, head 안에 작성하는 것이 옳다
가장 많이 사용하게 될 것

ex)
<script src="./js_file/script.js" defer></script>

2.5. 콘솔 창 사용

웹 브라우저 개발자 도구에 있는 콘솔 창을 이용하는 방법
콘솔 창에 직접 JavaScript 코드 작성
입력한 코드의 유의미한 출력값이 있으면 출력값을 정상적으로 보여주지만
무의미한 출력 값이 있을 땐 undefined이 출력 됨

※ “lodast.js" 사이트에서 용량이 큰 자바스크립트 코드 가져올 수 있음

2.6. code runner 익스텐션 사용

자바스크립트 파일을 열어 익스텐션 사용 가능
우측 상단 재생 버튼 눌러서 출력 값 확인 가능
만능은 아니므로 공부하는 과정에서만 사용할 것

3. 주석

주석은 개발 단계에서 많이 사용하는 것이 좋지만,
배포 단계에서는 꼭 일괄 삭제해줘야 예민한 정보 유출이 되지 않음

3.1. `//` 한 줄 주석

3.2. `/* */` 여러 줄 주석

< 01. 변수 >

1. 변수

"키워드" "식별자(변수명)" = "값(데이터)"
- 식별자 공간에 값을 집어 넣는 것

1.1. 키워드

특별한 목적을 가지고 설계 된 예약 단어
키워드는 식별자로 사용할 수 없음

`var`

변수를 선언할 때 사용
변수명은 한글도 가능하나, 비추천
같은 식별자에 대한 다른 값을 적용하면 마지막에 작성된 값이 적용됨
이것은 큰 문제이므로, let 과 const가 개발됨
실무에서는 더 이상 var 사용 안 함!!

ex)
var level = 99;
var level = 200;
console.log(level); // 200 출력

var level = 99;
level = 200;
console.log(level); // 200 출력

`let`

ES6에서 2015년도에 추가
var 와 기본적인 의미는 동일
식별자 중복 사용이 안 되고, 재할당은 가능
이미 선언되어 사용되고 있는 식별자는 중복 사용 못하게 하며 오류로 표시

ex)
let level = 99;
let level = 200;
console.log(level); // 오류!

let level = 99;
level = 200;
console.log(level); // 200 출력 (재할당) → const 등장 이유

`const`

ES6에서 2015년도에 추가
식별자 중복 사용도 안 되고, 재할당도 안 됨
반드시 선언과 할당을 같이 하는 초기화를 해줘야 함
할당된 값을 다른 것과 배열하는 것은 가능, 값을 바꾸는 게 불가능

ex)
const level = 99;
const level = 300;
console.log(level); // 오류! 식별자 중복 사용 불가

const level = 99;
level = 300;
console.log(level); // 오류! 재할당 불가

const level;
level = 300;
console.log(level); // 오류! 선언과 할당의 분리 불가

1.2. 식별자

1.3. 연산자

1.4. 선언

1.5. 할당

1.6. 초기화

1.7. 상수

변하지 않는 수라는 뜻이지만, 재할당이 불가능한 수라고 생각하는 것이 좋다

2. 식별자 명명 규칙

2.1. `강제적 규칙` 키워드는 사용할 수 없다.

< 02. 자료형 >

1. 기본 자료형

1.1. `문자`

큰 따옴표 " " 또는 작은 따옴표 ' ' 로 둘러 쌓여진 값
“a”; ‘a’;

예시

ex) const str = “Hello, World“;  
ex) const str2 = ‘Sucoding’;  
ex) const str3 = “안녕”;

문자열에 큰 따옴표나 작은 따옴표가 포함된 경우, 에러가 발생함
```
ex) const str = “문자열은 큰따옴표(”)로 감싸면 됩니다.“;
```
큰(작은) 따옴표가 문자열로 포함되어 있으면, 작은(큰) 따옴표로 시작하면 됨
```
ex) const str = ’문자열은 큰따옴표(”)로 감싸면 됩니다.‘;
```
문자열에 큰 따옴표와 작은 따옴표가 모두 포함된 경우

똑같은 문자 앞에 역슬래시()를 넣으면 됨, 익스케이프 문자

ex) const str = “문자열은 큰따옴표(\”)로 감싸면 됩니다.“;

1.1.1. `템플릿 문자열` (ES6에서 새롭게 추가된 문자열)

백틱 (`)
문자 안에서 표현식을 사용할 수 있음

ex 1) 
const str = `10 + 20 = 30`

ex 2) 
const str = `123154654 + 132154549 = ${123154654 + 132154549}`;
// ${} 안의 계산 값도 같이 나오게 됨

ex 3) 
const uname = ’sucoding’;
const str = `안녕하세요. ${uname}입니다.`;
console.log(str)
// 안녕하세요. sucoding입니다. 라고 출력됨

1.1.2. `문자열 연결 연산자 (+)`

const combineStr = “A“ + “B“;
console.log(combineStr);
// AB로 출력됨

1.2. `숫자 : 일반적인 수 (양수, 0, 음수, 지수, 16진수)`

  ex) const num1 = 0;  
  ex) const num2 = 10;  
  ex) const num3 = -10;  
  ex) const num4 = 0xff; // 16진수  
  ex) const num5 = 1.5e3 // 지수
  // 출력은 10진수로 나옴

1.3. `논리형`

참과 거짓을 표현하는 데이터
true, false

ex) const bool1 = true;  
ex) const bool2 = false;  
ex) const bool3 = 10 > 0; // true로 결과값이 출력됨  
ex) const bool4 = 10 < 0; // false로 결과값이 출력됨

0.1 + 0.2 = 0.30000000000004가 나오는 이유는
자바스크립트가 부동소수점 방식으로 숫자를 계산하기 때문
0과 1만 입력할 수 있는 컴퓨터로 숫자들을 표현하다 보니 발생하는 현상,
고질적인 문제
console.log((0.110+0.210)/10);
10진수로 만든 다음 10으로 다시 나누면 0.3 출력됨

1.4. `undefined`

정의되지 않음
우리가 임의로 undefined를 변수값에 넣는 일은 없음
자바스크립트 엔진이 값이 할당되어있지 않은 비워져 있는 공간에 대해 undefined를 출력함

ex) 
const und = undefined;      
console.log(und); 
// undefined가 출력됨 (문자열 아님 출력값임)
//오류로 판단, 메모리 공간을 차지 안함

1.5. `null`

의도적으로 값을 비워둘 때 사용

ex) 
const nul = null;      
console.log(nul); // 오류가 아님, 메모리 공간을 차지 안함

1.6. `symbol` (ES6에서 추가됨)

함수처럼 데이터를 정의함.
절대로 중복되지 않는 유니크한 값을 만들 때 사용

ex) 
const sym1 = Symbol(“unique key“)      
console.log(sym1); 
// Symbol(unique key)로 출력, 실무에서 잘 사용 안 함

2. 참조 자료형

2.1. `배열`

데이터의 집합 (복수의 데이터를 정의할 때)

ex) const arr = []; // 빈 배열  
ex) const arr2 = [10]; // 숫자형 배열  
ex) 
const arr3 = [10, “A“, true, undefined, null]; 
// 복합형 배열, 맨 앞에서부터 0 ~ 자릿수 index를 가짐      
console.log(arr3[0]); // 10 출력      
console.log(arr3[1]); // A 출력      
console.log(arr3[2]); // true 출력      
//모두 대괄호 연산자  
ex) const score = [90, 70, 80, 60];      
// 각각 국어, 영어, 수학, 과학의 점수를 가지고 있다고 할 때 주석이 없는 한, 
// 특정 요소에 대한 식별자가 부족함(이것을 보완하기 위한 것이 객체)

2.2. `객체`

키와 값으로 구성된 속성의 집합
키는 항상 문자열이어야 한다.

ex) const scoreObj = { 키: 값, 키: 값, 키: 값, 키: 값 };  
ex) 
const scoreObj = { korea: 90, english: 70, math: 80, science: 60 };  
console.log(scoreObj [“korea“]); // 대괄호 연산자      
console.log(scoreObj.korea); // 마침표 연산자      
// 두 개 모두 90이 출력

2.3. `함수`

3. 형 변환

하나의 자료형을 다른 자료형으로 바꾸는 것

3.1. 암시적 형변환

개발자의 의도 없이 자동으로 자바스크립트 엔진이 필요에 의해서
데이터의 자료형을 변경하는 것

- ex) const obj = { 0: “A“, 1: “B“, 2: “C“ }; 
// 여기서 key가 숫자이지만 문자열로 자동 변경됨

3.2. 명시적 형변환

4. 자료형 구분 이유

깊은 복사 : 기본 자료형

ex) 
let a = 10    
let b = a    
a = 20    
console.log(a, b) 
// 20, 10 출력

얕은 복사 : 참조 자료형

- 값을 복사하는 것이 아니라 값이 있는 위치를 복사하는 것
ex) 
const arr1 = [10]    
const arr2 = arr1;    
arr1.push(20);    
console.log(arr1, arr2); 
// [10, 20], [10, 20] 출력
ex) 
const arr1 = [10];    
const arr2 = [...arr1]; 
// 깊은 복사로 바꿔 줌    
arr1.push(20);    
console.log(arr1, arr2); 
// [10, 20], [10] 출력

< 하루 정리 >

기본 자료형과 참조 자료형의 차이를 구분하는데 약간 헷갈리는 부분이 있어서 금방 금방 이해가 되진 않는다. 
값이 들어가느냐 값의 위치가 들어가냐의 차이로 구분하고 있지만 어렵다.

설문조사 결과가 나온 것 같은데 실력자들이 꽤 많은 것 같다. 
나는 지금도 따라가는게 그닥 쉽지만은 않은데 다들 쉬워서 불만이라니... 
나는 천천히 강사님이 알려주시는 것들 다 흡수해서 더 완벽해질거다...흐엉

팀미팅하면서 팀원들도 실력이 대단하다는 걸 많이 느낀다. 
같이 공부하면서 좋은 점이 훨씬 더 많지만 자꾸 자존감이 내려가는 느낌적인 느낌..? 
(기 죽지 말고 그럴 때마다 독해져서 더 열심히 하자!!)

워니

첫 시작!

이전 포스트

데브코스 05일차 ( 24.10.18 금 ) CSS

다음 포스트

데브코스 06일차 ( 24.10.21 월 ) JavaScript

Programmers Front-end

[Section 01] JavaScript 기초

< 00. 자바스크립트란? >

1. 자바스크립트 코드 작성 방법 / 실행 방법

1.1. 내부 스크립트

1.2. 외부 스크립트

2. 스크립트 작성 위치

2.1. head 태그 안에 사용하는 경우

2.2. body 태그 안에 사용하는 경우

2.3. async 속성

2.4. defer 속성

2.5. 콘솔 창 사용

2.6. code runner 익스텐션 사용

3. 주석

3.1. // 한 줄 주석

3.2. /* */ 여러 줄 주석

< 01. 변수 >

1. 변수

1.1. 키워드

var

let

const

1.2. 식별자

1.3. 연산자

1.4. 선언

1.5. 할당

1.6. 초기화

1.7. 상수

2. 식별자 명명 규칙

2.1. 강제적 규칙 키워드는 사용할 수 없다.

< 02. 자료형 >

1. 기본 자료형

1.1. 문자

1.1.1. 템플릿 문자열 (ES6에서 새롭게 추가된 문자열)

1.1.2. 문자열 연결 연산자 (+)

1.2. 숫자 : 일반적인 수 (양수, 0, 음수, 지수, 16진수)

1.3. 논리형

1.4. undefined

1.5. null

1.6. symbol (ES6에서 추가됨)

2. 참조 자료형

2.1. 배열

2.2. 객체

2.3. 함수

3. 형 변환

3.1. 암시적 형변환

3.2. 명시적 형변환

4. 자료형 구분 이유

< 하루 정리 >

데브코스 05일차 ( 24.10.18 금 ) CSS

데브코스 07일차 ( 24.10.22 화 ) JavaScript

0개의 댓글

2.1. `head` 태그 안에 사용하는 경우

2.2. `body` 태그 안에 사용하는 경우

2.3. `async` 속성

2.4. `defer` 속성

3.1. `//` 한 줄 주석

3.2. `/* */` 여러 줄 주석

`var`

`let`

`const`

2.1. `강제적 규칙` 키워드는 사용할 수 없다.

1.1. `문자`

1.1.1. `템플릿 문자열` (ES6에서 새롭게 추가된 문자열)

1.1.2. `문자열 연결 연산자 (+)`

1.2. `숫자 : 일반적인 수 (양수, 0, 음수, 지수, 16진수)`

1.3. `논리형`

1.4. `undefined`

1.5. `null`

1.6. `symbol` (ES6에서 추가됨)

2.1. `배열`

2.2. `객체`

2.3. `함수`