Definition of Seon

HTML과 CSS를 잘 작성하기 위해서는 세 가지를 고려해야 합니다. 1. Responsive Design 반응형으로 작동하는 웹사이트를 만들어야 합니다. 미디어 쿼리나 fluid 레이아웃을 넘어서 화면에 맞는 글꼴과 이미지의 크기, 데스크톱 또는 모바일 중에 무엇이 먼저인지 등등을 고려해야 할 것입니다. 2. Maintainable and scalable code 유지가능하고 확장가능한 코드를 만들어야 합니다. 깔끔하고 이해하기 쉽고 확장성이 높은 코드를 써야 나의 코드를 보는 다른 개발자들에게도 좋습니다. 어떻게 마크업을 구조화하고 클래스 이름을 지어야 할지 등을 고려해야 합니다. 3. Web Performance 웹사이트를 더 빠르게 만들기 위해 우리는 httmp 요청과 코드 자체를 줄이고 코드를 ..

배열 메서드 배열은 그 자체로 개체이므로 매서드가 있습니다. 1. slice let arr = ['a', 'b', 'c', 'd', 'e']; console.log(arr.slice(2)); // cde console.log(arr.slice(2,4)); // cd console.log(arr.slice(-2)); //de slice 매서드를 이용하여 배열의 요소를 자를 수 있습니다. 괄호 안에 인덱스를 넣어 사용할 수 있는데 -를 입력할 경우 끝에서부터 -1, -2... 이렇게 셉니다. 2. splice splice의 결과는 slice와 동일하지만, splice는 원래 배열을 변경합니다. splice해서 추출된 요소를 잃고 나머지 요소만 기존의 배열에 포함됩니다. 3. reverse arr.revers..

디폴트 매개변수 ES5에서는 디폴트 값을 설정할 때 함수 안에 아래와 같은 방식을 사용하였습니다. numPassengers = numPassengers || 1; price = price || 100; 그러나 ES6에서는 함수의 매개변수에 바로 디폴트 값을 설정할 수 있습니다. const createBooking = function(flightNum, numPassengers = 1, price = 199) 함수를 사용할 때 매개변수를 건너뛰고 입력할 수는 없습니다. 만약 1, 3번째 매개변수만 입력하고 싶다면 2번째 매개변수 위치에 undefined를 입력하면 됩니다. 퍼스트 클래스 함수, 고차원 함수 함수를 변수나 개체 속성에 저장할 수 있습니다. 함수를 다른 함수에 대한 인수로 넘길 수도 있습니다...

Array destructuting Array destructing 이란 배열이나 개체의 값을 개별 변수로 분해하는 것입니다. const arr = [2,3,4]; const [x,y,z] = arr; 위와 같이 표기할 경우 x,y,z가 각각 2,3,4가 되는 것을 확인할 수 있습니다. 이때 기존의 배열인 arr은 아무 영향을 받지 않습니다. 배열에서 개별 변수로 분해할 때 꼭 모든 변수를 다 쓸 필요는 없습니다. const [first, , second] = arr; 위와 같은 방법으로 2와 4만을 추출할 수도 있습니다. 배열 내의 원소를 바꾸기 위해 임시 변수를 사용할 수도 있습니다. 또 배열 내의 원소의 위치를 바꾸기 위해서도 이 방법을 사용할 수 있습니다. 중첩된 배열에 대해서도 형태를 같게 써주..

자바스크립트 런타임 자바스크립트 엔진은 자바스크립트 코드를 실행하는 프로그램입니다. 모든 브라우저에는 자바스크립트 엔진이 있습니다. 예를 들어 구글의 V8 엔진이 자바스크립트 엔진의 한 종류입니다. 자바스크립트 엔진은 콜 스택과 힙을 가지고 있습니다. 콜 스택(call stack)은 실행컨텍스트를 이용하여 코드를 실행하는 곳이고 힙(heap)은 개체가 저장되는 곳입니다. 자바스크립트는 interpreted 언어라 compiled 언어에 비해 속도가 느린 편입니다. interpreted 언어는 소스 코드를 한 줄씩 실행 시키는 언어입니다. 모던 자바스크립트에서는 Just-in-time compilation 방법을 사용합니다. 소스코드를 기계어로 바꾼 후 실행하여 성능을 개선했습니다. 자바스크립트 런타임은 ..

