02. 홈페이지가 사용자에게 웹 사이트를 보여주는 과정을 간략히 설명해주세요. (브라우저 렌더링 포함)
사용자 동작을 나열하며 간략히 공부해보자. >>> 사용자 동작 시작 1. https://okayoon.tistory.com/ 를 검색한다. 2. DNS(Domain Name System)에서 주소를 검색, 해당 ip 주소를 찾아서 사용자가 입력한 URL과 함께 전달한다. - 이때 캐싱된 DNS 기록이 있는지 먼저 확인한다. 3. 전달받은 ip 주소를 이용하여 웹 브라우저는 웹 서버에게 해당 웹 사이트의 리소스를 요청하고 해상 웹 서버는 리소스를 전달한다. >>>> 전달받은 리소스를 통해 브라우저 렌더링 과정 시작 4. DOM Tree 구축을 위해 HTML을 파싱한다. - DOM Tree는 문서 객체 모델로 모든 요소, 속성, 텍스트 등 (문서노드, 요소노드, 속성노드, 텍스트노드)을 트리 구조로 표현한 ..
인프런 React 강의 듣고 사이트 만들기 _ Front 작업 09. 사진첩을 핀터레스트 레이아웃처럼 만들기! (masonry layout)
사진첩을 만들고 있는데, 그냥 정사각형으로 늘어놓으니.. 너무 안예쁘죠? 그래서 핀터레스트처럼 만들어보기로 했습니다. 핀터레스트에 사용한 레이아웃이름은 masonry layout이라고 하네요. 작업에 사용한 이미지들의 출처는 pixabay 입니다. 라이브러리로도 있는데, 어떠분이 css로 만들었더라구요! => darrengwon.tistory.com/569 이 분의 코드를 참고해서 react에 적용했습니다. 거의 다 가져왔지만, ㅎㅎ 그 중에서 수정 두가지를 했는데요. 상단에 마진이 생기는 버그? 부분과 hover 시에 흑백으로 보여지는 것을 반대로 수정했습니다. 라이브러리 => masonry.desandro.com/ Masonry Install Download CDN Link directly to Ma..