분류 전체보기 (29) 썸네일형 리스트형 CSS #5 - CSS-in-JS (1) Pros and Cons 시작하며 npm trends (https://www.npmtrends.com/emotion-vs-sass-loader-vs-styled-components)라는 사이트에서 SASS와 CSS-in-JS들의 다운로드 수를 비교해서 제공하는 곳이 있습니다. emotion, styled-components, JSS, aphrodite, radium, glamorous, styletron, ... 등 많은 선택지가 존재하는 CSS-in-JS는 다운로드 수가 계속 증가하는 추세에 있습니다. 각각의 사용 방식에 대해서 모두를 설명드릴 수는 없겠지만 공통적으로 담겨 있는 의도와 원리에 대해서 말씀드리고자 합니다. 많이 알려진 styled-components에 대해서 먼저 다뤄 보고, 차후에 Emotion을 정리해 보도.. 티스토리 코드블럭 버그 ㅠㅠ 예전에는 그러지 않았는데, 갑자기 어제? 오늘? 글을 쓰다 보니 코드블럭 스타일을 HTML이나 JS로 선택하게 되면 블로그의 거의 모든 것이 무너지는 현상이 발생했습니다. 예전에 작성한 글들도 살펴보니 HTML, JS 코드블럭 이후에 폰트가 무너지거나, 작성한 글이 끝까지 스크롤이 안되거나, 혹은 실제로 버튼과 같은 HTML, JS 코드블럭 속에 있는 HTML TAG에 해당하는 것이 그려지는... 상황이 발생했습니다. 특정 상황에서는 또 HTML 스타일을 선택하더라도 해당 현상이 발생하지 않는 경우도 있습니다. 당장 쓰고 있던 글을 발행할 수가 없어서 고객센터에 글을 남겼습니다. 현상 걱정 현상의 원인을 정확히 알 순 없지만 font의 적용이 하위의 코드블럭이 아닌 영역에도 영향을 미치는 것을 보면.. CSS #4 - SASS (3) with CSS Module classnames classnames(https://www.npmjs.com/package/classnames)는 각 태그에 대해서, 혹은 컴포넌트에 대해서 클래스 명칭을 적용하기 위해서 사용하는 className을 더욱더 가독성 있고, 쉽게 작성할 수 있게 도와줍니다. classnames function은 string일수도 있고, object일수도 있는 여러 개의 아규먼트를 받아서 해당 부분을 여러 개의 클래스 명칭을 적용하도록 돕습니다. 또한 bind version을 사용하는 것을 통해서 CSS-Module의 스타일 적용을 돕습니다. 클래스 명칭을 dynamic allocation 하고 싶다면 다음과 같이 작성될 수 있습니다. const [isRed, setIsRed] = useState(false.. PDF Viewer With Tistory 들어가기 전 티스토리에서 PDF Viewer를 제공하고 있지 않아서, HTML 모드로 글을 작성해서 태그를 사용해서 PDF를 올릴 수 있습니다. 태그는 인라인 요소로 html.4.01부터 제공하는 기능입니다. 현재 거의 모든 브라우저에서 지원이 가능하고 다른 HTML요소인 작성하는 글에 영향을 미치지 않기 때문에 걱정 없이 사용할 수 있습니다. 많은 글들이 구글 드라이브 1)를 사용해서 업로드를 하거나, 글에 파일을 업로드 2) 한 이후에 해당 위치를 사용하는 방식에 대해서 소개하고 있습니다. 구글 드라이브 1)의 경우 업로드 한 사용자의 정보(이름, 드라이브 계정 아이디, ...)가 노출될 수 있고, 공유를 하기 위해서 따로 리파지토리를 만들고 관리해야 할 수 도 있습니다. 또한 파일의 이름이나 페이지.. 나의 암기력 나의 아쉬운 점 제 자신의 아쉬운 점으로는 암기력이 좋지 않다는 것입니다. 그래서 무작정 암기 이후 이해를 하는 방식이 아니라, 기술과 원리에 대해서 이해를 하고 최대한 나의 일부(?)로 편입하고자 하는 방식을 고등학생 때부터 선택했습니다. 이런 부분과 더불어서 발표 혹은 질의응답을 하는 상황에 직면하면, 긴장을 해서 그런지 머릿속에서 바로 꺼내오기가 어려웠습니다. 긴장을 하지 않으려고 해도 어쩔 수 없는 듯합니다. 그래서 스크립트를 많이 작성하고, 시뮬레이션을 많이 돌려 봅니다. 혹은 이것 때문이 아닐까? 이에 비해서, 최근에 다른 생각이 들었습니다. 이를테면 "내가 정확히 몰라서 말을 잘 못하는 것일까?"와 비슷한 정도의 생각입니다. 그럴 수도 있겠습니다. 소스 코드를 직접 작성해보고 인터넷에서 리서.. PWA #1 - Intro 시작하며 PWA(Progressive Web Application)에 대해서 많은 분들 앞에서 정보 공유를 할 과분한(?) 기회가 생겨서 주말을 활용해서 부지런히 자료와 데모를 준비했습니다. Vue에 PWA를 적용하는 가이드라인(Jay님 감사합니다)의 도움으로 적용 방식을 이해하고, Vue-cli로 프로젝트 셋업을 한 이후에 PWA 패키지 (www.npmjs.com/package/register-service-worker)을 참조해서 기본 프로젝트에 적용을 해 보았습니다. Default setting에서, register-service-worker가 제공하는 hooks에 기능을 추가해 pre-caching 말고도, runtime-caching을 적용해 보았습니다. 아직 부족하다는 생각이 들어서, serv.. CSS #3 - SASS (2) with CSS Module CSS potential danger 저번 시간에 SASS의 장점에 대해서 소개했습니다. SASS를 통해서 CSS를 더 쉽게, 그리고 가독성 있게 작성할 수 있습니다. 또한 번들러 / 전처리기의 결과물이 결국은 CSS파일과 같기 때문에 컴파일(build / deploy)을 하는 시간을 제외하면 같은 성능을 제공할 수 있습니다. 그러나 다음과 같은 CSS파일을 작성할 때 개발자가 신경을 써야 하는 부분은 해소되지 못했습니다. CSS override ansrlm.tistory.com/19 글의 1 - 6)을 보시면, CSS파일에서 마지막 선언이 가장 높은 우선순위를 가집니다. 자바스크립트 파일들과 CSS 파일들은 성능을 위해서 하나의 자바스크립트 파일과 하나의 CSS파일, 혹은 특정 비즈니스 요건에 따라서 .. CSS #2 - SASS (1) 시작하며 CSS를 조금 더 편리하게 사용할 수 있는 방법에 대해서 소개하고자 합니다. 어떻게 글을 작성하면 방문해 주시는 분들이 이해를 더 잘하실 수 있을까 고민해 보았습니다. CRA(create-react-app)을 통해서 만든 프로젝트의 기본 파일을 각각의 방식으로 바꿔서 함께 설명을 드리면 쉽게 프로젝트를 따라 만드시고 고치는 시간을 가질 수 있을 것이라 생각합니다. App.jsx를 SASS / CSS Module / CSS in JS로 작성하지만 같은 화면을 보여주도록 해보겠습니다. 각 프로젝트는 CSS를 달리 표현하는 것은 import를 하는 방식부터 차이를 보입니다. 1. import './App.scss'; - (SASS) 2. import styles from './App.module.sc.. 이전 1 2 3 4 다음
