[인프런] Javascript 입문 - 개발 환경 구축, 자바스크립트는 무엇을 할 수 있나?, 자료형

* 이 글은 인프런에서 제공하는 호눅스님의 유료 강의 '쉽고 자연스럽게 배워보는 Javascript 입문 - 코드스쿼드 마스터즈 코스 레벨1'를 듣고 공부하며 정리한 글입니다. 강의 내용에 더해, 제가 필기하고 구글링한 내용이 정리되어 있습니다. 초보인 제가 이해한 대로 정리했기 때문에, 부정확한 내용이 있을 수 있음을 감안해 주시길 바랍니다. 강의를 듣고 내용을 정리한 글이기 때문에 문제가 되지 않는다는 인프런 측 답변을 받은 적이 있으나(https://bibi6666667.tistory.com/37), 저작권상 문제가 된다면 보호 모드(비공개)로 전환하겠습니다.

 

 

---

1

개발 환경 구축

• 자바스크립트의 개발환경
  • 웹 브라우저와 텍스트 에디터만 있으면 개발이 가능.
  • 추천하는 환경
  • OS (윈도우/맥/리눅스) 에디터(visual studio code) 웹브라우저(크롬) git GUI(SourceTree - github Desktop과 비슷)
• hello world 출력하기
  • 'about:blank' - 개발자 도구 - console - console.log('hello, world!')
• github 가입, 새 프로젝트 저장소(repository) 만들기
  • 만든 repository를 SourceTree를 이용해 clone 해 오기 (웹->로컬)
  • 나는 onedrive-문서-learningJavascript!
• Hello, world 출력하기
  • console.log('Hello,world!');
  • console 에 log를 남겨라.
  • . 은 '-하라' 또는 '-의' 라는 뜻.
• github에 올리기(SourceTree활용)

자바스크립트로 무엇을 할 수 있나?

= 자바스크립트는 HTML을 '동적으로' 제어할 수 있다.

• : 문서 유형=html이다.

• 요소element : 태그와 같은 것들?

• 태그tag : 여는 태그<> 와 닫는 태그</>. html의 기본 문법
  ※ 한글이 깨질 때 : head에 를 추가한다.

• ; : 명령이 끝났음을 알리는 부호. 명령 끝에 반드시 붙인다.

• 예를 들어..

  • html파일 내의 글씨 내용/색깔/배경색깔/크기.. 를 바꿀 수 있다.
  • 가만히 있는 웹페이지 화면을 움직이게 할 수 있다.

자료형

자바스크립트 문법 1 - 자료형.

• 자료형 Data type (데이터 유형) 이란?

  • 어떤 종류의 데이터를 사용하는 것인지 컴퓨터에게 알려줌.
  • 각 자료형마다 사용 가능한 연산자Operator가 따로 있음.
  • 자료형이 같아야 연산이 가능하다.. 숫자는 숫자끼리, 문자열은 문자열끼리.

• 자료형의 종류 - 일단 이런 게 있다는 걸 알아만 둬라.

  1. Number : 숫자
  2. String : 문자열(하나 이상의 문자들)
  3. Boolean : 참/거짓(논리연산자)
  4. Null : 비어있다 (<-> Not Null : 비어있지 않다)
  5. Undefined : 정의되지 않았다
  6. Object 객체 : 위의 5가지 외에 나머지는 모두 object에 해당.
  • 지금은 number, string, boolean만 알아볼 것. 나머지는 나중에!

※ NaN : Not a Number 숫자가 아니다.
※ typeof 연산자
: 자료형을 알려주는 중요한 연산자.

• typeof 5; -> 'number'
• typeof '123'; -> 'string'

1. Number type 숫자
   • 자바스크립트에서는 정수(INTeger), 실수(float / double) 모두 number타입으로 취급한다.
   • 숫자의 연산자 : 사칙연산 + - * / , 괄호( ), 나머지 % ...
2. String 문자열
   • 따옴표로 묶으면 문자열로 취급한다.
   • 문자열도 더하기가 된다. (더하기만 된다)
   • 숫자와 문자열을 더하는 연산에서는 모든 숫자를 문자열로 취급한다.
   • 5 + '4'; -> '54'
   • 숫자와 문자열을 곱하는 연산에서는 반대로 모든 문자열을 숫자로 취급한다. (단, 문자가 '숫자'이면)
   • 5 * '4'; -> 20
   • 5 * 'hello'; -> NaN
   • 문자열은 "Immutable"(불변)의 특징을 가진다 -> 일단 알아만 두기.
3. Boolean 불리언 (true / false)
   • 조건식 등에서 참이면 true, 거짓이면 false를 반환함.
   • 5 > 3 ; -> true
   • 5 == 3 ; -> false
   • 5 > 5 ; -> false
   • 논리연산자 : boolean에 사용할 수 있는 연산자.
   • && : = and(그리고). 둘 다 true(참) 일 때 true를 반환.
   • || : = or(또는). 둘 중 하나라도 true(참) 일 때 true를 반환.
   • ! : = not(아닌). true (또는 true인 값) 앞에 붙이면 false를, false (또는 false인 값) 앞에 붙이면 true를 반환.
   • ※ 자바스크립트 연산자
     • + - * / : 사칙연산 (더하기 빼기 곱하기 나누기)

     • % : 나머지 구하기.

     • === (= 3개) : 같다.

     • != : 같지 않다.

     • : ~보다 크다.

     • < : ~보다 작다.

     • = : 크거나 같다.

     • <= : 작거나 같다.

 

※ 자바스크립트 =, ==, === 비교 (구글링)

• = : 값value을 정의함. (좌항을 우항으로 정의함)
  • number = 3
  • number; -> 3
• == : equality (동등 연산자).
  • 좌항과 우항을 동등한 조건에서 비교함. 서로 다른 자료형을 비교하면 강제 형변환이 이루어짐.
• === : identity (일치 연산자).
  • 좌항과 우항이 정확히 일치하는지를 판단함. 강제 형변환이 이루어지지 않아 더 정확한 비교 가능.
    예를 들어..
• 5 == '5' -> true
  • 양변을 동등한 조건에서 비교하기 위해, 한 자료형은 강제로 형변환됨. 즉 5 == 5 (또는 '5'=='5') 이므로 true를 반환.
• 5 === '5' -> false
  • 양변이 일치하는지 비교하기 때문에, 5와 '5'는 다르므로 false를 반환.

*** 마크다운으로 필기했더니 부호들 때문에 내용이 깨진다ㅠ 그냥 다음에는 기본모드로 적어야겠다.