소소한 개발 블로그

SCSS & 선택자에 대해

리액트 컴포넌트 라이브러리 개발을 하다가 CSS에서 &가 자주 보이는걸 발견했다. 찾아보니 CSS의 문법은 아니고 SCSS의 문법이라고 한다. 지금 쓰고있는 Styled Component에서는 SCSS의 문법을 사용할 수 있다고 하니 공부해보기로 했다. &는 SCSS에서 매우 유용한 기능이라고 한다. 보통 중첩(nesting)할 때 사용된다고 하는데 사용법을 알고 있으면 시간 절약이 가능하다고 합니다. 간단한 예제를 통해서 더 알아보도록 하겠다. Basic Nesting .parent { .child{} } 이것은 css에서 다음과 같이 컴파일 됩니다. .parent .child {} 원하는 만큼 중첩할 수 있지만 한 두단계만 유지하는 것이 좋다고 한다.(유용성이 떨어지고 재정의하기 어렵기 때문에) Ad..

프레임워크 없는 프론트엔드 개발 1장(프레임워크에 대한 이야기)

프레임워크에 대한 이야기 프레임워크는 필요 없다. 중요한 것은 그림이지 프레임(그림틀)이 아니다. - 클라우스 킨스키(Klauis Kinski) - 이 책의 저자는 프레임워크 없이 프론트엔드 애플리케이션을 개발하는 방법에 관한 책을 읽어야 하는 이유로 가끔 프레임워크만으로 작업을 수행하기가 충분하지 않기 때문이라고 말하고 있다. 1장에서는 프레임워크에 대한 저자의 생각과 프레임워크 없이 개발하는 방법을 배우는 것이 왜 중요한지에 대한 저자의 믿음으로 시작한다. 프레임워크란? 캠브리지 사전의 프레임워크의 정의는 다음과 같다. 무언가를 만들 수 있는 지지 구조 이 정의는 SW 프레임워크의 일반적인 개념과 일치한다. 앵귤러 애플리케이션의 구조를 생각해 보면 이 정의와 정확히 일치하는 것을 알 수 있다. 앵귤러..