void sayHello(String name) {
    print("hello $name!)
}

함수를 정의할 때 파라미터의 자료형과 파라미터명을 적음 함수 앞의 void는 함수가 어떤 것도 리턴하지 않는 다는 뜻임(타스랑 똑같음) 그런데 지금 문자열을 리턴하고 있으니 다음과 같이 고치면 됨

 sayHello(String name) {
    return 'hello $name';
}

void main () {
    print(sayHello('haha'));
}

혹은 

String sayHello(String name) {
    return 'hello $name';
}

void main () {
    print(sayHello('haha'));
}

named parameter

String sayHello(String name, String nickname, int age){
    return 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!' 
}


void main () {
    print(sayHello('haha', 'one', 1);
    // hello i am haha, people call me one and i am 1 years old. nice to meet you!
}

하지만 전달해야할 요소가 많아지면 유저가 요소의 순서를 헷갈릴 수도 있고 값을 넣지 않는 상황이 생길 수도 있음

이를 방지하기 위해 다음과 같은 방법을 사용할 수 있음

named argument

String sayHello({String name, String nickname, int age}){
    return 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!';
}


void main () {
    print(sayHello(
    age: 1,
    name: 'haha',
    nickname: 'one',
    ));
    }

함수의 파라미터 적는 곳에 중괄호를 추가한 후, 함수를 호출 할 때 순서에 상관없이 argument의 이름들을 적으면 됨

그런데 dart가 에러메세지를 띄움

각 파라미터가 null을 가질 수 없는데 지금 보면 null이 들어올 수도 있어~ (유저가 값을 안 보내는 경우가 있을 수 있음) default value 설정하든가 아니면 require modifier 설정해~라고 친절하게 메세지를 보냄

String sayHello({String name = 'orange', String nickname = 'two', int age = 5,}){
    return 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!';
}


void main () {
    print(sayHello(
    age: 1,
    ));
    }
    //hello i am orange, people call me two. and i am 1 years old. nice to meet you!

default value를 설정해 유저가 까먹고 다른 값들을 안 적어 보냈을 때 기본값을 적용함

근데 만약 default value를 설정하기 싫거나 혹은 실제 data를 받아야하기 때문에 default value를 사용하지 못한다면 어떻게 할까? 바로 required를 사용하면 됨

String sayHello({
 required String name, 
 required String nickname, 
 required int age,
}) {
return 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!';
}


void main () {
    print(sayHello(
    age: 1,
    name: 'haha',
    nickname: 'one',
    ));
    }

optional positional parameters

String sayHello(
 String name, 
 String nickname, 
 int age,
) => 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!';


void main () {
    print(sayHello('hh', 'one', 1,));
    }

named argument를 적용하고 싶지 않은데 parameter 중 하나를 require 하지 않게 하려면 다음과 같이 하면 됨

String sayHello(
 String name, 
 String nickname, 
 [int? age = 5]
) => 'hello i am $name, people call me $nickname. and i am $age years old. nice to meet you!';


void main () {
    print(sayHello('hh', 'one',));
    }

    // hello i am hh, people call me one. and i am 3 years old. nice to meet you!

하지만 자주 사용하는 방법은 아님

QQ operator, QQ equals

String lowercaseName(String name) {
    return name.toLowerCase();
}

void main () {
  print(lowercaseName('ABC'));
    } // abc

그런데 사용자가 null을 입력할 수 있게 하고싶음

String lowercaseName(String name) {
    return name.toLowerCase(null);
}

void main () {
  print(lowercaseName());
    } 

값이 null이 될 수도 있다는 걸 알려주기 위해서 다음과 같이 파라미터 넣는 곳에?을 사용해보자

String lowercaseName(String? name) => 
  name != null? name.toLowerCase() : 'haha';

void main () {
  print(lowercaseName());
    } // haha

삼항 연산자를 사용해 name이 null이 아니라면 name.toLowerCase()를 리턴하고 null이면 'haha'를 리턴하게 함 하지만 ??(QQ Operator)를 사용해 더 간결하게 작성할 수 있음

String lowercaseName(String? name) => 
  name?.toLowerCase() ?? 'haha';

void main () {
  print(lowercaseName());
    } // haha

??를 기준으로 좌측이 null이면 우측을 리턴 ??를 기준으로 좌측이 null이 아니라면 그대로 좌측을 리턴함

??=(QQ equals or QQ assignment operator)

void main() {
    String? name;
    name ??= 'haha';
    // name이 null이면 우측의 값을 할당하라는 뜻
}

typedef

typedef는 자료형에 alias를 사용할 수 있게 해줌 하지만 좀 더 구조화된 데이터는 class를 사용하는 것이 일반적임 typedef는 간단한 데이터의 alias를 만들 때 사용함(List나 Map, set 등)

List<int> reverseNumbers(List<int> list) {
    var reversed = list.reversed;
    return reversed.toList();
}

위의 List 예시를 typedef를 통해 바꾸어보자면 다음과 같음

typedef ListOfInts = List<int>

ListOfInts reverseNumbers(ListOfInts list) {
    var reversed = list.reversed;
    return reversed.toList();
}

void main() {
 print(reverseNumbers([1,2,3,4]));
}
// [4,3,2,1]

ListOfInts라는 alias를 만들어 List<int> 대신 사용함 dart는 둘 다 같은 자료형으로 받아들이기 때문에 잘 작동함

자바스크립트하다가 다트하니까 재밌다... 헤헤 자료형을 저렇게 써주는 것도 재밌음...(물론 자바스크립트도 ts쓰면 되지만 ㅎ...) 내일은 드디어 class 듣는다 예이 너무 재밌을듯

void main () {
String catName = "rey";
bool isAlive = true;
int hp = 1234578;
double mp = 2456.123456;
}

숫자 자료형은 num, int, double이 있음 int와 double은 num의 클래스를 상속 받음

num 자료형을 사용하면 값은 integer가 될 수도 있고 double이 될 수도 있음

void main () {
String catName = "rey";
bool isAlive = true;
int hp = 1234578;
double mp = 2456.123456;
num x = 1234; // int
x = 1.12; // double
}

Lists, collection if, collection for

list

void main () {
    var nums = [1,2,3,4];    
}

list를 만드는 건 자바스크립트의 배열을 만드는 것과 같이 만들면 된다

자료형을 정해서 작성해줄 수 있음

void main () {
    List<int> nums = 
    [1,
    2,
    3,
    4,
    ];    // int가 들어있는 list
}

위와 같이 자료형을 명확히 적어줄 때는 class를 다룰 때 사용하면 됨

collection of

void main () {
    var pleaseGiveMeSix = true;
    var nums = 
    [1,
    2,
    3,
    4,
    if(pleaseGiveMeSix) 6, // pleaseGiveMeSix가 true면 list에 6을 추가할 수 있음
    ];
    print(nums) // [1,2,3,4,6]
    }
 // 위의 코드는 아래와 같음

 void main () {
    var pleaseGiveMeSix = true;
    var nums = 
    [1,
    2,
    3,
    4,
    ];
    if(pleaseGiveMeSix){
        nums.add(6);
    }
}

조건에 따라 element를 추가할 수 있음

collection for

void main () {
    var oldFriend = ['hans', 'adam'];
    var newFriend = [
    'apple',
    'saoko',
    'jane',
    for(var friend in oldFriend) "😊 $friend"
    ];
}

// [apple, saoko, jane, 😊 hans, 😊 adam];

newFriend 리스트 안에 oldFriend가 추가된 건데, for문을 돌면서 새로운 문자열을 생성하고 이를 newFriend 리스트의 마지막 요소들로 추가한 것임 좋다...

String interpolation

text에 변수를 추가하는 방법임

void main () {
    var name = "haha";
    var sayHello = "$name 가 반갑다고 인사하네요. 안녕!";
    print(sayHello); // haha 가 반갑다고 인사하네요. 안녕!
}

단순하게 변수의 값을 담고 싶은 것이라면 $변수명 처럼 입력하면 됨

자바스크립트의 템플릿 리터럴 같이 변수명 앞에 $(달러사인)를 붙이는데 따로 중괄호와 백틱을 사용할 필요없이 작은 따옴표나 큰 따옴표 안에 달러사인을 넣고 그 뒤에 바로 변수명을 쓰면 끝임 하지만 이 방법은 이미 변수가 존재할 때 사용하는 방법임

변수의 값을 계산하고 싶은 거라면 $와 함께 중괄호 내에 계산할 내용을 적으면 됨

void main () {
    var name = "haha";
    var age = 0
    var sayHello = "${age + 1}살인 $name 가 반갑다고 인사하네요. 안녕!";
    print(sayHello); //1살인 haha 가 반갑다고 인사하네요. 안녕!
}

set

void main () {
    var nums = {1,2,3,4,5}
}

or

void main () {
    set<int> nums = {1,2,3,4,5}
}

set에 있는 요소들은 유니크 해야함 아래 예시를 보자

void main () {
    var nums = {1,2,3,4,5};
    nums.add(1);
    nums.add(1);
    print(nums) // {1,2,3,4,5} 1을 더해도 변경x
}

list에 있는 값들은 변경 o

void main () {
    var nums = [1,2,3,4,5];
    nums.add(1);
    nums.add(1);
    print(nums) // {1,2,3,4,5,1,1}
}

요소가 항상 하나씩만 있어야하면 set을 사용하면 됨

maps

자바스크립트의 object와 같음

void main() {
    var player = {
        'name': 'haha',
        'gender': 'female',
        'exp': 123456789,
        'alive': true,
    };
}

위의 예시 자료형을 보면 Map<String, object>라 되어있음 키가 String, value가 object라는 뜻인데 여기서 말하는 object는 어떤 값이든 올 수 있다는 뜻임(typescript의 any와 비슷)

하지만 key와 value를 가지는 구조로 object를 만들 때 그 object가 특정한 구조(API로 받은 데이터 등)를 가지고 있다면 class를 사용하는 걸 추천함

main 함수는 모든 dart 프로그램의 엔트리 포인트임 -> 중요 main 함수에서 내가 쓴 코드가 호출됨

void main() {
    print("cat");
}

자스나 타스 같은 다른 프로그래밍 언어는 formmatter가 자동으로 세미콜론을 달아주지만 dart는 그런 기능이 없음 그래서 꼭 세미콜론을 붙여야함(중요!!)

var keyword

// no.1
void main() {
   var name ="haha"; // 값을 업데이트 할 때 변수의 원래 타입과 일치해야함
   name = "하하";
}

// no.2
void main() {
   String name ="haha"; // 명시적으로 변수의 타입 지정
   name = "하하";
}

둘 다 변수를 생성하는 방법이다 각각의 방법은 어떨 때 사용될까?

첫 번째 방법은 관습적으로 함수나 메소드 내부에 지역 변수를 선언할 때 var를 사용함

그리고 class에서 변구나 프로퍼티를 선언할 때는 두 번째 방법같이 타입을 지정함

Dynamic type

다이나믹은 여러가지 타입을 가질 수 있는 변수에 쓰는 키워드임 그러면 다이나믹은 왜 사용하는 걸까? -> 변수가 어떤 타입인지 알기 어려운 경우들이 종종 있기 때문

void main() {
   Dynamic name;
   name = "하하";
   name = 123;
   name = false;
}

다이나믹은 정말 필요할 때만 사용하자

nullable variables

null safty는 개발자가 null을 참조할 수 없도록 하는 것임 왜냐면 null을 참조하면 런타임 에러가 생기기 때문

null safty는 어떤 변수 혹은 어떤 데이터가 null이 될 수 있음을 명시하는 역할을 함

void main () {
    String haha = 'haha';
    haha = null;
    if(haha != null) {
        haha.isNotEmpty
    }
}

haha라는 변수가 문자열이나 null 둘다 될 수 있게 하려면 ?를 붙임

void main () {
    String? haha = 'haha';
    haha = null;
    if(haha != null) {
        haha.isNotEmpty
    }
}

이렇게 하면 dart에서 haha라는 변수가 null이 될 수 있다는 걸 알 수 있음

void main () {
    String? haha = 'haha';
    haha = null;
    haha?.isNotEmpty
}

변수 haha가 null이 아니라면 isNotEmpty속성을 달라는 뜻임 if문을 짧게 단축해서 작성함

final variables

한 번 정의된 변수를 수정할 수 없게 만들려면 final을 사용함 자바스크립트의 const와 비슷...

// final 사용 전
void main () {
    String name = "haha";
    name = "hoho";
}


// final 사용 후
void main () {
    final name = "haha";
    name = "hoho" // Error!!!!!
}

final을 사용해서 만든 변수는 수정할 수 없음

Late variables

late는 초기 데이터 없이 변수를 선언할 수 있게 해줌

void main () {
    late final String name;
    // api로 데이터를 받아서 변수에 값을 할당함
    name = "haha";
}

late를 사용해 변수를 먼저 만든 후 그 안의 값(데이터 등)은 나중에 받아서 할당할 수 있는 것이다(하지만 원래 정의한 타입에 맞는 값이 들어가야함)

주로 API를 사용해 작업할 때 많이 사용하게 될듯

constant variables

다트에도 const 키워드가 있다 두둥 하지만 자바스크립트의 const와는 다르다 (자바스크립트의 const는 dart의 final과 비슷함)

dart의 const는 compile-time constant를 만들어줌 즉, const는 컴파일 할 때 값을 알 수 있는 변수를 만드는 것임 (코드를 컴파일하기 전에 알고 있어야 함)

void main () {
    const API = fetchApi();
}

const는 컴파일 시간에 알려진 상수를 선언하는 데 사용되고, final은 런타임에 알려진 상수를 선언하는 데 사용할 수 있음

const pi = 3.14; // 컴파일 시간 상수
final currentTime = DateTime.now(); // 런타임 상수

다트 재밌다...

당연하게 아무 생각 없이 <ul>이나 <ol>에 <li>를 써왔는데 직접 코드를 쳐보니 html에서 <li>를 단독으로 써도 작동을 하긴 한다 그러면 왜 <li>만 써도 화면에 잘 나오는데 <ul>이나 <ol>의 자식 요소로 <li>를 쓰는 걸까?

https://html.spec.whatwg.org/ 에서 li요소를 확인해보았다

https://html.spec.whatwg.org/multipage/grouping-content.html#the-li-element

li요소는 ol, ul, menu context 안에서 사용할 수 있다고 한다 엥 그러면 단독으로 써지는 건 뭐지?

// 위의 내용 번역 li 요소는 목록 항목을 나타냅니다. 상위 요소가 ol, ul 또는 menu 요소인 경우 요소는 해당 요소에 대해 정의된 대로 상위 요소 목록의 항목입니다. 그렇지 않으면 목록 항목에 다른 li 요소에 대해 정의된 목록 관련 관계가 없습니다.

저 말이 이해가 안 되어서 찾아보니 ul, ol태그에 목록을 나타내려면 자식 요소로 li를 사용하는 것이 규칙인데 브라우저가 이러한 규칙을 강제하지 않아서 ul과 ol을 사용하지 않은 li도 화면에 출력 될 수 있는 것이다 즉, 브라우저가 ul이나 ol태그가 없으면 자동으로 ul이나 ol태그를 생성하기 때문에 목록처럼 보여서 글머리 기호가 있는 문장으로 출력이 되는 것이다 하지만 규칙을 지켜서 사용하지 않은 html은 HTML언어 규칙을 지키지 않은(유효하지 않은) HTML문서이기 때문에 html요소에 담긴 시맨틱 정보들을 전달하지 못한다 그렇기 때문에 검색엔진에서 제대로 검색이 안 되거나 스크린 리더 등을 사용하는 사용자에게 제대로 웹사이트를 전달하지 못할 수도 있다고 한다

태그를 쓸 때 HTML규칙을 잘 지켜서 사용해야겠다

Semantic이라는 뜻은 relating to meaning 즉, 의미있는 HTML이나 또는 HTML요소의 내용에 어떤 의미가 있는지에 관련되어 있다는 뜻이다 시맨틱 HTML을 사용하면 크롤러가 코드를 더 쉽게 알아볼 수 있다 그리고 시각장애인 등을 위한 스크린 리더를 쓰는 사람들이 좀 더 쉽게 접근할 수 있다 또한 문서의 구조와 의미를 명확하게 표현할 수 있기 때문에 코드를 이해하기 쉽고 유지보수하기 쉽다

Semantic HTML에는 다음과 같은 요소들이 있다

<article> : 내용이 각자 독립적으로 구분됨. 콘텐츠 자체를 독립적으로 배포하거나 재사용할 수 있음 ex)게시판, 뉴스 기사, 블로그 글, 포럼

//<article> 예시
<article>
    <h1>강아지 인기 간식 순위</h1>
    <p>여행 피서지로 좋은 곳</p>
</article>

<section> : 서로 관계 있는 문서를 분리하는 역할을 함. ex: 책의 목차나 강의의 단원

<section>
    <h1>타입스크립트</h1>
    <p>타입스크립트로 리팩토링 하기</p>
</section>

<aside> : 문서의 주요 내용과 간접적으로만 연관된 부분을 나타냄. 주로 사이드바나 콜아웃 박스로 표현 <details> : <summary>태그와 같이 쓰이며 열림 상태일 때만 내용을 보여주는 위젯을 생성함 <summary>을 <details>의 자식요소로 설정하면 <summary>가 <details>의 내용을 요약하는 레이블이 되고, <summary>을 누르면 <details>의 내용이 보임
<figcaption> : <figure>가 포함하는 다른 요소에 대한 설명을 적을 수 있는 태그 <figure> : 독립적인 콘텐츠를 표현. <figcaption>를 통해 설명을 붙일 수 있음 <footer> : 말 그대로 footer를 나타내는 태그 <header> : 말 그대로 header를 나타내는 태그 <main> : body의 주요 콘텐츠를 나타냄. 여기서 말하는 주요 콘텐츠란 문서의 핵심주제나 앱의 핵심 기능에 직접적으로 관련있는 콘텐츠를 말함 <mark> : 현재 맥락에 관련이 깊거나 중요해 표시 또는 하이라이트한 부분을 나타냄. 형광펜 같은 역할이라고 생각하면 쉬움 <nav> : 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타냄 주로 메뉴나 목차에 많이 사용됨

참고 https://developer.mozilla.org/ko/docs/Glossary/Semantics

state는 리액트에서 사용되는데, 컴포넌트 내부에서 변경되는 값을 관리되는 상태관리 데이터이다 state가 변경 될 때마다 setState 함수를 이용해 값을 업데이트 할 수 있다

props는 부모컴포넌트에서 자식컴포넌트로 전달되는 데이터이다. props는 값이 변경되지 않고 자식 컴포넌트에서는 props값만을 읽을 수 있다

const multiply = (a,b) => {
    return a * b
}

let numberOne = 5;
let numberTwo = 2;
let total = sum(numberOne * numberTwo);

console.log(numberOne) // 5
console.log(numberTwo) // 2
console.log(total) // 10

위와 같이 multiply 함수는 인자로 받은 값을 변경하지 않는 순수함수다 즉 numberOne, numberTwo가 함수에 전달되고 나서도 그 값은 유지가 되고, multiply 함수는 항상 같은 결과를 반환한다. 결과적으로 multiply 함수는 인자로 받은 값의 불변성을 유지한다

또한 순수 함수는 함수가 호출될 때 외부 상태를 변경하거나 외부 상태에 의존하지 않는다. 따라서 다른 코드에 영향을 받지 않는다.(즉 순수 함수는 사이드 이펙트가 없다)

만약 위의 코드를 사이드 이펙트가 있는 함수로 바꿔 본다면 다음과 같을 것이다

let count = 0;
const multiply = (a,b) => {
    count++
    return a * b
}

위의 함수는 외부에 있는 변수 count의 값을 변경한다 즉 외부의 상태를 변경하는 것이다 때문에 같은 argument를 입력해도 다른 결과를 리턴할 수 있기 때문에 코드를 이해하고 테스트하기 어렵다

그렇다면 순수 함수는 왜 사용할까? 같은 입력에 대해 항상 같은 출력을 리턴하기 때문에 테스트와 디버깅이 쉽고 예측 가능한 코드를 작성할 수 있습니다. 또한 코드가 간결하고 외부 코드에 영향을 받지 않기 때문에 재사용 가능하다. 따라서 순수 함수는 주로 비즈니스 로직 등 순수한 계산을 수행하는 함수에서 사용된다.

• GMT(그리니치 표준시) 포맷으로 설정해야함(date.toUTCstring)으로 변경가능)
• 우효일자를 과거로 지정하면 쿠키 삭제됨

