[항해99] WIL 3

항해99 15일차	2022. 5. 23.(월)	주특기(React) 입문 주차 CS 실전프로젝트 리더/부리더 발제	D반 - React 입문, 팀과제 질문 키워드 배분 및 시작,                               개인 공부 계속(생활코딩), 개인 과제 시작        - CS, 챕터 10
항해99 16일차	2022. 5. 24.(화)	주특기(React) 입문 주차 CS	D반 - React 입문, 팀과제 계속        - CS, 챕터 12, 13
항해99 17일차	2022. 5. 25.(수)	주특기(React) 입문 주차 CS 항해톡	D반 - React 입문, 팀과제 계속, 개인 과제 완료        - CS, 챕터 14
항해99 18일차	2022. 5. 26.(목)	주특기(React) 입문 주차 CS	D반 - React 입문, 팀과제 리뷰 및 완료        - CS, 챕터 15 (발표)
항해99 19일차	2022. 5. 27.(금)	주특기(React) 숙련 주차 시작  CS	D반 - React 5조(4명), 환경 설정, 강의 듣기        - CS, 챕터 16
항해99 20일차	2022. 5. 28.(토)	주특기(React) 숙련 주차 CS	D반 - React, 리액트 기초반 강의 완강, 개인 과제 시작        - CS, 챕터 18, 19
항해99 21일차	2022. 5. 29.(일)	Weekly I Learned 작성, 개인 공부

15일 차 오전,

스파르타코딩클럽 리액트 기초반 강의 수강 ~3-6까지.

https://writingcode.tistory.com/36

 

15일 차 오후,

팀 과제 자유질문 포함 질문 키워드 배분하고, 3일에 걸쳐 하루에 하나씩 답변 완성하기로 함. 이후 목요일에 리뷰하기로. 

 

https://writingcode.tistory.com/38

Event Listener

 

리액트 관련 다른 무료 강의들을 찾아 공부 보강. 생활코딩 리액트 2022 강의 들음. 

개인과제 시작했는데, 매우 어렵.. 도형 ► 만드는 것부터 내 생각만으로 완성되지 않아서, 만드는 법 찾아보고.. 랜덤 점수 구하고 평균 평점 내는 건 어렵지 않았는데, 이를 도형 색깔 바꾸기로 전환하려니까 어떻게 해야 할지 막막.

 

16일 차 오전,

개인과제 이거 할 수 있는 건가.

16일 차 오후,

노마드..강의 아주 조금. 동그라미에 색깔 입히는 방법 알아냄. 하나씩 발전.. 캐시 공부 조금.

 

https://writingcode.tistory.com/39

SPA 방식과 MPA 방식

 

17일 차 오전,

개인과제

17일 차 오후,

항해톡, 알고리즘 조에 있던 한 분이 발표자로 나와서 응원응원. 근데 말을 진짜 잘함......부럽...

개인과제 어찌어찌 끝내서 배포, 도메인 등록, 제출까지 끝냄.

 

https://writingcode.tistory.com/40

React Hook(State)

 

18일 차 오전,

매니저님, 오늘 푹 자라며, 잘 수 있을 때 자라는 말을 남기고 가심...

 

CS 발표 - 캐시가 무엇인가요? 

두 번째 발표인데, 더 긴장... 연습할수록 더 버벅거리게 되는 현상...=_=; 그래도 발표는 무사히 끝.  

https://writingcode.tistory.com/35

[항해99] CS 하드웨어 2주차

 

나란히 서서 춤추는 중.. 귀여운 우리 조

18일 차 오후,

매니저의 question, CS 조 어려움은 없는지!? 아직까지는 괜찮은 것 같다고 답변! 우리 조 분위기 좋아서 좋다고도 함! 

팀 과제 전체 내용 복습하고 함께 리뷰. 얘기 나누면서 보충할 부분 찾고 보강하기로.

 

개인과제 리뷰 

https://writingcode.tistory.com/41

https://writingcode.tistory.com/42

 

