본문 바로가기
JavaScript

모던 자바스크립트 튜토리얼 읽으면서 - 자바스크립트 기본 (1)

by 정ㅇr 2021. 11. 6.
728x90

시간이 날 때마다 정독하면서 알고 싶은 개념들이나 중요하다고 생각하는 것들을 적어갈 예정


20211106 (토)

1. 소개

Http

트랜스파일 -> TypeScript (Microsoft 개발)

자바스크립트에서 가장 많이 사용하는 통합개발환경은 웹스톰이나 VSCode

웹 개발자 도구 단축키

- 윈도우 : F12

- 맥 : cmd+opt+J

lalala is not defined : lalala가 정의되지 않았다.

밑에 있는 > 이 부분은 커맨드 라인(command line)이라고 부르며, 자바스크립트 명령어를 입력할 수 있다.

엔터를 누르면 실행되고, 여러줄을 입력하고 싶다면 shift+enter를 통해서 작성할 수 있다.

 

2. 자바스크립트 기본

1) Hello, World!

- <script> 태그를 이용하면 자바스크립트 프로그램을 HTML에 삽입할 수 있다.

- HTML4일 때는<script type="text/javascript"> 이런 식으로 타입을 명시해서 작성했었으나, 모던 HTML 표준이 HTML5로 변경되면서 더 이상 쓰지 않게 되었다.

- 외부 스크립트 : 자바스크립트 코드의 양이 많을 경우 파일을 참조하거나, URL을 넣는 경우도 있음

 <script src="/path/to/script.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>

- 자바스크립트 코드 양이 많은 경우에는 별도로 분리된 파일로 작성하는 것이 좋다. 왜냐하면, 브라우저가 스크립트를 다운 받아 캐시(cache)에 저장하기 때문에, 성능 상의 이점이 있기 때문이다.

- 또한, 여러 페이지에서 동일한 스크립트를 사용하는 경우, 브라우저는 페이지가 바뀔 때마다 이 파일을 다운로드하지 않고 캐시로부터 스크립트를 가져와서 사용한다.

- 캐시(cache) : 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다.

- <script> 태그에 src 속성이 있으면 태그 사이에 있는 코드는 무시된다.

 

2) 코드 구조

- 줄 바꿈이 있으면 세미콜론을 생략할 수 있지만, 되도록이면 문(statement)이 끝나고 나서는 세미콜론을 꼭 붙여주는게 좋다.

- 주석을 많이 쓴다고 해서 최종적으로 배포되는 코드에 영향을 끼치지 않는데, 이는 서버 배포 전에 코드를 압축해주는 도구가 주석을 삭제해주기 때문이다.

- 엄격모드와 비엄격모드?

 

3) 변수

- 변수 : 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소', 자바스크립트에선 let 키워드를 통해 변수를 생성한다.

변수를 선언하는 다양한 방식

// 1
let user = 'John';
let age = 25;
let message = 'Hello';

// 2
let user = 'John',
 age = 25,
 message = 'Hello';

// 3 쉼표가 먼저 오는 방식
let user = 'John'
 , age = 25
 , message = 'Hello';

- 참고로 함수형 프로그래밍은 변수값 변경을 금지한다.

- 변수 명명 규칙

1. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.

2. 여러 단어를 조합해서 변수명을 만들 땐 카멜 표기법(camelCase)가 흔히 사용된다.

3. 변수명이 숫자로 시작할 수 없다.

4. 변수명은 대소문자 구별이 된다.

5. 예약어 목록에 있는 단어는 변수명으로 사용될 수 없다. (let, class, return, function 등)

 

4) 상수

- 상수 : 변화하지 않는 변수, const를 사용해서 선언한다. 상수는 재할당할 수 없으므로, 변경할 수 없다.

- 일반적으로 기억하기 힘든 값을 변수에 할당해 별칭으로 사용한다.

- 대문자 상수 : 하드 코딩한 값들의 별칭을 만들 때 사용한다.

예시)

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// 색상을 고르고 싶을 때 별칭을 사용할 수 있게 되었습니다.
let color = COLOR_ORANGE;
alert(color); // #FF7F00

- 바람직한 변수명

1. 변수명은 간결하고 명확해야 한다.

2. 사람이 읽을 수 있는 이름을 사용해야 한다. ex) userName, shoppingCart 등

3. 최대한 서술적이고 간결하게 명명해야 한다.

4. 자신만의 규칙이나 소속된 팀의 규칙을 따르는게 좋다.

 

5) 자료형

- 자바스크립트에는 8가지 기본 자료형이 존재한다.

- 자바스크립트의 변수는 자료형에 관계없이 값을 변경할 수 있다.

- 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 동적 타입(dynamically typed) 언어라고 부른다.

 

6) 숫자형

- 숫자형(number type) : 정수 및 부동소수점 숫자 (floating point number)를 말한다.

- 숫자형과 관련된 연산은 곱셈, 나눗셈, 덧셈, 뺄셈 등이 대표적이다.

- 특수 숫자 값 (special numeric value) : Infinity (무한대), -Infinity, NaN 이 포함된다.

// 어느 숫자든 0으로 나누면 무한대를 얻을 수 있음
alert( 1 / 0 ); // 무한대

// NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이며, 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 이 에러가 발생하게 된다.
alert( "숫자가 아님" / 2 ); // NaN, 문자열을 숫자로 나누면 오류가 발생합니다.
alert( "숫자가 아님" / 2 + 5 ); // NaN

 

<참고 사이트>

https://ko.javascript.info/ 

 

모던 JavaScript 튜토리얼

 

ko.javascript.info

캐시(cache) : https://mangkyu.tistory.com/69

 

[Server] Cache(캐시)란?

1. 캐시(Cache)란? [ Cache ] Cache란 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 가리킨다. 아래와 같은 저장공간 계층 구조에서 확인할 수 있듯이, 캐시는 저장 공간이 작고 비용이

mangkyu.tistory.com

 

반응형

댓글