css 총정리 2

sass(scss) -> css 전처리기 언어다.

 

전처리기 언어는 css 문법과 유사하지만 훨씬 많은 기능을 사용할 수 있다.

직접 동작시키지 않는데, 전처리기 언어 문법으로 코딩 후 css로 컴파일해서 웹으로 동작시킨다.

 

css 코드를 생산해내기 위해 사용하는 일종의 도구나 마찬가지다.

---

sass와 scss는 문법 생김새는 다르지만 사실 같은 파생언어나 다름없다.

 

sass는 코드를 css로 해석하는 역할을 하는 전처리기로써의 의미고, 다른 하나는 문법으로써의 의미다.

 

scss는 css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트다.

scss 문법을 기반으로 코드를 작성하면 sass 전처리기의 도움을 받아 컴파일러가 이를 css로 빌드업가능하다.

또 압도적으로 더 많이 사용된다.

---

sass vs scss 

 

1. 확장자

sass -> .sass

scss -> .scss

 

2. 구문 스타일

sass -> 들여쓰기

scss -> 중괄호, 세미콜론 (css처럼)

 

3. 재사용 가능한 기능 (믹스인 문법)

sass -> =로 선언하고 +로 적용

scss -> @mixin으로 선언하고 @include로 적용

 

설치, 세팅 -> https://inpa.tistory.com/entry/SCSS-%F0%9F%92%8E-SassSCSS-%EB%9E%80-%EC%84%A4%EC%B9%98-%EB%B0%8F-%EC%BB%B4%ED%8C%8C%EC%9D%BC

💎 SaSS & SCSS 소개 & 설치 세팅 💯 총정리

https://poiemaweb.com/sass-basics

Sass - Basics | PoiemaWeb

scss가 뭔지, 어떻게 설치하는지만 대충 보고 넘어가기로 함.

아직 써먹질 못하니 읽어만 보고선 기억에 남을리가 없다...

---

자바스크립트

 

초창기 자바스크립트는 웹 페이지의 보조적인 기능을 수행하기 위해 한정적인 용도로 사용됐다.

단순히 렌더링하는 수준)

 

그러다 99년에 자바스크립트를 이용해 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능인

ajax가 (xml이라는 이름으로)등장한다.

ajax는 웹페이지 변경이 필요없는 부분은 다시 렌더링하지 않고 서버로부터 필요한 데이터만 전송받아 변경이 필요한 부분만 한정적으로 렌더링한다.

 

자바스크립트는 인터프리터 언어다.

 

브라우저는 동기적으로 html, css, js를 처리한다. 스크립트 태그의 위치에 따라 블로킹이 발생하여 dom의 생성이 지연될 수 있다. body 요소 가장 아래에 위치시키는 것이 가장 좋다.

---

데이터 타입 - 프로그래밍 언어에서 사용할 수 있는 값의 종류

변수 - 값이 저장된 메모리 공간의 주소를 가리키는 식별자

리터럴 - 소스코드 안에서 직접 만들어낸 상수 값 자체를 말하며 값을 구성하는 최소 단위

 

---

 

문 : 각각의 명령 (리터럴, 연산자, 표현식, 키워드 등으로 구성)

프로그램 : 명령들의 집합

 

문들은 일반적으로 위에서 아래로 실행되는데

실행 순서는 조건문, 반복문에 의해 제어가능하다.

이것을 흐름 제어라고 한다.

 

자바스크립트에서는 블록 유효범위(블록 레벨 스코프)를 생성하지 않고

함수 단위의 유효범위(함수 레벨 스코프)만 생성된다.

 

표현식은 하나의 값으로 평가된다.

 

문은 하나의 완전한 문장, 표현식은 문을 구성하는 요소다.

표현식은 그 자체로 하나의 문이 될 수도 있으나 그 이상의 행위는 할 수 없다.

문은 변수, 함수를 생성하기도 하고 제어문을 생성하기도 한다.

표현식을 통해 평가한 값으로 컴퓨터에게 명령을 하는 것은 문이다.

---

객체 - 함수, 배열, 정규표현식 등

 

객체는 키와 값으로 구성된 프로퍼티의 집합이다.

함수는 일급 객체이므로 값으로 취급할 수 있다.

함수가 프로퍼티 값으로 사양되면 일반 함수와 구분하기 위해 메소드라고 부른다.

 

객체지향의 상속을 구현하기 위해 프로토타입이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다.

---

변수는 값의 위치(주소)를 기억하는 저장소다.

값의 위치는 값이 위치한 메모리 상의 주소다.

= 변수는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자다.

 

메모리에 값을 저장하기 위해서는 메모리의 크기를 알아야 한다.

값의 종류에 따라 확보해야 할 메모리의 크기가 다르기 때문이다.

= 이 데이터의 종류를 데이터 타입이라고 한다.

자바스크립트는 동적 타입 언어이므로 값이 할당되는 과정에서 자동으로 변수 타입이 결정된다.

---

원시 타입

= 원시 타입의 값은 변경 불가능하며, 값에 의한 전달이다.

