My Profile Photo

DongChanS's blog

수학과 학생의 개발일지

자바스크립트 (1) - 자바스크립트란?

1) JavaScript

1-1. 자바스크립트를 왜 쓰는가?

요즘 추구하는 웹사이트의 특성 : seamless

=> 서비스들의 연결부위가 보이지 않게끔 하는 -> 매끄러운 유저경험을 만들어주는 앱

이것을 위해서는 반드시 자바스크립트를 익혀야함.

1-2. 자바스크립트는 이상하다

  1. 자바스크립트는 공식문서가 있을 수 없다.

    • 버전이 통일되어 있지 않기 때문, 자바스크립트를 정확히 관리하는 주체가 없다.
    • 주체가 없다면?
      1. 예전 코드가 돌아갈 수 있도록 업데이트하는게 매우 중요함.
      2. backward-compatability가 중요하기 때문에 파이썬 2에서 파이썬 3으로 넘어가듯이 엄청난 변화를 일으키는게 힘들기 때문에 지저분한 기능들이 많음.

  2. 자바스크립트의 역사

    • 자바스크립트는 Netscape Browser로부터 시작함.

      => 그 안에서 브라우저를 조작할 수 있도록 하는 언어를 만들었음.

    • 1차 브라우저 전쟁 : 마소가 IE가 내장된 Window OS를 공짜로 풀어버리면서 웹브라우저의 암흑기가 생김

    • Chrome의 등장

      크롬이 점유율이 높아지면서 자바스크립트를 표준화시키고자하는 움직임이 시작됨.

  3. 자바스크립트의 여러 표현체(엔진)가 있음 (기본적으로 브라우저를 기반으로 만들어짐.)

    엔진은 컴파일러라고 생각하면 됨

    1. 크롬 : V8
    2. Firefox : SpiderMonkey
    3. Safari(애플) : JavaScriptCore
    4. IE, edge(마소) : Chakra

  4. 지금은 ECMA가 자바스크립트의 표준을 관리함.

    => ECMA에서 브라우저를 조작할 수 있도록 자바스크립트의 표준 규약을 만드는데,

    요즘에는 크롬 V8엔진이 이러한 표준을 잘 제안하고, 여러 브라우저에서 돌아갈 수 있도록 안정화되어 있기 때문에 표준을 잘 따른다고 보면 됨.

1-3. 자바스크립트란?

  • 프로그래밍 언어 : 컴퓨터를 조작하기 위한 언어

    컴퓨터 : 저장과 연산을 잘하는 도구

  • 자바스크립트 : 컴퓨터의 아주 일부분인 브라우저를 조작하기 위한 언어

    브라우저 : 서버가 전달한 HTML로 만들어진 문서를 잘 표현해주기 위한 프로그램들.

2) JavaScript 실습

2-1. Console에서 실행해보기

  1. 이제는 Chrome 베이스로 자바스크립트를 생각해도 웬만한 것은 커버가 됨.

  2. 자바스크립트는 브라우저를 조작하는 언어이다.

    1. 기본값으로 웹사이트를 window라는 변수로 지칭함.

    2. 자바스크립트 : 강력한 객체지향 언어

      window라는 변수의 정보와 메서드를 가져와서 조작할 수 있다.

      ex)

      window.print() // 인쇄창을 띄워줌
window.innerWidth // 실제로 가로축 길이

      => 브라우저를 객체화시켜서 조작하므로 BOM(Browser object model) 이라고도 불림.

    3. 물론 브라우저는 HTML문서를 잘 표현해주는 프로그램이기때문에,

      브라우저 정보에는 HTML문서도 있고, window객체를 통해 조작할 수 있다.

      window.document.title // title 태그의 내용을 가져옴.
"JavaScript 안내서 - JavaScript | MDN"
      
window.document.title = "이제 곧 점심시간"  // 실제로 바뀜.

      => HTML문서를 객체화시키므로 DOM(Document object model) 이라고도 불림.

2-2. Local에서 실행해보기

  1. 로컬에서 자바스크립트를 실행 하려면?

    => Node라는 것을 통해서 동작시켜야한다는데.. 브라우저를 조작하기 위한 자바스크립트 문법과 크게 다르지 않다.

    일단 실행은 둘째치고 작성하는법은 매우 간단하다.

    <script>
    alert('이제 JS 공부 시작!')
    console.log('이건 콘솔로그')
</script>

    console.log라고 하면 실제로 브라우저 콘솔에 보여진다.

    2

  2. 물론 HTML에 쓰는것도 가능하다!

    <script>
    document.write('<h1>아몰랑</h1>')
    document.write('아몰랑')
</script>

    3

    html파서는 HTML파일을 보다가 script 태그가 있으면 script를 실행해서 DOM을 변화시키거나 어떤 실행 결과를 보여준다.

2-3. HTML 문서 조작해보기

  1. document.write

    실제로 HTML에 해당하는 문자열을 작성함.

  2. document.querySelector(HTML 태그의 이름)

    <script>
    document.write('<h1>아몰랑</h1>')
    document.write('<p>아몰랑</p>')
    ptag = document.querySelector('p')    
    console.log(ptag)
    ptag.innerText = '몰랑몰랑'
