데브코스 1day-TIL

데브코스 1일차 포스팅입니다.

오늘배운것(TIL)

• js와 프론트엔드
• 메모리
• 흐름 제어
• 배열과 객체
• 스코프와 클로저
• 네트워크 기초
• 컴퓨터 시간 원리
• 암호화
• 앞으로의 공부 방향

js와 프론트엔드

js가 나오면서 무엇을 할 수 있게 되었을까?

브라우저에서 버튼을 눌었을때 dom alert 등을 이용한 동적 기능 및
복잡한 ui 지도 유튜브같은 페이지 가능하게 되었답니다.
최근에는

• 서버: node.js nest.js express
• 앱: react nativ native script cordova
• 프론트엔드 jquery backbone.js react vue angular

등등이 나와서 여러가지로 편리해졌다고 합니다.
하지만 좋은개발자가 되려면 여러가지 알아야 하는데, 지금 단계에선 알 필요 없이, 천천히 필요 할 때 알아 보는 것이 좋다고 합니다.

그렇다면 우리가 브라우저를 다루는데, 어떻게 동작을 하게 될까??

브라우저의 동작 원리

통신->랜더링->스크립트 실행

통신

브라우저<->서버
브라우저가 서버에 요청을 보내면 서버는 응답을 하며
이는 하나에 하나씩, 나아가 동시에도 가능합니다.

랜더링

돔이라 불리는 객체를 화면에 그리는 것을 의미합니다.
통신을 통해서 받은 html을 브라우저가 읽어서 생성합니다.
!돔은 트리구조로 이루어져 있습니다.!

스크립트 실행

화면 다크모드로 바꾸는등 동적인 화면을 처리
ex)이벤트가 발생했을때 alert 등등..

그렇다면 프론트엔드 개발자는 무엇을 할까요??

브라우저에서 동작하는 ui를 개발
ui를 만들기까지의 과정은 혼잡합니다. 디자이너와 백엔드분들과의 줄다리기가 있어 커뮤니케이션 능력이 요하고 다 타협이 설계가 되면,
마지막을 담당합니다.

프론트엔드 개발자의 핵심 역량은?!

!커뮤니케이션! ui 네트워크 보안 브라우저 디자인 이라고 요약 할 수 있겠습니다.

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

변수

변수란?

직접메모리에 할당한 값
변수 선언키워드 'var' 'let'
es6 이후에는 변수선언시 권장되는 키워드로 이후에는 let이 나와
let을 사용합니다.
var는 왜안돼? -> 호이스팅때문에

호이스팅이 뭐길래?

함수 안에 있는 선언들을 모두 올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미 합니다. 따라서 var는 똑같은변수 이름으로 선언 할 수 있기에, 치명적인 오류를 불러 일으킬 수 있습니다.

변수 선언 방식

변수 변수명= 값
let value =111;

상수는 변경불가!
const value2=222;

변수를 선언할때, undefined,null 값을 설정 할 수 있는데,
이 둘의 차이는
undefined=값이 정의되지않은상태입니다.
null=해당 변수가 비어있음을 사용자가 의도적으로 나타 낼 때사용합니다

메모리

자바스크립트가 메모리를 어떻게 다루는지 알아 보겠습니다.
메모리의 사용
할당 -> 사용 -> 해제 순입니다.

변수나 상수를 할당할때마다 메모리가 할당됩니다.
그래서 메모리를 해제 시켜줘야하는데,
js에는 garbage collector를 이용해
사용하지 않은 메모리를 관리해줍니다.

변수선언을 하면 js안에서는,

let variable = 12; //변수 varialbe 선언-> 메모리주소에 있는 메모리에 12할당. 
let variable2 =variable;  //새로운 변수에 기존변수 대입 ->기존변수의 메모리 주소 참조
variable2=variable+1      //-> 기존변수를 조작 -> 새로운 메모리 주소 참조(원시타입변화)

자바스크립트 안 에는 가상머신이 있다.
그 안에서, 메모리 모델을 구현해 놓았는데 이것들은
heap(참조타입의 영역) call stack(원시타입이 들어간다)이다.

