html문서가 어떻게 렌더링되는가

Cannot read properties of undefined (reading '~~') 떄문에 글을쓰기 시작한건데

사실은 얘기가 다른길로 많이새서 제목을 바꿨따

 

만들고 있던 화면에서 

이런 오류가 떴다

이런류의 오류는 자주뜨는데

항상 문법이나 사용방식의문제로 좀만 수정해주면 에러가 해결이 되었다.

하지만 오늘은 도통 해결이 되지않았고 원인을 찾던도중

렌더링에 관한 개념도 얻어갈수 있겠다 싶어 글을 올려본다.

 

 

상황은 이랬다

서버에서 받은데이터 > 데이터를 사용해 html 코드생성 > 오류

 

data의 배열을 for문을통해 훑어보고 있는데 이해가 안되는것이

data[0].b_BOARD_ID 라고 수정해보면 정상적으로 0번째껄로는 전부 화면이  나오는 것이다.

 

오류를 보면

b_BOARD_ID가 undefined인데 어떻게 속성을 읽을수 있냐! 라고 말해주고있다.

그런데 console창에 반환된 data를 찍어도 정상출력이되고

당연히 반복문의 j값도 정상출력이 됬다.

 

그런데 왜 data[0].b_BOARD_ID 는 undefined 이아니고

data[j].b_BOARD_ID 는 undefined 인것일까???? 

 

정확하게는 모르겠지만 이런 생각이들었다.

j의 값이 0이라고 쳤을때

script안에서 동적으로 html을 생성하는 과정에서

data[0].b_BOARD_ID은 그값으로 변환이되 적용되는 것이고

data[j].b_BOARD_ID는 j가 무슨값인지 모른상태로 적용이 되는것이다

 

자연스레 <script> 문법에서 html을 생성하는 과정이 어떻게 되는건지 알고싶어졌고

잠시 그과정에대해 알아보게 되었다.

(좋은 블로그가 많아 사진을 참조했다)

 

 

 

이 이미지를 정리해보면 이런것같다

HTTP/1.1 Connection 이라는 형태로 브라우저는 서버에 요청을보내 화면을 응답받는다

 

알게된것인지 궁금해해야해야하는것인지 헷갈렷던것은

html코드랑 css/script.js 를 요청을 나눠서 받는다는것이다

보면 초기요청과 일반요청이 나눠져있다.

 

또한 node.js라는것이 브라우저의 내장되있는 것이라고 생각됐는데

왜 server쪽에 있는것인지라는 의문이 들었다.

 

HTTP/1.1은 또 무엇인가

HTTP의 1.1version이다.

1.0에서의 단점을 보완하고자 1.1이 나오고 이런식인것같다.

 

검색도중 이런사진을 찾게되었는데

눈에 띄는게 저위에 Connection: Keep-Alive 였다.

저게 1.0에서는 연결이 빈번하게 닫히는것같은데

1.1은 그렇지 않고 연결종료까지 계속 이어져있다고 생각이들었고

 

내가 사용하는 HTTP통신은 기본적으로 1.1이상이 되겠구나라는 생각이 들었다.

다시 렌더링으로 돌아와서 한번 재차정리를하면

 

html/css코드가 사용자화면에 보여지기까지의 과정은 이렇다

브라우저는 데이터를받은후 엔진으로

html을 dom로 css를 cssom로 파싱해서 위사진에있는

renderTree를 만든다고 한다 위사진의

개체들이 전부다 토큰이라고 보면된다

즉 parse는 의미있는 token으로 분해하는 과정이라고 보고 

token으로 parsetree를 만들었다

 

여기서 script문에서 html/css를 변경시킨다면

변경된 dom과 cssom이 다시한번 렌더트리로 결합된다고 한다

그이후 layout(배치)를 확인한후 paint처리를 하면 우리가 볼수있는 화면이 된다고한다.

그리고 script를 만나면 브라우저가 js엔진에 주도권을 내주는데

이때 js코드는 이렇게 해석된다고한다

 

script를 만났을때 js는 이렇게 분석된다

코드 (토크나이저)> 토큰 (파서)> Abstract Syntax Tree (바이트코드생성기)> 바이트코드 (실행) (인터프리터가 해석)

>(파서트리에 합쳐져 화면변경이 필요한경우)>(DOMAPI) > 실행 > 리플로우,리페인터를 통해 화면변환

 

 

 

흠.. 그래서 

 

알기로는 html/css는 에러가 없는것으로 알고있고

내 script문이 실행되는 시점에!  data[j].b_BOARD_ID이 무슨값인지 모른다는것 j가뭔지 모른다는게

확실해졌다..

문득 이런생각이 들었다

예전에 java를 컴파일하는 과정에서 실행전에는  생성된class의 정보를 모른다 뭐이런 글을본적이있는데

그러던 도중 갑자기 이게 2중 for문이 있는것 때문에

리플로어를 실행하는 딱 그 시점에서는 j의값을 모르는건가??

라는생각이 확들어서 for문의 가장바깥쪽에  data[i].b_BOARD_ID를 입력했는데

정상적으로 값이 나왔다..

 

아니 console창에 j는찍히는데 data[j]는 모른다니.. 그럼 이상황은

script의 엔진실행도중 어느과정에서 생긴걸까 생각해보았는데

저 토크타이저가 토큰으로 짜를때 인것같고

{} 기준으로 한번씩 짜르나라는 생각이 들었다.

"토크나이저가 토큰을 구분하는 방법" 와같은 키워드를 검색하다가

 

시간 소모가 너무 큰것같아서 i값으로만 전부 코딩을 하자 라는마음에 코드를변경했는데

왠걸  data[i].b_BOARD_ID도 undefined 이떠버렸다..

여기서 달라진것이라고는 i값이 for문중간에 변경이 되었다는 것인데...

왜그런지 생각하던도중

 

 

DOMAPI를 사용할때

j를 문자열로 인식해서 undefined이아닌

j를 어떤값으로 판단할지 몰라 undefined을 출력한것이란 생각이 들었다.

 

마찬가지로 i값이 중간에 변경되면 undefined이 떴던것이다.

궁금한것은 n이이라는 변수를 0으로 초기화하고

n++ + n++ 을하면 c언어에서는 한번에 컴파일을해서 4를출력하고

java는 앞에서부터 해석해나가면서 변수값을 지정해서 3을출력하는데

뭔가 중간에 값의변경이 있더라도 무슨값이라도 떠야하는게 아닌가

라는생각과함께 인터프리터 언어에대해서 알아야 할것같은 느낌이들었지만

 

코드의변경만 하면되는걸 가지고.. 뭔가 대단한걸 알겠다는듯이

파고드는게 꼭 의미없는 행동처럼 느껴져서

html/css의 스타일변경후 script코드를 재작성해서 마무리를 하였다.

 

그래도 html문서의 렌더링과정을 알게되어서 좋았고

같은문제에 봉착했을때 지금처럼 해매지는 않을것 같다~~