19일 차 오전,

리액트 숙련 주차 시작. 팀 변경. 5조.

우리 조 인테리어... 같은 반 게더 툴 장인에게 의뢰! 겨울왕국 콘셉트로- 시원하게- 주문했는데 멋지게 나옴!!!!!! 짱짱

강의 듣기 계속.

19일 차 오후,

keyframes.. 애니메이션 만드는 거 신기, 꿀잼..!

강의에 숙제 해설 강의가 있었다고요??? 1240px보다 작으면 보이지 않았던 메뉴가... 있었다.. 몰랐을 수는 있는데, 꽤 많은 사람들이 몰랐다 ㅋㅋ  

20일 차 오전,

아침, 지방선거 사전투표 완료.

CS 신기술 등장 prezi video? WOW!

5-4부터 5주 차 강의 듣기 끝. 스파르타코딩클럽 리액트 기초반 완강!  

https://writingcode.tistory.com/46

20일 차 오후,

팀과제 리뷰

https://writingcode.tistory.com/47

 

개인과제 & 팀 과제 시작.

---

#DOM

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다. DOM 은 nodes와 objects로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결시켜주는 역할을 담당한다. (MDN)

HTML 문서 내의 DOM 계층의 예 (wikipedia)

 

=> document(=HTML) object model

=> DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다.

+ DOM이 자바스크립트 요소는 아니지만, 자바스크립트로 제어할 수 있는 대상. (파이썬에서도 BeautifulSoup 가지고 돔 조작 가능) 

 

DOM은 HTML 문서의 요소를 제어하기 위해 웹 브라우저에서 처음 지원되었다. DOM은 동적으로 문서의 내용, 구조, 스타일에 접근하고 변경하는 수단이었다. 브라우저 사이에 DOM 구현이 호환되지 않음에 따라, W3C에서 DOM 표준 규격을 작성하게 되었다. (wikipedia)

ECMA스크립트의 표준화 이후 W3C DOM 워킹 그룹은 표준 DOM 사양의 초안화를 시작하였다. "DOM 레벨 1"이라는 이름의 완성된 사양은 1998년 말 W3C 권고안이 되었다. 2005년, W3C DOM의 대부분이 공통 ECMA스크립트 지원 브라우저들에 양호하게 지원이 되었으며 이 브라우저들에는 마이크로소프트 인터넷 익스플로러 버전 6(2001년부터), 오페라, 사파리, 게코 기반 브라우저(예: 모질라, 파이어폭스, 시몽키, 카미노)가 포함된다. (wikipedia)

 

DOM 단계

Dom처리의 일반적인 순서: 1. 제어할 대상을 찾는다. 2. 대상이 가지고 있는 메소드를 실행하거나, 이벤트 핸들러를 설치한다.

 

(참고)

https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction#how_do_i_access_the_dom.3f

---

#서버리스(serverless)

=> 개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는 클라우드 네이티브 개발 모델.

=> 백엔드를 작은 함수단으로 쪼개서 올리면, 24시간 돌아가는 게 아니라, 요청에 응답할 준비를 하고 있다. 리퀘스트가 오는 순간에 함수를 깨우고 요청한 작업을 수행하고, 다시 대기 상태로. =>저렴해짐.

 

장점) 정전 등으로 인한 서버 다운 사고를 걱정하지 않아도 됨. 서버 용량을 걱정하지 않아도 됨. 코드에만 집중할 수 있음.

단점) 1. 서버 응답 시간이 느리진 않지만, 직접 서버를 운영하는 것에 비해 시간차가 있음. (==> 자주 쓰이는 함수를 파악해 빨리 대응하는 서비스도 있음.) 2. 서버 제공자 의존도가 큼.

 

결론) 사이드 프로젝트 하는 경우 등에 추천.

 

(관련) serverless.com, AWS람다, Google Cloud Functions, Apex, Terraform 등.. 참고!

 

(참고) https://youtu.be/ufLmReluPww