let a=10;
const b=20;
const arr=[];
arr.push(5);
arr.push(3);
arr.push(1);
가 있다면

let a=10;
const b=20;
const arr=[];
가 call stack에 순서대로 쌓이고,

arr.push(5);
arr.push(3);
arr.push(1);
는 동적으로 할당되기 때문에 참조를 하여 힙영역에서 한다.

가비지 콜렉터는 mark and sweep algorithm을 가지고있는데, 이는

닿을수없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘입니다.
ex) 어떤 변수의 메모리값을 아무도 참조하지 않는다면, 가비지 콜렉터에 의해 사라진다.

흐름제어

control flow 와 data flow로 구분이 가능합니다.

control flow

흐름을 제어하는 방법중 하나 조건이나 반복을 통해 상태 제어됩니다.
흔히 우리가 알고있는 플로우

데이터플로우

함수 프로그램으로 흐름을 제어합니다.

배열과 객체

배열생성 및 초기화

const arr4 = new Array(5); 크기가 5인배열생성

arr.fill(5) //5로 초기화
arr.from(초기화할 배열, 함수(배열의값, 배열의인덱스){
return k+1;
} ->//12345 출력

배열에 사용하는 함수

• .join("."));
  ,로 나눠준다
• .reverse()
  반대로 바꿔준다 사용에 주의->원래 배열에도 영향을 준다.
• .slice(시작요소,끝요소)
  시작요소 부터 ~ 끝 요소 전! 까지를 리턴한다. 원본배열 변화x
• .splice(자를 요소의 인덱스, 자를 요소의 인덱스부터 자를 갯수)
  자를 요소의 인덱스부터 두번째 인자인 자를 갯수까지를 자른다. 원본배열 변화o

객체

배열의 요소는 객체와 동일
배열이 js에는 특수한 객체가 있다.
객체처럼 사용하면 배열의 길이는 변하지않습니다.

• 객체생성
  const obj1=new Object();
  const obj2= {};

• 객체 추가
  obj[name]="cho"
  obj.phone="01012345678"

• 삭제
  delete obj.phone;

• 존재유무
  console.log(eamil in obj); ->false

• 키값을 순회
  Object.keys(obj));

• 리스트 벨류값을 순회
  Object.values(obj));

• for in문을 통한 키, 벨류 값을 순회
  for const i in obj{
  console.log(key,obj[key]);

스코프와 클로저

스코프

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

var를 사용하면 안되는 이유가 여기에도 있습니다!
변수선언이 함수 상단으로 올라가기 떄문에 사용을 해선 안됩니다.
var는 함수수준의 스코프이고,
let const는 블록수준의 스코프이기때문에, 차이가 있고, 변수 선언시 let cosnt를 사용하는게 좋습니다.

클로저

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

유용하게 사용->은닉화
내부변수와 함수를 숨길수 있습니다.
내부 변수와 함수를 숨기면서 개발자의 실수를 줄 일 수 있습니다.

잘 알아야 하는 이유는
알기 힘든 버그를 잘 알기 위해서.

네트워크 기초

http 통신

브라우저에 url 을 입력하면 접속이 되어 우리 눈에 보입니다.

단계별로 알아보면,

1. url을 해석한다.
   인증이 요구되는 경우, 아이디와 패스워드를 입력하게 합니다.

2. dns를 조회한다.
   dns(도메인 네임 시스템)
   도메인과 아이피주소를 서로 변환해주는 시스템
   브라우저는 dns로 요청보내기전. 몇가지를 체크합니다.
   브라우저의 캐시를 참조하고,
   ->없다면 로컬 컴퓨터의 host를 참조합니다
   이미 정의가 되어있다면 내부적으로 ip를 반환합니다

   그러나 로컬 컴퓨터의 host를 참조하거나, 브라우저의 캐시를 참조해도 없다면, 즉, 둘다 해당안되면 dns를 호출하여 ip를 반환합니다.
   dns서버는 root -> tld -> authoritative server를 탐색하며
   도메인은 항상 present.do
   나머지는 호스트 입니다.

3. 해당 ip가 존재하는 서버로 이동합니다.
   네트워크 장비 라우터를 통해 이동하는데, 이떄는 동적 라우팅을합니다.

4. arp(address resolution protocol)를 이용하여 논리적 주소인(ip)를
   mac 주소(물리) 변환한다.
   기계의 실제 위치를 알기 위해선 mac주소가 필요합니다.

   굳이 왜 논리적 주소와 물리적으로 나눳나?

   ex)시청의 주소
   시청의 주소는?
   세종대로 110 · 02-731-2120 ip에 비유(논리적)
   북위 37.5642135° 동경 127.0016985°(gps좌표) mac에 비우(물리적)