</script>

    4

    신기하다! 왜 몰랑몰랑이라고 바꾸기 전에 프린트를 시도했는데 몰랑몰랑이라고 프린트가 될까?

    아무튼 document.querySelector는 해당하는 태그를 선택하고, innerText를 통해 태그 안쪽의 텍스트를 바꿀 수 있다.

3) 자바스크립트의 기본 문법

프로그래밍 언어에 대해서 알기 위해서는 이것들을 아는게 중요하다.

  1. 저장
    • 무엇을(Data Type), 어디에(자료구조), 어떻게(=)
  2. 조작
    • 조건
    • 반복

3-1. 무엇을 : Data Types

  1. Primitive types

    • string, number, boolean, null, undefined, symbol(이건 안다룰거임)

      ex) String

      const lastName = "Kim";
const firstName = "Youngrim";
const fullName = firstName + lastName
let introduction = `안녕하세요 저는 ${fullName} 입니다.`
//
console.log(introduction)
>> 안녕하세요 저는 YoungrimKim 입니다.

    • typeof로 볼 수 있다. null 타입은 예전에 없었기때문에 이상한 예외도 있다.

      console.log(typeof(undefined))
>> object

    • 하지만 자바스크립트는 상당히 일관적인 편이다!

      파이썬에서는 원시 자료형과 사용자 정의 자료형(리스트, tuple, string…)들이 일관적이지 않는데,

      자바스크립트에는 원시 자료형은 전부 immutable, 사용자 정의 자료형(object)는 전부 mutable이다!

  2. 사용자 정의 자료형(Object)

    • Object, Array, Function

      이런것들 전부 다 Object이다!

    • 자바스크립트에서는 Primitive types을 제외하고는 전부 Object이다!

3-2. 어디에

  1. 변수

    3-2-1. 변수의 scope

    기본적으로 ptag = document.querySelector(‘p’) 라고 썼는데 이건 별로 추천하지 않는다.

    왜냐하면 이렇게 선언된 ptag라는 변수는 global scope를 가지기 때문이다.

    1. var : functional scope

      var ptag = document.querySelector('p')

      예시 ) var의 문제점

      6

      var이라는 선언자로 변수를 선언하게 되면, for문이 끝나고도 i라는 변수가 살아있게됨.

      => var은 block scope가 아니기 때문에 for문 block이 끝나도 변수가 남아있어서 혼란을 일으킬 수 있다.

    2. const, let : block scope

      • const : 다시 설정이 필요하지 않을 때(재사용 용이하게끔)

      • let : 다시 설정이 필요할 때

        5

        let은 var과는 달리 for문이 끝나면 변수가 사라지게 된다.

        7

  2. 배열(Array)

    • 자바스크립트의 메서드는 destructive하다!

    8

    ​ reverse() 라는 메서드가 그대로 names라는 배열 원본 그자체를 바꿔줌.

    • 그 외에도 push, pop, shift(맨 왼쪽꺼를 꺼냄), unshift(맨 왼쪽에 집어넣음)이라는 메서드도 있음.
    • 자바스크립트는 파이썬과 달리 join을 리스트의 메서드로 지원한다.

  3. Object : 파이썬의 딕셔너리와 유사함.

    9

    특이하게도, Object의 key값을 변수같이 써도 자바스크립트에서는 허용이 된다.

    JSON(javascript object notation) 파일도 이름 그대로 Object와 유사하기 때문에 json parser가 이런 json파일을 object로 잘 바꿔준다.

    역시 객체는 mutable이기 때문에 새롭게 key-value값을 집어넣을 수 있다!

3-3. 반복

파이썬처럼 iterator를 통해서 반복해서 원소들을 가져오는 기능은 없다고 함. 그냥 if랑 while

  1. For

  2. While

    10

    이렇게 while문을 쓰면 당연히 무한루프가 되는데, 이 while문이 도는 동안에는 아무런 행동도 하지 못한다.

    왜냐하면 자바스크립트는 synchronous하게 작동하기 때문이다.

    => 만약 HTML페이지에 이런 이상한 코드를 적은 페이지를 고객에게 보여준다면, 고객의 사이트를 마비시킬 수 있는데, 이것을 막기 위해서 asynchronous한 자바스크립트가 개발되어있다고 한다.

3-4. 조건

if, else, else if 문으로 할 수 있다.

if (age > 30) {
	console.log("아재네");
} else if (age > 20) {
	console.log("어리네");
} else {
	console.log("매우 어리네");
}

이런 if문에는 세미콜론은 넣어도 되고 안넣어도 되지만, 파서들이 세미콜론을 기준으로 파싱하는 경우가 많기 때문에 세미콜론을 넣는 습관을 들이는게 좋다.

3-5. 함수

함수라는 것도 뭐 특별한게 아니라, 그냥 어딘가에 저장되어있는 값(혹은 자료형)이라고 생각하면 된다.

=> 변수에 넣어서 사용가능함.

  1. 정식으로 호출하기

    function sum(a, b) {
	return a + b 
}

    이상하게도 한줄로 리턴할때는 세미콜론을 쓰지 않는게 관례라고 함.

  2. 익명함수를 만들어서 어느 변수에 넣어서 사용.

    const sum = function(a, b) {
    return a + b
}

  3. Conventions

    • 함수를 변수로 만들어서 사용하는것을 권장함.
    • 변수이름은 camelCase를 선호함. (클래스를 만들때는 PascalCase를 쓰는게 좋음.)
comments powered by Disqus