이노베이션 캠프 3주차 회고(3week I Learned)

yesolog·2022년 8월 21일

TIL,WIL

목록 보기

3/6

2주차 회고(알고리즘)

배운점

3주차는 리액트 기초주차로 이루어져있습니다. 나만의 todo list를 만드는 것이 목표인데 저는 스파르타 코딩클럽에서 제공하는 React강의가 맞지않아 거의 모든 유튜브의 todo list관련 영상을 다 본것같습니다. 그 과정에서 state와 props를 다루는 과정을 알게 되었고 이후에 문제가 발생했을때도 적절히 props를 사용해서 문제를 해결할 수 있게 되었습니다. 또 개인과제에서 주어진 미션중에 총 6개의 파일로 컴포넌트화 시키는 미션이 있었는데 이게 하단에 있어서 app.js에 모든걸 다 작성한 이후 컴포넌트를 하게 되었습니다. 일단 스타트부터 다른 수강생들과 달라서 사실 이 과정은 정말 혼자서 알아서 해결해야했습니다. 근데 결론적으론 좋은 경험같습니다. 컴포넌트의 중요성도 알게 되고, 하나의 js파일을 여러개의 jsx파일로 쪼개는 과정에서 프롭스, 스테이트의 개념이나 컴포넌트 사용법이 확실히 각인되었기 때문입니다.

<DOM?>

DOM(Document Object Model)

텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다. 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다. 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

이러한 웹 문서의 동적 변경을 위해 DOM은 프로그래밍 언어가 자신에 접근하고 수정할 수 있는 방법을 제공하는데 일반적으로 프로퍼티와 메소드를 갖는 자바스크립트 객체로 제공된다. 이를 DOM API(Application Programming Interface)라고 부른다. 달리 말하면 정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고, 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.

DOM은 HTML, ECMAScript에서 정의한 표준이 아닌 별개의 W3C의 공식 표준이며 플랫폼/프로그래밍 언어 중립적이다. DOM은 다음 두 가지 기능을 담당한다.

1. HTML 문서에 대한 모델 구성

브라우저는 HTML 문서를 로드한 후 해당 문서에 대한 모델을 메모리에 생성한다. 이때 모델은 객체의 트리로 구성되는데 이것을 DOM tree라 한다.

2. HTML 문서 내의 각 요소에 접근 / 수정

DOM은 모델 내의 각 객체에 접근하고 수정할 수 있는 프로퍼티와 메소드를 제공한다. DOM이 수정되면 브라우저를 통해 사용자가 보게 될 내용 또한 변경된다.

DOM tree

DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다.

DOM에서 모든 요소, 어트리뷰트, 텍스트는 하나의 객체이며 Document 객체의 자식이다. 요소의 중첩관계는 객체의 트리로 구조화하여 부자관계를 표현한다. DOM tree의 진입점(Entry point)는 document 객체이며 최종점은 요소의 텍스트를 나타내는 객체이다.

DOM tree는 네 종류의 노드로 구성된다.

1. 문서 노드(Document Node)
트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통해야 한다. 즉, DOM tree에 접근하기 위한 시작점(entry point)이다.

2. 요소 노드(Element Node)
요소 노드는 HTML 요소를 표현한다. HTML 요소는 중첩에 의해 부자 관계를 가지며 이 부자 관계를 통해 정보를 구조화한다. 따라서 요소 노드는 문서의 구조를 서술한다고 말 할 수 있다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다. 모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다. (그림: DOM tree의 객체 구성 참고)

3. 어트리뷰트 노드(Attribute Node)
어트리뷰트 노드는 HTML 요소의 어트리뷰트를 표현한다. 어트리뷰트 노드는 해당 어트리뷰트가 지정된 요소의 자식이 아니라 해당 요소의 일부로 표현된다. 따라서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정할 수 있다.

<서버리스?>

백엔드인데 직접 서버를 관리하지 않는 경우를 뜻함

이전의 어플리케이션배포는 직접 서버를 사야하는 시절이 있었음. 거실에 그 서버를 두고 전원으 ㄹ꼽아야함. 즉, 서버의 하드웨와와 소프트웨어를 모두 관리.