5. tcp통신을 통해 socket을 연다.
   소켓을 열어 허락을 받아야 데이터전달 가능합니다.
   네트워크를 통해 해당 기기로 패킷을 전달하고,
   허락받기위해 3way handshaking 이용하게 됩니다.
   요청이 수락되면 기기는 패킷을 받아 처리합니다.

6. 서버는 응답을한다
   http 프로토콜로 들어온 패킷을 읽고 처리합니다.
   요청에 따른 적절한 응답 값을 반환합니다.

7. 브라우저는 렌더링
   html을 읽어 dom tree를 구축하고,
   만들어진 dom tree를 이용하여 화면에 그려
   최종적으로 스크립트를 실행한다.

http가 이미 있음에도 불구하고 https가 왜 탄생했는지, 왜 필요한지??

https가 생김으로 인해 기존 과정에서 무엇이 추가되었는지?

컴퓨터의 시간원리

컴퓨터 시간은 어떤 원리로?

그전에 시간이 뭘까요 어떻게 결정될까요?

• 물리량
  시간은 물리학 관점에서 봤을 때 시각과 시각 사이 간격을 표현하는 단위
  ex)지금 이순강은 빅뱅후 얼마나 흘렀는가?

• 위치
  시간은 위치에 따라 다르게 표현
  천문현상
  지구의 자전속도의 불규칙성 지구의 자전주기와 공전주기 등 천문 형산으로 인한 시간보정이 필요

• 문화
  문화에 따라 시간 표현이 다를 수 있다
  ex)태양력 태음력 이슬람력 에티오피아력
  역사
  역사적 사건에 의해 시간은 다르게 표현될 수 있다

• 표준화
  협정 세계시(UTC)
  원자 시계와 윤초 보정을 기반으로 표준화한 시각
  모든 시간대는 UTC+0 기준으로 환산
  ex) 대한민국은 UTC+9
  경도상 시간과 국가 시간은 다를 수 있다.

컴퓨터가 시간을 표현하는 방법

하드웨어의 시스템 클럭을 이용합니다.
특정 시각을 기준으로 시스템 클럭의 틱을 세는 것으로 구현하고 이것을
이를 시스템 시간이라고 합니다.

시스템 클럭의 원리

rtc라는 모듈을 사용
rtc는 메인보드에 붙어있어 전원을 끄더라도 계속 작동합니다.
rtc는 카운터 회로를 통해 클럭을 발생시킨다.

unix time

1970년 1월 1일 0시 0분 0초가 기준 시각

그렇다면 컴퓨터는 현재 시간을 어떻게 알아낼까?

컴퓨터를 키면 자동으로 현재 시간을 보여줍니다. 어떻게 알아낼까용??
시스템 시간을 네트워크 타임 프로토콜을 통해 동기화 할수있습니다
ntp서버에 네트워크 요청을 하여 현재 시간을 알 수 있고,
ntp 서버는 계층으로 이루어져 있으며 그 계층을 startrum이라고 부릅니다.
여기 최상위 계층을 prc라 부르는데, 이는 밑으로 내려갈수록 정밀도가 떨어집니다.

시간대 고려문제

국가 지역별로 시간이 다릅니다..

시간을 어떤 기준으로 사용해야 할까요??
글로벌 서비스를 운영하신다면 시간이 매우 중요해는데,
순수한 시간기준으로 한다면
내가 한국에서 1월 26일에 태어나도, 미국시간으론 1월25일이니 혼란을 야기합니다.

그렇다면 utc를 기준으로한다면,
역사 사회 문화에 대한 맥학 없이 사건이 발생한 시각만을 고려할 떄 사용합니다.
로깅
감사
시계열 데이터
등등에

