HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍쳐 RESTful : REST의 기본 원칙을 성실히 지킨 서비스 디자인 REST API : REST를 기반으로 서비스 API를 구현한 것

구성 3요소

• 자원 (resource) : 자원을 뜻함, URI(엔드포인트)로 표현
• 행위 (verb) : 자원에 대한 행위를 뜻함, HTTP 요청 메서드로 표현
• 표현 (representations) : 자원에 대한 행위의 구체적 내용, 페이로드로 표현

44.2 REST API 설계 원칙

8.1 블록문

*블록문(block statement/compound statement)은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. *자바스크립트는 블록문을 하나의 실행 단위로 취급한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

// 블록문
{
  var foo = 10;
}

// 제어문
var x = 1;
if(x < 10) {
    x++;
}

// 함수 선언문
function sum(a, b){
    return a + b;
}

// 블록문은 문을 종료를 의미하는 자체 종결성을 갖기 때문에 끝에 세미클론을 붙이지 않는다.

8.2 조건문

조건문(conditional statement)은 주어진 조건식(conditional expression)의 평가 결과에 따라 코드 블록(블록문)의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다.

8.2.1 if ... else 문

if ... else 문은 주어진 조건식(불리언 값으로 평가될 수 있는 표현식)의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다. 조건식의 평가 결과가 true일 경우 if 문의 코드 블록이 실행되고, false일 경우 else 문의 코드 블록이 실행된다.

대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

var x = 2;
var result;

if (x % 2) {
    result = '홀수';
} else {
    result = '짝수';
}

console.log(result); // 짝수

// 위 예제를 삼항 조건 연산자로 바꿔 쓸 수 있다.

var x = 2;

var result = x % 2 ? '홀수' : '짝수';
// 2 % 2는 0이다. 이때 0은 false로 암묵적 강제 변환된다.
console.log(result); // 짝수

// 만약 경우의 수가 세 가지('양수', '음수', '영')이라면
var kind = num ? (num > 0 ? '양수' : '음수') : '영';
console.log(kind); // 양수

삼항 조건 연산자는 값으로 평가되는 표현식을 만든다. 따라서 삼항 조건 연산자 표현식은 값처럼 사용할 수 있기 때문에 변수에 할당할 수 있다. 하지만 if ... else 문은 표현식이 아닌 문이라 변수에 할당할 수 없다.

8.2.2 switch문

 switch (표현식) {
    case 표현식1:
        // switch문의 표현식과 표현식1이 일치하면 실행될 문;
        break;
    case 표현식2:
        // switch문의 표현식과 표현식2가 일치하면 실행될 문;
        break;
    default:
        // switch문의 표현식과 일치하는 case문이 없을 때 실행될 문;
}

• 주어진 표현식을 평가해 그 값과 일치하는 표현식을 갖는 case문으로 실행 흐름을 옮김
• case문은 상황(case)을 의미하는 표현식을 지정하고 콜론으로 마치며, 그 뒤에 실행할 문들을 위치
• switch문의 표현식과 일치하는 case문이 없다면 실행 순서는 default문으로 이동하며, default문은 선택 사항
• switch문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많음
• 따라서 논리적 참, 거짓보다는 다양한 상황에 따라 실행할 코드 블록을 결정할 때 사용
• if...else문으로 해결할 수 있다면 switch문보다 if...else문 권장, 조건식이 너무 많아서 switch문이 더 가독성이 좋다면 switch문 사용

8.3 반복문

반복문(loop statement)은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

8.3.1 for 문

for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다. 가장 일반적으로 사용된다

for(변수 선언문 또는 할당문; 조건식; 증감식){
    조건식이 참인 경우 반복 실행될 문;
}

// for문 예제 
// 선언문의 변수 이름은 반복을 의미하는 iteration의 i를 일반적으로 사용한다.
for(var i = 0; i < 2; i++){
    console.log(i);
}

0
1

• for 문을 실행하면 가장 먼저 변수 선언문 var i = 0이 실행됩니다. 변수 선언문은 단 한 번만 실행된다.
• 변수 선언문의 실행이 종료되면 조건식이 실행된다.
• 조건식의 평가 결과 true이면 코드 블록을 실행시키고 코드 블록의 실행이 종료되면 증감식이 실행된 후 다시 조건식이 실행된다.
• 기억해야할 점은 증감식 실행이 종료되면 변수 선언문이 아니라 조건식이 실행된다.
• 조건식의 평가 결과 false면 for문을 종료한다.

8.3.2 while 문

while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다. for 문은 반복 횟수가 명확할 때 주로 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다.

var count = 0;

while(count < 3) {
  console.log(count); // 0 1 2
  count++;
}

// 조건식의 평가 결과가 언제나 참이면 무한 루프가 된다.
// 무한루프에서 탈출하기 위해서는 코드 블록 내에 if 문으로 탈출 조건을 만들고
// break 문으로 코드 블록을 탈출한다

var count = 0;

while(true) {
  console.log(count);
  count++;
  // count가 3이면 코드 블록을 탈출한다.
  if (count === 3) break;
} // 0 1 2

8.3.3 do ... while 문

do ... while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.

var count = 0;

do {
  console.log(count); // 0 1 2
  count++;
} while(count < 3);

8.4 break 문

break 문은 레이블 문, 반복문(for, for...in, for...of, while, do...while) 또는 switch문의 코드 블록을 탈출한다. 위 문들의 코드 블록 외에 break 문을 사용하면 SyntaxError(문법 에러)가 발생한다. 레이블 문(label statement)이란 식별자가 붙은 문을 말한다. 프로그램의 실행 순서를 제어하는데 사용한다. 하지만 프로그램의 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높기 때문에 권장되지 않는다.

// outer라는 식별자가 붙은 레이블 for문
outer: for(var i = 0; i < 3; i++){
    for(var j = 0; j < 3; j++){
    // i + j === 3이면 outer라는 식별자가 붙은 레이블 for문을 탈출한다.
     if(i + j === 3) break outer;
     console.log(`inner [${i}, ${j}]`);
    }
}

console.log('Done!');

8.5 continue 문

*continue 문은 반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동시킨다. * break 문처럼 반복문을 탈출하지는 않는다.

// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++){
    if(string[i] === search){
    count++;
    }
}

// continue 문을 사용하면 if 문 밖에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++){
    if(string[i] !== search) continue;
    count++;
}

// 산술 연산자 
5 * 4 // 20 

// 문자열 연결 연산자 
'My name is ' + 'Lee' // 'My name is Lee' 

// 할당 연산자 
color = 'red' // 'red' 

// 비교 연산자 
3 > 5 //  false 

// 논리 연산자 
true && false // false 

// 타입 연산자 
typeof 'Hi' // string

• 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.
• 이때 연산의 대상을 피연산자(operand)라 한다. 피욘산자는 값으로 평가될 수 있는 표현식이어야 한다.
• 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

7.1 산술 연산자

산술 연산자(arithmetic operator)는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산지 불가능한 경우, NaN을 반환한다.

7.1.1 이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 숫자값을 만듦
• 피연산자의 값을 변경하는 부수 효과는 없음
• 즉, 어떠한 산술 연산을 해도 피연산자의 값이 바뀌지 X → 언제나 새로운 값을 만듦

5 + 2; // 7
5 - 2; // 3
5 * 2; // 10
5 / 2; // 2.5
5 % 2; // 1

7.1.2 단항 산술 연산자

단항(unary) 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.

주의할 점은 이항 산술 연산자와는 달리 증가/감소(++/--) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다는 것이다.

var x = 5, result;

// 선할당 후증가(postfix increment operator)
result = x++;
console.log(result, x); // 5, 6

// 선증가 후할당(prefix increment operator)
result = ++x;
console.log(result, x); // 7, 7

// 선할당 후감소(postfix decrement operator)
result = x--;
console.log(result, x) // 7, 6

// 선감소 후할당(prefix decrement operator)
result = --x;
console.log(result, x) // 5, 5

7.1.3 문자열 연결 연산자

'+'연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
'1' + 2; // '12'
2 + '1' // '21'

// 산술 연산자
1 + 2 // 3

// true는 1로 타입 변환된다
1 + true; // 2

// false는 0으로 타입 변환된다.
1 + false; // 1

// null은 0으로 타입 변환된다.
1 + null; // 1

// undefined는 숫자로 타입 변환되지 않는다.
+undefined; // NaN
a + undefined; // NaN

• '+' 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작
• 위의 예제와 같이 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되기도 함
• 이를 암묵적 타입 변환 또는 타입 강제 변환이라 함

7.2 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
• 좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있음

var x;
// 할당문은 표현식인 문이다.
console.log(x = 10); //10

// 이러한 특징을 황요해 여러 변수에 동일한 값을 연쇄 할당할 수 있습니다.
var a, b, c;
// 연쇄 할당. 오른쪽에서 왼쪽으로 진행
// c = 0 : 0으로 평가된다.
// b = 0 : 0으로 평가된다.
// a = 0 : 0으로 평가된다.
a = b = c = 0;

console.log(a, b, c); // 0 0 0

할당문은 값으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다.

7.3 비교 연산자

• 비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
• if문이나 for문과 같은 제어문의 조건식에서 주로 사용

7.3.1 동등/일치 비교 연산자

// 타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시키면 동등하다. 5 == '5'; // -> true

// ⚠️ 동등 비교 연산자의 안티 패턴 예시 // 결과 예측이 어려움 '0' == ''; // -> false 0 == ''; // -> true 0 == '0'; // -> true false == 'false'; // -> false false == '0'; // -> true false == null; // -> false false == undefined; // -> false