max-age

• 쿠키 만료 기간 설정가능
• 설정하고자 하는 만료일시까지 시간을 초로 환산한 값을 설정함
• 0이나 음수값을 설정하면 쿠키 삭제됨

max-age(만료기간), expires(유효일자) 옵션을 설정하지 않으면 브라우저가 닫힐 때 쿠키가 함께 삭제된다 max-age, expires 옵션을 설정하면 브라우저를 닫아도 쿠키가 삭제되지 않는다 왜냐하면 쿠키의 유효일자까지 브라우저가 쿠키를 유지하다가 유효일자에 도달하면 자동으로 삭제하기 때문이다

참고 https://ko.javascript.info/cookie

const numbers = [1,2.3,4]
numbers.push(100) // [1,2,3,4,100]
numbers[0] = 5 // error

const cats = {name: 'rey', gender : 'female'};
cats.age = 4 // {name: 'rey', gender : 'female', age:4};
obj.name = "meow" // error 

const로 선언된 변수는 할당된 메모리 주소를 가리킨다. 따라서 배열이나 객체 속성의 추가나 변경은 변수가 참조하는 메모리 주소에서 직접적인 변경을 일으키지 않고 해당 객체 또는 배열에 대한 참조를 통해 내부 값을 변경한다

그러나 배열 요소의 값을 아예 바꾸는 것은 값 자체를 수정하는 것으로 const로 선언된 변수에는 불가능하다.

