Don’t worry about failures

개념 layout shit는 뒤늦게 로드가 되는 소스로 인하여 화면에서 봤을 때 밀리는 현상을 의미한다. 예 ) 버튼과 이미지가 있을 때 이미지 로드가 늦어 처음에는 버튼만 보이게 된다. 이미지가 로드가 되면서 버튼은 아래로 밀리게 된다. 이와 같은 현상이 layout shift 이다. 이렇게 되면 무엇이 안좋을까 일단 가장 큰 단점은 UX 부분이다. 유저가 처음에 페이지에 접속하면, 버튼이 보여서 누르려고 했는데 이미지가 갑자기 로드가 되면서 버튼이 아래로 밀리고 유저는 이미지를 클릭하게 되는 현상이 발생한다. 또 하나의 문제는 레이아웃을 다시 그려지게 된다는 것이다. 버튼이 밀리고 이미지가 그려지는 것 자체가 처음 잡혀있던 레이아웃이 아닌 변경된 라이아웃이기 떄문에 브라우저에서는 다시 그리는 작업이고..

평소에 캐쉬에 대해 아무생각 없이 적절한 곳에 캐쉬하면 좋지 라는 생각만 가지고 있었다. 하지만, 이번에 웹 최적화 관련 인강을 들으면서, 캐쉬에 대한 이야기가 나와 정리할 겸 글을 남긴다. 일단, 브라우저의 경우 1. 메모리 캐쉬 2. 디스크 캐쉬 이렇게 두개로 나누어 캐쉬 처리를 한다. 메모리 캐쉬는 RAM에 저장되고, 이는 휘발성이기 때문에 브라우저를 닫았다 키면 날라가게 된다. 반면, 디스크 캐쉬 같은 경우 file로 관리를 한다. 이 두 캐쉬에 대한 선택은 개발자가 직접적으로 관리하지는 못하고 브라우저 내의 알고리즘에 의해 관리가 된다. 하지만 이 캐쉬에 대해 사용할지 말지 유효기간이 어떻게 되는지 등의 옵션은 cache-control을 통해 관리할 수 있다. 이는 서버 요청 후 respons..

Reflow, Repaint 그리고 Reflow, Repaint생략을 이해하기에 앞서 선행되어야 하는 개념이 있다. critical rendering path에 대한 개념이다. 이는 이전에 내용을 다뤘기에 생략하도록 한다. (https://sangwonny.tistory.com/7?category=948510) critical rendering path = > DOM + CSSOM => Render Tree => Layout => Paint => Composite Reflow CSSOM, render tree, layout, paint 과정을 다시 그려줌 강제로 Reflow가 발생하는 현상들의 원인 1. 화면 리사이징 : 브라우 창의 크기를 조정하거나 모바일 기기의 화면 회전과 같이 뷰포트 크기가 변경되..

웹앱의 규모와 복잡의 증가 웹앱의 역할이 커짐에 따라 코드의 양, 복잡도 증가하게 된다. 초기 당시 javascript는 간단하게 html을 관리하는 데에 이용이 됐다. 하지만, 웹앱에서의 사용자와의 인터렉션이 증가함에 따라 javascript의 역할이 커지고 모듈이라는 새로운 개념이 생겼다. 2015 이후 import와 export 문법을 지원 이 개념이 규모가 커짐에 따라 중요해지는 이유는 다음과 같다 우선, 기존의 javascript를 불러오기 위해서는 위와 같이 SCRIPT 태그를 통해 해당 파일을 호출한다. 위와 같은 방식의 호출은 수 많은 javascript 파일이 존재할 경우 그 많은 파일들을 한번에 호출하는 방식을 사용해야한다. 이와 같은 방식은 처음 로딩 당시 모든 스크립트 파일을 호출하..

웹앱의 구성요소 html css javascript 일반 html, css로만 구성된 것은 단순 페이지라고만 표현하며, 앱이라고는 하지 않는다. -> 이는 정적이고 단순 보여주기만 하는 기능 앱 - 어플리케이션 상태를 가지고 있고, 사용자와 상호적으로 주고 받을 수 있는 다양한 기능을 제공 웹앱을 실행시키는 역할을 하는 것은 브라우저. 이전에는 자바스크립트를 실행시키는 것이 브라우저만 존재. 하지만 node가 나옴으로써 브라우저 외에서도 자바스크립트를 실행할 수 있는 환경을 만들 수 있음. html 어디서 주도적으로 그리는가 client side render: 웹 서버에서 html을 브라우저가 받았는데 최초로 받은 html에는 거의 아무런 내용이 존재하지 않고, 자바스크립트가 동적으로 그려주는 것 ser..

평소 알고 싶었던 내용 혹은 모르는 내용 등 많은 개발적 지식을 글을 통해 계속해서 접해왔다. 이렇게 하다보니, 블로그에 잘못된 내용을 접하는 경우도 생길때도 있고, 정해진 커리큘럼 없이 주먹구구식으로 막찾아 보게된다. 이렇게 하는 것이 나쁘다는 것은 아니다. 많은 이들이 검색을 통해 많이 배우고 한다. 하지만, 이번에는 조금 더 기초에 맞춰 정해진 커리큘럼에 맞춰서 공부를 해보고자 강의를 신청하였다. 이전에도 '엘리' 유료 강의를 신청해서 학습을 했던 경험이 있다. 좋은 내용과 배울 점이 많아서 좋았지만, 그때는 단순히 눈으로만 보고 끝냈다. 이렇게 하다보니 들을 때는 이해 갔지만, 그 이후에 다시 생각해보면 잊어버리게 된다. 이 때문에 이번에는 강의를 들으면, 강의에 대한 학습한 내용 및 느낌점을 블..