* 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교
* 따라서 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후 같은 값일 수 있다면 true 반환
* 이처럼 예측하기 어려운 결과를 만들어내므로 사용을 지양하는 것을 권장
#### 일치 비교(===) 연산자
```javascript
// 일치 비교
5 === 5; // -> true

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; // -> false

• 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한해 true 반환
• 즉, 암묵적 타입 변환을 하지 않고 값을 비교하므로 값을 예측하기 쉬움
• 식별자의 주소를 비교

7.3.2 대소 관계 비교 연산자

7.4 삼항 조건 연산자

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

• 조건식의 평가 결과에 따라 반환할 값을 결정
• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환
• if...else 문을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리 가능
• 다만, 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else문은 값처럼 사용할 수 없음 　👉 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문

var x = 10;

// if ... else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; };
// SyntaxError: Unexpected token if

var result = x % 2 ? '홀수' : '짝수';
console.log(result) // 짝수

삼항 조건 연산자 표현식은 if ...else 문과 비슷해 보이지만, 중요한 차이가 있다. 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if ... else 문은 값처럼 사용할 수 없다. 조건에 따라 어떤 값을 결정해야 한다면 if ... else 문보다 삼항 조건 연산자 표현식을 사용하는 편이 유리하다.

7.5 논리 연산자

7.6 쉼표 연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

var x, y, z;
x = 1, y = 2, z = 3; // 3

7.7 그룹 연산자

소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다. 따라서 그룹 연산자를 사용하면 연산자의 우선순위를 조절할 수 있다.

10 * 2 + 3 // 23

10 * (2 + 3) // 50

7.8 typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

typeof '' // 'string'
typeof 1  // 'number'
typeof NaN // 'number'
typeof true // 'boolean'
typeof undefined // 'undefined'
typeof Symbol() // 'symbol'
typeof null // 'object'
typeof [] // 'object'
typeof {} //'object'
typeof new Date() //'object'
typeof /test/gi // 'object'
typeof function () {} // 'function'

typeof 연산자로 null 값을 연산해보면 "null"이 아닌 "object"를 반환한다는 데 주의하자. 이것은 자바스크립트의 첫 번째 버전의 버그다. 하지만 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다.

값이 null 타입인지 확인할 때는 typeof 연산자를 사용하지 말고 일치 연산자(===)를 사용하자.

var foo = null;

typeof foo === null; // false
foo === null; // true

// undeclared 식별자를 선언한 적이 없다.
typeof undeclared; // undefined

또 하나 주의 해야할 것이 있다. 선언하지 않는 식별자를 typeof 연산자로 연산해 보면 ReferenceError가 발생하지 않고 undefined를 반환한다.

7.9 지수 연산자

// ES7: 지수 연산자
2 ** 2;   // -> 4
2 ** 2.5; // -> 5.65685424949238
2 ** 0;   // -> 1
2 ** -2;  // -> 0.25


// 지수 연산자 도입 전
Math.pow(2, 2);   // -> 4
Math.pow(2, 2.5); // -> 5.65685424949238
Math.pow(2, 0);   // -> 1
Math.pow(2, -2);  // -> 0.25


// 음수에 지수 연산자 적용
-5 ** 2;
// SyntaxError: Unary operator used immediately before exponentiation expression.
// Parenthesis must be used to disambiguate operator precedence

(-5) ** 2; // -> 25

• 데이터 타입(data type, 타입)은 값의 종류를 말한다.
• 자바스크립트의 모든 값은 데이터 타입을 가지며, ES6 기준으로 7개의 데이터 타입 제공
• 7개의 데이터 타입은 원시 타입(primitive type)과 객체 타입(object/reference type)으로 분류

원시 타입 (primitive data type)

• number
• string
• boolean
• undefined
• null
• symbol (ES6에서 추가)

  객체 타입 (object/reference type)

• object
• 자바스크립트는 객체기반 언어로, 위의 원시타입을 제외한 모든 값(배열, 객체, 함수 등)은 객체타입이다.

6.1 숫자 타입

// 모두 숫자 타입이다.
var integer = 10;    // 정수
var double = 10.12;  // 실수
var negative = -20;  // 음의 정수

var binary = 0b01000001; // 2진수
var octal = 0o101;       // 8진수
var hex = 0x41;          // 16진수

// 표기법만 다를 뿐 모두 같은 값이다.
console.log(binary); // 65
console.log(octal);  // 65
console.log(hex);    // 65
console.log(binary === octal); // true
console.log(octal === hex);    // true

자바스크립트는 하나의 숫자 타입만 존재한다. 자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다고 했다. 이는 정수로 표시된다 해도 사실은 실수라는 것을 의미한다. 따라서 정수로 표시되는 수끼리 나누더라도 실수가 나올 수 있다.

// 숫자 타입의 세 가지 특별한 값
console.log(10 / 0); // Infinity
console.log(10 / -0); // -Infinity
console.log(1 * 'String'); // NaN

• 숫자 타입은 추가적으로 세 가지 특별한 값도 표현할 수 있다.
  • Infinity: 양의 무한대
  • -Infinity: 음의 무한대
  • NaN: 산술 연산 불가(not-a-number)
• 자바스크립트는 대소문자를 구별하므로 NaN을 NAN, nan, Nan 등으로 표기 시 에러 발생

6.2 문자열 타입

// 문자열 타입
var string;
string = '문자열'; // 작은따옴표
string = "문자열"; // 큰따옴표
string = `문자열`; // 백틱 (ES6)

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

• 문자열 타입은 텍스트 데이터를 나타내는 데 사용하며, 0개 이상의 UTF-16의 집합으로 대부분의 문자 표현 가능하다.
• 작은따옴표(''), 큰따옴표(""), 또는 백틱(``)으로 텍스트를 감싼다. 　👉 키워드나 식별자 같은 토큰과 구분하기 위해서다.
• 따옴표로 문자열을 감싸지 않는다면 스페이스와 같은 공백 문자 포함 불가하다.
• 문자열은 원시 타입이며 불변성이 있으므로 문자열 생성 시 문자열을 변경할 수 없다.

6.3 템플릿 리터럴

• ES6부터 도입된 새로운 문자열 표기법이 도입되었다.
• 멀티라인 문자열, 표현식 삽입, 태그드 템플릿 등 편리한 문자열 처리 기능 제공한다.
• 런타임에 일반 문자열로 변환되어 처리된다.
• 일반적인 따옴표 대신 백틱(``)을 사용해 표현한다.

6.3.1 멀티라인 문자열

• 일반 문자열 내에서는 줄바꿈(개행)이 허용되지 않는다.
• 따라서 줄바꿈 등의 공백을 표현하려면 백슬래시()로 시작하는 이스케이프 시퀀스를 사용해야 한다.
• 템플릿 리터럴 내에서는 이스케이프 시퀀스를 사용하지 않고도 줄 바꿈이 허용되며, 모든 공백도 그대로 적용된다.

6.3.2 표현식 삽입

var first = 'Ung-mo';
var last = 'Lee';

// ES5: 문자열 연산자를 이용한 기존의 문자열 연결 방식
console.log('My name is ' + first + ' ' + last + '.'); // My name is Ung-mo Lee.

// ES6: 템플릿 리터럴 내 표현식 삽입을 이용한 문자열 연결 방식
console.log(`My name is ${first} ${last}.`); // My name is Ung-mo Lee.


// 문자열로 강제 형변환되어 삽입됨
console.log(`1 + 2 = ${1 + 2}`); // 1 + 2 = 3

• 템플릿 리터럴 미사용 시 문자열 연산자 + 를 사용해 문자열 연결할 수 있다.
• 템플릿 리터럴 내에서는 표현식 삽입을 통해 간단히 문자열 삽입할 수 있다.
• 표현식을 삽입하려면 ${ }로 표현식을 감싸는데, 표현식의 평가 결과가 문자열이 아니더라도 문자열로 타입 강제 변환되어 삽입된다.
• 표현식 삽입은 반드시 템플릿 리터럴 내에서 사용해야 한다. (일반 문자열에서의 표현식 삽입은 문자열로 취급됨)

6.4 불리언 타입

var foo = true;
console.log(foo); // true

foo = false;
console.log(foo); // false

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false뿐이다

6.5 undefined 타입

• undefined 타입의 값은 undefined가 유일하다.z
• var 키워드로 선언한 변수는 처음 할당이 이뤄질 때까지 쓰레기 값(garbage value)으로 내버려 두지 않고 undefined로 초기화한다. 　👉 따라서 변수를 선언한 이후 값을 할당하지 않은 변수를 참조하면 undefined 반환 　👉 즉, 변수 참조 시 undefined가 반환된다면 참조한 변수 초기화되지 않은 변수라는 것을 알아낼 수 있음
• undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화하는 데 사용하는 값이다. 개발자가 의도적으로 변수에 할당하면 본래 취지와 어긋날뿐더러 혼란을 줄 수 있으므로 권장하지 않는다. 　 👉 변수에 값이 없다는 것을 명시하고 싶을 때는 undefined가 아닌 null 할당 권장

var foo;
console.log(foo); // undefined

6.6 null 타입

• null 타입의 값은 null이 유일하며, 자바스크립트 엔진은 대소문자를 구별하므로 null은 Null, NULL과는 다르다.
• 프로그래밍 언어에서 null은 변수에 값이 없다는 것을 의도적으로 명시(의도적 부재)할 때 사용한다.
• 변수에 null을 할당하는 것은 변수의 이전 참조 값을 더 이상 참조하지 않겠다는 것을 의미한다. 　👉 즉, 이전에 할당되어 있던 값에 대한 참조를 명시적으로 제거하는 것
• 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 한다.

6.7 심벌 타입

// 심벌 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

// 이름이 충돌할 위험이 없는 유일무이한 값인 심벌을 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value

• 변경 불가능한 원시 타입의 값
• 다른 값과 중복되지 않는 유일무이한 값이다.
• 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용

6.8 객체 타입

• 자바스크립트는 객체 기반의 언어
• 지금까지 살펴본 6가지 데이터 타입 이외의 값은 모두 객체 타입

6.9 데이터 타입의 필요성

값은 메모리에 저장하고 참조할 수 있어야 하는데, 메모리에 값을 저장할 때 먼저 확보해야 할 메모리 공간의 크기를 결정하기 위해. 즉, 메모리 공간을 적절히 낭비/손실 없이 저장하기 위해 필요하다.

6.9.1 데이터 타입에 의한 메모리 공간의 확보와 참조

• 자바스크립트 엔진은 데이터 타입(값의 종류)에 따라 정해진 크기의 메모리 공간 확보
• 변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정됨

6.9.2 데이터 타입에 의한 값의 해석

• 모든 값은 데이터 타입을 가지며, 메모리에 2진수(비트의 나열)로 저장됨
• 이때 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있음 　👉 ex. 메모리에 저장된 값 0100 0001을 숫자로 해석하면 65지만, 문자열로 해석하면 'A'

6.10 동적 타이핑

6.10.1 동적 타입 언어와 정적 타입 언어

정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다.

• JS는 동적 타입 언어이다.
• JS의 변수는 선언이 아닌 할당할 때 타입이 결정 된다.(타입 추론)
• 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. (동적 타이핑 / 동적 타입 언어)
• JS는 개발자의 의도와는 상관없이 JS 엔진에 의해 타입이 자동으로 변환하기도 해서 주의해야 한다.
  • 변수는 필요한 경우에 한해 제한적으로 사용
  • 변수의 유효 범위를 최대한 좁게 만들어 사용
  • 전역변수는 지양한다.
  • 변수 보다는 상수를 사용할 것
  • 변수의 이름을 통해 변수의 목적과 의미를 파악하기 쉽게 작명할 것

변수란?

• 변수란 프로그래밍 언어에서 데이터를 관리하기 위한 핵심 개념
• 컴퓨터는 CPU를 사용해 연산하고, 메모리를 사용해 데이터를 기억
• 컴퓨터는 모든 데이터를 2진수로 처리한다.

메모리(memory)

• 데이터를 저장할 수 있는 메모리 셀(memory cell)의 집합체
• 메모리 셀 하나의 크기는 1바이트(8비트) 이며 컴퓨터는 1바이트 단위로 데이터를 저장하거나 읽어 들임
• 각 셀은 고유의 메모리 주소를 가지며, 메모리 주소는 메모리 공간의 위치를 나타낸다. (0부터 시작해 메모리의 크기만큼 정수로 표현된다.)
• 메모리에 저장되는 값은 2진수로 저장
• 자바스크립트는 개발자의 직접적인 메모리 제어를 허용하지 않는다.

변수

• 변수란 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는, 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.
• 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다.

4.2 식별자

• 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말하며, 변수 이름을 식별자라고 하기도 한다.
• 식별자는 값이 저장되어 있는 메모리 주소와 매핑 관계를 맺으며, 이 매핑 정보도 메모리에 저장되어야 한다.
• 식별자는 값이 아니라 메모리 주소를 기억하고 있다.
• 변수 뿐만아니라 함수, 클래스 등 메모리 상에 존재하는 어떤 값을 식별할 수 있는 이름은 모두 식별자라고 한다.
• 식별자는 네이밍 규칙을 준수해야하며 선언(declaration)에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

4.3 변수 선언

• 변수를 생성하는 것을 말한다.
• 변수 선언에 의해 확보된 메모리 공간은 확보가 해제되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전한게 사용할 수 있다.
• *변수를 사용하려면 반드시 선언이 필요하다. *변수를 선언할 때는 var, let, const 키워드를 사용한다.

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행한다.

• 선언단계: 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알린다.
• 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

undefined

• 변수 선언에 의해 확보된 메모리 공간은 비어있지는 않고, 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화된다.
• undefined는 자바스크립트에서 제공하는 원시 타입의 값
• 일반적으로 초기화(initialization)란 변수가 선언된 이후 최초로 값을 할당하는 것을 의미한다.
• var 키워드로 선언한 변수는 undefined로 암묵적인 초기화 자동 수행한다.

변수의 사용

• 변수를 사용하려면 반드시 선언 필요 (변수뿐만 아니라 모든 식별자 포함)
• 선언하지 않은 식별자에 접근하려면 ReferenceError (참조 에러) 발생
• 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록됨 　👉 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역 　👉 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리

4.4. 변수 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined
var score; // 변수 선언문

자바스크립트 코드는 인터프리터에 의해 한 줄씩 순차적으로 실행되는데, 변수 선언이 런타임(소스 코드가 한 줄씩 순차적으로 실행되는 시점)이 아니라 그 이전 단계에서 먼저 실행되기 때문에 console.log는 참조 에러가 아닌 undefined가 출력된다. 이처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라 한다. 모든 선언문은 런타임 이전 단계에서 먼저 실행되기 때문!

4.5 값의 할당

console.log(score); // undefined

var score; // 변수 선언
score = 80; // 값의 할당

console.log(score); // 80

✨ 실행 순서 ✨

1. 런타임 이전에 score 선언 실행
2. 첫 번째 console undefined 출력
3. score에 80 값 할당
4. 두 번째 console 80 출력

• 변수에 값을 할당(대입, 저장)할 때는 할당 연산자 '=' 를 사용한다. 할당 연산자는 우변의 값을 좌변의 변수에 할당한다.
• 이때, 변수 선언과 값을 할당을 하나의 문으로 단축 표현해도 자바스크립트 엔진은 변수 선언과 값의 할당을 2개의 문으로 나누어 각각 실행
• 또한 변수의 선언과 값의 할당의 실행 시점이 상이함 　👉 변수 선언은 런타임 이전에 먼저 실행, 값의 할당은 런타임에 실행

4.6 값의 재할당

재할당이란 이미 값이 할당되어 있는 변우세 새로운 값을 또다시 할당하는 것을 말한다. 만약 값을 재할당할 수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수(constant)라한다.

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작해야 합니다. 숫자로 시작하는 것은 허용되지 않는다.
• 예약어는 식별자로 사용할 수 없다.

playsinline 속성은 HTML 명세에 최근에 추가되었으며, WebKit은 기존의 webkit-playsinline 속성의 prefix를 제거하여 이 새로운 속성을 채택했습니다.

음소거 자동 재생

모바일 브라우저에서 비디오를 인라인으로 재생하기 위해서는 다음 주요 속성을 추가해야 한다. Android용 Chrome의 경우 처음 두 개만 필요하지만 Safari를 사용하는 경우 세개 모두 필요!

• autoplay

• muted
• playsinline

• 아이폰에서 <video playsinline> 요소는 이제 인라인으로 재생할 수 있으며, 재생이 시작될 때 자동으로 전체화면 모드로 들어가지 않는다.
• <video> 요소에 playsinline 속성이 없이 iPhone에서 재생하려면 전체 화면 모드가 계속 필요하다.
• 핀치 제스처로 전체 화면을 종료하면, <video> 요소는 playsinline 없이 인라인으로 계속 재생된다.

<video autoplay muted loop playsinline>
    <source src="./test.mp4" type="video/mp4" />
</video>

CSS 가상클래스

• :not()- 특정 selector을 제외하고 스타일을 적용하고 싶은 경우 사용

• :nth-child()- 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다.

• :nth-of-type()- 같은 타입의 형제 요소 중에서 순서에 따라 n번째를 선택하여 스타일을 적용한다. (nth-child보다 좀 더 호환성이 보장된다.)

• :only-child- 지정 요소가 부모의 유일한 자식 요소인 경우, 다르게 말해서 부모의 자식 요소가 지정 요소 하나만 있는 경우에 적용이 된다.
• :only-of-type- 지정 요소가 부모의 자식 요소중 동일한 타입이 없는 경우, 부모의 자식 요소 중 다른 타입의 형제 요소들은 있어도 상관없다.

CSS 가상요소

• first-letter- 블록레벨 요소의 첫 번째 줄 첫 번째 글자에 스타일을 적용합니다. 단, 다른 콘텐츠(이미지나 인라인테이블 등)가 선행되지 않는 경우에만 해당됩니다.

SASS

extend 확장

뜻 그대로 확장으로, 기본 내용에서 추가로 덧붙일때 사용한다.

사용법은 이미 존재하는 셀렉터를 @extend로 지정해주면 된다. @extend는 CSS 미디어쿼리 내에서 실행되지 않는다. 그렇기에 반응형 작업할때는 사용하지 않는것이 좋다. Sass Guideline 에서도 @extend는 사용을 권장하지 않는다.

선택자간의 연관성이 존재한다면 extend를 사용하고, 연관성은 없지만 코드가 겹치는 선택자들이라면 mixin으로 소스코드의 중복을 없애기 위해 사용해야한다.

코드 관리 측면

• 변경된 이력 확인
• 이전 이력으로 되돌리기
• 다른 기능의 버전 코드 유지
• 현재 최종이 어느 시점인지 표현할 수 있음

협업의 측면

• 각 기능별로 분업 후 하나의 코드로 합칠 수 있음
• 같은 부분을 수정해 문제가 생기는 경우 안내
• 협업으로 인한 실수 예방
• 팀원 간의 커뮤니케이션 지원

Git 기반의 서비스

프로젝트 소스코드 클라우드 호스팅 + 특색에 맞는 기능 제공!

1. Bitbucket (https://bitbucket.org) Atlassian의 제품들과 연계(Jira: https://www.atlassian.com/ko/software/jira)

2. GitLab(https://about.gitlab.com/) 설치형 Git => 용량에 대한 비용 절감, 소스코드의 보안 좋음

Git 설치(MAC)

사전준비. Homebrew 설치

https://brew.sh/index_ko

Homebrew란?

Mac환경에서 제공하지 않는 유용한 패키지를 설치할 수 있도록 도와주는 패키지 관리자

1. 터미널 실행
2. brew install git 입력
3. git -version 입력 후 확인
4. Config 설정(User Name/ User Email 설정)
5. 설치 완료

사용자 설정 및 셋팅

Git 사용자 설정

로컬에서 사용할 Git 사용자 이메일과 이름을 설정 git config: Git에 관한 설정을 추가/변경/삭제하는 명령어 설정파일 - System 설정 파일/ Globla 설정 파일/ 로컬 설정파일

System 설정 파일 : 모든 시스템 사용자에게 적용 (git config --system) Global 설정 파일 : 한 사용자의 전치 Git Repository에 적용 (git config --global) Local 설정 파일 : 하나의 Repository에만 적용 (git config --local)

Global Git 사용자 설정

git config --global user.email "abc@abc.com" git config --global user.name "Hong Gil-dong"

설정 확인

git config --list

Github 계정에 ssh key 등록하기

1. ssh key 만들기 https://bit.ly/368zxvR
2. Github 접속 후 오른쪽 상단 프로필 클릭 Setting->SSH and GPgKeys
3. New SSH Key 클릭해 Title과 복사한 Key 입력 후 Add SSH Key 클릭

Git 초기화 및 삭제

Git 초기화

명령어: git init 초기화 할 대상 폴더에서 명령어(git init)입력 Git 초기화 시 폴더 안에 숨김 폴더로 .git 폴더 생성 (Local Config등으로 구성)

Git 삭제

단순히 .git 폴더를 삭제 mac의 경우 폴더를 삭제하는 명령어 입력: rm -rf .git

.gitignore란?

사용자가 git에 등록(커밋)되지 않길 원하는 파일 또는 폴더들의 목록을 저장 .gitignore에 등록된 파일(폴더)들은 커밋 시 자동으로 제외됨

작성법

• #은 주석의 역할
• 폴더 : /폴더명 (예: /docs)
• 파일 : 파일명.확장자 (예: test.txt)
• 폴더 안 파일: /폴더명/파일명.확장자 (예: /docs/test.txt)
• 폴더 안 특정 확장자 파일 전부 (예: /docs/*.text)
• 폴더 하위 모든 특정 확장자 파일 전부 (예: /docs/*/.txt)

.gitignore 작성에 유용한 사이트

https://gitignore.io

기본 동작 원리

• Working Directory: 작업하는 파일이 있는 디렉토리
• Staging Area: Git에 등록할(커밋)파일들이 올라가는 영역
• Local Repository: 로컬 Git 프로젝트의 메타 데이터와 데이터 정보가 저장되는 영역
• Remote Repository: Github등의 서비스를 통한 온라인 상의 저장소

기본 용어

• orgin: 원격에 있는 코드
• head: 내가 지금 작업하고 있는 로컬 브랜치
• add: Working Directory에서 Staging Area로 등록하다
• commit: Staging Area에 등록된 파일을 Local Storage로 등록
• commit Message: commit시 함께 작성해 저장하는 메시지(메모)
• push: Local Storage에서 변경된 파일들을 Remote Repository로 등록
• fetch: Remote Repository의 변경사항을 Working Directory로 전달
• merge: Local Repository의 변경사항을 Working Directory로 전달
• Branch: 독립적으로 어떤 작업을 따로 진행하기 위한 가지
• checkout: 사용할 다른 브랜치를 지정

5.1 값

• 값: 식(표현식expression)이 평가evaluate되어 생성된 결과를 말한다.

5.2 리터럴

• 리터럴은 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호('', "", ., [], {}, // 등)로 표기한 코드다.

5.3 표현식

• 표현식은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다.
• 값으로 평가되므로** 리터럴은 표현식이다**.
• 즉, 값으로 평가될 수 있는 문은 모두 표현식이다.

5.4 문

• 문(statement)은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.
• 토큰(tocken)이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미한다.

  // 변수 선언문
  var x;
  

// 표현식 문(할당문) x = 5;

// 함수 선언문 function foo () {}

// 조건문 if (x > 1) { console.log(x); }

// 반복문 for (var i = 0; i < 2; i++) { console.log(i); }

## 5.6 표현식인 문과 표현식이 아닌 문
* 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것이다. 
```javascript
// 변수 선언문은 표현식이 아닌 문이다.
var x;

