![[Day 20] 2022-0720 : 섹션 1 마무리✨](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Feu1RCG%2FbtrHQI3xVIw%2FDUvbk1MuObeML5FlEQO5wK%2Fimg.png)
오늘 배운 것
- 기술 면접 준비 : css <link> 태그는 왜 <head> 태그 안에 위치하고, javaScript <script> 태그 안에 위치시키는가?
- 섹션 1 회고 진행
[회고] 코드스테이츠 FE 섹션 1 회고
목표가 무엇이었는지? 기본기 있는 개발자 되기. 코스를 처음 시작하며 정했던 목표이다. 지금도 이 목표는 그대로이다. 다만 구체적인 기간을 추가하자면 내년 상반기에는 개발자로써 첫 커리
friedegg556.tistory.com
- 내일 있을 스터디 발표자료 준비 : 자바스크립트의 동작 원리
- 리액트 강의 듣기 : 리액트는 무엇이며 왜 사용해야함?
[React] 리액트는 무엇이고, 왜 리액트를 사용해야 하는가?
본 게시글은 한입 크기로 잘라 먹는 리액트 (인프런) 강의를 보고 정리한 내용입니다. 리액트란 무엇인가 node.js 기반의 자바스크립트 ui 라이브러리이다. 바닐라 자바스크립트로 구현하기 복잡
friedegg556.tistory.com
새롭게 알게 된 것
- 매 섹션 종료 시점마다, 그 때 배운 내용을 종합하여 기술 면접 답변을 준비하는 시간을 갖는다. 내가 오늘 선택한 질문은 단 하나...
질문 : 일반적으로 CSS를 불러오기 위해 <link> 요소를 <head> 요소의 자식 요소로 하고,
JavaScript를 불러오기 위해 <script>요소를<body>요소가 끝나기 직전에 위치시키는 이유가 무엇인가요?
- 사실 여러가지 질문에 대한 답변을 심도 있게 준비하고, 라이브 세션 시간에 실습도 하고 싶었는데, 알러지 약을 먹고 너무 몽롱한 정신이어서 혼자 zoom 켜놓고 녹화하는 것도 엄청 버벅댔다. 그래서 못함.
- 아무튼 이 질문에 대해서 내가 작성한 답변은 아래와 같다.
답변 : HTML과 CSS를 빠르게 읽어와 페이지 렌더링을 완성시키기 위해서 입니다.
브라우저는 파일을 위에서 아래로 순차적으로 읽습니다. 파싱 과정에서 HTML DOM 트리와 CSSOM 트리를 생성하고 이를 활용해 렌더링을 하는데, CSS 파일이 파일 상단에 위치하지 않으면 사용자는 CSS 가 적용된 웹사이트를 빠르게 볼 수 없습니다. 또한 브라우저가 script 요소를 읽으면, 렌더링을 중단하고 자바스크립트 파일을 다운로드 받기 때문에 사용자가 최종 화면을 보기까지 시간이 소요됩니다. 따라서 script 요소를 body 최하단에 위치시켜 렌더링이 완료된 후 자바스크립트를 다운로드 받을 수 있도록 하는 것입니다.
- 여기에 부가적으로 페이지 렌더링에 대한 꼬리 질문도 준비해서 답변을 작성해 보았다.
페이지 렌더링 과정을 파싱 - 렌더링 트리 생성 - 레이아웃 - 페인팅 - 컴포지트로 나눌 수 있습니다.
파싱 과정에서는 html 파일과 css 파일을 가지고 각각 DOM, CSSOM 을 생성합니다. 각 모델을 서로 연결하여 렌더링 트리를 생성하고, 렌더링 트리에서 각 노드의 위치와 크기를 계산하는 레이아웃 과정을 거칩니다. 마지막으로 레이아웃에서 생성된 위치와 크기를 바탕으로 화면상의 실제 픽셀로 변환됩니다. 이 과정에서 여러개의 레이어를 생성하고, 마지막 컴포지트 단계에서 레이어를 합성에 실제 화면에 출력합니다.
- 지금 답변을 보니 머리로는 이해가 아주 잘 되는데, 이것을 말로 설명하는 것은 또 다른 문제인 것 같다. 알러지 약에서 깨어나도 버벅거리면서 답변할 것 같은... 제일 좋은 것은 많이 봐서 익숙해지도록 연습하는 것이고, 말하는 연습도 추가하면 좋을 것 같다.
- 리액트 강의를 본격적으로 시작했다. 듣고 있는 강의는 한입 크기로 잘라먹는 리액트 라는 인프런 강의이고, 설명을 엄청 차근차근 잘 해주신다. 처음에 유데미에서 영어 강사분이 설명해주시는 거의 총망라 수준의 리액트 강의로 입문을 했는데, props 개념에서 도저히 무슨 말인지 이해가 안되어서 중도 하차를 했던 경험이 있다. 😂 유데미 강의도 엄청 구성이 좋고 설명은 잘 해주셔서, 기초 개념에 대해 어느정도 잡히면 병행해서 들어보는 것도 좋을 것 같다.
SUMMARY
잘 한 점
- 미리 내일 스터디 발표할 내용 정리해둔 것. 내일 부랴부랴 했으면 시간 모자랐을텐데 잘 한 것 같다. 내용이 좋은지는 잘...
- 리액트 강의 미루지 않고 들은 것. 들은 내용 조금이라도 이해한대로 정리해본 것.
- 어제보다는 밥을 잘 먹었음.
보완할 점
- 자세가 점점 안좋아지는 것 같다. 의자도 새로 샀으니까 잘 좀 앉아보자.
- 밤에 알러지 약을 먹고 잠에 빠져 아침에 제시간에 일어나지 못했다. 원래 아침에는 알고리즘 강의와 알고리즘 문제를 풀고 있어서 엄청 중요하다! 내일은 잘 일어나 볼 것.
느낀 점
- 지금까지 느낀 점에 대해서는 섹션 1 회고에서 엄청 자세하게 다루었고... 그 회고를 쓰면서 느낀 점은.. ㅋㅋㅋㅋ 생각보다 많이 발전했다는 점? 물론 새로운 것을 많이 배웠다고 느껴지지는 않지만, 어떻게 해야 효과적으로 배우고 활용할 수 있는지 방법을 알게 된 느낌이다. 각자 방법이 다르겠지만 내 경우는 이렇게 블로그에 한 번 정리해서 써 보는 것.
'TIL' 카테고리의 다른 글
| [Day 22] 2022-0722 : 객체지향과 프로토타입 블로깅 데이 (0) | 2022.07.22 |
|---|---|
| [Day 21] 2022-0721 : 고차함수! (0) | 2022.07.21 |
| [Day 19] 2022-0719 : solo 프로젝트 마무리 (0) | 2022.07.19 |
| [Day 18] 2022-0718 : solo 프로젝트 -1 (0) | 2022.07.18 |
| [Day 17] 2022-0715 - 회원가입 페이지 유효성 검사 (0) | 2022.07.15 |