본문 바로가기

Programming/Web

(8)
웹 폰트에서 EOT, TTF 파일을 배제해야하는 이유 필요한 웹폰트 파일은 WOFF2 뿐 폰트 파일을 사용할 때는, 원칙적으로는 WOFF2만 쓰는 것이 좋고, IE에 대한 호환이 필요한 경우에 WOFF파일을 사용하면 된다. EOT파일은, 100%라고 표현할 수 있을 정도로, 모든 경우에 필요하지 않다. EOT 파일이 필요한 경우는 IE 8 이하의 브라우저를 지원해야하는, 아주 극단적인 레거시 페이지에서만 필요하다. 물론 그러한 페이지에서 웹 폰트를 사용해서 꾸미는 경우는 거의 없을 것이다. TTF 파일도 필요 없다 TTF파일도 마찬가지로, 굳이 제공해줄 필요가 없는 것이, 모든 브라우저에서 WOFF와 WOFF2 형식을 지원하고 있다. IE를 지원해야하는 경우라도, WOFF를 쓰는 것이 옳다. TTF는 압축되지 않은채로 제공되기 때문에, 사용자 경험에 악영향..
mobx 6 출시와 변경된 점 9월일에 mobx 6.0이 출시되었다. mobx 6 요약 ECMAScript에 적합한 라이브러리 & Proxy (모던브라우저) 및 비 Proxy (ES5) 동시지원 mobx가 데코레이터를 버리는 이유 가장 큰 이유는 데코레이터가 현재 표준으로 지정되어 있지 않은 점이다. 그렇기 때문에, 데코레이터를 사용하려면 복잡한 설정이 꼭 동반된다. 예를 들면 create-react-app로 프로젝트를 생성한 경우에는 순정상태로 사용할 수 없고 eject를 통해서 설정을 해줘야한다. 또한 비표준 데코레이터를 버림으로써, 추후에 등장할 표준 데코레이터(?)를 잘 지원할 수 있고, 당장은 비지원으로 인한 코드 용량 절감을 들 수 있다. mobx 6 With ES5 기존에는 IE를 지원하는 프로젝트에서는 mobx 5를 사..
[CSS] span에서의 ... 말 줄임표(text-overflow: ellipsis 속성) 처리 div와 같은 block 요소와는 다르게, span은 inline요소이기 때문에, text-overflow: ellipsis 속성을 줘도 제대로 동작하지 않는다. 이러한 경우에는 span 요소에 display: inline-block이나 display: block 을 추가하여 block 요소로 변경하면 정상적으로 동작한다.
Chrome DevTools 다크 테마(Dark Theme) 크롬 개발자 도구를 다크 테마로 사용하는 방법은 간단하다.먼저, 크롬 개발자 도구에서, 점 세 개가 세로로 나열된 버튼을 누르고, settings를 누른다.아니면, 개발자 도구에서 F1키를 눌러 접근 가능하다. Preferences 탭에 Appearance 제일 맨 위에 Theme : Light가 있을 것이다.이제 Light를 Dark로 바꾸면 다크 테마가 적용된다.
Firebase로 nuxt.js 배포하기 1. generate 커맨드로 dist 파일 생성2. firebase-tools 설치(npm install firebase-tools -g)3. firebase login으로 구글 로그인4. firebase deploy5. 이때, firebase.json의 hosting을 'dist'로 바꿔주면, dist폴더의 내용이 업로드 된다.
WebStorm 미세 팁 웹스톰에서 유용하게 쓸 수 있는 몇 가지 기능을 소개한다.package.json에서 의존성의 버전 관리웹스톰 2018.3부터 버전 자동 완성을 지원한다.예를 들면, "axios": ""에서, Ctrl+Space를 누르면 latest 버전이나 next등이 뜬다.기존의 버전을 특정 버전으로 바꾸려고 할 때도 유용하다.프로젝트에서 어떤 의존성의 버전이 "2.6.3"이고 최신 버전이 "2.8.3"인데, "2.6.x"에서 최신 버전으로 고치고 싶다면 아래와 같이 하면 된다."xxxx":"^2.6."에서 '.'뒤에서 Ctrl+Space를 누르면 2.6.으로 시작하는 버전이 자동으로 뜬다. Local History이전의 코드를 보고 싶을 때에는 Ctrl+Z를 누르는 것이 아니라, VCS > Local History를..
firebase에서 nuxt.js dynamic routes 사용하기 Nuxt.js에서 Dynamic Routes를 사용하고 그대로 배포하면 404페이지가 뜨게 됩니다.이 경우에는 파이어 베이스의 설정을 변경하면 됩니다. hosting 폴더에 있는 firebase.json 파일을 아래와 같이 고쳐주세요."rewrites":[ { "source":"**/*", "destination": "/index.html" } ]일반 경로(예: /login 등)를 제외하고는 index.html로 연결됩니다. 그러면 이제 nuxt.js에서 라우팅 처리를 하게됩니다.
robots.txt robots.txt는 웹 크롤러같은 로봇들의 접근을 제어하기 위한 규약이다. 한마디로 검색엔진봇이 접근하지 말아야하는 경로같은것을 의미한다.참고로 robots.txt는 권고사항임으로 지키지 않는 봇이 나타날 순 있다. robots.txt는 웹사이트의 루트경로에 있어야한다. (a.com/robots.txt)디텍토리의 뒤에는 반드시 /을 붙여야하는데, 아래와같이 사용할 수 있다.123456789101112User-agent: abcAllow: /abc/def/ User-agent: abcDisallow: /abc/def/ User-agent: *Allow: / User-agent: *Disallow: / cs첫번째는 User-agent가 abc인 봇이 /abc/def/에 접근하는것을 허용한다는 뜻이고,두번째..