// 할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다.
x = 100;

// 표현식인 문은 값처럼 사용할 수 있다
var foo = x = 100;
console.log(foo); // 100

chpater6 데이터 타입

• 원시타입 : 숫자, 문자열, 불리언, undefined, null, symbol

• 객체타임 : 객체, 함수, 배열 등

6.1 숫자 타입

// 모두 숫자 타입이다.
var integer = 10;    // 정수
var double = 10.12;  // 실수
var negative = -20;  // 음의 정수

6.2 문자열 타입

// 문자열 타입
var string;
string = '문자열'; // 작은따옴표
string = "문자열"; // 큰따옴표
string = `문자열`; // 백틱 (ES6)

string = '작은따옴표로 감싼 문자열 내의 "큰따옴표"는 문자열로 인식된다.';
string = "큰따옴표로 감싼 문자열 내의 '작은따옴표'는 문자열로 인식된다.";

6.3 템플릿 리터럴

• ES6부터 도입된 새로운 문자여 표기법이다.
• 작은 따옴표 또는 큰 따옴표 같은 일반적인 따옴표 대신 백틱(``) 을 사용해 표현한다.

6.3.1 멀티라인 문자열

• 일반 문자열 내에서는 줄바꿈이 허용되지 않는다.

' 따옴표 single quote " 쌍따옴표 double quote \ 역슬래시 single backslash \b 백스페이스 backspace \r 캐리지 리턴 carriage return \n 줄바꿈 newline \s 스페이스 space \t 수평탭 tab \v 수직탭 tab \f 폼피드 form feed \0 null

