All

[SEO] 메타태그 최적화

🔎 SEO SEO 작업은 검색환경에 맞게 내 웹사이트를 최적화하는것을 뜻한다. SEO 작업이 잘 되어 있을 수록 내 웹사이트의 검색 결과가 더 좋은곳에 위치할 수 있다. 이는 곧 유입률과 연관있기 때문에 SEO 최적화는 중요하다. SEO를 위한 메타 태그 최적화 작업중 가장 기본은 메타태그 설정(최적화)이다. 메타태그란, 웹페이지의 정보를 담고 있는 태그라고 생각하면 된다. 사이트맵 제출 이는 간단하게 말하면 웹사이트의 설계도면과 같다. 보통 XML 파일형식으로 사이트맵을 구성하게 된다. 처음 SEO를 하는 사람들은 직접 셋팅하기에는 힘들기 때문에 XML 자동생성 사이트의 도움을 받는 것이 좋다. robots.txt 설정 이는 현실로 따지면 문지기와 같다. 내 웹사이트에 검색로봇이 들어올 수 있게 허가를..

[CS] 브라우저 렌더링 과정 :: CSS 최적화

📢CSS 성능 최적화 CSS는 렌더링을 막는다. CSS 존재만으로도 CSS가 파싱되기 전까지 브라우저는 렌더링이 지연된다. CSS는 HTML 파싱도 막을 수 있다. 브라우저가 CSS가 파싱되기 전까지 콘텐츠를 보여주지 않아도 HTML의 로딩된 부분만을 먼저 보여줄 수 있다. 그러나 스크립트의 경우 aync defer 이 없다면 파싱을 막게 된다. 브라우저가 CSS관련 작업을 진행중이라면, 이 작업이 완료될 때 까지 기다렸다가 스크립트를 실행한다. 스크립트가 실행되기 전까지 문서 파싱을 할 수 없기 때문에, CSS는 더이상 렌더링은 차단하는 요소로 작용되지 않는다(하단 그림 참조) 문서의 외부 스타일시트 및 스크립트 순서에 따라서 때로는 HTML 파싱도 중지할 수 있다. 👉 파싱을 차단하는 상황을 피하기 ..

[CS] 성능 향상을 위한 최적화

🎨브라우저 로딩 과정🎨 파싱 스타일 레이아웃 페인트 합성 & 렌더 📃웹 페이지 로딩 최적화 브라우저 로딩 과정에서 파싱 중 블록 리소스가 발생할 수 있으며, CSS와 자바스크립트가 이에 해당한다. 최적화의 첫번째 단계는 이 블록 리소스를 최적화하는 것이다. CSS 최적화 CSSOM 트리는 CSS를 모두 해석해야 구성할 수 있다. 렌더링이 차단되지 않도록 CSS는 항상 HTML 문서 최상단( 아래)에 배치한다. 특정 조건에서만 필요한 CSS가 있을 때 미디어 쿼리를 사용한다. 외부 스타일시트를 가져올 때 사용하는 @import 사용은 피한다. 상황에 따라 내부 스타일시트를 사용한다. 자바스크립트 최적화 자바스크립트는 DOM트리와 CSSOM트리를 동적으로 변경할 수 있기 때문에 HTML 파싱을 차단하는 블록..

IE11 굿빠이

나를 항상 힘들게 했던 IE..! 기사를 보면 2022년 6월 15일부로 지원을 종료한다고 한다. 이 날 이후 PC에 설치된 IE는 비활성화되고 실행하면 MS의 다른 웹브라우저인 엣지로 자동 전환된다...!! 단, IE기반으로 만든 웹사이트를 지원하는 엣지의 IE모드는 최소 2029년까지 쓸 수 있게한다는 방침이다..? ??? 엣지의 IE모드는 무엇이지..? => 익스플로러에 최적화되어 있는 사이트에 접속할 때 필요한 모드로 국내에서는 ActiveX를 아직도 사용하는 관공서 또는 인트라넷에 접속할 때 많이 사용한다. ??? ActiveX를 버리지 않는 이상 한국에서 IE는 사라지지 않으려나 보다. https://www.sciencetimes.co.kr/news/%EA%B5%BF%EB%B0%94%EC%9D..

