관성을 이기는 데이터

객체란 객체는 데이터를 표현하는 도구이면서 현실의 구체적 대상을 추상적으로 묘사하기 위해 사용된다. 코드는 언제나 현실의 추상화 작업을 거치게 되는데, 추상화란 보여주고자 하는 핵심적인 요소 이외의 것들은 모두 은폐하는 것을 말한다. 복잡한 현실세계를 모두 코드로 표현할 수 없을뿐더러 표현했다 하더라도 그것을 읽는 것은 불가능하다. 따라서 추상화가 필요하며 이때 가장 핵심적인 것들을 객체에 담아 보여준다. 객체의 구성 1. Property 앞에서 객체를 데이터를 표현하는 도구라고 했다. 이는 property라는 형태를 가지고 있기 때문이다. property란, 객체를 통해 접근할 수 있는 key와 그런 key가 가지는 대응하는 값 value가 서로 쌍을 이루는 형태를 말하며 이를 통해 데이터를 불러와 사..

우아한형제들 김민태님의 '자바스크립트 부트캠프(패스트캠퍼스)' 수강 중, 허가를 받고 정리한 내용입니다. 1. 코드 중간중간에 데이터를 넣지 마라. 코드는 읽는 시간이 작성하는 시간보다 훨씬 길다. 따라서 읽고 이해하기 쉽게 데이터는 데이터대로 따로 배치하는 것이 좋다. 그래서 간단한 수식 하나라도 변수를 통해, 네이밍을 해주는 것이 중요하다. 처음 코딩에 입문할 때 변수를 따로 선언해주는 것이 더 복잡하게 느껴지고 코드의 길이도 길어지는 것 같아 의식의 흐름대로 작성하는 경우가 많은데, 그렇게 되면 추후에 수정하거나 변경할 일이 생기면 알아보기도 어려울뿐더러 수정은 더더욱 어렵다. 그러니 변수 선언과 적절한 네이밍은 습관처럼 연습하자. 2. if, switch문을 남발하지 말자. 코드에 대한 정확한 이..

자바스크립트의 문법은 크게 '식'과 '문'으로 나뉜다. 식(expression)은 곧 값을 의미하며 문(statement)은 식을 이루는 방식을 지시, 제어한다. 예를 들어 if(조건문)나 while(반복문)과 같은 문법이 '문'이라면 1+1, 2>1, [a,b,c], function(x,y) 등은 '식'이다. 단, 값의 이동은 '문'이다. var a = 1과 같은 대입 연산을 말한다. 여기서 또 하나의 특징은 값이라고 정의된 모든 데이터는 변수에 넣을 수 있다는 것이다. 이러한 특징 때문에 함수와 배열 역시 특정 변수에 담을 수 있다. 그리고 함수는 '식'이기 때문에 항상 '값'을 반환하는데 이때 우리는 'return'을 사용해서 함수를 통해 호출하고자 하는 값을 지정해줄 수 있다. 반대로 if, wh..

HTML은 다양한 요소(element)들로 구성되어 있다. 요소란, ' 내용 ' 에서 밑줄 친 전체를 뜻한다. 즉, 태그를 포함해 태그로 감싼 내용까지 모두 '요소'라고 한다. 그리고 요소는 어떤 형태를 만들어내는데, 그 형태를 기준으로 블록 요소와 인라인 요소로 나눌 수 있다. 그렇게 요소를 이루는 태그 중 태그와 태그를 살펴볼텐데, 와 태그는 그 자체만으로 특별한 기능을 갖고 있지 않아서 다방면으로 사용될 수 있다. 그래서 무분별하게 사용될 수 있다. 아래 이미지는 블록 요소와 인라인 요소에 css로 배경색을 넣었을 때 어떻게 표현되는지 보여준다. 'hello block'은 화면 끝까지, 'hello inline'은 글자가 끝날 때까지만 색칠이 되었다. 그렇다. '~' 는 블록 요소, '~' 은 인라..

HyperText Markup Language HTML은 프로그래밍 언어가 아닌 '마크업 언어' 라고 불린다. 즉, 제목과 단락을 구분하고, 문서의 전체적인 틀을 표시하는 다양한 '태그'들로 이루어진 '약속된 표기 방식' 정도로 이해할 수 있다. 그러한 이유로 마크업 언어인 HTML은 시간의 흐름과 제어에 따라 한 줄씩 읽어나가며 실행시키는 JavaScript와 같은 프로그래밍 언어라고 보기 어렵다. 참고로 현재 가장 진보된 HTML인 HTML5에서는 '시맨틱 태그(Semantics)'가 추가되면서 코드를 볼 때 글의 각 구성 요소에 대해 명확한 구분이 가능하게 되었다. 이제 HTML 코드가 어떻게 생겼는지 살펴보자. 다음은 투두리스트 화면을 만드는 예시코드다. 문서를 시작한다. 몸통을 그린다. 문서를 ..