var template = '<ul>\n\t<li><a href="#">Home</a></li>\n</ul>';

console.log(template);

🔻 출력 결과
/*
<ul>
  <li><a href="#">Home</a></li>
</ul>
*/

6.3.2 표현식 삽입

var first = 'Jihee';
var last = 'Lee';

console.log('My name is' + first + '' + last +'.'); 👉 ES5 문자열 연결
console.log(`My name is ${first} ${last}.`}; 👉ES6 문자열 연결

6.5 undefined 타입

• 값 할당 전의 가지는 초기값 👉의도적으로 undefined를 할당하는 것은 취지에 어긋나기 때문에 그럴 때는 null을 사용

6.7 심벌 타입

• 변경 불가능한 원시 타입의 값
• 심벌 값은 다른 값과 중복되지 않는 유일무이한 값이다. 따라서 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용한다.

6.8 객체 타입

• 자바스크립트를 이루고 있는 거의 모든 것이 객체다.

6.9 데이터 타입의 필요성

• 값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기 위해
• 값을 참조할 때 한 번 읽어 들어야 할 메모리 공간의 크기를 결정하기 위해
• 메모리에서 읽어 들인 *2진수를 어떻게 해석 *할지 결정하기 위해

6.10 동적 타이핑

• C나 JAVA같은 정적 타입 언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언해야한다.
• 정적 타입 언어는 변수의 타입을 변경할수 없으며, 변수에 선언한 타입에 맞는 값만 할당할 수 있다.
• 정적 타입 언어는 컴파일 시점에 타입 체크(선언한 데이터 타입에 맞는 값을 할당했는지 검사하는 처리)를 수행한다.
• 자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐이다.

typeof연산자는 연산자 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.

var foo;
console.log(typeof foo);  // undefined

foo = 3;
console.log(typeof foo);  // number

foo = 'Hello';
console.log(typeof foo);  // string

foo = true;
console.log(typeof foo);  // boolean

foo = null;
console.log(typeof foo);  // object -> 암기할 수 밖에 없음

foo = Symbol(); // 심벌
console.log(typeof foo);  // symbol

foo = {}; // 객체
console.log(typeof foo);  // object

foo = []; // 배열
console.log(typeof foo);  // object

foo = function () {}; // 함수
console.log(typeof foo);  // function

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑이라고 하며, 자바스크립트를 정적 타입 언어와 구별하기 위해 동적 타입 언어라 한다.

chpater7 연산자

• 연산자: 피연산자와의 조합으로 표현식을 만듦
  • 피연산자는 그 자체로도 표현식.
• 산술 연산자 (Arithmetic operator): 수학적 계산을 통해 새 값 만듦
  • Ex) +,-,*,/,%, ++,--

4.1 변수란?

하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. (값의 위치를 가리키는 상징적인 이름)

// 변수는 하나의 값을 저장한다.
var studentId = 1;
var studentName = 'Park';

// 배열이나 객체를 사용할 경우에는 그룹화해서 하나의 값처럼 사용할 수 있다.
var student = {id:1, name:'Park'};

var students = [
  {id:1, name:'Park'},
  {id:2, name:'Kim'}
 ];

• 저장된 값을 식별할 수 있는 고유한 이름 = 변수이름
• 그 변수에 저장된 값 = 변수 값
• 변수에 값을 저장하는 = 할당
• 변수에 저장된 값을 읽어 들이는 = 참조

4.2 식별자(identifier)

• 변수 이름을 식별자라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.
• 식별자는 값이 아니라 메모리 주소를 가지고 있다.
• 변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍 규칙을 준수해야 하며, 선언에 의해 자바스크립트 엔진에 존재를 알린다.

4.3 변수 선언

• 변수 사용을 위해서느 반드시 선언이 필요하다.
• 변수를 선언할 대는 var, let, const 키워드를 사용한다.
• 초기화란 변수가 선언된 이후 최초로 할당하는 것을 말한다.
• var 키워드로 선언한 변수는 undefined로 암묵적인 초기화가 자동 수행된다.
• var 키워드로 선언한 변수는 어떠한 값도 할당하지 않아도 undefined라는 값을 가진다.
• 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.
• ReferenceError는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러다.

4.4 변순 선언의 실행 시점과 변수 호이스팅

console.log(score); // undefined

var score; // 변수 선언문

👉 console.log(score);가 실행되는 시점에는 아직 score 변수의 선언이 실행되지 않았으므로 undefined가 출력된다.

⚠ 참조 에러(ReferenceError)가 아니라 undefined가 출력되는 이유는❓ 변수 선언이 소스코드가 한 줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다. 이 처럼 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징을 변수 호이스팅이라한다.

4.5 값의 할당

• 변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행된다.

console.log(score); // undefined

var score; // 1 변수 선언
score = 80; // 2 값의 할당

console.log(score); // 80

1변수선언은 런타임 이전에 먼저 실행되고 2값의 할당은 런타임에 실행된다. 따라서 score 변수에 값을 할당하는 시점2에는 이미 변수 선언이 완료된 상태이며, 이미 undefined로 초기화되어 있다. 따라서 score 변수에 값을 할당하면 score 변수의 값은 undefined에서 새롭게 할당한 숫자 값 80으로 변경(재할당)된다.

4.6 값의 재할당

• 값을 재할당할 수 ㅇ벗어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니랑 상수라 한다.
• var 키워드로 선언한 변수는 값을 재할당할 수 있다.

4.7 식별자 네이밍 규칙