변경 불가능하다는 것은 원래 값을 수정할 수 없다는 것. 재할당은 가능하다. 재할당하면 새로운 메모리에 생성한다.

 

1. number 

모든 수를 실수로 처리하므로 정수끼리 나누더라도 실수가 나올 수 있다.

 

2. string

유사 배열로, 배열처럼 인덱스를 통해 접근할 수 있다.

 

5. null

typeof 연산자 대신 일치연산자(===)를 사용해야 한다.

 

---

객체 타입

프로퍼티(이름, 값을 가지는 데이터), 메소드(동작)를 포함할 수 있는 독립적 주체다.

참조에 의한 전달 방식이다.

---

상수 : 변수 이름을 대문자로 해서 암시

---

함수 레벨 스코프 (var)

함수 내에서 선언된 변수만 그 함수 내부에 접근 가능

함수 외부에서는 접근 불가능하다.

= 함수 내부에 선언된 변수만 지역변수, 나머지는 전역변수로 간주한다.

 

블록 레벨 스코프 (let, const)

중괄호로 둘러싸인 블록 내에서 선언된 변수가 그 블록 내부에서만 접근 가능하다는 것을 의미한다.

블록 외부에서는 접근 불가능하다.

= 모든 블록 내부에서 선언된 변수까지 지역변수로 인정한다.

---

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

---

반복문, 제어문

https://poiemaweb.com/js-control-flow

Control Flow | PoiemaWeb

---

타입변환, 단축평가

https://poiemaweb.com/js-type-coercion

Type coercion | PoiemaWeb

---

객체

 

객체는 프로퍼티들의 집합이다.

프로퍼티는 키와 값으로 구성되어 있다.

프로퍼티 값이 함수일 경우 메소드라고 부른다.

 

객체는 원래 별도의 객체 생성 방법이 존재했지만 새롭게 클래스가 도입되었다.

---

객체 생성 방법

 

객체 리터럴

let myObject = {
  name: "홍길동",
  age: 30
};

= 중괄호를 사용해 객체 생성, 더 많이 사용

 

---

object 생성자 함수

객체를 만드는 여러 방법 중 하나다.

 

생성자 함수는 new 키워드와 함께 객체를 생성하고 초기화 하는 함수다.

생성자 함수를 통해 생성된 객체는 인스턴스라고 불린다.

 

자바스크립트는 object 생성자 함수 이외에도 string, number, boolean, arrat, date, regexp 등의 빌트인 생성자 함수를 제공한다.

 

생성자 함수의 이름은 파스칼 케이스를 사용하는 것이 일반적이다.

let myObject = new Object();
myObject.name = "홍길동";
myObject.age = 30;

---

생성자 함수

 

사용자가 직접 정의한 함수를 사용해서 객체를 만드는 방법이다.

비슷한 타입의 객체를 여러 개 쉽게 만들 수 있다.

 

기존

