TIL

• js의 함수형, 객체지향과 프로토 타입
• js의 모듈, 이벤트 루프,정규표현식
• 쿠키와 세션, 웹스토리지
• 알고리즘의 중요성

함수형 프로그래밍

객체지향 프로그래밍?

객체란 것을 통해 데이터와 메소드를 묶고 객체간 통신

함수형 프로그래밍?

데이터 파이프라인에 형태

함수형 프로그래밍의 패러다임

객체지향 추상화의 최소단위는 객체,
함수형은 함수가 최소단위이다.
재 사용성이 높다
불변성을 지향하기에 동작을 예측하기 쉽고 사이드 이펙트를 방지.
사이드 이펙트를 방지한다?=>동시성문제 해결
함수형은 변수 할당에 부과되는 규율

함수형 프로그래밍의 단점

상태가 없기 때문에(변수조작이 안된다) 사이트 이펙트가 없다.
재 사용성이 높다.(이를 위해 함수를 잘게 쪼개야한다.)
코드가 짧고 간결하다.(많은 숙련도를 요구합니다.)
선언형 프로그래밍=함수형이랑 가깝다
객체지향이나 함수형처럼 설계에 대한 패러다임보다,
사고에 대한 패러다임이다.
기존 명령형 프로그래밍은 사고를 어떻게 해야할지 고려 한다.
ex)
명령형 프로그래밍
변수선언=>루프=>조건
선언형 무엇이필요?
필요한것만 걸러야한다

멀티 패러다임
JS는 함수형, 객체지향 둘다 사용한다.

객체지향과 프로토타입

객체지향

객체가뭐야?

객체 지향의 객체는 현실에 있는 것을 추상화 한 것

추상이 뭐지?

지구와 지구본, 지도 를 생각
지도는 직사각형으로 직관적이나, 실제를 왜곡
지구본은 한눈에 살펴보긴 어렵지만 실제크기를 반영
이처럼,
추상은 사물이 지니고 있는 여러 측면 중 특정한 부분만 보는 것

객체지향이란?

객체 위주로 설계하고 프로그맹하는 패러다임
객체지향 언어에선 추상화의 최소 단위가 객체다
각각의 객체는 메세지를 주고 받을 수 있다.
객체지향은 제어 흐름의 간접적인 전환에 부과되는 규율이다.

객체지향의 오해

객체지향은 패러다임일 뿐 언어와는 관계가 없다.
언어는 지향하는 것을 조금 더 편하게 구현할 수 있게 도와줄 뿐이다.
ex)
따라서 JS GO C로도 객체지향을 할수있다.
절차지향보다 객체지향이 무조건 더 좋은 것은 아니다.
계산기 같이 간단한만들어야하는 프로그램에 따라 절차지향이 더 적합할 수 있다.

결론: 상황에 따라 다르다!

JS의 객체

클래스 기반 언어 처럼 속성과 행위를 정의할 수 있다.

프로토타입

기존의 객체를 복사하여 새로운 객체를 생성하는 방식

var person = function() { 
this.h1 = function() { 
console.log("10"); 
} 
}

person.h1 = function() { console.log("1"); }

var p1 = new person(); 

p1.h1() // 10

결과 값은 10이다..
1이 나올거 같은데 왜지?
프로토타입 객체는 생성 당시의 정보를 기억하기 때문이다!

아래처럼 하면 원하는 결과를 얻을 수 있다.

var person = function() { 
this.h1 = function() { 
console.log("10"); 
} 
}

person.prototype.h1 = function() { console.log("1"); }
//prototype을 추가한다.
var p1 = new person(); 

p1.h1() // 10

어떻게 잘 사용할까?

상속 흉내내기
부모 객체를 이용하여 프로토타입 함수 정의하기
부모 생성자를 빌려 쓸 수 있다.

모듈

웹사이트는 여러개의 js로 이루어져 있다.
자바스크립트는 파일들을 별개의 프로그램으로 취급한다.
문제는 웹사이트가 하는 일이 많아지는데, 스크립트파일이 크게 증가한다.
예전 js는 파일간 통신을 위해 전역 스코프에 변수와 상수를 알아야 했었다.
그러나 즉시 실행함수를 통해
전역 스코프가 오염되는 것을 막을 수 있었지만, 파일간 의존도를 알기 힘들고,
실행순서를 제어해야 한다는 한계점이 있었다.

그래서! 모듈은
실행순서 제어, 의존도를 쉽게 알 수 있다.

용어 정리

모듈
설계시점에 의미있는 요소며

