@emotion/babel-plugin

"정신이 번쩍든다... 개발이라고 해서 뭐가 다르겠냐. 결국 변별되는 개발자는 독해력이 있는 개발자다. 그 진부한 거 말이다. "

상황: SLEACT프로젝트중 alecture폴더에 pages폴더에서 styles.tsx폴더에

import styled from '@emotion/styled';

@emotion/styled 라이브러리 관련 설정하는 중 webpack.config.js파일에

이와 같이 @emotion/babel-plugin을 추가해 주고

https://www.npmjs.com/package/@emotion/babel-plugin  이 공식문서에서 @emotion/babel-plugin 에 관하여 해석하고 있는 상황.

 

위 사이트에 있는 표중

이 표를 보고 @emotion/babel-plugin을 webpack.config.js에 추가했을 시 어떠한 특징을 얻을 수 있는지를 이 공식문서를 보면서 해석해 가는 과정이다.

 

중요한 것은 나는 위의 표가 @emotion/babel-plugin 를 설치하면 얻을 수 있는 특징이라고 해석하지도 못했다는 것에 있다. 하지만 이건 걱정하지 않아도 된다. 익숙히 해 나가면 되는 거니까. 정말 중요한 것은

emtion component가 CSS selector로 사용될 수 있다는 것이다. 어떻하면? @emotion/babel-plugin을 설정파일에 넣으면!!!이게 중요한 것이다. 그리고 어렵지 않다. 왜? 그냥 당위적으로 접근하는 기술적인 부분이기 때문에 그렇다. 고도의 독해력을 전혀 요구하지 않는다. 말도 쉽다. Allows an emotion component to be used as a CSS selector. ==>> emotion component를 CSSselector로 사용할 수 있도록 허용해 준다는 것이다.

이 Features의 내용이 이해하기 어려워 제공되는 것이 아래의 Example이다. In은 @emotion/babel-plugin이 적용되기 이전이고 out이 @emotion/babel-plugin이 적용된 후이다.

어쩔수 없다. 계속 끈질기게 각각이 무슨 말인지를 구체적인 예시와 함께 익숙히 해 나가면서 연습해 보는 방법 밖에 없다. 또한, 비록 webpack.config.js 파일에 어떻게 설정을 구체적으로 넣을 것인지 소개는 되고 있지만 내가 하는 프로젝트의 상황마다 매번 구체적인 설정 코드는 다르다. 이것 또한 어쩔수 없이 시간을 가지고 계속 익숙히 하기 위해 부딫쳐 보는 방법뿐이 없다.

===================================================================================

GPT's opinion for @emotion/babel-plugin

 

 

===================================================================================

플러그인 설정은 위와 같이 배열로 플러그 이름을 감싸준 다음, 설정(option)까지 넣는다면 쉼표찍고 객체의 형태로 설정정보를 넣어주면 됨.

 

또다른 plugins 설정 예시