그러면 time zone이 적용된 시간으로 계산한다면,
역사 사회 문화를 고려하여 사용자가 이용한 시각을 정확히 알아야할 때 사용하는 기준으로,
ui에 표시되는 시간을 사용자 기준으로 보여줄때 사용합니다.
알림,push 메세지 등등

js에선 어떻게 사용할까요?
date객체를 편리하고 간단하게 사용합니다.

암호화

평문을 해독할 수 없는 암호문로 변환하는 것을 의미합니다.
단방향(해싱)과 양방향 암호화가 존재합니다.

단방향 암호화

해시 알고리즘을 이용하여 평문을 복호화 할 수 없는 형태로 암호화합니다
대표적으로 md5 sha알고리즘이 있습니다.
사용자 비밀번호 등을 저장할 떄 자주 사용됩니다.
md5 sha0 sha1은 해시충돌이 발생할수있기 떄문에 사용권장 x

단방향은 고려할것이많습니다.
불의의 사고로 암호화된 데이터를 탈취당하더라고 원문을 알아 낼 수 없도록 조치 해야합니다.
salt key stretching을 이용하여 조치가능합니다.

• salt
  평문에 임의의 문자열을 추가하여 암호화 하는 방법입니다..
  재료에 소금을 곁들여 먹는것에 비유한 방법입니다.

• key stretching
  해시를 여러 번 반복하여 원물을 알기 힘들게 만드는 방법입니다.
  일반적인 시스템에서 0.2초 이상 반복되면 안전하다고 합니다

• salt 와 key stretching을 이용하는 알고리즘
  직접 구현하는 것보다 이미 검증받은 알고맂듬을 사용한느 것이 안전합니다.
  PBKDF2
  bcrypt
  등

양방향 암호화

평문을 복호화 할 수 있는 형태로 암호화하는 방법입니다.
대칭키와 비대칭키 알고리즘으로 나뉜다
대칭키 aes 비대칭키 rsa
대칭키 암호 알고리즘
aes가 있고 같은 \키를 이용하여 암/복호화 합니다.

• 비대칭키 암호 알고리즘
  rsa
  공개키와 개인키 두가지 키가 존재하고,
  모든 사람이 대칭키를 알아야하는 단방향 방식은 보안위협되기에,
  공개키와 나만알고있는 개인키를 이용하여 암 복호화하기때문에 안전합니다->https에서도 쓰입니다.

브라우저는 암호를 어떻게 보관할까요??
크롬이나 사파리,1password는 암호를 보관하고 동기화 해줍니다.
기업이 비밀번호를 평문으로 보관하지는 않을텐데..
해시 알고리즘을 썻다고 가정하면 어떻게 다시 복호화를 해준걸까?

여러 사람이 비밀번호를 공휴한다면?
모든 사람이 비밀키를 공유? 이게 보안이 될까?

알려진 방법이없고, 추측만 있다고 합니다.ㅠ

마지막으로, 공부 하면서의 앞으로의 방향

• 기본기를 탄탄하게, 상식을 기르기
• 정답을 찾는 과정을 즐기기
• 내가 무엇을 잘하고 못하는지 파악하기(자기객관화)
• 공부한 것은 꼭 기록하고 가급적이면 공개하기!(블로그)
• 질문을 두려워하지 않기

해선안되는것

컴퓨터과학(알고리즘.설계패턴,메모리) 무시, css안하기,코더가 되는 것(프레임워크나 라이브러리에 의존)
->항상 도전하고 공부하는 자세로 임하자.!

느낀점:

데브코스의 대망의 교육 첫 날 이었다. 프론트엔드 개발자로써의 할 일과 핵심역량과 내용을 오늘 다시한번 짚고 넘어가게 되었고, 13시부터 진행되어 22시 30분까지 거의 쉬지 않고 달려왔다. 매일이 이런 하루가 반복되고, 더 바빠지겠지만, 시작이 반이라는 말이 있듯이, 이 마음가짐 그대로 초석을 다져 마음을 다잡은 날 이었다. 뜻깊은 5개월을 위하여!!