• 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러기호를 포함할 수 있다.
• 단, 식별자는 특수문자를 제외한 문자, 언더스코어, 달러기호로 시작해야하며 숫자로 시작하는 것은 허용하지 않는다.
• 예약어는 식별자로 사용할 수 없다.
• 대소문자를 구별한다.

  var first-name; // SyntaxError: - 특수문자 ❌ 
  var 1st; // SyntaxError: 숫자로 시작 ❌ 
  var this; // SyntaxError: 예약어 ❌ 

근본적으로 웹사이트가 모바일 기기와 다양한 화면 크기에서 원활한 정보를 제공하여 더 나은 모바일 사용자 경험을 제공하기 위한 방법이다. 그러나, 적응형 웹과 반응형 웹은 사이트 설계부터 구동까지 많은 차이가 있다.

브라우저 가로길이가 변할 때,

어느 순간 툭 바뀐다? = 적응형. 이미지와 그리드가 실시간 변화한다? = 반응형.

위: 반응형, 아래: 적응형

적응형 웹 (Adaptive Web)

서버나 클라이언트에서 웹에 접근한 기기를 체크해 그 기기에 맞는 템플릿을 제공하는 개념이다. 모바일의 경우 모바일용 템플릿을, 데스크톱의 경우 데스크톱용 템플릿을 제공하는 식이다. 따라서 기기별로 다른 템플릿을 제작해야 할 필요가 있다.

기존에 이미 데스크톱용 템플릿을 작성했다면, 바닥부터 재구축할 필요 없이 다른 기기용 템플릿만 따로 만들면 되어 편리하다. 또, 사용자의 기기에 맞는 템플릿 및 CSS만 다운로드 하므로 데이터 낭비가 적고 로딩 속도가 빠르다.

다만, 각 기기별로 별로의 템플릿을 작성해야 하므로 개발이 복잡해진다.

반응형 웹 (Responsive Web)

반응형 웹은** 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용**해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술을 말한다.

하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어 개발이 간편하다는 장점을 가진다. 다만, 사용자는 단 하나의 기기만으로 접속하지만 그 경우에도 모든 기기를 위한 CSS를 전부 다운로드 해야한다는 점에서 데이터를 낭비하고 로딩 시간을 늘리는 단점을 가진다.

또, 기존에 이미 운영 중이었던 데스크톱용 사이트가 있었다면 사이트를 재구축해야만 한다는 점에서 불편할 수 있다.

반응형 웹과 적응형 웹의 특징 비교

참고 urls https://leonkong.cc/posts/responsive-adaptive.html https://jocoma.tistory.com/entry/%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9-vs-%EC%A0%81%EC%9D%91%ED%98%95-%EC%9B%B9?category=935771

패스트캠퍼스 강의(프런트엔드 개발 올인원 - 처음 배우는 Git & GitHub)를 듣고 요약한 글입니다.

소개

왜 Git과 GitHub을 익혀야 하나요?

팀 프로젝트에서 버전관리와 클라우드 저장소는 필수 불가결한 기술입니다.

버전 관리의 1등인 Git과 클라우드 저장소의 1등인 GitHub을 익히면 팀 프로젝트와 회사에서 효율적인 개발 협업을 할 수 있습니다.

환경 설정: 버전 관리가 뭔가요

버전 관리 시스템: Git

코딩할 때 단순히 crtl + z 를 눌러 이전 상태로 되돌리는 것이 아니라, 원하는 시점마다 깃발을 꽂고 (버전을 만들고) *이들 간에 자유롭게 돌아다닐 수 있다. *

내가 만든 버전뿐 아니라 동료가 만든 버전으로 이동할 수 있고, 동료와 내 버전을 비교해서 최신 본으로 코드를 업데이트할 수 있다.

GUI

Git을 사용하는 두 가지 방법

1. CLI (Command Line Interface)
2. GUI (Graphic User Interface)

GitHub에 코드를 올리는 과정

1. 내 컴퓨터 프로젝트 폴더에 '여기에서 Git을 쓸 거다!'라고 명령 (git init)
2. 즐겁게 코딩
3. 내가 변경한 파일 중 올리길 원하는 것만 선택 (git add)
4. 선택한 파일들을 한 덩어리로 만들고 설명 적어주기 (git commit -m "첫 페이지 제작")
5. GitHub 사이트에서 프로젝트 저장소 만들기
6. 내 컴퓨터 프로젝트 폴더에 GitHub 저장소 주소 알려주기 (git remote add)
7. 내 컴퓨터에 만들었던 덩어리 GitHub에 올리기 (git push)

Git 초기화와 로컬 저장소

이 폴더에서 Git으로 버전관리를 하고 싶어!

1. 원하는 폴더에서 Git 초기화를 하면 그때부터 가능 git init
2. Git 초기화를 하면 .git이라는 숨겨진 폴더가 만들어진다. 이게 로컬 저장소
3. 로컬 저장소에 내가 만든 버전 정보, 원격 저장소 주소 등이 저장된다.
4. 원격 저장소에서 내 컴퓨터로 코드를 받아오면 로컬 저장소가 자동으로 생긴다.

로컬 저장소 생성 실습

1. 내컴퓨터에 Boxiting-cat 폴더 생성
2. Git Bash로 만든 폴더에 들어가기
3. git init으로 로컬 저장소 생성

git init 명령어를 입력하니 Git repository가 초기화 된 것을 확인할 수 있다.

버전 생성 실습

1. VS Code에서 README.md, index.html 파일 생성

2. 원하는 파일만 선택하기

   git add README.md

3. 메세지를 달아 커밋으로 만들기

   git commit -m "프로젝트 설명 파일 추가"

4. 생성한 커밋 보기

   git log

커밋 이모저모

1. 커밋은 '의미 있는 변동사항'을 묶어서 만든다.
2. 버튼 클릭 버그를 고치는 데 5가지 파일을 수정했다면 그 5가지를 묶어서 하나의 커밋으로 만든다.
3. 동료 개발자(혹은 미래의 나)가 '버튼 클릭 버그'를 고치는 데 어떤 파일을 수정했는지 손쉽게 파악 가능
4. 커밋 메세지를 최대한 자세하게 적어주세요. 나중에 후회하지 않습니다.

원격 저장소 GitHub에서 만들고 커밋 푸시하기

1. GitHub에 로그인해서 Boxiting 저장소 생성
2. 내 컴퓨터 boxiting-cat 폴더에 GitHub 저장소 주소 알려주기

   git remote add origin https://github.com/아이디/이름(repo).git

3. 만든 커밋 푸시하기

   git push origin master

4. GitHub 사이트에서 올라간 커밋 확인

원격 저장소를 내 컴퓨터에 받아오기: 클론(Clone)

1. 내 컴퓨터에 boxiting-oct 폴더를 만들고 GitHub의 Boxiting 저장소 받아오기

git clone https://github.com/아이디/이름(repo).git

2. app.js 파일 생성 후 add -> commit -> push
3. GitHub에서 새 커밋 확인하기

Settings -> Manage access에서 collaborator를 추가하면 해당 유저에게 푸시 권한을 줄 수 있다.

Git에서의 커밋이란?

1. 변경 사항의 모음(X) 하나의 최종 코드 모음(O)

2. 기존 커밋과 비교해서 변경된 파일이 아니면 '변경되지 않았다.' 고만 저장해서 용량이 무겁지 않다.

   1. (고양이1 파일은 변경되지 않았으니까 3번째 버전에선 완전하게 저장 안하고 '변경되지 않았다.'고만 기록)
   2. SVN은 바로 이전 커밋과의 변경사항만 저장
   3. 그래서 커밋당 용량은 더 가볍지만 한 버전을 보려면 맨 처음 커밋부터 계산해야한다-> 속도 느림
   4. Git은 바로 이전 커밋만 보면 된다. -> 속도 빠름

   

요약

1. Git으로 추적하는 파일의 4가지 상태
2. 작업 공간 (Working directory)에 있는** 수정함, 추적 안됨** 파일을 스테이지로 올려 스테이지됨으로 변경한다.
3. 커밋을 하면 수정 없음 상태로 돌아가서 다시 파일을 수정할 수 있다.

평행세계 나누기 - 브랜치(Branch)

여러 줄로 커밋을 쌓는다?

Q. 왜 같이 작업하려면 여러 줄로 커밋을 쌓아야 할까? A. 한 줄에서 작업하면 충돌이 날 수 있다. 똑같은 코드를 동시에 수정할 가능성이 있다.

Q. 그럼 n줄로 쌓고 나중에 겹치나? A. 그렇다. 그럼 충돌이 나더라도 합치는 시점에 명시적으로 충돌을 해결할 수 있다.

그래서 나온게 브랜치개념

브랜치 만들기

git branch cat

만든 브랜치로 이동하기

git checkout cat

cat 브랜치에 커밋을 추가하면?

master 브랜치는 아직 과거 커밋을, cat 브랜치는 새 커밋을 가리킴

master로 이동하고, oct브랜치 만들고, 커밋

master 브랜치의 최신 커밋(고양4)을 기점으로 oct브랜치, cat 브랜치가 나뉘어짐

1. 코드의 재사용
2. 코드의 간결화
3. 코드의 확장성
4. 코드의 예측성(직관적인 클래스 네이밍)

📝 BEM (Block Element Modifier)

작명 규칙

• 개발, 디버깅, 유지보수를 위하여 CSS 선택자의 이름을 가능한 한 명확하게 만드는 것이 목표이다.
• 소문자, 숫자 만을 이용해서 작명한다.
• 여러단어의 조합은 하이픈(-)으로 연결하여 작명한다.
• ID는 사용할 수 없고, 오직 class명만 사용할 수 있다

블록 (Block)

• Block은 재사용 할 수있는 기능적으로 독립적인 컴포넌트를 뜻한다. (하나만 떼서 사용할 수 있는 형태)
• 블록은 환경에 영향을 받지 않아야 한다.👉 즉, 여백이나 위치위치 값(margin, position) 를 설정하면 안된다.
• 블럭은 서로 중첩이 가능 (ex. head block안에 logo block)
• 형태(red, big)가 아닌 목적(menu, button)에 맞게 작성한다.

  <div class="header">
  <div class="menu">....</div>
  <div class="search">....</div>
  </div>