DOM DOM이란 Document Object Model의 약자입니다. DOM은 텍스트나 html 요소, css 스타일을 바꿀 수 있게 해줍니다. 돔 트리 구조를 보면 가장 위에 document가 있고 그 아래 root 요소인 html이 있습니다. 아래에는 head와 body로 나눌 수 있고 그 아래에도 작은 요소들이 있습니다. DOM은 자바스크립트라고 할 수는 없지만 웹 API의 하나입니다. web api와 자바스크립트는 서로 상호작용할 수 있기 때문에 자바스크립트에서 DOM을 사용할 수 있습니다. DOM으로 선택하는 방법 document.querySelector('.message').textContent querySelector 안에 클래스명을 넣어주고 textContent를 쓰면 해당 클래스의 텍스..

CSS 기본 설정 * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Lato", sans-serif; font-weight: 400; font-size: 16px; line-height: 1.7; color: #777; } 마진과 패딩을 0으로 설정하고 박스사이징을 보더박스로 설정합니다. 보더박스로 설정해야 너비와 높이를 잴 때 테두리가 포함되지 않습니다. 그리고 바디 안의 모든 하위요소에 상속이 되도록 글꼴과 두께, 크기, 줄간격, 색상을 설정합니다. 이렇게 설정해두고 시작해야 이후 CSS 코드를 입력하기 좋습니다.

vscode에서 꼭 설치해야 하는 확장 프로그램이 있습니다. 그건 바로 prettier! 이름 그대로 코드를 더 예쁘게 만들어주는 프로그램입니다. 프리티어 설치 뒤에는 2가지를 수정해주어야 합니다. vscode 설정에 들어가봅시다. 1. Default Formatter 아래 목록 중에서 prettier을 골라주세요. 2. Format on Save 저장할 때마다 포맷이 바뀌도록 체크해주세요. 이 두 가지를 해두면 코딩을 할 때 더 편리하게 쓸 수 있답니다~

Object 개체 배열에서는 요소들에 이름을 줄 수 없고 순서로만 구분할 수 있습니다. 개체에서는 각각의 요소에 이름을 줄 수 있습니다. const kim = { firstName: 'Jay' lastName: 'Kim', age: 2037 - 1991, job: 'teacher', friends: ['Peter', 'Steven'] 배열과 달리 개체는 중괄호를 사용하며 키와 값이 있습니다. 개체에서 원하는 값을 가져올 때는 배열이름.키 를 입력하거나 배열이름['키']를 입력해야 합니다. 대괄호를 사용한 표기법의 경우 식을 넣을 수 있습니다. console.log(kim.lastName); console.log(kim['lastName']); 개체는 값이므로 그 안에 함수를 추가할 수 있습니다. 함수를 ..

Strict mode 'use strict' 를 가장 윗줄에 쓰면 엄격한 모드가 적용됩니다. 엄격한 모드를 실행하면 특정 작업을 금지시키고 눈에 보이는 오류를 알려줍니다. Function 함수 function 함수이름() { ~~~~~; } 함수이름(); 함수에는 매개변수가 있습니다. 함수 이름 뒤에 매개변수를 추가하여 이용할 수 있습니다. 나중에 함수를 불러올 때 매개변수를 입력하면 해당하는 매개변수가 위치한 함수 내 코드를 실행할 때 적용이 됩니다. 함수에서 어떤 내용을 출력할 때는 return 을 활용할 수 있습니다. 함수 표현식 const age = function (birthYear) { reuturn 2037 - birthYear; } 함수 선언 외에도 함수 표현식을 사용할 수 있습니다. 표현..