컴포넌트는
런타임시점에 의미있는 요소이다.

왜 이름이 모듈일까?
js는 파일 하나가 프로그램이기 때문에 모듈이라 지었을 것이다
설계시 용어가 혼동되는 경우가 많다.
제대로된 모듈 역할을 하기 위해 디렉토리 단위를 모듈 개념에 까갑게 사용
import와 export를 통해 모듈 블러오기와 내보내기를 수행 할 수 있다.

준비물
모듈은 로컬 파일에서 동작하지 않고 http 또는 https 프로토콜을 통해서만 동작=서버를 실행시킬 필요가있다

기초 사용방법

script type='module'
import를 통해 다른파일을 불러올수있다

모듈의 특징

• 특징1 -항상 use strict로 실행된다
  일반 스크립트:
  let var를 생략하고 변수 선언가능
  반면 모듈 스크립트는 엄격모드로 선언 안하면 허용x

• 특징2 모듈 레벨 스코프가 있다
  최상위에 해도 전역스코프에 올라가지않고, import하지 않는한 서로 참조 불가능하다

• 특징3 단 한 번만 평가된다
  hello world를 두번 출력시켜도, 안된다

• 특징4 지연 실행된다
  모든돔이 만들어진 후 실행이된다.

그러나 트렌드는,
webpack등을 이용하여 번들링한 스크립트를 불러오면 크게 type='module'을 사용할 일이 별로없다.

이벤트루프

js는 single thread로 동작한다.
javascript call stack은 하나만 동작한다
브라우저에서 실행되는 스크립트는 어떻게 비동기적으로 실행시킬까?
브라우저의 이벤트 루프라는 시스템이있기 떄문이다= 이건 브라우저의 기능 js는 xx!!

web APis
브라우저에서 제공하는 api
클릭 dom이벤트. 네트워크 호출 타임이벤트는
콜백함수를 넘기게 되는데, 비동기작업이 끝나면 task queue에 넣어져 순차적으로 넘겨져 콜스택에
푸시된다.

전역 스코프 내에서 실행이 된다. ->코드가 순차적으로 실행됩니다

선택과제
비동기 작업은 task queue 뿐만 아니라 microtask queue, animation frames에도 등록됩니다.
microtask queue와 animation frames가 무엇인지 조사해보세요

js 정규표현식

test() 입력받은 문자열에 찾는 패턴이 있는지 찾은 후 있다면 true 반환
없으면 false 반환

exec 입력받은 문자열에 찾는 패턴이 있는지 찾은 후 일치한 패턴 정보를 반환하고 없으면 null 반환
문자 추출에 해당

match
string 객체의 match함수는 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후 일치한 패턴정보를 반환하고 없으면 null반환

replace
문자열 변경

search
string 객체의 search함수는 정규표현식 객체를 파라미터로 받아 패턴이 있는지 찾은 후
일치한 패턴 정보의 위치를 반환한다.
문자 검색에 해당한다.

capture
캡처가 적용된 정규표현식을 이용하면 match 반환값의 1번 인덱스부터 순차적으로 캡처 결과가 들어감

쿠키와 세션, 웹 스토리지

http 통신
http request는 기본적으로 상태가 존재하지 않는다
따라서 서버는 어떤 브라우저에서 요청이 온 것인지 알 수 없다.
이때 헤더에 쿠키를 담으면 서버가 쿠키를 읽어 어디서 온 것인지 알 수 있다.

쿠키(cookie)

프론트엔드에서 저장하고 관리
브라우저를 닫아도 데이터 유지
서버에서 setcookie를 응답 헤더로 내려주면 클라이언트는 받아서 저장한다.
클라이언트에서 자체적으로 조작할 수 있다
각 상태에 수명을 정할 수 있다.

서버에서 내려주는 set-cookie 헤더
키=값 옵션으로 정해져잇고,
응답 헤더에 담으면 브라우저가 알아서 저장한다
각 데이터엔 여러 옵션이 존재

• expire
  말료날짜
• secuer
  https에서만 쿠키를 전송
• httponly
  js에서 쿠키에 접근 못하도록 막는다
• max-age
  쿠키 수명을 정한다 이때 expires는 무시된다
• domain
  도메인이 일치하는 요청만 쿠키가 전송된다
• path
  패스와 일치하는 요청만 쿠키가 전송된다.

쿠키의 취약점
xss공격을 당할 수 있다.
js를 이용해 다른 사용자의 쿠키값을 탈취 할 수 있다.
쿠키를 암호화하지 않고 보내면 쿠키값을 중간에 탈취 당할 가능성이 있다.

