대가는 결과를 만든다

web을 다뤄봤고, 최근 모던 웹 개발을 해보면 CSS 뿐 아니라 Sass, scss를 다뤄보고 들어봤을 것이다. 이에 대한 배경과 개념에 대해 정리를 하겠다. CSS란? (Cascading Style Sheets) 문서의 스타일을 구현하는 스타일 시트 언어이다. 배경 W3C에서 1996년 도입한 것으로, 이전에는 HTML언어 하나로 문서와 디자인을 모두 구현했었다. 예상되듯이 수정 및 유지보수를 해야하는 경우 스타일, 문서 중 하나를 수정 하더라도 모두 수정해야하는 단점이 있었고, 문서(content)와 표현(presentation)을 분리하여 수정 관리할 수 있도록 발전하게 된 계기가 CSS의 탄생 배경이다. css에 대한 건 이미 다 잘알테니 이 정도로 하고 패스! 그럼 Sass는 뭐여? (Synt..

https://cyberx.tistory.com/9 더 빠른 웹을 위하여 - 웹 캐쉬 (WEB CACHE) WEB-CACHE (TIME-SPACE TRADEOFF) 더 빠른 웹사이트를 위해 저희 개발자들은 눈물겨운 노력을 많이 합니다. - WebCache - Code Compressing - Image Optimizing - Image Spriting - Critical Rendering Path - We.. cyberx.tistory.com 304 Not Modified 브라우저가 서버에게 요청한 자료에 대해 서버는 클라이언트 내에 복사된 캐시를 사용하게 한다. 서버는 If-Modified-Since 와 If-None-Match 요청 헤더를 사용해 클라이언트가 가장 최근의 자료를 가지고 있는지 여부를 ..

img태그의 css속성인 object-fit은 IE 11에서 지원 되지 않는다. 같은 효과를 적용하고 싶다면, div tag의 css background를 이용하면 된다. example) object-fit : cover; transform : translateY(center); => background-image : url("path"); background-size : cover; background-position: center; 이렇게 div tag의 background속성으로 제어하면 같은 효과를 낼 수 있음!

http 통신으로 api와 연동 혹은 api를 구현할 때, 보편적으로 자주 쓰는 Content-Type, Mime-Type이 있지만, 종류에 대해 한번 정리할 필요가 있어 일단 종류와 개념에 대한 내용 정리한다. content-type이란 간단히 말해 보내는 자원의 형식을 명시하기 위해 헤더에 실리는 정보 이다. 이 값은 표준 mime-type중의 하나이다. Content-Type 1) Multipart Related MIME 타입 - Content-Type: Multipart/related

https://www.w3schools.com/css/css_rwd_mediaqueries.asp /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {...} /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {...} /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {...} /* Large devices (lapto..

카카오톡이나, 페이스북 같은 SNS에 URL 공유 시 보이는 미리보기 이미지, 제목, 내용들은 어떻게 표시되는 것일까? 1. 원리 : 링크라는 것이 인식되면 크롤러가 해당 웹사이트의 HTML head 의 메타 데이터를 크롤링하여 미리보기 화면을 생성 2. 프로토콜 : 비교적 통일된 방법으로 페이스북의 open graph 프로토콜을 사용한다. : 페이스북, 네이버 블로그, 카카오톡 등에서 사용하고 있는 프로토콜 : open graph 문서 - http://ogp.me/ : https://developers.facebook.com/tools/debug/sharing/ 에서 크롤링되는 정보 확인 가능 참고 : https://brunch.co.kr/@jiyeonsongofnt/11 링크 붙여넣을 때 보이는 이미..

블로그 참고하여 React, Vue를 비교해봤다. 뭐가 더 좋다가 중요한게 아닌 어떤 상황에 뭐가 더 적합하겠다를 위한 비교이다. 개인적으로 Frontend 입문 및 빠른 웹 프로토타이핑 상황에는 Vue가 좋을 것 같고, Web 뿐만 아니라 Native Mobile도 고려하는 서비스이거나 숙련된 개발자로서 더 유연한 옵션을 조절하는 유연성을 원한다면 다양한 써드파티를 고려할 수 있는 React가 더 좋을 것 같다. React의 숙지만으로 Mobile Native 도 커버할 수 있다는 것은 어쨋든 큰 장점이다. Vue framework을 기반으로 하는 Cross Platform 솔루션이 있긴 하지만, Native Build는 아니니까. ( Mobile app이 꼭 native app이어야 하는가 까지 고려..

Babel은 ES5 이상의 문법을 ES5 지원 브라우저에서 해석할 수 있도록 변환해주는 Transpiler. 하지만 ES5이상에서 새롭게 추가된 전역 객체들 Promise, Map, Set이나 String.padStart등 전역 객체에 추가된 메서드들은 트랜스파일링만으론 해결하기 어려워 core-js, regenerator-runtime과 같은 별도 polyfill 필요 Polyfill을 추가하는 방법은 두가지 : babel-polyfill을 사용하거나 babel-plugin-transform-runtime을 사용하는 방법 참고 : https://programmingsummaries.tistory.com/401 babel-polyfill 과 babel-plugin-transform-runtime 그리고 ..