따라서 const로 선언된 배열과 객체는 재할당이 불가능하지만 내부 값은 변경 가능하다 그래서 위의 예시와 같이 const로 선언한 배열이나 객체에 요소나 속성을 추가할 수 있는 것이다

import react from'react'; // import를 사용

const react = require('react') // require를 사용

require

• 일반 node.js 환경에서 모듈을 불러올 때 사용함
• 동기 방식으로 작동 → 모듈이 완전히 로드가 될 때까지 코드 실행을 차단함
• 필요한 모듈만 선택적으로 로드할 수 없음

import

• ES6에서 모듈을 가져오는데 사용되는 새로운 문법
• 비동기 방식으로 작동 → 모듈이 로딩되는 동안 코드 차단 안 됨
• 필요한 모듈만 선택적으로 로드할 수 있음 → 메모리 절약
• named parameter 지원

참고

Require vs. Import in JavaScript

An Update on ES6 Modules in Node.js

Requiring modules in Node.js: Everything you need to know

로컬 스토리지

• 브라우저나 os가 재시작해도 데이터가 파기되지 않음
• 동일한 오리진을 가진 모든 창에서 공유되기 때문에 한 창에서 데이터를 설정하면 다른 창에서 변동사항을 볼 수 있음

세션 스토리지

• 로컬스토리지에 비해서 자주 사용되지 않음
• 페이지를 새로 고침할 때 sessionStorage에 저장된 데이터는 사라지지 않음 하지만 탭을 닫고 새로 열 때는 사라짐 그런데 하나의 탭에 여러 개의 iframe이 있는 경우엔 동일한 오리진에서 왔다고 취급되기 때문에 sessionStorage가 공유됩니다.