요소 (Element)

• 엘리먼트는 블럭을 구성하는 단위 요소를 뜻하며, 더블 언더바(__)로 구분한다.
• 형태(red, big)가 아닌 목적(item, text, title)에 맞게 결정해야 한다.
• 요소는 블록의 부분으로만 사용 할 수 있고, 다른 요소의 부분으로는 사용할 수 없다.
• 모든 블록에서 요소는 필수가 아닌 선택적으로 사용한다. 즉 블록안에 요소가 없을 수도 있다.

.header__logo { … }
.header__menu { … }
.header__search { … }
.header__login { … }

/* block 이름이나 element 이름이 길 경우 – 하이픈으로 연결한다. */
.block-name__element-name {}

수식어 (Modifier)

• 블록이나 요소의 모양(color, size..), 상태(disabled, checked..)를 정의한다.
• block__element — modifier, block — modifier 형태로 사용(더블 하이픈)
• 수식어의 블리언 타입과 키-벨류 타입이 있다.
  • 블리언 타입 : 수식어가 있으면 값이 true 라고 가정한다. (form__button — disabled)
  • 키-벨류 타입 : 키, 벨류를 하이픈으로 연결하여 표시한다. (color-red, theme-ocean)
• 수식어는 단독으로 사용할 수 없다. 즉 기본 블록과 요소에 추가하여 사용해야 한다.

/*
탭 메뉴가 다른 영역에서 다른 스타일로 사용된다면,
메인 속성을 복사하여 추가 하거나, sass의 @extend를 활용하여 속성을 상속 받을 수 있다
*/

.header__navigation {
      background: #008cba;
      padding: 1px 0;
      margin: 2px 0;
}
.header__navigation‐‐secondary {
      @extend .header__navigation;
      background: #dfe0e0;
 }

혼합사용 (Mix)

• block1, block2__element 형태로 사용할 수 있다.
• block2__element 에 여백이나 위치를 지정하고 block1은 독립적으로 유지할 수 있다.

<div class=”header”>
     <div class=”search-form header__search-form”></div> 
</div>

BEM 장단점

장점

• 재사용성과 직관적인 클래스(class): BEM은 이해하기 쉽고, 직관적인 클래스 이름의 작명을 하기가 쉽다. 또한, Block 기반의 스타일로 Block을 다른 곳에 재사용하기 쉽다.

• 클래스(class) 중복 방지: BEM은 Block 단위의 class name을 통해 CSS의 원치 않은 상속을 제한하며, 클래스 네임 중복을 방지합니다.

단점

• 네이밍 명명법의 한계: BEM은 초기 Block의 네이밍은 간결하지만 안에 세부 요소로 들어갈수록 복잡한 명명법을 갖게 된다.이는 HTML내 복잡한 클래스(class)를 갖게 되며, 익숙치 않을 경우 괴이한 모습으로 비춰질 수 있다.

📝 SMACSS (Scalable and Modular Architecture for CSS)

• Class명을 통한 예측
• 재 사용
• 쉬운 유지보수
• 확장 가능

1. Base
   • 기본 스타일(Reset, Default .. )
   • 기본 스타일에는 !important 사용할 필요가 없다.
   • Base에서는 어떤 클래스(class)나 ID 선택 자도 포함하지 않는다\

     body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,
     textarea,button,select{margin:0;padding:0}
     body,input,textarea,select,button,table{font-size:14px;line-height:1.25}
     body.s,.s input,.s textarea,.s select,.s button,.s table{font-family:helvetica}
     body{position:relative;background-color:#fff;color:#000}
     body.s{-ms-text-size-adjust:none;-webkit-text-size-adjust:none}
     img,fieldset{border:0}
     ul,ol{list-style:none}
     table{border-collapse:collapse}
     em,address{font-style:normal}
     a{color:inherit;text-decoration:none}

2. Layout
   • 레이아웃과 관련된 스타일 정의
   • class명에 'l-' suffix(접미사)를 붙인다.

     #content {
     width: 80%;
     float: left;
     }
     #aside {
     width: 20%
     }
     
     

.l-fixed #content { width: 600px; margin-right: 10px; } .l-fixed #aside { width: 200px }

3. **Module**
    * 모듈과 관련된 스타일 정의
    * 스타일 재사용을 위한 요소다
    * Block, Element, Module
    * 재사용을 위해 ID와 element 사용 금지(만약, element 셀렉터를 사용해야 한다면, .box > span 처럼 child 셀렉터를 사용)
