TIL, 06.15

JS Readline 코테 풀기

JS 공부를 막 시작한 나는 JS공부 겸 프로그래머스 0,1 레벨부터 차곡차곡 문제를 풀고 있다

프로그래머스를 풀면서 간혹 readline 모듈을 사용한 문제가 있었는데 readline모듈에 대해 몰라 항상 모듈을 사용한 문제는 지나치고 같은 레벨의 다른 문제들을 풀었다

숫자야구 프로그램을 짤때 readline을 공부하게 되어 이참에 프로그래머스에서 readline으로 된 문제들을 풀게 되었다

프로그래머스는 함수를 기본틀로 주고 return문으로 나의 답을 내보내는데 readline은 그런 방식이 아니라서 처음에는 어떻게 정답을 맞혀야 하는지 몰라 return도 써보고 구글링 해서 readline 출력문이 따로 있는지 알아봤다

혹시나 내가 readline에 대해 잘 알지 못해서 생기는 일인가 하고 다시 readline에 공부하여 정리하였다 그랬는데도 명확한 해답이 나오지 않았다. 고민고민 해보다가 머리를 비우고 다시 도전하다라는 마음으로 다른 것을 먼저 하기로 했다

숫자야구 프로그램을 추가기능을 구현하고 있을때 깨달았다 JS는 console.log가 출력문이잖아!!!!

바보인가 봐 왜 무조건 print명령어가 있거나 return 해야 한다고 생각했지??

바로 프로그래머스에 달려가 console.log로 정답을 제출했다니 정답이 잘 출력되었다

역시 너무 한 해법에 집착하지 말고 여러각도로 문제를 봐야 한다

 

CS스터디 내용 정리

모자란 지식을 채울 겸 CS 나 더 딥한 지식을 얻는 스터디를 시작했다

스터디원끼리 주제를 하나 정하여 공부해 오고 한 명에 스터디원이 발표를 하고 부족한 부분을 서로 나누기로 하였다

이번주 주제는 브라우저랑 호이스팅으로 정했다

호이스팅은 저번 공부로 잘 아는 주제였지만 브라우저에 대한 공부는 처음이라 기본부터 차근차근 공부하기로 하였다

 

브라우저를 공부하니 브라우저에서 제일 중요하게 여기는 과정은 바로 브라우저 렌더링 동작 과정이다

브라우저 렌더링 동작 과정은 5가지인데 DOM 개념을 알고 있어야 이 동작 과정을 이해할 수 있다

돔(DOM)은 Document Object Model의 약자로 HTML 내에 원하는 위치에 접근하기 위한 하나의 방식이다

이 방식은 프로그램이나 스크립트 보다 더 효율적으로 문서의 내용, 구조, 모양 등에 접근하여 갱신, 교체, 삭제하도록 도와준다. HTML DOM 구조는 HTML 태그 차례와 깊은 관련이 있으며 현재 위치한 포인터를 기준으로 부모요소, 자식요소 등에 기초한다. 이것을 한눈에 알아보기 쉽도록, Tree로 표현한 것을 돔트리(DOM Tree)라고 한다

 

이제 이 돔이라는 개념을 가지고 렌더링 동작을 보면

1. HTML 파일과 CSS파일을 파싱 해서 각각 Tree(DOM, CSSOM)를 만든다(Parsing)
2. 두 Tree를 결합하여 Rendering Tree를 만든다(Style)
3. Rendering Tree에서 각 노드의 위치와 크기를 계산한다(Layout)
4. 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다(Paint)
5. 레이어를 합성하여 실제 화면에 나타낸다(Composite)

결국 최종 url이 입력되었을 때 페이지가 화면에 보이는 과정 설명하면

주소창에 url을 입력하고 Enter 누르면 서버에 요청이 전송된다.  해당 페이지에 존재하는 여러 자원들이 보내진다.

렌더링 엔진이 html 파싱 과정을 시작한다.  html 파서가 문서에 존재하는 어휘와 구문을 분석하면서 DOM 트리를 구축하며 CSS파싱 시작한다. CSS파서가 모든 CSS정보를 스타일 구조체로 생성한다

만들어진 DOM과 CSSOM을 합쳐 렌더 트리를 만든다. 렌더 트리를 통해 문서가 시각적 요소를 포함한 형태로 구성된 상태를 화면에 배치를 시작하고, UI 백엔드가 노드를 돌며 형상을 그린다

이때 빠른 브라우저 화면 표시를 위해 배치와 그리는 과정을 페이지 정보를 모두 받고 한꺼번에 진행되는 것이 아닌 자원을 전송받으면서 동시에 일부분 먼저 진행하고 화면에 표시한다

 

그리고 브라우저를 공부하면서 전에 궁금해하던 궁금점이 풀렸다. 전에 강의를 들었을 때 script의 위차를 body 밑으로 하는 강의로 보았는데 왜 그렇게 하는지 알 수가 없었다

근데 브라우저 동작원리를 알게 되면서 JS코드를 실행하기 위해 DOM 생성 프로세서를 중지하고 JS엔진에게 권한을 넘겨 JS 파일을 로드하고 파싱하고 실행한 후 완료된 후 HTML 파서로 제어권한을 넘겨서 중지했던 시점으로 돌아가 DOM 생성을 재개한다는 것을 알게 되었다

그러니깐 script를 body밑에 하는 이유는 

1. HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다
2. DOM 트리가 생성되기 전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다

이 두 가지의 문제가 발생하기 때문이다

 

숫자야구 프로그램 업그레이드

저번에 만든 숫자야구를 업그레이드하고 놓친 조건을 잡아주기로 했다

저번에 만든 코드는 숫자 중복이 들어가는데 숫자야구 프로그램에 답에는 숫자중복이 있으면 안 되어 중복되는 숫자가 나타나지 않게 만들고 어려운 모드를 만들기로 했다

어려운 모드로 만들기 위해 어렵게 만들 요소를 찾아보았다

맞춰야 하는 개수, 턴의 제한, 시간제한으로 총 3가지 버전을 만들기로 했다

금방 만들 수 있겠지 하고 코드를 작성했는데 내가 원하는 데로 코드가 돌아가지 않았다

그래서 어느 지점이 문제일지 결괏값과 콘솔로 찍어 본값을 유추하여 문제지점을 찾아보았다

보니 조건문으로 true가 나와야 하는데 true가 나오지 않는 상황이었다 콘솔로 찍어보았을 때는 같았기 때문에 잉? 하고 생각했는데 곰곰이 생각해 보니 남은 답은 타입이 다르다는 것이었다 역시나 typeof로 타입의 종류를 찍어보니 한쪽은 number 한쪽은 string이었다 사용자에게 받은 답이 string으로 받아오는데 number과 비교하니 true가 나올 리가 없었다

타입변경 후 게임을 돌려보니 잘 돌아갔다 역시 문제의 원인을 찾는 데는 결괏값과 콘솔을 이용한 유추가 최고다

 

후기

숫자야구 프로그램은 팀원들과 같이 만들어 fork 했는데 내가 다른 사람이 pull request 하고 합본했는지 모르고 pull request로 보내서 충돌 오류가 났다. 항상 원본 저장소에 수정 내역을 업데이트하기 전에 다른 사람들이 먼저 수정한 내역이 있는지 확인하고 업데이트 한 내용을 받아오는 버릇을 들여야겠다...... 다행히 내가 한 pull request 신청은 거절하고 내가 branch를 새로 파 업데이트 된 내용을 받아오고 다시 내 거랑 합본하는 방식으로 오류는 잘 해결했다