var person1 = {
  name: 'Lee',
  gender: 'male',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

var person2 = {
  name: 'Kim',
  gender: 'female',
  sayHello: function () {
    console.log('Hi! My name is ' + this.name);
  }
};

* name, gender 값만 다르다.

 

생성자 함수 사용

function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person1 = new Person("홍길동", 30);
let person2 = new Person("김철수", 25);

person이라는 생성자 함수를 정의하고, 이 함수를 사용해 name, age 프로퍼티를 가진 객체 두 개를 만든다.

new 키워드를 사용해 person함수를 호출하면 person타입의 새로운 객체가 만들어진다.

 

정리!

object 생성자 함수는 js에서 기본적으로 제공하는 간단한 객체를 만드는 방법

사용자 정의 생정자 함수는 사용자가 직접 만든 함수로 복잡한 객체나 여러 개의 비슷한 객체 만들 때 사용

(이라고 지피티가 알려줬답니다,,,)

 

생성자 함수 이름은 대문자로 시작한다.

this는 생성자 함수가 생성할 인스턴스를 가리킨다.

this와 연결(바인딩) 되어있는 프로퍼티, 메소드는 public(외부에서 참조 가능)하다.

생성자 함수 내에서 선언된 일반 변수는 private하다. (생성자 함수 내부에서는 자유롭게 접근하지만 외부에서는 접근 불가)

---

프로퍼티 키 : 일반적으로 문자열(따옴표 사용), 사용 가능한 유효한 이름인 경우 따옴표 생략 가능하다.

표현식을 프로퍼티 키로 사용하려면 키로 사용할 표현식을 대괄호로 묶어야 한다.

---

프로퍼티 값에 접근하는 방법은 마침표 표기법, 대괄호 표기법이 있다.

 

둘 다 사용 가능 :키가 유효한 자바스크립트 이름이고 예약어가 아닌 경우

대괄호 표기법만 가능 : 키가 유효한 자바스크립트 이름이 아니거나 예약어인 경우 (반드시 문자열이 들어가야 한다)

---

for in문

 

객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다.

그러나 배열에는 사용하지 않는 게 좋다. (for of 사용하기)

---

빌트인 객체 

 

엔진에 사전에 정의되어 있어 별도 선언 없이 바로 사용할 수 있는 객체들을 말한다.

자바스크립트의 기본 기능을 제공하며 주로 글로벌 객체로 분류된다.

---

객체 변경

var user = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var myName = user.name; // 변수 myName은 string 타입이다.

user.name = 'Kim';
console.log(myName); // Lee

myName = user.name;  // 재할당
console.log(myName); // Kim

user.name의 값이 변경되더라도 변수 myName의 값도 같이 변경되지는 않는다.

 

var user1 = {
  name: 'Lee',
  address: {
    city: 'Seoul'
  }
};

var user2 = user1; // 변수 user2는 객체 타입이다.

user2.name = 'Kim';

console.log(user1.name); // Kim
console.log(user2.name); // Kim

같은 주소를 참조하고 있는 user1, 2는 동시에 변경된다.

 

이런 식으로 의도하지 않은 객체의 변경이 발생하는 경우

해결 방법은 객체를 불변 객체를 만들어 프로퍼티 변경을 방지하고,

객체의 변경이 필요한 경우 객체의 방어적 복사를 통해 새로운 객체를 생성한 후 변경하는 것이다.

= 객체의 방어적 복사 & 불변객체화를 통한 객체 변경 방지 

 

* 하지만 이 방법들을 사용해 불변 객체를 만드는 것은 번거롭고 성능상 이슈도 있어

큰 객체에는 사용하지 않는 것이 좋은데, 다른 대안으로 immutable.js를 사용하는 것이다.

https://poiemaweb.com/js-immutability

Immutability | PoiemaWeb

---

함수

 

함수 정의 방법

 

1. 함수 선언문

선언 위치와 상관없이 코드 내 어느 곳에서든지 호출이 가능하다. (호이스팅 된다)

function square(number) {
  return number * number;
}

 

2. 함수 표현식

함수 리터럴 방식으로 함수를 정의하고 변수에 할당한 것이다.

이 방식은 함수명을 생략할 수 있는데, 이런 함수를 익명 함수라고 한다.

함수 호이스팅이 아닌 변수 호이스팅이 발생한다.

var square = function(number) {
  return number * number;
};

 

기명

var foo = function multiply(a, b) {
  return a * b;
};

 

익명

var bar = function(a, b) {
  return a * b;
};

 

변수에 할당하면, 변수는 함수를 가리키는 참조값을 저장하게 되므로

함수 호출시 함수명이 아니라, 변수명을 사용해야 한다.

 

3.  function 생성자 함수

 

일반적으로 사용하지 않는다.

var square = new Function('number', 'return number * number');

---

매개변수(파마티터, 인자) vs 인수(arument)

 

함수에 전달한 인수는 매개변수에 할당된다.

---

__proto__ 접근자 프로퍼티

 

객체 내부 프로퍼티인 prototype에 접근하기 위한 방법 중 하나다.

즉, 객체의 프로토타입(부모 객체)에 접근하거나 설정할 수 있게 해준다.

 

프로토 타입은 객체가 다른 객체의 속성과 메서드를 상속받을 수 있게한다.

__proto__의 주요 특징:
접근자 프로퍼티: __proto__는 실제로 객체의 데이터 프로퍼티가 아니라 접근자 프로퍼티입니다. 
즉, 값을 읽거나 설정할 때 내부적으로 정의된 getter 함수와 setter 함수를 실행합니다.

상속 메커니즘: JavaScript에서 모든 객체는 다른 객체의 프로토타입을 상속받을 수 있습니다. 
이러한 상속 관계는 __proto__ 프로퍼티를 통해 형성됩니다. 
객체 리터럴로 생성된 객체의 경우, 기본적으로 Object.prototype을 상속받습니다.

[[Prototype]]과의 관계: __proto__ 접근자 프로퍼티는 객체의 내부 [[Prototype]] 슬롯에 접근하게 해줍니다. 
이 내부 [[Prototype]] 슬롯은 객체가 생성될 때 다른 객체를 가리키도록 설정됩니다.

사용상의 주의:
표준이 아님:
__proto__는 ECMAScript의 이전 버전에서 표준이 아니었습니다. 
그러나 실제로 많은 JavaScript 엔진에서 지원되었기 때문에 ECMAScript 2015(ES6)에서는 표준으로 포함되었습니다.
그럼에도 불구하고, Object.getPrototypeOf() 또는 Object.setPrototypeOf()과 같은 표준 메서드를 사용하는 것이 권장됩니다.

성능 문제: 
__proto__를 사용해서 프로토타입 체인을 동적으로 변경하는 것은 성능에 부정적인 영향을 미칠 수 있습니다. 
대부분의 경우, 객체의 프로토타입은 생성 시 설정되고 변경되지 않는 것이 바람직합니다.

지피티피셜...

---

콜백함수

 

함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수다.

ex. 이벤트 핸들러 처리

 

어느 특정 시점에 실행된다.

 

또한, 주로 비동기식 처리 모델에 사용된다.

---

오늘정말로 팀원분들과 재밌게 떠들고퀴즈게임하고마피아게임하고해서..............딱히한게없읍니다ㅎ