스터디 첫 모임

상태관리

• 제이쿼리
  • 2010년에 리액트나, 앵귤러, 뷰가 나오기 전에는 제이쿼리로 상태관리를 했었다.
  • 상태관리란?
    • 브라우저에서 변수나 정보를 단순하게 임시 저장하는 것.
  • 예전에는 dom을 기준으로 상태관리를 했었다. html / head / body 태그로 DOM 주체로 상태관리를 했었다.
    • 내가 body를 선택을 하면, $(body).title = ""
  • 2010년에 앵귤러가 나오면서, 상태관리 패러다임이 바뀌었다.
    • 어떻게? 변수 위주의 패러다임으로 바뀌었다.
  • const stateTitle = '1'; 이라는 변수가 있다면, stateTitle이 변했을 때, body title이 바뀌도록 상태관리 패러다임이 바뀌었다.

• 어떻게 이게 관리가 될 수 있을까?
  • 동적으로 DOM을 어떻게 동작할 수 있을까요?
  • title을 넣고, css를 넣고, vanilla JS로 해보고, 이를 DOM에서 html을 조작할 수 있음을 보여줄 수 있다.

    const doc = document;
    
    doc.head
    
    doc.body
    
    // DOM Tree를 가지고 있는 html 태그를 볼 수 있다.
    
    // h1 태그로 hello world로 찍어보자.
    
    const h1 = doc.createElement('h1');
    h1.textContent = "hello world";
    
    // doc.body엔 아직 h1 태그가 없다.
    doc.body.append(h1);
    
    // 이러면 hello world가 찍힌다.
    h1.textContent = "hello h1";
    
    // 이처럼 Vanilla JS로 html을 조작하지 않았지만, html 페이지를 수정할 수 있었다.
    // 추가적으로 tag만 바꾸면 재미가 없으니, css를 추가해보자
    doc.head;
    
    const style = doc.createElement("style");
    doc.head.append(style);
    
    // css 임을 알려야 하기 때문에, 이렇게 해야한다.
    style.type = "text.css"
    
    // 여기에다가 클래스를 만들어서 넣어보자.
    style.textContent = ".text { background-color: red; }"
    
    // 이거를 h1 태그에 classList에 add 해주자.
    h1.classList.add('test');
    
    // 이번에는 h1 태그에 style를 직접 한 번 바꿔보자.
    h1.style.border = "1px dotted yellow";
    h1.style.borderRadius = "2rem";
    
    h1.classList.remove("test");
    
    // 이런식으로 JS 만으로 html의 DOM을 동적으로 바꿔줄 수 있기 때문에, React, Angular, Vue로 html 태그를 바꿀 수 있다고 말을 드리고 싶었다.​

---

이미지 분석

• 이미지가 양품인지 불량품인지 판단할 수 있는 프로젝트를 했었다.
• 카메라로 이미지를 받았을 때, A / A not 인지 판단하는 과정을 가지는데, 그 과정으로서 Raw Data라고 해서, 회사로 부터 양품과 불량품의 사진을 받는데, 전처리를 합니다.
  
  • 이미지는 워낙 용량이 크니까, Modeling을 함
  • 트레이닝을 하여, 이미지 학습을 시켜서 정확도, 오차율을 낮추는 방향으로 한다.
• 제일 중요한건, 정확도 / Loss이다.

회사에서 양품, 불량품 이미지를 받아서, 전처리를 하게 된다. 사이즈를 높이에 맞춰서 넓이를 정사각형을 만들어서 이미지를 만들어서 전처리를 한다.

 

전처리한 이 것을 모델링을 코드화 시키거나 라이브러리로 사용할 수 있는데, CNN을 쓴다.

 

Convolution Neural Network인데, RGB 정보를 3 channel로 쪼개서, Filter라는 파라미터로 조정을 해서 , Feature Map을 만든다. Filter를 갖다가, 잘 못하면, 과적합이 된다.

 

Convolution 다음에 Pooling을 하는데, Max Polling / Avg Pooling이라는게 있다.

 

filter 선정을 어떻게 하나요?

 

Training도 할 수 있따.

 

Mean Squared Error 라고, 실제 값과 예측 값의 차이 제곱의 합을 전체 크기로 나누는 것이다.

---

DNS

• DNS란?
  • Domain Name System / Server
  • 도메인 주소를 받았을 때, IP 주소로 바꾸는 것을 의미한다.
• 예를 들어, naver.com으로 접속을 했을 때, DNS cache로부터 IP를 가져오고, host로 부터 가져오고, DNS 서버에서 가져올 수 있다.
• 윈도우에는 내 컴퓨터 여시고, C: 들어가고, system32 폴더에 들어가면, drivers에 들어가면, etc 폴더에 hosts를 참고해서, IP 주소를 가져와서, IP를 가져온다.
• 서버 질의는 KT 서버 (168.126.63.1), 구글 서버(8.8.8.8)에 IP를 물어보고 IP를 가져오는 그런 방향으로 하고있다.
  • KT, 구글 서버는 root DNS를 다 가지고 있어서, 여기에 요청을 하고, 응답을 받고, 없으면 comDNS에 요청을 하고 받아오는 과정을 반복한다
• 이 과정을 Recursive 질의, iterator 질의라고 구분지어서 얘기한다.
• 여기서 설명드리고 싶은 부분이 있는데, DNS를 통해서 해커가 공격을 할 수 있을까?
  • hosts 파일을 변경하면 해커가 피싱사이트를 보여주면서 공격을 할 수 있지 않을까? (이를 DNS Spoofing이라고 한다, sniffing 기법)
  • 알려지지 않는 DNS 서버를 쓰는것도 위험하다. (아까 말한 KT, 구글 말고, 이를 DNS cache poisoning라고 한다)
• 다음에는, DNS 서버를 구축하는 걸 설명하려고 한다.

---

생각보다 넘 재밌는 자리였다. 다들 왤케 잘해 진짜 나만 멈춰있어 ㅠㅠ