less-loader
-
[Craco] Craco로 설정하기 (절대경로, Less)Front-End(Web)/React - 프레임워크(React, Next) 2022. 1. 23. 18:45
이전 포스팅에선 Craco가 무엇인지, 그리고 기본적으로 설치하는 방법에 대해 알아보았다. 이번 포스팅은, Craco 익스텐션을 통해 내가 보일러 플레이트에 적용했던 설정들을 기록하는 시간을 갖도록 하겠다. 💙 Craco-alias : 절대경로 설정하기 절대경로는, 모듈들을 참조(import)할 때 경로를 루트(root) 혹은 src로부터 작성하기 위해 설정하곤 한다. 상대경로로 작성된 경로는, 아무래도 가독성도 떨어질뿐더러 파일이 추가되거나 수정될 때 경로추적이 매우 번거롭다는 단점이 있다. tsconfig.json으로 설정하면 경로추적은 가능하나, 컴파일 시 해당경로의 모듈을 찾지 못한다는 에러가 발생한다. 그렇기에, Webpack을 eject해서 경로에 대한 정보를 추가해주어야 하며, 이 번거로움을..
-
[CSS/Lang] LESSFront-End(Web)/HTML, CSS 2021. 8. 12. 02:10
😃 서론 오랜만에 CSS 라이브러리 포스팅을 진행하는 것 같다. Less 같은 경우엔 내가 선택했다기 보다, 현재 회사에서 쓰이는 언어이다. 리드 엔지니어님께서 쓰시는 패턴을 차용해서 작업을 진행하다보니, 확실히 CSS 코드가 눈에띄게 짧아짐을 느꼈다. 또, 믹스인들로 구성한 문법이 마치 또다른 언어같지만, 눈에 익다보면 CSS 약어와 비슷하여 금방 적응도 되었다. 앞으로 리뉴얼되는 우리의 코드에는 Less가 더 적극적으로 쓰이며, 나 역시도 Vue 개인 프로젝트를 진행할 때 Less를 많이 사용할 것 같아 좀 더 원론적으로 정리하고자 이 글을 포스팅하게 시작했다. 🔵 Less 란? LESS는 CSS에 script의 능력(변수, 함수, 연산, 중첩, 스코프 등) 을 덧붙여 확장한 언어이다. LESS는 C..