what i learned/회고록

[WIL] 항해99 3주차 회고록 - React 기초

zubetcha 2021. 11. 21. 22:46

 

 

 

React 기초 주간 회고

 

 

 

오늘로서 3주차가 끝이 났다.

 

이번 주는 리액트 기초에 대해서 배우는 주였다.

기초 주이기는 하지만 실제로는 기초 강의 중 절반에 해당하는 범위에 대해서만 배웠기 때문에

기초 중의 기초..가 아닐까 싶지만.

 

리액트를 하려면 자바스크립트 문법에 대해 잘 알고 있어야 하는데,

아직 자바스크립트 문법과 친해지려면 갈 길이 먼 것 같다.

 

프로그램 시작 전에 지급된 자바스크립트 문법 강의는 더 말할 것도 없고,

아무런 가이드라인 없이 '문제 리스팅했으니까 풀어!' 라는 식의 알고리즘 문제 풀기 커리큘럼이

걷기반의 문법 공부에는 큰 도움이 되지 않았던 것 같다.

 

그래도 그것과는 별개로 리액트를 배우는 건 즐거웠다.

강의를 한 번 듣고 이해하기에는 어려운 부분이 많았지만 새로운 걸 배운다는 느낌이 좋았다.

그리고 리액트 강의 또한 지금까지 지급된 다른 강의들에 비해서 퀄리티가 훨씬 만족스러웠고,

멘토님과 주어진 개인 과제도 좋았다.

 

개인 과제를 하는 동안 프론트엔드의 매력을 더 알게 된 것 같다.

과제를 완성해가는 과정이 쉽지는 않았지만 재밌었기 때문에 별도의 게시물을 작성했다.

 

 

 

React 기초 개인 과제

 

 

 

 

 

그리고 지난 주에 이어서 이번 주에도 리액트에서 많은 분들이 하차를 하셨다.

 

내가 아는 분들은 모두 잘 하는 분들이셨는데

주 6일, 9 to 9 라는 커리큘럼임에도 불구하고

더 효율적인 공부를 하기 위해 하차하는 아이러니가 현재의 문제점을 반증하는 게 아닌가 싶다.

 

 

 

교헌님 안녕..하시죠?

 

 

 

DOM

 

DOM이란?

DOM (Document Object Model)은 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다.

프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 구조, 스타일, 내용 등을 변경할 수 있도록 한다.

 

 

DOM 과 Javascript

DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 요소에 접근하여 조작할 수 있다.

 

 

DOM 접근 방법

스크립트를 작성할 때 문서 자체를 조작하거나 document 또는 window 요소를 위한 API를 사용할 수 있다.

 

<body onload="window.alert('welcome to my home page!');">

 

<html>
  <head>
    <script>
       // run this function when the document is loaded
       window.onload = function() {

         // create a couple of elements in an otherwise empty HTML page
         var heading = document.createElement("h1");
         var heading_text = document.createTextNode("Big Head!");
         heading.appendChild(heading_text);
         document.body.appendChild(heading);
      }
    </script>
  </head>
  <body>
  </body>
</html>

 

 

DOM의 핵심 API

 

✔️  document.getElementById - id

      : 파라미터로 주어진 문자열과 일치하는 id 속성을 가진 DOM 요소를 찾아서 이를 나타내는 element 객체를 반환한다.

        id는 DOM 에서 고유하기 때문에 특정 요소를 빠르게 찾을 때 유용하다.

 

✔️  document.getElementByTagName - name

      : 파라미터로 주어진 태그를 가지는 요소의 유효한 HTML 컬렉션을 반환한다.

        범위가 특정되는 경우 접근하는 범위는 특정된 엘리먼트의 하위에 있는 엘리먼트로 한정한다.

 

✔️ document.createElement - name

     : 파라미터에 지정한 태그의 HTML 요소를 만들어 반환한다.

       태그 이름을 인식할 없으면 HTMLUnknownElement 를 대신 반환한다.

 

✔️ parentNode.appendChile - node

     : 파라미터로 주어진 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙인다.

 

✔️ element.innerHTML

     : 요소 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정한다.

 

✔️ element.style

     : 요소의 inline 스타일을 가져오고 설정하기 위해 사용된다.

 

✔️ element.setAttribute - name, value

     : 특정 요소의 속성을 설정한다.

       만약 속성이 이미 존재하는 경우, 설정한 속성 값으로 업데이트된다.

 

✔️ element.getAttribute - attributeName

     : 파라미터로 주어진 속성이 해당 요소에 있는 경우 속성의 값을 반환한다.

       파라미터의 속성이 존재하지 않는 경우 null이나 빈 문자열을 반환한다.

 

✔️ element.addEventListener - type, listener, options || type, listener, useCapture

     : 지정한 이벤트가 대상에 전달될 때마다 호출할 함수를 설정한다.

       이벤트는 element, document, window 뿐만 아니라 이벤트를 지원하는 모든 객체를 대상으로 지정할 수 있다.

 

✔️ window.content

     : 윈도우 객체를 반환한다.

       content-primary 타입 속성의 브라우저를 가지고 있는 XUL windows에서 유용하다.

 

✔️ window.onload

     : 페이지가 로드되면 자동으로 실행되는 전역 콜백함수이다.

       페이지의 모든 요소들이 로드되어야 하며, 한 페이지에서 하나의 window.onload() 함수만 호출할 수 있다.

 

✔️  window.dump - string

      : 콘솔에 파라미터로 주어진 문자열을 출력한다.

 

✔️ window.scrollTo - x-coord, y-coord || top, left, behavior

     : 문서를 지정된 위치로 스크롤한다.

 

 

Serverless

 

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

 

서버리스 모델에도 서버가 존재하긴 하지만 추상화되어 있기 때문에

클라우드 제공업체가 서버 인프라에 대한 설정 프로세스, 유지관리, 스케일링 등의 일상적인 작업을 처리하고

개발자는 배포를 위한 코드를 업로드하기만 하면 된다.

 

 

 

저작자표시