TIL1 - 2023.09.20

프론트 엔드 개발

브라우저의 동작 원리

통신, 렌더링, 스크립트 실행으로 구분할 수 있다

• 통신(서버와의 통신) : 서버에 요청을 하면 서버는 응답함
• 렌더링 : DOM이라는 객체를 화면에 그리는 것(html을 읽어)
• 스크립트 실행 : 자바스크립트를 실행(script태그를 통해) => 동적인 화면 구성 가능

프론트엔드 개발자의 역할

• 브라우저에서 동작하는 UI를 만드는 것

 

변수, 상수, 자료형 그리고 메모리

변수

• 메모리에 직접 할당한 값
• 변수 선언시 var 보다는 let 그 이유는? var는 es6 이전에 사용되었고 호이스팅 때문에 권유 되지 않음
• 오늘의 숙제 : var와 호이스팅?
• const는 값이 변하지 않음

 

자료형

• Number : 숫자
• String : 문자
• Boolean : True/False
• Object : Key로 값을 찾음
• Array : Index로 값을 찾음
• Function
• undefined/null : undefined는 정의x, null은 사용자가 의도적으로 비어있음을 표시

 

자바스크립트 메모리

• 할당 -> 사용 -> 해제

 

메모리 심화

• 자바스크립트는 가상 머신
• Heap : 참조 영역
• Call stack : 원시 타입
• 가비지 콜렉터 : 메모리 정리(사용하지 않는 메모리 정리)
• 마크 앤 스윕 알고리즘 : 닿을수 없는 주소를 더이상 필요없는 주소로 정의하고 지우는 알고리즘

---

표현식과 연산자

Expressions(표현식)

• 어떠한 결과 값으로 평가되는 식, 숫자, 문자열, 논리값 같은 원시 값을 포함하여 변수, 상수, 함수 호출 등으로 호출할 수 있다.

연산자의 종류

• 할당 연산자 : 오른쪽 표현식을 왼쪽 피연산자 값에 할당하는 연산자, 등호(=)을 사용하며 다른 연산자와 같이 사용하여 복합 할당 연산자로 이용할 수 있다.

let x;
//할당 연산자
x = 10;
//복합 할당 연산자
x += 5;
x -= 5;
x *= 5;
x /= 5;
x %= 5;
x <<= 4;
x >>= 2;

• 비교 연산자 : 좌측 피연산자와 우측 피연산자를 비교하는 연산자 true 혹은 false를 반환

const x = 5;
const y = 10;
x == y //false 동등
x != y //true
x === y //false 일치
x !== y //true
x > y //false
x >= y //false
x < y //true
x <= y //true
"10" == 10 //true
"10" === 10 //false

• 산술 연산자 : 덧셈, 뺄셈, 곱셈, 나눗셈을 하는 연산자, Number 반환

const x = 5;
const y = 10;
x + y;
x - y;
x * y;
x / y;

• 비트 연산자 : 비트를 직접 조작하는 연산자(2진법)

const x = 10;
const y = 12;
x & y; //8
x | y; //14
x ^ y; //6
~x; //-11
x << 1; //20
x >> 1; //5

• 논리 연산자 : Boolean을 통해 참과 거짓을 검증

const x = true;
const y = false;
x && y; // false
x || y; // true
!x; // false

• 삼항 연산자 : 조건에 따라 값을 선택하는 연산자, ‘조건 ? 참 : 거짓’ 형태

const x = 10;
const y = 12;
x > y ? 100 : 200; //200

• 관계 연산자 : 객체에 속성이 있는지 확인하기 위한 연산자

const x = {
  name : "Kim",
  email : "123@123.com",
};
"name" in x; // true
"gender" in x; // false

• typeof : 피연산자의 타입을 반환하는 연산자

const x = 10;
const y = "String";
const z = false;
typeof x; //number
typeof y; //string
typeof z; //boolean

---

흐름 제어

Control flow란? – 흐름을 제어하는 방법 중 하나 조건이나 반복을 통해 상태를 제어

• Control Flow – Goto / if / Then / Else / Switch / Case / For / While
• Data flow – stateless / Recursion / Pipe

조건문 – 특정 조건이 맞을 때만 실행되는 문장 문법이다.

• if문 : 괄호 안 조건식이 참인 경우 실행되는 문장, else와 else if가 같이 사용됨
• switch문 : 괄호 안 값에 따라 분기되는 문법, case / default와 함께 쓰인다(break 사용해야 멈춤)

반복문 – 반복적인 작업을 지시하는 문법이다.

• for : 가장 기초적인 반복문으로 초기문, 조건문, 증감문으로 이루어짐, 조건문의 결과가 거짓이 되면 반복이 종료
• while : 괄호 안 조건이 거짓이 될 때까지 반복
• do-while : while문과 다르게 먼저 진입 후 로직을 실행한 다음 조건을 검사

---

배열과 객체

배열

• 연관된 데이터를 연속적인 형태로 저장하는 복합 타입
• 순서대로 번호(index)가 붙음