쿠키

• 4kb 용량 제한
• 서버가 HTTP 응답 헤더(header)의 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장
• 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버(사이트)에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달
• 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰임

  • 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 “세션 식별자(session identifier)” 정보를 사용해 쿠키를 설정함 -> 사용자가 동일 도메인에 접속하려고 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청을 보냅니다. -> 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별합니다.

참고 https://ko.javascript.info/cookie https://ko.javascript.info/localstorage

position: static position을 따로 설정하지 않으면 설정되는 기본 속성이다 요소들이 html에 작성된 순으로 브라우저에 나타남 static 속성은 top, bottom, left, right가 적용되지 않음

position: relative 요소를 원래의 위치에서 벗어나서 배치할 수 있게 해줌 즉 원래의 위치를 기준으로 상대적으로 위치시켜줌

position: absolute 자신의 상위 요소(부모라고 함)를 배치기준으로 삼음 DOM트리를 따라서 position이 static인 것을 제외한 상위요소를 기준으로 삼으며, 만약 position이 static이 아닌 상위요소가 없다면 body가 기준이 됨. 부모 요소(가까운 상위 요소)를 기준으로 top, left, bottom, right 속성을 적용해야함 따라서 어떤 요소의 display 속성을 absolute로 설정하면 부모 요소의 display 속성을 relative로 지정해주는 것이 관례.