정전 발생?=> 서버 다운
누군가 서버의 전원을 뽑는다? => 웹사이트 다운
웹사이트 트래픽이 증가, 유저가 많아지면? => 서버 메모리가 부족해서 추가적인 서버 메모리 필요
이 모든걸 수동으로 거실에 하던 시절이 있음

이때 아마존이 등장하여 EC2라는 것을 선보임
이를 통해서 서버를 하드웨어로 직접 설치하는 것이 아닌 아마존에 돈을 지불하여 아마존이 사용하는 최신식 서버를 빌려서 사용할 수 있게 됐다!
=> 정전이나 각종 사고에 대한 걱정을 해소하고, 지불만 하면 아마존이 스토리지를 늘려주니 서버가 작을까봐 걱정하지 않아도 됨. 아마존, 구글, MS가 서버의 하드웨어 부분을 책임하고 관리해주는 시대가 옴.

하지만 서버의 소프트웨어 관리는 직접 해줘야함. ex)업데이트, 보안, 데이터 백업 등등

바로 이때 서버리스가 등장함.

서버리스를 활용하면 백엔드를 서버에 올리는 것이 아니라 서버리스에서 백엔드를 작은 함수단으로 쪼개서 사용자가 직접 관리하지 않는 서버로 올림.

서버리스가 아닌 경우 서버는 24시가 돌아가고 언제나 요청에 응답할 준비가 되어있음. 서버리스의 경우 업로드한 함수는 잠을 자고 있고 리퀘스트가 오는 순간 AWS는 함수를 깨워서 요청한 작업을 수행한 뒤 함수는 다시 잠에 듦.

=> 이것이 서버리스의 혁명. 24시간동안 서버가 깨어서 대기하지 않아도 되므로 상당히 저렴해짐

<서버리스 단점>

1.cold start: 서버리스에서 함수는 자는 상태.
요청이 들어와서 함수를 깨우는데 아무리 작은 숫자라도 항상 대기하고 있는 보통의 서버보다는 당연히 시간이 걸리기 마련. 느린건 아니지만 보통 서버보다는 시간이 걸리므로 작은 시간차도 허용되지 않는 경우에는 서버리스를 통한 서버 관리는 좋은 선택이 아님.

서버제공자에 대한 의지: 서버리스를 사용하는것은 해당 서버리스 제공자와 결혼한 셈. 따라서 해당 제공자와 싸운다면 단순하게 함수를 빼서 다른곳으로 이동할 수 없음. 한 서버리스에서 다른 쪽으로 마이그레이팅 하는 것은 쉽지 않기 때문.
서버리스로 작업하면 어플리케이션의 구조자체가 바뀌게 됨.

<서버리스 추천케이스>

사이드프로젝트 진행

최대한 빠른 프로토타입을 출시
=> 서버리스는 코드에만 집중하면 되기에 엄청 빠르고 쉡게 서버를 활용해서 제품을 내놓기 좋음.

느낀점

개발자의 순간은 결국 구글링이라고 들었는데 그 말이 이제 어느정도 공감간다. 아무리 강의에 해당 내용이 나와있어도 내가 이해하지 못하겠으면 결국 구글링을 하게된다. 나는 특히 state와 props개념이 이해가 안가서 매우 고생했는데 이걸 해결하고 싶어서 온갖 구글링으로 영상이나 문서등을 참조해서 결국 50퍼센트정도는 이해한것같다. 다행히 내가 이해한게 맞아떨어져서 프로젝트를 구현할 수 있었다.

아 그리고 멘토의 중요성을 정말 깨달았다. 같은 조 팀원분과 함께 개인과제 포기 상태였는데 우리팀 담당 기술매니저님이 정말 차근차근 인풋부터 이벤트핸들러를 만드는 방법까지 모니터로 공유해주시며 한시간 넘게 설명해주셨다... 솔직히 그 설명을 모두 이해한건 아니지만 확실히 감을 잡는데는 도움이 되었고 무엇보다 멘토님이 저렇게까지 설명해주시는데 이걸 포기하면 진짜 인간이 할 짓이 아니라는 생각도 들어서 다시 과제를 붙잡을 마음도 갖게되었다... 좋은 멘토님은 정말... 너무 중요하다... 사실 멘토님 아니였으면 그 과제를 끝마칠 수 있었을까 싶기도 함... 매니저님 진짜 감사합니다...