FE 개발에 도전합니다 (4) npm start

Hello, World를 Webserver에서 표시하는 데에는 크게 네 가지 방법이 있었습니다.

 

1. 직접 넣어주기 - 패러그래프를 아래처럼 직접 html로 넣어줍니다. 

 

const element = document.getElementById('app');

element.innterHTML='<p>Hello, world!</p>

 

2. 한단계 거쳐서 넣기 - element 안에 paragraph 따로 지정해서 넣어줍니다.  

 

const element = document.getElementById('app');

const paragraph = document.createElement('p');

paragraph.innertext = 'Hello, world!';

element.appendChild(paragraph);

 

3. 두단계 거쳐서 넣기 - element 안에 paragraph, 그 안에 text를 만들어 넣어줍니다.

 

const element = document.getElementById('app');

 

const paragraph = document.createElement('p');

const text = document.createtextnode('hello, world');

Paragraph.appendchild(text);

 

element.appendChild(paragraph);

 

4. 두단계 거쳐서 여러개 넣기-반복하고 appendchild를 두번 해줍니다. 

 

const element = document.getElementById('app');

const paragraph1 = document.createElement('p');

const text1 = document.createtextnode('hello, world');

Paragraph1.appendchild(text);

 

const paragraph2 = document.createElement('p');

const text2 = document.createtextnode('hi');

Paragraph2.appendchild(text);

 

element.appendChild(paragraph1);

element.appendChild(paragraph2);

 

 

참조 appendchild()의 의미

그런데 이렇게 하면 paragraph1, 2, 3으로 늘어날 때마다 코드가 끝없이 길어집니다. 

그래서 추상화가 필요합니다. 

 

5. 추상화 

이번 코드는 복잡합니다 (...)

반복을 대체하기 위해 함수를 만들었습니다. tagname은 paragraph를 대체하고, children은 text들을 대체합니다.

children은 각각의 child를 받아서 이미 존재하는 node에서 마지막 node로 될때까지 이동합니다.  그래서 tagname에 

children이 몇개이든 대응할 수 있습니다. 

 

이 구조는 4.의 아래 구조의 변형이기도 합니다. 

const paragraph1 = document.createElement('p');

Paragraph1.appendchild(text);

-> 

const element = document.createlement(tagname); 

element.appendchild(children[0]); 

 

const text1 = document.createtextnode('Hello, World!'); 

는 각각의 paragraph에서 반복됩니다. 왜냐하면 내용이 달라지니까요 

 

DOM을 이해하는 것을 포기하고 우선 백문이불여일코를 해보았습니다. 

아직 강의는 7분 정도 더 남았습니다. 과제는 시작도 못했구요

하지만 완주해봅시다...

이 과정의 큰 수확은 npm start, npx eslint . 에 익숙해졌다는 것 뿐이군요.  

오로지 존버뿐이야...