0026. JavaScript 공부하기 1 - 크롬 개발자 도구, 콘솔, 숫자와 문자, 변수 (Feat. 생활코딩)

지난 시간까지 React를 배웠다.

그런데 다 배우고 나서 에러를 잡다가 느끼는 것은 역설적이게도 '자바스크립트를 배워야겠다'는 것이었다. 그래서 일단 오류를 잡는 것을 뒤로하고 JS 강의를 듣기로 했다.

 

이번에도 인프런에서 강의를 듣는데,

생활코딩 - 자바스크립트(JavaScript) 기본 강의이다. 

https://www.inflearn.com/course/%EC%A7%80%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%96%B8%EC%96%B4-%EA%B8%B0%EB%B3%B8/dashboard

[지금 무료] 생활코딩 - 자바스크립트(JavaScript) 기본 강의 - 인프런

 

섹션 0. 오리엔테이션

1강. JavaScript 언어소개

 

웹브라우저

웹브라우저를 만들기 위해서는 JavaScript를 배우는 게 맞다

홈페이지를 구축하고 동작을 제어하는 것은 JavaScript가 유일하기 때문에 반드시 배워야 하는 언어이다.

 

탈웹브라우저

JS가 웹브라우저 이외에도 쓸 수 있는 것이 많아졌다.

웹서버 동작 : Node.js

JS : 웹브라우저를 제어하기 위한 언어

단순히 웹브라우저를 컨트롤하기만 하는 것이 아니라 그 밖에 많은 행동들이 가능하다

 

언어 : 의사소통을 위한 약속

환경 : 탈 웹 등, 언어를 사용하는 대상, JS가 작동하는 환경

 

개발자가 된다는 것 : 코드를 통해서 여러 제품들을 제어하는 것. 그로 인해 나의 소프트웨어를 만드는 것. 그로 인해 최종 사용자가 사용하게 되는 것.

 

 

섹션 1. JavaScript 기본 - 실행 방법과 실습 환경

1강. 코드 작성과 실행

 

네모친 부분이 JavaScript

JavaScript는 <script> 사이에 있는 것을 말한다.

다만, JS는 웹상에서 보이려면 html 위에서 작동하기 때문에 앞뒤로 html 코드가 있는 것을 알 수 있다.

 

 

2강. 크롬 개발자 도구 - 콘솔 사용법

F12를 눌러서 개발자도구 탭을 연다.

그리고 Console의 아랫 부분에 JS code를 바로 쓰면 코딩이 되어 실행까지 된다.

Hello world를 쓰니까 이제야 개발을 배우는 느낌이 난다.

 

짧은 코드는 이렇게 바로 작성하고, 긴 코드는 파일로 작성해서 붙여 넣는 것이 편하다.

 

<참고. 크롬 개발자도구 자세한 내용>

https://opentutorials.org/course/580

크롬 개발자도구 - 생활코딩

 

 

코드를 console.log로 수정하고 다시 실행하면

 

 

Console 창에 써진다.

 

 

우측의 sample.html:8 이라고 쓰여 있는 것을 누르면 저 기능이 어떤 줄에서 기술되어 있는지를 잠깐 노란색으로 보여 준다. 오류를 찾을 때도 동일하게 클릭하면 어디서 오류가 났는지 알 수 있다.

 

 

3강. 도구의 선택

Code editor

Integrated Development Environment, IDE 통합개발도구

 

생활코딩에서는 SublimeText를 사용한다.

<추가. Sublime Text>

https://opentutorials.org/module/406/3595

Sublime Text 소개 - Sublime Text 2

 

 

도구에 대해서

프로그래밍에서 도구는 매우 중요하다.

좋은 개발 도구를 선택하는 것은 좋은 코드를 쓰는 것보다 더 중요할 수 있다.

생산성이 좋은 도구들은 높은 생산성을 위해 복잡하게 설계되어 있으므로 충분한 시간과 여유가 필요하다.

 

 

4강. 주석(Comment)

// 를 사용하면 JS에서는 코드로 인식하지 않는다. 그래서 문법적으로 해석되지 않는다.

