CSR - 동적으로 만들어지는 곳이 client side인 형태 - 먼저 static한 파일들을 받아오고, 데이터가 없는 빈 html를 받아온 뒤, 이후에 요청해서 받아오는 방식 SSR - 서버에서 메인 페이지를 요청하면, 완성된 html를 응답하는 형태이다. SPA - 하나의 public밑에 index.html이 있고, src 안에 ㅇ러 component로 관리하게 되는 것. - 단 한번만 리소스를 로딩하고, 그 후에는 데이터를 받아올 때만 서버와 통신한다. 즉, 요청 시, 딱 한 페이지만 불러오고, 페이지 이동시 기존 페이지의 내부를 수정해서 보여주는 방식 장점 - 화면전환이 빠르다. - 페이지를 이동하면서 서버 응답 요청을 안해도 되어서 매끄러운 UX가 가능하다. 단점 - 화면의 완성이 늦어진다. ..

https://stackoverflow.com/questions/9928517/why-in-css-does-in-have-the-opposite-meaning-to-its-use-in-c-based-languages!important의 의미 non-programming 언어에서 !는 무언가에 주의집중(?)하라는 의미로 사용된다. html에는 주석 같은것도 동일한 이유이다!왜 important!가 아니고 !important처럼 !를 앞에 붙이는 이유는 다른 방식보다, 파싱하기 쉬워이다! (이런걸 Comment&space 토큰이라고도 한다!)

바로 정의부터 들어간다. CSR는 client side rendering SPA는 single page application 의 줄임말이다. CSR은 데이터가 없는 빈 HTML, static 파일들만 받아와서 로드된 후에, 데이터를 요청해서 받아오는 방식으로 진행된다. SPA는 서버로부터 처음에만 페이지를 받아오고, 이후에 동적으로 페이지를 구성해서 새로운 페이지를 받아오지 않는 웹 어플리케이션을 뜻한다. (페이지가 한번 로딩된 이후에 데이터를 수정하거나 조회할때, 페이지가 새로고침되지 않고 다른 페이지로 넘어가지 않음.) 결론 CSR, SPA는 다르다. SPA는 서버로부터 처음에만 페이지를 받아오고, 이후에는 동적으로 DOM을 구성하여 렌더링 되는 화면이 바뀌게 하는 것이다. 여기서 "동적으로 DOM을..

장점 1. 사용자에게 앱이 보다 반응성있게 느껴지고, 페이지 전환 사이에 화면 깜빡임과 새로고침 딜레이를 보지 않아도 된다. 2. 서버에 더 적은 수의 HTTP 리쿼스트가 간다. (이미지 같은 요소가 페이지마다 로딩될 필요가 없기 때문) 3. 서버와 클라이언트 사이의 확실한 역할 구분이 이루어진다. (서버 코드의 수정 없이 다른 플랫폼의 새로운 클라언트를 쉽게 만들 수 있다.) 단점 1. 스크립트, 스타일시트 등 필요한 리소스가 많아서 초기 로딩이 더 무거워진다. 2. 서버에서 모든 라우트로의 요청을 1개의 시작 라우트로 리다이렉트 되도록 설정해야 하고, 클라이언트 사이드에서도 라우팅을 직접 처리해야한다. 3. SPA는 컨텐츠의 렌더링을 자바스크립트에 의존한다. 하지만 모든 검색 엔진이 크롤링 중에 자바..

그러니까 color: red; 가 아니고 color: #ff0000 을 쓰라는 소리다. hex 코드가 byte단위로 좀더 절약되고, 가독성이 좋고~ 등등의 다양한 이유가 많았는데, 진짜 이유는, 해당 color name이 브라우저 마다 정의된 color code와 다를 수 있다는 이유가 제일 와닿았다. 또한, 해당 color name을 hex code로 어짜피 파싱하는 작업을 거쳐야하기 때문에 추가적인 비용도 소모된다고 할 수 있다.

css selector는 오른쪽 부터 왼쪽으로 이동하면서, 해당 규칙에 부합하는 엘리먼트인지 확인한다. #menu ul li a {color: #eee;} 위 코드를 생각해보자, 브라우저는 a, li, ul, #menu 순으로 확인할 것이다. 그 이유는 selector의 depth가 깊어지고 html파일이 커질 수록, early return의 필요성이 커진다. 오른쪽부터 검사를 해야, 많은 경우에 대해서 우리가 원하는 selector 규칙과 다름을 조기에 인지하여 다음 탐색으로 넘어가기 수월하다. 물론 왼쪽부터 읽었을때 좀더 빠르게 찾을 수 있는 경우가 있을 수도 있는데 대부분의 경우 오른쪽 부분부터 매칭하는 것이 좀더 효율적이다. 다음과 같은 경우를 생각해보면 이해가 빨라진다 div > div > di..

일단 결론부터 공개한다. Steve Souders 의 책 Even Faster Websites에서 소개한 내용이라고한다. 1. ID (#id) 2.Class (.class) 3. Tag (div) 4. Adjacent sibling (h1 + p) 5. Child (div > p) 6. Descendant (div p) 7. Universal (*) 8. Attribute ([type='text']) 9. Pseudo-classes/-elements (:hover) 순서는 저렇게 나와 있지만, id, class간의 속도 차이는 거의 없다고 한다. 일단 CSS selector는 오른쪽부터 왼쪽으로 읽어가면서 동작한다. ul > li > a {...} 라는 css가 작성된다면, 브라우저는 a태그를 먼저 찾고..

가상 클래스 선택자, 가상 요소 선택자. 둘다 가상 선택자이다. 결론부터 말하자면, HTML에 이미 존재하는 요소를 선택하면 '가상 클래스' 선택자이고, HTML에 존재하지 않지만, 가상의 요소를 생성하여 선택하는 것은 '가상 요소' 선택자 라고 할 수 있다. - 가상 클래스에는 :active => 사용자에 의해 활성화되어 있는 요소, 마우스를 사용한다면, 마우스 버튼을 누르고 떼는 시점까지를 의미, 보통 a,button에 자주 사용 주의) LVHA순서 :active 가상 클래스로 정의된 스타일은 :link, :visited, :hover에 적용된 스타일에 재정의 된다. 링크를 적당히 디자인하고 싶으면 link, visited, hover, active 순으로 스타일을 정의해야 한다. :focus => ..