position: fixed 요소를 항상 고정된 위치에 배치할 수 있음 viewport(브라우저 전체화면)을 기준으로 함

position: sticky 최근에 업데이트 된 속성 스티키헤더 등을 만들 때 사용함 말 그대도 스티키하게 고정되어 브라우저를 스크롤할 때 한 자리에 고정되어있다 스티키 헤더 등을 검색해보면 쉽게 이해할 수 있는 속성이다

참고 https://developer.mozilla.org/en-US/docs/Web/CSS/position https://www.daleseo.com/css-position/

HTTP란? HTML 문서와 같은 리소스들을 가져올 수 있도록 해주는 프로토콜입니다. HTTP는 웹에서 이루어지는 모든 데이터 교환의 기초이며, 클라이언트-서버 프로토콜이기도 합니다. 클라이언트-서버 프로토콜이란 (보통 웹브라우저인) 수신자 측에 의해 요청이 초기화되는 프로토콜을 의미합니다. 하나의 완전한 문서는 텍스트, 레이아웃 설명, 이미지, 비디오, 스크립트 등 불러온(fetched) 하위 문서들로 재구성됩니다.(출처 : mdn)

아하 리소스를 가져올 수 있도록 하는 프로토콜이구나... 그런데 프로토콜은 또 뭘까?

프로토콜(protocol) 은 서로 다른 하드웨어 * 기기 간 데이터 통신 규약을 뜻한다

• 네트워크를 통해 통신 가능한 기기

기기들은 다음과 같은 과정을 통해 통신함

TCP/IP 4계층 - 프로토콜을 규칙의 역할들에 따라 4개로 분류해놓은 것임 출처 : https://www.slideshare.net/usdrd90/tcpip-4

TCP(Transmission Control Protocol) 서버와 클라이언트 사이 통신 연결 제어 클라이언트와 서버의 연결이 잘 되었는지 확인을 위해 3way handshaking를 사용함

Byte Stream(바이트 스트림) 큰 데이터를 잘게 쪼개서 전송하는 서비스 3way handshaking를 통해 연결을 확인했으면 데이터를 쪼개서 전송하는 것

↓