클라이언트가 아무리 쿠키를 보내도 서버는 주인을 모른다.
어떻게 알아야할까?
바로 세션으로 해결한다.

세션

http 세션 id를 식별자로 사용자를 구분한다.
클라이언트는 http 세션 id를 쿠키 형태로 저장한다
서버 자체적으로 기록하고 관리한다.

세션의 문제점
->세션은 서버에 파일로 저장된다 만약 사용자가 많으면? 응답속도가 느려질수있다.
서버가 두대라면?
->인증정보가 퍼져있기에 제대로 응답 할수 없을 수 도 있다.

이제 서버와 클라이언트간 인증은 별도 토큰을 사용하고
쿠키는 클라이언트 자체적인 지속적인 데이터 관리 용도로 많이 사용된다.

쿠키대신 로컬데이터를 관리하는
웹 스토리지

로컬 스토리지

로컬 스토리지에 데이터를 저장하면 반영구적으로 데이터가 저장된다.
브라우저를 종료해도 계속헤서 데이터가 남는다.
저장했던 도메인과 이용하는 도메인이 다른 경우엔 접근할 수 없다
쿠키와 마찬가지로, key value 형태로 저장한다.

세션 스토리지

새 창을 생성할 때 마다 개별적으로 저장되는 데이터를 관리 한다.
브라우저를 닫는 순간 사라진다
같은 도메인 이어도 세션이 다르면 데이터에 접근할 수 없다.
쿠키와 마찬가지로 key value 형태로 저장한다.
쿠키 관리는 string으로 한다.
불편하다

자료구조 알고리즘이 중요한 이유

메모리를 효율적으로 사용하며 빠르고 안정적으로 데이터를 처리하는 것이 궁극적인 목표로 상황에 따라 유용하게 사용될 수 있도록 특정 구조를 이루고 있기에 이것들을 잘 사용할 수 있어야한다.

알고리즘 특정문제를 효율적으로 빠르게 해결하는 것이 궁극적인 목표 정해진 일련의 절차나 방법을 공식화한 형태로 표현한 것을 말합니다.

논리적 사고가 중요하다.

기초 코딩 능력

전문 분야 지식

기본 cs 지식이 중요!

자료구조의 종류

단순 구조
정수 실수 문자열 논리
선형구조
배열 연결 리스트 스택 큐
비선형구조
트리 그래프

선형구조

한 원소 뒤에 하나의 원소만이 존재하는 형태로 자료들이 선형으로 나열되어 있는 구조를 가진다.
선형 구조에 해당되는 자료구조는 배열, 연결리스트 스택 큐 등이 있다

비선형 구조

원소 간 다대다 관계를 가지는 구조로 계층적 구조나 망형 구조를 표현하기에 적절하다
비선형 구조에 해당되는 자료구조는 트리와 그래프 등이 있다
완벽한 자료구조는 없다
더 좋고 더 나쁜 자료구조는 없다
특정 상황에서 유용한 자료구조와 덜 유용한것만 있을뿐..

시간복잡도

프로그램의 성능을 정확하게 알 수 있나?

고려할 것
입력 크기
하드웨어 성능
운영체제 성능
컴파일 최적화
비동기 로직 등등

프로그램의 성능을 정확히 파악하는 것은 불가능..
그래서 상대적 표기법인 BIg-O notation을 사용

빅오표기법

상수항은 무시
가장 큰 항 외엔 무시!
2k+3n=n
1555k+3n^2 =n^2

js의 성능측정
date()를 이용하여
end-start를 이용!

const end = new Date().getTime();
cosole.log(end-start);
cosole.log("finish");

느낀점

오늘도 역시 방대한 내용을 한번에 배웠다... js를 쓰며 객체지향과 함수형 언어의 차이점, 미뤄놓고 알지못했던(알려고 하지도 않은)모듈, 이벤트 루프,정규표현식 프로토타입, 웹 기초를 다시 복습할 수 있었고 이 외에 git의 특강을 통해 git의 기본사용법과 심화내용을 잠깐(?)배웠는데, 유익한 강의내용은 물론, 너무 힘이되어 주시는 따듯한 말씀을 해주셔서 힘이 났다. 특히 강사님이 걸어오신 길을 말씀을 해주시면서, 고충을 공감해주시고 분명 할 수 있다는 말이 위로가 되고 용기를 얻을 수 있었다. 이제 2일차다! 헤처나가야 할 날들이 많지만, 분명히 할 수 있다.
어제보다 성장한 나를 보면서. -끝