잘 만들어진 코드는 좋은 주석을 갖고 있는 것이다.

좋은 주석이라는 것은 적합하고 적당한 길이에 쓰여 있는 것.

미래에 타인이 되어있을 자기자신을 위해, 타인을 위해 주석을 사용

줄바꿈을 하기 전까지가 //의 적용 범위이다.

 

하지만, 정말 좋은 코드는 주석조차 필요 없을 정도로 이해하기 쉽게 쓰인 코드이다.

 

여러 줄의 주석을 남기고 싶다면, /* */를 사용하면 된다.

 

 

5강. 줄바꿈과 여백

세미콜론(;) : 명령이 끝났다는 의미

줄이 바뀌어도 명령이 끝난 것으로 인식

;로 구분하면 같은 줄에서도 몇 개의 명령을 내릴 수 있다.

 

 

var a = 1; 의 코드에서

①var a는 반드시 띄어야 하지만, 그 뒤에 ②a = 1은 띄어도 되고 붙여도 된다.

띄어 쓰는 이유는 가독성 때문이기 때문에 필수는 아닌 것이다.

 

 

 

섹션 2. 숫자와 문자

1강. 수의 표현

숫자와 문자, 지금은 어떻게 연산하는가 정도만 알면 된다.

 

alert, 알림을 보내는 명령어를 쓰면 다음과 같이 나온다.

 

 

개발자도구에서 바로 할 수 있다. 알림창이 뜬다.

 

알림창이 뜨는 것이 귀찮으면 console.log를 쓰면 된다.

 

console.log 없이 쓰기만 해도 된다.

짧은 코드를 빠르게 쓸 때 좋다.

 

 

2강. 수의 연산

Math : 수학과 관련된 명령들

• pow : 제곱
  - 예시 : Math.pow(3,2) = 3² = 9
• round : 반올림
• ceil : 올림
• floor : 내림
• sqrt : 제곱근
• random : 0~1.0 사이의 랜덤 한 숫자

응용하면 다음과 같다.

 

3강. 문자

SyntaxError : 문법 오류

Unexpected token ILLEGAL : 유효하지 않은 문장 발생

 

문자는 반드시 ''나 ""로 사용해야 한다.

escape 예시

 

역슬래쉬(\) : 역슬래쉬 바로 뒤의 문자 하나는 정보로서 해석하는 것

- escape라고 한다.

 

typeof 를 쓰면 뒤에 오는 코드가 문자인지 숫자인지 구분해 준다.

string : 문자열. 문자가 하나만 오지 않을 수도 있기 때문에 열로 구분한다.

 

 

4강. 문자의 연산

여러 줄로 표시하고 싶은 경우 \n 으로 구분하면 된다.

\n : 줄 바꿈

 

 

위는 숫자, 아래는 문자이기 때문에 각각 2와 11로 표시된다.

 

문자열의 길이를 구하려면 "문자열". length를 사용하면 된다.

 

 

섹션 3. 변수

1강. 변수의 사용법

변수, Variable

문자와 숫자를 담는 그릇(Container), 변할 수 있다.

 

변수 선언 : var

 

a : 값을 담는 그릇

그릇에는 여러 종류를 담을 수 있기 때문에 내용물은 바뀔 수 있다.

 

 

프로그래밍에서 변수라는 말을 쓰는 것은 관습적인 것이다.

변수 안에는 숫자, 문자 등 모든 것이 들어갈 수 있다.

 

변수는 숫자, 문자 모두 들어갈 수 있다.

first를 bs's로 치환한 것

 

var를 하나만 쓰고 여러 개를 정의할 수도 있다.

 

 

2강. 변수의 효용

변수를 대체 왜 쓰는가?

변수는 코드의 재활용성을 높여준다.

 

필요에 의해 변할 수 있는 영역과 변하지 않는 부분은 구획으로 나눠서 분류해 놓는 것이 좋다.

- 유지보수의 관점에서 좋은 코드를 쓰려면 잘 구분해야 한다.

 

변수를 사용하면 a만 바꾸면 된다. (출처 : 생활코딩)