const arr1 = new Array(); //빈 배열 생성
const arr2 = []; //빈 배열 생성
const arr3 = [1, 2, 3, 4, 5]; // 초기화된 값으로 생성
const arr4 = new Array(5); // 빈 배열을 길이만큼 만들 때
const arr5 = new Array(5).fill(5); //5로 5개 요소 생성(fill 함수)
const arr6 = Array.from(Array(5), function(v,k){ //v:배열의 값, k:배열의 index
    return k + 1;
});
const arr = [1, 2, 3, 4, 5, 6];
console.log(arr.length); // 6 (배열의 길이)
arr.length = 3;
console.log(arr); // [1, 2, 3]
arr.length = 10;
console.log(arr); // [1, 2, 3, 나머지 빈 값]

배열의 함수

 

join()

• 배열을 합쳐준다.

reverse()

• 모든 배열을 거꾸로 돌려준다.
• 사용하면 원래 있던 배열에 영향이 가서 사용에 주의해야 한다.

arr1.concat(arr2)

• 두 배열을 합치고 싶을 때

const arr1 = [1, 2, 3, 4, 5, 6]; // 초기화된 값으로 생성
const arr2 = [7, 8, 9, 10];

console.log(arr1.join(", ")); // 1, 2, 3, 4, 5, 6
console.log(arr1.reverse()); // [6, 5, 4, 3, 2, 1]
console.log(arr1.concat(arr2)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

push()

• 배열의 끝에 요소를 추가

pop()

• 배열의 끝 요소 삭제

const arr = [1, 2, 3, 4, 5, 6];

arr.push(7); // [1, 2, 3, 4, 5, 6, 7]
arr.push(7, 8, 9); // [1, 2, 3, 4, 5, 6, 7, 7, 8, 9]

arr.pop(); // [1, 2, 3, 4, 5, 6, 7, 7, 8]
arr.pop(); // [1, 2, 3, 4, 5, 6, 7, 7]

shift

• 배열의 첫 번째 요소 삭제

unshift

• 배열의 첫 번째에 요소 추가

const arr = [1, 2, 3, 4, 5, 6];

arr.shift(); //[2, 3, 4, 5, 6]
arr.shift(); //[3, 4, 5, 6]

arr.unshift(10); //[10, 3, 4, 5, 6]

slice(a, b)

• 배열 중간을 잘라서 값을 알고 싶을 때
• index a에서 b-1까지 짤림
• 원본 배열이 바뀌지 않음

splice(a, b)

• 중간에 있는 요소를 삭제하고 싶을 때
• index a번째부터 b개 삭제한다

const arr = [1, 2, 3, 4, 5, 6];

arr.slice(2,4); //[3, 4]
arr.slice(2,2); // [1, 2, 5, 6]

 

for ... of ... 문

for(const item of arr){
    //item은 각 배열의 요소
}

const arr = [1, 2, 3, 4, 5, 6];

arr["key"] = "value"; // [1, 2, 3, 4, 5, 6, key: "value"]
console.log(arr.length); // 6
//객체처럼 사용하더라도 배열의 길이는 달라지지 않는다

 

객체

• 여러 값을 key-value 형태로 결합시킨 복합 타입

const obj1 = new Object(); // 빈 객체
const obj2 = {}; // 빈 객체
const obj3 = { name : "abc", company: "abc"}; // { name : "abc", company : "abc" }

obj3['email'] = "abc@gmail.com"; //객체 추가
obj3.phone = "01000000000"; // 객체 추가
//{ name : "abc", company : "abc", email : "abc@gmail.com", phone : "01000000000"}

delete obj3.phone; //객체 삭제
//{ name : "abc", company : "abc", email : "abc@gmail.com" }
console.log("email" in obj3); // true
console.log("phone" in obj3); // false

Object.keys(obj3); // 배열의 형태로 key 값이 나온다
Object.values(obj3); // 배열의 형태로 value 값이 나온다

for(const key in obj3){ //객체 순회
    console.log(key, obj3[key]); // key value 출력
}

---

스코프와 클로저

스코프

• 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다.

const a = 5; //Global Scope
{
    const b = 3; //Local Scope
    console.log(a, b); // 5 3
}
console.log(a, b); // Error!

• var를 사용하면 호이스팅되어 변수 선언이 함수 상단으로 올라간다

var a = 5;
{
    // 호이스팅 되어 변수 선언이 상단으로 올라가버림
    var a = 10;
    console.log(a); // 10
}
console.log(a); // 10

• var은 함수 수준 스코프이고 const, let은 블록 수준 스코프
• var를 사용하는 경우 오류를 찾기 힘들어짐

클로저

• 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 만드는 문법이다.

• 실행시점에 greeting이 살아있음
• 클로저를 잘 알아야하는 이유는 유용하게 사용하기보단 알기 힘든 버그를 잘 수정하기 위해서다

은닉화

• 클로저를 이용하여 내부 변수와 함수를 숨길 수 있다

---

TIL을 처음 작성해봤는데 너무 자세하게 작성하지 않은거 같고 다음부터 작성할 때에는 공식 문서 또는 관련 서적을 참고하여서 조금 더 자세하게 작성해야 겠다.. 그리고 마지막으로 개발을 할 때 지금 배운 것들을 꼭 생각하면서 개발을 해야겠다는 생각이 들었습니다 😨