All
[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..
[CSS] css 선언 순서
css 선언 순서를 정해놓으면 팀프로젝트로 여러명이 작업을 할때 css가 통일성을 가져서 보기에도 좋고, 운영 유지에도 좋다. 나는 display, width, height, position, margin, padding, font, 꾸밈요소, overflow, z-index + position:relative (position: relative가 마지막인 이유는 타 position의 기준이 되기 때문에 마지막에 넣는 경우가 많아서) 순서로 작업을 했다. 작업을 하다보니 박스부터 디테일하게 들어가는게 좋을 것 같아서 그렇게 하기로 한건데, 다른 큰 회사들은 어떻게 쓰는 지 궁금해졌다. 보통은 큰 회사를 보고 따라가는 사람들이 많기 때문이다. 나도 타 사이트들을 보면서 은연중에 css 순서를 인식했을것이고..
[VUE] 스크롤 방향 체크해서 화살표 모양 바뀌게 하기
스크롤에 따라서 화살표 바뀌기 첫 화면에서 보이는 화살표이다. 스크롤을 내리면 화살표가 바뀌고 background 컬러가 생긴다. scrDown.vue 컴포넌트를 만든다. .scr-down // 기본형 .scr-down.bg-on // 하얀 배경색이 생김 .scr-down.on // 화살표 모양이 바뀜 .scr-down.hidden // hide 전체 컴포넌트를 감싸는 index.vue 에서 스크롤을 제어한다. class를 조건에 따라 바인딩한다. 스크롤이 내려갈때는 보이면 안되니까 hidden을 더해주고, 스크롤이 올라갈때는 첫화면 빼고는 스크롤 아이콘에 background가 있으니까 따로 계산할 필요없이 offset값이 200 이상일때는 bg-on과 on을 더해준다. 스크롤이 움직일 때마다 onScr..