IP(internet protocol) 분할된 데이터 패킷들을 서버로 전송 이때 서버의 주소는 MAC주소(위도 경도주소)로 알 수 있음 (ip주소는 주소의 방향을 알 수 있지만 믿기 힘듦(언제든 변경될 수 있기 때문에)

ARP(Address Resolution Protocol) 주소를 찾아가는 프로토콜 마치 택배처럼 중간허브에서 다음 배송 허브만 알면 되듯이 중간에서 경유하는 네트워크 기기들이 있는데 이 기기들은 데이터를 전송할 다음 기기의 mac주소만 알면 됨(총 도착 루트는 알 수 없음)

HTTP 메세지 구조 http 프로토콜에서 클라이언트와 서버간의 통신이 일어남 클라이언트가 서버에 리소스를 요청하는 것을 request, 서버가 클라이언트에 요청을 받아 리소스를 제공하는 것을 response라고 함

request는 메소드, 프로토콜 버전, 헤더, 바디로 구성되어 있음 response는 프로토콜버전, 상태코드, 상태코드 설명, 헤더, 바디로 구성되어 있음 조금 더 자세한 설명은 여기를 참고하자
http 프로토콜 특성

• stateless

  • 새로운 리퀘스트를 보낼 때마다 새로운 리스폰스를 보냄(과거정보 남기지 않음)
  • 상태와 무관 -> 확장이 쉬움

• 리퀘스트에서 url로 리소스를 식별함(url: 리소스 식별자)

참고 https://developer.mozilla.org/ko/docs/Web/HTTP/Overview https://www.youtube.com/watch?v=IjxkKQvn8Bc https://www.mobiinside.co.kr/2022/09/08/http/

캐시(Cache)는 가져오는데 비용이 드는 데이터를 한 번 가져온 후에 임시로 저장해두는 것이다

장점

• 빠른 데이터 검색 및 액세스: 캐시에 데이터를 저장 -> 데이터를 다시 가져오는 데 필요한 시간과 네트워크 대역폭을 줄일 수 있음
• 서버 부하 감소: 캐시를 사용하면 클라이언트가 데이터를 요청할 때마다 서버에서 데이터를 다시 생성하거나 가져올 필요가 없기 때문에 서버의 부하를 줄일 수 있음
• 대역폭 절약: 캐시를 사용하면, 반복적으로 요청되는 데이터의 경우 브라우저와 서버 간의 데이터 전송 양을 줄일 수 있음

단점

• 캐시 일관성 유지: 캐시에 저장된 데이터가 최신 상태인지 확인하고 유지하는 것은 복잡한 작업임
• 공간 제약: 캐시에 저장된 데이터의 크기는 메모리나 디스크 용량에 제한됨
• 데이터 무효화: 캐시에 저장된 데이터를 무효화하거나 갱신하는 방법을 정의하지 않으면 캐시된 데이터가 오래된 상태로 남아 있을 수 있음

그렇다면 프론트엔드 영역에서 캐시를 사용할 수 있는 곳은 어딜까?

1. 이미지 캐싱: 이미지 파일은 용량이 크기 때문에 서버에서 매번 다운로드하는 것은 부담스러움. 이미지 캐싱을 통해 이미지 파일을 로컬에 저장하여 다시 다운로드하지 않도록 할 수 있음

2. 데이터 캐싱: 서버에서 가져온 데이터를 캐시에 저장하여 다시 요청할 때마다 서버에서 데이터를 다시 가져오지 않도록 할 수 있음 이를 통해 서버 부하를 줄일 수 있으며, 빠른 데이터 로딩을 향상시킬 수 있음

3. 코드 캐싱: 라이브러리나 프레임워크의 경우 매번 로드하는 것은 부담스러울 수 있음 따라서, 코드 캐싱을 통해 라이브러리나 프레임워크를 로컬에 저장하여 다시 다운로드하지 않도록 코드를 캐싱함

프레임워크와 라이브러리는 개발을 쉽게 할 수 있도록 도와주는 도구이다 하지만 분명 차이점은 있다

먼저 프레임워크란 말을 살펴보면 frame과 work를 합친 말이다 frame은 틀이라는 뜻인데 프레임 안에서 일을 한다고 볼 수 있다 즉, 프레임워크는 응용 프로그램이나 소프트웨어의 솔루션 개발을 수월하게 하기 위해 제공된 소프트웨어 환경을 말한다 프레임워크의 특징은 다음과 같다

• 소프트웨어 형식을 제공
• 응용 프로그램이 수동적으로 프레임워크에 의해 사용됨
• 사용 규칙이 정해져있어 이를 따라야 함 ex: nextJS, spring framework

라이브러리는 간단하게 말하자면 가져다가 사용할 수 있는 것이다 좀 더 자세하게 말해보자면 library라는 말 자체가 도서관을 의미하는데 보통 우리가 도서관에 가면 수 많은 책들을 모아놓은 도서관 안에서 자신이 필요로하는 책만 꺼내 읽거나 대출을 한다 이처럼 프로그래밍에서 사용하는 라이브러리는 응용 프로그램 개발을 위해 필요한 기능을 모아놓은 소프트웨어를 말한다 그래서 라이브러리에서 우리가 필요로 하는 기능(함수)만 꺼내서 사용을 하는 것이다 이런 라이브러리의 특징은 아래와 같다

• 라이브러리는 다른 라이브러리에 의존하지 않는다(독립성을 가짐)
• 응용 프로그램이 능동적으로 라이브러리를 사용한다
• 작은 기능들을 함수 단위로 만들어 제공 ex: jQuery, React, redux

참고 https://youtu.be/t9ccIykXTCM https://youtu.be/2Ja7wYIZEtI https://youtu.be/We8JKbNQeLo

• 서브루틴 : 하나 이상의 장소에서 필요할 때마다 반복해서 사용할 수 있는 부분적 프로그램 즉, 역할에 대한 정의를 위해 선언하는 변수

argument 연산의 근거를 제공하기 위해 전달되는 값

그러면 어떨 때 parameter, argument라고 해야할까? 메소드 선언부에서 정의한 변수 : parameter 메소드 호출부에서 전달하는 값 : argument

예시

const addNumbers = (a,b) => {
    return a+b
}

addNumbers(1,2) // 3

여기서 a,b가 parameter이고 1,2가 argument이다

참고 https://youtu.be/fW1WGmj10rA https://youtu.be/-oWgayStu8Q

• 한번 선언된 변수를 다시 선언할 수 있음 ex: var cat = cute console.log(cat) // cute

var cat = pretty console.log(cat) = pretty

• var는 선언하기 전에 사용할 수 있음

  console.log(catName) // undefined
  

carName = 'Rey';

-> catName을 선언하기 전에 콘솔을 찍었는데 에러가 아니라 undefined이 나왔다 왜일까?

var catName;

console.log(catName); // undefined

catName = 'Rey';

console.log(catName); // Rey

여기서 호이스팅이라는 개념이 나온다
즉 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동하는 것이 호이스팅이다
그렇다고 진짜 변수 선언을 최상단에 둔다는게 아니라 자바스크립트가 코드를 
위에서 아래로 읽어나가면서 변수 등의 정보를 환경레코드(Environment record, 식별자와 식별자에 바인딩된 값을 기록해두는 객체)에 기록해놓기 때문임

위의 예시에서 catName이라는 변수 선언은 호이스팅되고 'Rey'라는 할당된 값은 호이스팅이 되지 않기 때문에 두 번째 줄에서 undefined가 나오는 것이다

같은 경우 let와 const는 에러가 뜬다
그렇다면 let과 const는 호이스팅되지 않는 것일까? 아니다 !
let과 const는 TDZ의 영향을 받기 때문에 에러를 일으키는 것이다
그럼 TDZ란 뭘까? 
선언 이전에 식별자를 참조할 수 없는 구역을 뜻한다

console.log(catName); //TDZ

const catName = 'Ray' // 선언 및 할당

console.log(catName); // 사용가능

``` TDZ안에 선언된 변수는 사용하지 못함 따라서 맨 윗줄은 사용불가능함

var를 사용시 선언과 초기화가 동시에 이루어짐

• 선언 : 메모리 공간을 확보하고 식별자와 연결
• 초기화 : 식별자에 암묵적으로 undefined 값 바인딩

let, const를 사용시 초기화를 하지 않음 따라서 할당문 직전까지는 값이 할당되지 않고 이렇게 되면 값을 읽어올 수 없기 때문에 TDZ가 생김 -> 에러

참고 https://youtu.be/EWfujNzSUmw https://youtu.be/ocGc-AmWSnQ

REST(Representational State Transfer)

• 클라이언트와 서버의 통신 방식
• 네트워크 리소스를 정의하고 처리하는 방법을 설명하는 일련의 원칙을 기반으로 하는 아키텍처스타일 ex) 클라이언트와 서버가 데이터를 주고 받는 방식을 정리한 원칙을 기반으로하는 아키텍쳐스타일

RESTful

• REST가 적용된 시스템 즉 REST에 대한 원칙을 준수했을 때 RESTful하다고 함

REST API : REST가 적용된 API(= REST의 아키텍쳐 스타일 적용한 API, REST-style의 API)

GET과 POST이외에 DELETE와 PUT, PATCH가 있다 PUT은 전체를 덮어씌워 업데이트하고 PATCH는 일부분만 업데이트한다

RESTful api속하지 않는 것은 다음과 같다 SOAP (Simple Object Access Protocol) API: SOAP은 REST와 달리 XML 메시지를 사용하여 데이터를 전송합니다. 또한, SOAP은 보안 및 트랜잭션 처리와 같은 고급 기능을 제공하기 위해 WSDL (Web Services Description Language)과 같은 복잡한 기술을 사용합니다.

RPC (Remote Procedure Call) API: RPC는 간단한 HTTP 호출보다 더 많은 처리를 필요로 하며, 일반적으로 서버-클라이언트 애플리케이션에서만 사용됩니다.

GraphQL API: GraphQL은 REST와 비교하여 쿼리를 더욱 유연하게 처리할 수 있습니다. 하지만, GraphQL은 단일 엔드포인트와 비동기 쿼리를 사용하므로 RESTful API와는 매우 다릅니다.

FTP (File Transfer Protocol): FTP는 파일 전송을 위한 프로토콜이며, RESTful API와는 직접적인 관련이 없습니다.

WebSocket API: WebSocket은 양방향 통신을 위한 프로토콜입니다. RESTful API는 단방향 통신을 위한 것이므로 WebSocket API는 RESTful API에 속하지 않습니다.

참고 : https://youtu.be/NODVCBmyaXs

프로세스란? 운영체제 위에서 실행중인 프로그램 프로그램 명령어와 데이터들이 메모리에 올라오고 실행 중 또는 실행 대기 중인 상태

프로그램이 프로세스가 되기 위해서는 다음과 같은 일이 생김 -> 프로세스는 독립된 메모리를 할당받음. 프로세스가 할당받은 메모리를 관리하기 위해 관리하는 공간이 있는데 이를 프로세스 주소 공간이라고 함. 프로세스 주소 공간에는 code, data, heap, stack* 으로 구성됨

* code : 코드 자체를 구성하는 메모리 영역(실행명령 포함) data : 정적 변수, 전역 변수 heap : 동적 메모리 영역(동적 할당 시 사용 new(), malloc()등) stack : 지역 변수, 함수 매개변수, 반환 값 등 일시적인 데이터 기본적으로 프로세스마다 최소 1개의 스레드(main thred를 가짐)

-> 해당 프로세스에 대한 정보를 담고 있는 PCB 블럭 * 생성

• PCB (process control block) 프로세스를 제어하기 위한 정보 모음

출처 : https://www.tutorialspoint.com/what-is-process-control-block-pcb

프로세스 상태 프로세스 상태(신규, 준비됨, 실행 중, 대기 중 또는 종료됨)를 지정

프로세스 번호 특정 프로세스의 유니크한 고유 번호

프로그램 카운터 프로세스에서 실행해야 하는 다음 명령어의 주소가 포함

레지스터 프로세스에서 사용하는 레지스터를 지정함 누산기, 인덱스 레지스터, 스택 포인터, 범용 레지스터 등이 포함될 수 있음

열린 파일 목록 프로세스와 관련된 다양한 파일

CPU 스케줄링 정보 프로세스 우선순위, 스케줄링 대기열에 대한 포인터 등은 PCB에 포함된 CPU 스케줄링 정보 여기에는 다른 스케줄링 매개변수도 포함될 수 있음

메모리 관리 정보 메모리 관리 정보에는 사용된 메모리 시스템에 따라 페이지 테이블 또는 세그먼트 테이블이 포함. 기본 레지스터, 제한 레지스터 등의 값도 포함됩니다.

I/O 상태 정보 프로세스에서 사용하는 I/O 장치 목록, 파일 목록 등이 포함

계정 정보 시간 제한, 계정 번호, CPU 사용량, 프로세스 번호 등은 모두 PCB 계정 정보의 일부

프로세서란? 프로세스가 동작* 될 수 있도록 하는 하드웨어(cpu)

*동작 -> 프로그램들의 자원들이 메모리에 올라오고 실행되어야 할 코드의 메모리 주소를 cpu의 레지스터로 올리는 것

cpu(프로세서)는 한 번에 하나의 프로세스만 실행할 수 있음 -> 근데 어떻게 우리는 멀티태스킹을 할 수 있을까?? -> 운영체제가 짧은 시간에 수십번에서 수천번 실행할 프로세스를 교체하고 있기 때문에 우리는 동시에 여러 개의 작업이 실행되고 있다고 느끼는 것

스레드란? 프로세스 내에서 실행되는 작업 흐름의 단위 한 프로세스 내에서 구분지어진 실행단위 다수의 스레드가 있을 경우 공유되는 자원이 있음(스택빼고 다 공유)

멀티 프로세스 vs 멀티 스레드 둘 다 어플리케이션에 대한 처리방식의 일종

예를 들면 다수의 사용자가 로그인을 요청하는 상황을 가정 한 프로세스는 매번 하나의 로그인만 처리할 수 있기 때문에 동시에 처리x 그래서 부모프로세스가 fork하여 자식 프로세스를 만들어 일을 처리하게끔 함

프로세스와 스레드의 장단점

프로세스

• 각 프로세스는 독립적인 메모리 공간을 가짐
• IPC를 사용한 통신
• 자원 소모적, 개별 메모리 차지
• 컨텍스트 스위칭 비용이 큼
• 동기화 작업이 필요하지 않음

스레드

• 스레드끼리 긴밀하게 연결됨
• 공유된 자원으로 통신 비용 절감
• 공유된 자원으로 메모리가 효율적임
• 컨텍스트 스위칭 비용이 적음
• 공유 자원 관리를 해야함
• 한 스레드에 문제가 생기면 전체 프로세스에 영향이 감

참고로 유튜브 우아한테크 테코톡(https://youtu.be/1grtWKqTn50, https://youtu.be/DmZnOg5Ced8)과 쉬운코드(https://youtu.be/QmtYKZC0lMU)의 영상 내용들을 정리한 글입니다 혹시라도 문제가 있을 시 말씀해주세요

DB란? 전자적으로 저장되고 사용되는, 관련있는 데이터들의 조직화된 모음

왜 조직화 해놓을까? -> 데이터가 조직화되어있지 않고 흩어져있다면 원하는 데이터를 빠르고 쉽게 찾기 어렵고 중복된 데이터가 있는지, 관련된 데이터가 얼마나 있는 지 등을 관리하기 어려울 것이다 데이터를 조직화함으로써 원하는 데이터를 신속하게 찾을 수 있고 불필요한 데이터가 중복으로 생성되는 것도 막을 수 있음

database system이란? database + DBMS + 연관된 어플리케이션 -> 줄여서 databse라고 부름 문맥에 따라서 무엇을 의미하는지 잘 보자

DBMS(DataBase Management Systems)란? 사용자에게 DB를 정의하고 만들고 관리하는 기능을 제공하는 소프트웨어 시스템

-> db는 그저 데이터가 나열된 것이기 때문에 이를 제어하거나 백업, 튜닝, 모니터링 등을 하기 위해 프로그램이 필요함. 이 프로그램이 DBMS임(ex: MySQL, Postgre SQL 등) -> 데이터베이스를 관리하고 저장하는 방식에 따라 유형이 구분됨 -> RDBMS, NoSQL

관계형 데이터 베이스(RDBMS)

• 데이터가 행과 열로 저장되고 사전에 정의한 관계로 데이터를 구성한 데이터베이스 시스템(엑셀처럼 생김)
• 테이블에 사전 정의된 내용에 부합하는 형태의 데이터만 삽입가능

장점

• 직관적
• 테이블 간의 관계 파악하기 쉬움, 정확함

단점

• 성능을 향상시키려면 비용이 많이 듦

비관계형 데이터 베이스(NoSQL, Not only SQL) RDBMS를 제외한 나머지를 비관계형 데이터베이스라고 함 RDBMS보다 유연하게 데이터를 읽고 쓸 수 있음 -> 갑자기 왜 등장? 다양한 데이터를 축적하게 되면서 데이터의 복잡도와 양이 늘어남 -> 기존 RDBMS의 장점인 정확성이 그렇게 중요하지 않게 되었음

정리