```html
<div class="forder">
    <span>Forder Name</span>
</div>
<div class="box">
...
</div>
<div class="basket">
...
</div>

.folder >span {
  padding-left: 20px;
  background: url(icon.png);
}

4. State
   • Hidden, expend, active, hover 등의 상태에서 사용을 나타내는 스타일 정의
   • Class명에 suffix “is-” 또는 “s-”를 붙여서 사용

     <div class="btn_area">
     <a href="#" class="btn btn_good is-active">좋아요버튼</a>
     <a href="#" class="btn btn_bad">나빠요버튼</a>
     </div>

     .btn {
     display: inline-block;
     background:#ddd;
     border-radius:4px;
     }
     .btn.is-active{
     background:#43f837;
     }
     .btn.is-hidden {
     display: none;
     }

5. Theme
   • 사이트의 전반적인 look과 feel 제어
   • 색이나 이미지를 불변하는 스타일과 분리 → 기존의 스타일을 재선언 할 수 있다.
   • 적용 점위가 넓으면 'theme-' suffix를 붙인다.

     .mod {
     border: 1px solid;
     }
     

.mod { border-color:blue }

## ❗유의사항
* 파생된 선택자 사용 금지
* ID 사용 금지
* !important 사용 금지
* class명은 의미있게, 다른이가 이해할 수 있도록 선언

## SAMCSS 장단점
### 장점
* **범주화를 통한 패턴화:** 5개의 범주화(Base, Layout, Module, State, Theme)를 통해 알아보기 쉽고 재사용 가능한 컴포넌트를 작성할 수 있다.
* **모듈 및 요소의 상태 확인:** State 규칙을 통해 해당 요소의 상태까지 예측할 수 있으며,
이는 자바스크립트 훅을 추가하여 이벤트를 예측하기 쉽게할 수 있다.

### 단점
* 규칙에 대한 종속성
* 규칙으로 CSS 작성에 제한을 둘 수 있다.


-----

# 📝 OOCSS(Object Oriented CSS)
* Object Oriented CSS의 약자
* Nicole Sullivan에 의해 개발된 프레임워크
* CSS를 모듈 방식으로 코딩하여 중복을 최소화하는 기법

1. **표현과 구조의 분리(Separate structure and skin)**
표현은 시각적 속성(colors, fonts, shadows, gradients 등)을 얘기하며, 구조는 (width, height, padding, margin 등) 요소의 크기 및 위치를 말함. 

2. **컨테이너와 콘텐츠의 분리(Separation of Container and Content)**
컨테이너란 스타일의 적용 범위를 제한하는 범주이며, 내용물이란 컨테이너로 인해 제한된 스타일의 범주를 말한다.

## OOCSS 장단점
### 장점
* **확장성:** OOCSS를 사용하면 각 요소를 고려하지 않고 여러 요소를 자유롭게 혼합하고 다시 적용 할 수 있다. 따라서 한 프로젝트에서 다른 개발자로 프로젝트가 전달 될 때마다 CSS를 더 많이 쌓는 대신에, 프로젝트의 신규 사용자는 이전에 이미 추상화 한 것을 다시 사용할 수 있다.

* **재사용성과 속도:** CSS 파일은 웹 사이트가 복잡 해짐에 따라 기하 급수적으로 확장되는 경우가 있다. 특이성은 중요하지만 CSS 파일에는 필요한 것보다 더 많은 정보가 포함되는 경우가 많다.
OOCSS는 DRY(Don't Repeat Yourself)에 입각하여, CSS의 재사용성과 효율 및 속도를 향상시킬 수 있다.

### 단점
* **클래스(class)의 복잡화:** 클래스가 생성되는 방식에는 훨씬 더 많은 분리가 있기 때문에 모든 스타일 요소를 설명하기 위해 요소에 여러 클래스를 추가해야 할 수도 있다. 이는 마크업을 혼란스럽게 만들 수 있으며, OOCSS가 익숙치 않은 경우 혼동을 줄 수 있다.



> [참고 url](https://medium.com/witinweb/css-%EB%B0%A9%EB%B2%95%EB%A1%A0-1-bem-block-element-modifier-1c03034e65a1)
[참고 url](https://wit.nts-corp.com/2015/04/16/3538)

HEROPY, [1분코딩] (https://studiomeal.com/archives/533) 을 참고하여 작성했습니다.

Flex와 Grid의 큰 차이점은 Flex는 한 방향 레이아웃 시스템이고 (1차원) Grid는 두 방향(가로-세로) 레이아웃 시스템 (2차원 행과 열)

CSS Grid는 예전부터 핵(Hack)으로 불린 다양한 레이아웃 대체 방식들을 해결하기 위해 만들어진 특별한 CSS 모듈입니다.

Grid Properties

Grid Container

부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고, 자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다. “컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것”이라고 생각하시면 됩니다.

display: grid;

Grid Container(컨테이너)를 정의합니다. 정의된 컨테이너의 자식 요소들은 자동으로 Grid Items(아이템)로 정의됩니다.

grid-template-rows, grid-template-columns

• grid-template-rows는 행(row)의 배치
• grid-template-columns는 열(column)의 배치
• fr(fraction, 공간 비율) 단위 사용 가능
• repeat() 함수를 사용 가능

// column을 200px, 200px, 500px
grid-template-columns: 200px 200px 500px;

// 1fr 1fr 1fr은 균일하게 1:1:1 비율인 3개의 column을 만든다.
grid-template-columns: 1fr 1fr 1fr;

// 고정크기와 가변크기를 섞어서 사용 가능
grid-template-columns: 100px 2fr 1fr;

.container {
  grid-template-rows: repeat(3, 100px);
  grid-template-columns: repeat(4, 1fr 2fr 3fr);
  /* grid-template-columns: 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr 1fr 2fr 3fr; */
}

grid-template-areas

지정된 그리드 영역 이름(grid-area)을 참조해 그리드 템플릿을 생성합니다.

⚠grid-area는 Grid Container가 아닌 Grid Item에 적용하는 속성입니다.

//.(마침표)를 사용하거나 명시적으로 none을 입력해 빈 영역을 정의
.container {
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main . ."
    "main . aside"
    "footer footer footer";
}
header { grid-area: header; }
main   { grid-area: main;   }
aside  { grid-area: aside;  }
footer { grid-area: footer; }

grid-template

grid-template-rows, grid-template-columns 그리고 grid-template-areas의 단축 속성입니다.

.container {
  grid-template:
    [1행시작선이름] "AREAS" 행너비 [1행끝선이름]
    [2행시작선이름] "AREAS" 행너비 [2행끝선이름]
    / <grid-template-columns>;
}

.container {
  display: grid;
  grid-template:
    "header header header" 80px
    "main main aside" 350px
    "footer footer footer" 130px
    / 2fr 100px 1fr;
}
header { grid-area: header; }
main   { grid-area: main; }
aside  { grid-area: aside; }
footer { grid-area: footer; }

위 예제의 컨테이너는 다음과 같이 해석할 수 있다.

.container {
  display: grid;
  grid-template-rows: 80px 350px 130px;
  grid-template-columns: 2fr 100px 1fr;
  grid-template-areas:
    "header header header"
    "main main aside"
    "footer footer footer";
}

row-gap, column-gap, gap(간격 만들기)

row-gap(grid-row-gap)

각 행과 행 사이의 간격(Gutter)을 지정

더 명확하게는 그리드 선(Grid Line)의 크기를 지정한다고 표현할 수 있습니다.

column-gap(grid-column-gap)

각 열과 열 사이의 간격(Gutter)을 지정

gap(grid-gap)

각 행과 행, 열과 열 사이의 간격(Gutter)을 지정

.container {
  gap: <grid-row-gap> <grid-column-gap>;
}

.container {
  display: grid;
  grid-template-rows: repeat(2, 150px);
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 10px;
}
/* 하나의 값으로 통일할 수 있습니다. */
.container {
  gap: 10px;  /* row-gap: 10px; + column-gap: 10px; */
}
/* 하나의 값만 적용하고자 한다면 다음과 같이 사용할 수 있습니다. */
.container {
  gap: 10px 0; /* row-gap */
  gap: 0 10px; /* column-gap */
}

grid-auto-rows, grid-auto-columns (그리드 형태를 자동으로 정의)

grid-auto-rows

암시적 행(Track)의 크기를 정의합니다. 아이템(Item)이 grid-template-rows로 정의한 명시적 행 외부에 배치되는 경우 암시적 행의 크기가 적용됩니다.

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px; /* 명시적 2개 행 정의 */
  grid-template-columns: 150px 150px; /* 명시적 2개 열 정의 */
  grid-auto-rows: 100px; /* 그 외(암시적) 행의 크기 정의 */
}
.item:nth-child(3) {
  grid-row: 3 / 4;
}

grid-auto-columns

암시적 열(Track)의 크기를 정의합니다. 아이템(Item)이 grid-template-columns로 정의한 명시적 열 외부에 배치되는 경우 암시적 열의 크기가 적용됩니다.

.container {
  width: 300px;
  height: 200px;
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 150px 150px;
  grid-auto-rows: 100px;
  grid-auto-columns: 100px;
}
.item:nth-child(3) {
  grid-row: 3 / 4;
  grid-column: 3 / 4;
}

grid-auto-flow (자동 배치)

배치하지 않은 아이템(Item)을 어떤 방식의 ‘자동 배치 알고리즘’으로 처리할지 정의합니다.

배치한 아이템은 grid-area(이하 개별 속성 포함)를 사용한 아이템을 의미합니다.

• row: 각 행 축을 따라 차례로 배치
• column: 각 열 축을 따라 차례로 배치
• row dense(dense): 각 행 축을 따라 차례로 배치, 빈 영역 메움!
• column dense각 열 축을 따라 차례로 배치, 빈 영역 메움!

/* For column & column dense */
.container {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: column || column dense;
}
.item:nth-child(1) {
  grid-column: 2 / span 2;
}
.item:nth-child(2) {
  grid-column: span 2;
}

grid

grid-template-xxx과 grid-auto-xxx의 단축 속성입니다.

.container {
  grid: <grid-template>;
  grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
  grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
}

Grid Items

grid-row-start, grid-row-end, grid-column-start, grid-column-end

그리드 아이템(Item)을 배치하기 위해 그리드 선(Line)의 ‘시작 위치’와 ‘끝 위치’를 지정합니다. ‘숫자’를 지정하거나, ‘선 이름’을 지정하거나, span 키워드를 사용합니다.

.item:nth-child(1) {
  /* Row 1번에서 3번(1+2=3)까지 */
  grid-row-start: 1;
  grid-row-end: span 2;

  /* Column 2번에서 3번(2+1=3)까지 */
  grid-column-start: 2;
  /* grid-column-end: span 1; (생략) */
}

span 키워드를 ‘시작 위치’에 작성하고, ‘끝 위치’를 명시해서 확장할(-) 수도 있습니다.

.item:nth-child(1) {
  /* Column 3번에서 2번(3-1=2)까지 */
  /* grid-row-start: span 1; (생략) */
  grid-row-end: 3;

  /* Column 4번에서 2번(4-2=2)까지 */
  grid-column-start: span 2;
  grid-column-end: 4;
}

grid-row

grid-row-start과 grid-row-end의 단축 속성입니다. 각 속성을 /로 구분하는 것에 주의하세요.

.item {
  grid-row: <grid-row-start> / <grid-row-end>;
}

// 각 코드 블록 내 아이템(.item)들은 모두 같은 의미입니다.

.item {
  grid-row-start: 1;
  grid-row-end: 2;
}
.item {
  grid-row: 1 / 2;
}

------------------------
.item {
  grid-row-start: 2;
  grid-row-end: span 3;
}
.item {
  grid-row: 2 / span 3;
}
.item {
  grid-row: 2 / 5;
}
------------------------
.item {
  grid-row-start: span 3;
  grid-row-end: 4;
}
.item {
  grid-row: span 3 / 4;
}
.item {
  grid-row: 1 / 4;
}
------------------------

grid-column

grid-column-start과 grid-column-end의 단축 속성입니다. 각 속성을 /로 구분하는 것에 주의하세요.

.item {
  grid-column: <grid-column-start> / <grid-column-end>;
}
------------------------
.item {
  grid-column-start: -1;
  grid-column-end: -3;
}
.item {
  grid-column: -1 / -3;
}
.item {
  /* Column -1번에서 -3번(-1-2=-3)까지 */
  grid-column: span 2 / -1;
}
------------------------
// 각 코드 블록 내 아이템(.item)들은 모두 같은 의미입니다.
// 음수 결과를 위해 span 키워드를 ‘시작 위치’에 작성함에 주의하세요!

.item {
  grid-column-start: 2;
  grid-column-end: -1;
}
.item {
  /* Column 2번에서 끝(-1번)까지 */
  grid-column: 2 / -1;
}

grid-area

grid-row-start, grid-column-start, grid-row-end 그리고 grid-column-end의 단축 속성입니다. 혹은 grid-template-areas가 참조할 영역(Area) 이름을 설정할 수도 있습니다. 영역 이름을 설정할 경우 grid-row와 grid-column 개념은 무시됩니다.

align-self (개별 아이템 세로 정렬)

해당 아이템을 세로(column축) 방향으로 정렬합니다. 아이템에 적용합니다.

.item {
    align-self: stretch;
    /* align-self: start; */
    /* align-self: center; */
    /* align-self: end; */
}

justify-self (개별 아이템 가로 정렬)

해당 아이템을 가로(row축) 방향으로 정렬합니다. 아이템에 적용합니다.

.item {
    justify-self: stretch;
    /* justify-self: start; */
    /* justify-self: center; */
    /* justify-self: end; */
}

place-self

align-self와 justify-self를 같이 쓸 수 있는 단축 속성이예요. align-self, justify-self의 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에 적용됩니다.

.item {
    place-self: start center;
}

order

그리드 아이템이 자동 배치되는 순서를 변경할 수 있습니다. 숫자가 작을수록 앞서 배치됩니다.

z-index

z-index 속성을 이용해 아이템이 쌓이는 순서를 변경할 수 있습니다.

.item:nth-child(1) {
  grid-area: 1 / 1 / 2 / 3;
}
.item:nth-child(2) {
  grid-area: 1 / 2 / 3 / 3;
  z-index: 1;
}
.item:nth-child(3) {
  grid-area: 2 / 2 / 3 / 4;
}

HEROPY, [1분코딩] (https://studiomeal.com/archives/197) 을 참고하여 작성했습니다.

📝FlexBox란?

Flexible Box, Flexbox 라고 부르며 기존보다 세련된 레이아웃 배치 기능이다. 유연하게 속성들을 배치하여 레이아웃을 잡는 아주 유용한 기능이다.

Flex 컨테이너에 적용하는 속성들

Flex Container에 적용하기(부모)

display: flex;

display 속성으로 Flex Container를 정의 할 수 있다.

값	의미
flex	Block 특성의 Flex Container를 정의
inline-flex	Inline 특성의 Flex Container를 정의

flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성입니다.

.container {
    flex-flow: row wrap;
    /* 아래의 두 줄을 줄여 쓴 것 */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
}

flex-direction (배치 방향 설정)

Items의 주 축(main-axis)을 설정합니다. 아이템들이 배치되는 방향에 대한 속성입니다.

값	의미	기본값
row	Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시	row
row-reverse	Items를 row의 반대 축으로 표시
column	Items를 수직축(위에서 아래로)으로 표시
column-reverse	Items를 column의 반대 축으로 표시

flex-wrap(줄넘김 처리 설정)

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 할지 결정하는 속성입니다.

.container {
    flex-wrap: nowrap;
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */
}

값	의미	기본값
nowrap	모든 Itmes를 여러 줄로 묶지 않음(한 줄에 표시)	nowrap
wrap	Items를 여러 줄로 묶음
wrap-reverse	Items를 wrap의 역 방향으로 여러 줄로 묶음

justify-content(메인축 방향 정렬)

.container {
    justify-content: flex-start;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
    /* justify-content: space-evenly; */
}

align-content (여러 행 정렬)

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다. ⚠ Items가 한 줄일 경우 align-itmes 속성을 사용!

.container {
    flex-wrap: wrap;
    align-content: stretch;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
    /* align-content: space-evenly; */
}

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
space-between	시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨
space-around	Items를 균등한 여백을 포함하여 정렬

align-items (수직축 방향 정렬)

수직축 방향으로 아이템을들 정렬하는 속성 Items가 한 줄일 경우 많이 사용합니다.

⚠ 주의할 점은 Items가 flex-wrap을 통해 여러 줄(2줄 이상)일 경우에는 align-content 속성이 우선합니다. 따라서 align-items를 사용하려면 align-content 속성을 기본값(stretch)으로 설정해야 합니다.

.container {
    align-items: stretch;
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */
    /* align-items: baseline; */
}

값	의미	기본값
stretch	Container의 교차 축을 채우기 위해 Items를 늘림	stretch
flex-start	Items를 시작점(flex-start)으로 정렬
flex-end	Items를 끝점(flex-end)으로 정렬
center	Items를 가운데 정렬
baseline	Items를 문자 기준선에 정렬

Flex 아이템에 적용하는 속성들

order (배치 순서)

Item의 순서를 설정합니다. Item에 숫자를 지정하고 숫자가 클수록 순서가 밀리고 음수가 허용됩니다.

HTML 구조와 상관없이 순서를 변경할 수 있기 때문에 유용합니다. 단, "시각적" 순서일 뿐, HTML 자체 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의해야한다.

flex-grow (유연하게 늘리기)

Item의 증가 너비 비율을 설정합니다. 숫자가 크면 더 많은 너비를 가집니다. Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

값	의미	기본값
숫자	Item의 증가 너비 비율을 설정	0
예를 들어 Item이 3개이고 증가 너비가 각각 1, 2, 1이라면,
첫 번째 Item은 총 너비의 25%(1/4)을,
두 번째 Item은 총 너비의 50%(2/4)를,
세 번째 Item은 총 너비의 25%(1/4)을 가지게 됩니다.

Item이 두개 일때 두번째 Item은 고정 width값 주고 나머지 Item에 flex-grow: 1 주면 고정 width값을 가지고 있는 두번째 넓이 - 전체화면 = 첫번째 요소가 너비에 자동으로 맞게 설정된다.

flex-shrink (유연하게 줄이기)

Item이 감소하는 너비의 비율을 설정합니다. 숫자가 크면 더 많은 너비가 감소합니다. Item이 가변 너비가 아니거나, 값이 0일 경우 효과가 없습니다.

flex-basis (유연한 박스의 기본 영역)

flex-basis는 Flex 아이템의 기본 크기를 설정합니다(flex-direction이 row일 때는 너비, column일 때는 높이).

.item {
    flex-basis: auto; /* 기본값 */
    /* flex-basis: 0; */
    /* flex-basis: 50%; */
    /* flex-basis: 300px; */
    /* flex-basis: 10rem; */
    /* flex-basis: content; */
}

flex (단축 속성)

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성입니다.

⚠ 주의할점 flex: 1;이면 flex-shrink와 flex-basis가 생략 되서 기본 값인 flex: 1 1 auto; 가 아니다. flex-basis의 기본값은 auto이지만 단축 속성인 flex에서 그 값을 생략할 경우 0이 적용이 되어 flex: 1 1 0;이 된다.

flex: 증가너비 감소너비 기본너비;
.item {
  flex: 1 1 20px;  /* 증가너비 감소너비 기본너비 */
  flex: 1 1;  /* 증가너비 감소너비 */
  flex: 1 20px;  /* 증가너비 기본너비 (단위를 사용하면 flex-basis가 적용됩니다) */
}

align-self (수직축으로 아이템 정렬)

값	의미	기본값
auto	Container의 align-items 속성을 상속받음	auto
stretch	Container의 교차 축을 채우기 위해 Item을 늘림
flex-start	Item을 각 줄의 시작점(flex-start)으로 정렬
flex-end	Item을 각 줄의 끝점(flex-end)으로 정렬
center	Item을 가운데 정렬
baseline	Item을 문자 기준선에 정렬

div, span은 아무 의미가 없다. div, span 요소를 많이 사용 한다는 것은 그만큼 HTML 태그를 의미 적절하게 사용하지 않다고 해석 할 수 있기 때문에 대체할 시멘틱 요소를 사용함으로써 사용 빈도를 줄이는 것이 좋다.

div 요소를 대체할 만한 요소들

h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, 
blockquote, pre, address ....

article, aside, nav, section, hgroup, 
header, footer, main, figure, figcaption, details,
summary, dialog, datalist...
UA{display: block}

span 요소를 대체할 만한 요소들

a, em/strong, label, q, sub/sup, ins/del,
code, dfn, abbr, cite, kdb, ruby, samp, var, small,
b, u, i, s ...

data, time, mark, output, meter, progress
UA{display: inline|inline-block}

SECTIONING

• hx, hgroup, header, footer → 섹셔닝은 아니지만 함께 쓰는 요소
• article, aside, nav, section → 섹셔닝 요소

header, footer

• header: 도입부, 헤딩, 헤딩그룹, 목차, 검색, 로고
• footer: 저자, 저작권, 연락처, 관련문서

의미 범위: 섹셔닝 루트(body) 또는 섹셔닝 콘텐츠(article, aside, nav, section) 여러번 사용해도 된다.

** 반드시 필요한 요소는 아니지만 이런 의미일 때 div 대신 사용하길 권장 **

section, article

• section: 제목이 있는 ** 주제별 콘텐츠 그룹 ** 또는 응용 프로그램 영역.
• article: 섹션 요소 중 독립적으로 배포 가능한 완결형 콘텐츠. 뉴스 기사, 블로그 본문, 사용자의 댓글 등.
• 용법 :
  • 중첩 허용 (section 안 section, article 안 article)
  • h1~6 요소 사용을 강력하게 권장,
  • header / footer 요소 사용하는 것은 선택사항

nav

• 현재 사이트 또는 현재 페이지 일부를 링크하고 있는 주요 탐색 섹션.
• 빵부스러기 링크, 약관, 저작권 고지 같은 링크는 적절하지 않음.
• 용법 : *h1~6 * 요소 요소를 포함하는 것을 *강력하게 권장 *

aside

• 페이지의 주된 내용과 관련이 약해서 구분할 필요가 있는 섹션
• 부수적인 콘텐츠, 관련기사, 광고 등의 내용을 포함할 수 있다
• 용법 : *h1~6 * 요소 요소를 포함하는 것을 *강력하게 권장 * aside도 섹셔닝 콘텐츠이기 때문에 헤딩 요소를 포함하는 것을 강력하게 권장 (ex:배너, 페이지바로가기 링크)

main

• 문서의 핵심 주제 또는 애플리케이션의 핵심 기능과 직접 관련있는 콘텐츠 영역을 의미.
• 페이지마다 반복되지 않는 내용을 포함하여야 한다.
• 섹셔닝 콘텐츠가 아니므로 h1~6, header, footer 요소의 범위와 관련없음.
• 하나의 페이지 안에서 하나의 main 요소만 표시 가능
• 섹셔닝 관련 요소(article, aside, nav, section, header, footer)의 자식이 될 수 없다.
• body, div 요소를 제외한 다른 요소의 자손이 될 수 없다.

dialog

• dialog 요소는 사용자와 상호 작용하는 응용 프로그램(대화상자)을 의미
• open 속성을 추가하면 대화 상자가 활성화되고 사용자가 대화 상자를 통해 상호 작용할 수 있다.
• 보통 입력 양식과 콘트롤을 포함하고 있으며 닫기 기능을 제공한다.
• 키보드 초점이 요소 내부에서 순환하도록 처리하여야 한다.

figure, figcation

• 문서의 주된 흐름을 위해 참조하는(부록으로 옮겨도 괜찮은) 독립적인 완결형 요소로서 이미지, 도표, 코드 등의 내용물과 설명(figcaption)을 포함한다.
• 선택적으로 처음 또는 마지막에 figcaption 요소를 자식 요소로 포함할 수 있고 또는 생략할 수 있다.
• figure안에서 figcaption 요소가 선언 된다면 한 번만 선언할 수 있다.

mark

• 독자의 주의를 끌기 위한 하이라이트.
• 현재 독자의 행위나 관심에 따라 강조한 것.
• 검색 결과 목록에서 사용자가 입력한 키워드.

etc

adress

• 가까운 조상 article 또는 body 요소를 범위로 하는 관련 연락처 정보.
• 우편 정보를 의미하는 것이 아님에 유의(저작권 정보등이 적합)
• 흔히 footer 요소에 나타남.
• p 요소의 자손이 될 수 없음

(p의 요소는 프레이킹 콘텐츠만 담을 수 있는데 address는 프레이징이 아니라서 address안에 p가 올 수는 있지만 p가 address안에 들어갈 수는 없다!)

ins, del

ins: 추가한 내용을 의미 del: 삭제한 내용을 의미

• 콘텐츠 모델이 투명해서 어떤 요소라도 포함할 수 있음(자식요소를 무엇이든 담을 수 있다.)
• 여러 단락을 한번에 포함하는 것은 부적절하다.

progress

• 계산 또는 사용자 과업의 진척도
• 원격 호스트의 응답을 기다려야 하는 경우도 있기 때문에 정확하지 않을 수 있다.
• 낡은 브라우저를 위해 value 값과 별도로 콘텐츠를 제공하는 것이 좋다.

b, i, s, u

• b: 강조할 의도가 없는 볼드. strong 요소 고려
• i: 현재 맥락과 다른 분위기. em 요소 고려
• s: 정확하지 않거나 관련 없는. del 요소 고려
• u: 오타, 중국 고유명사 등의 표기. ins 요소를 고려