반응형 styled-component2 next에서 styled-component에 SSR 적용하는 방법 Styled-component와 Next styled-component는 CSS-in-JS이다. 즉 JS를 통해서 CSS를 작성할 수 있게 도와주는 라이브러리이다. 한편 SSR은 자바스크립트가 실행되기 전, 서버에서 만들어준 html을 미리 렌더링하는 방식이고 Next.js는 React를 SSR로 렌더링 할 수 있게 만들어주는 프레임워크이다. 그럼 next에서 CSS-in-JS인 styled-component로 무언가를 작성했을때, 어떻게 SSR로 렌더링시킬 수 있을까?? .babelrc 설정 .babelrc 는 하위디렉토리나 파일에서 특정 플러그인이나 특정 규칙을 실행할 때 사용한다. (bebel 잘 설명해 놓은 블로그 참고) 예를 들어 특정 플러그인이 프로젝트내에서 트랜스파일링되지 않거나 특정 규칙으.. 2023. 6. 1. globalStyle 때문에 ol태그가 적용 안될 때 Next.js에서 개인정보 수집 정책 페이지를 만들고 있었다. 위와 같이 코드를 작성하였지만 ol태그가 적용되지 않았다. (숫자 안나옴) 코드를 뒤져보니 globalStyle.tsx의 reset때문이었다. reset을 지우니 다른 페이지의 스타일이 모두 무너졌기 때문에, reset을 지우진 못했다. !important 를 쓰긴 싫어서 고민하다가 더 좋은 방법이 떠올랐다. 스타일드컴포넌트로 Ol을 정의한 후 사용하였다. 2022. 5. 26. 이전 1 다음 반응형