nextjs에서 emotion 초기 설정

/* @jsxImportSource @emotion/react /

을 파일마다 할 수는 없는 노릇이고
(테스트용으로 1페이지 짜리 만드는 게 아닌 이상)

루트 폴더에 .babelrc 을 추가해서 이걸 넣어주면 됨.

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin"]
}

이렇게만 하면 끝.

https://emotion.sh/docs/css-prop

모든 플러그인들이 그렇지만, 공홈에 다 나와있으니 그 밖의
설정들은 직접 찾아보는게 젤 좋음

(리액트 쪽으로 꽤 유명한 강사분들도 대부분 공홈에 대한 중요성을
항상 많이 언급하지만, 리액트를 처음 배우는 사람들은, 일단
영어의 압박 + 괜한 쫄음으로 오로지 한국어 + stackoverflow 에
의존하는데 걍 번역 켜놓고 살펴보면, 세세한 것들 전부 다 공홈에
있으니 자기가 사용할 라이브러리는 직접 빨리 사용해보되 입맛에
맞게 사용하려면 결국 플러그인 모든 기능을 알아서 사용하면서
공홈을 계속 보게 되있으니 그게 젤 좋은듯.

다만, 이렇게 쓰는게 맞나? 야매로 내 스타일대로만 하고 있는 건
아니겠지 로 생각할 때 강의를 보거나, 아님 강의에서 인지단계를
해놓으면 추후 부분적으로 자기 프로젝트에 야금야금 적용하면서
실력이 느니, 강의를 듣는 것도 나쁘진 않음.

다만, 결국 프로그래밍은 자기가 직접 만들어보는게 젤 빨리 실력이
느는 만큼 그거 위주로 하되, 덧붙여서 잘하는 분들거를 참고삼는 위주로
가는게 좋지 않은가.)