[CSS] !important를 대체할 :all

클래스 우선순위를 높이기 위해 최후의 방법으로 많이 쓰는 !important 쓸때는 편하지만 자칫 !important 남발이 일어날수가 있다. 그럴 때는 all 을 사용해서 초깃값으로 세팅해줄 수 있다. (!important가 미리 선언되어 있다면 안먹힌다.) https://jsfiddle.net/Kimara/73aj9pz0/21/ https://developer.mozilla.org/ko/docs/Web/CSS/all all - CSS: Cascading Style Sheets | MDN CSS all 단축 속성은 요소의 unicode-bidi (en-US), direction (en-US), CSS 사용자 지정 속성을 제외한 모든 속성을 초기화합니다. developer.mozilla.org

[VUE] vue cdn, ie11에서 사용하기

IE에서 vue cdn을 사용해 vue를 쓰고 싶으면 따로 스크립트를 넣어줘야 한다. ES6와 같은 javaScript 문법이 IE에서 호환되지 않기 때문이다. 위와 같이 스크립트를 로딩해주고 type을 지정해주면 ES6 문법을 사용할 수 있다.

[CSS] 국가별 기본 웹폰트

글로벌 사이트 EDM 작업 중, 각 나라별로 쓰는 기본 폰트가 있을것이므로 기본 폰트에 대응해 font-family를 변경해준다. 한글 /* MAC */ body{font-family:'apple sd gothic neo', sans-serif} /* window */ body{font-family:'Malgun Gothic', sans-serif} /** * APPLE SD Gothic Neo는 MAC OS X 및 iOS의 기본 국문 폰트이다 * Malgun Gothic은 window 기본 국문 폰트이다 * sans-serif는 고딕체를 나타낸다. */ 영어 /* MAC */ body{font-family:'apple sd gothic neo', sans-serif} /* window */ body{f..

[VUE] 스타일 가이드

VUE로 프로젝트를 진행할 때 내가 꼭! 숙지하고 있어야 할 스타일 가이드를 정리해 보기로 했다. ### 필수 ### # 컴포넌트 이름은 합성어를 사용한다 root 컴포넌트인 App과 , 등 Vue에서 제공되는 빌트인 컴포넌트를 제외하고 컴포넌트의 이름은 항상 합성어를 사용한다. Vue.component('todo-item', { // ... }) export default { name: 'TodoItem', // ... } # 컴포넌트 데이터 컴포넌트의 data는 반드시 함수여야 한다. 컴포넌트(i.e. new Vue를 제외한 모든곳)의 data 프로퍼티 값은 반드시 객체(object)를 반환하는 함수여야 한다. Vue.component('some-comp', { data: function(){ ret..

[VUE] Vue CLI 작업 환경 만들기

1. node 설치 - npm은 node.js의 패키지 관리자이다. npm을 사용하려면 node.js를 설치애햐 한다. https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 현재버전: 지금까지 나온 버전들 중 최신 버전 * LTS: 지금까지 나온 버전들 중 많은 사람들이 사용하면서 나온 버그들을 패치하여 가장 안정적인 버전 - node 와 npm 버전 확인하기 - 숫자가 나오면 정상! node -v npm -v 2. yarn 설치 npm install -g yarn // 버전 확인 yarn --version 3. vue c..

[자바스크립트] scrollY vs pageYOffset 무엇을 써야하나?

scrollY vs pageYOffset 스크롤 값을 얻을 때 둘 다 작동은 하지만, 어떻게 다른지 궁금해서 검색해보았다. 둘 다 스크롤 Y 값을 얻는다는 것은 동일하지만, scrollY는 IE에서 동작하지 않는다고 한다. MDN에서는 노후 환경을 신경 쓰지 않아도 된다면 둘 중 아무거나 사용해도 괜찮다고 한다. 하지만 나는 IE를 버릴 수 없기 때문에 scrollY만 쓰는 건 지양해야겠다. 결론은 구형 브라우저 신경안써도 되면 scrollY 쓰고, 구형 브라우저까지 신경써야 한다면 pageYoffset을 쓴다. 아니면 조건문 걸어서 둘 다 쓰던지. 아래처럼. window.scrollY || window.pageYOffset window.pageYOffset || document.documentEleme..