선호:하다

Next.js로 개발중 리렌더링할 때 styled-component로 작성한 css가 적용되지 않은 채로 html 페이자가 렌더링 되는 현상을 겪었다. 이는 _document.tsx 파일을 커스텀하여 해결할 수 있었다. 첫번째로 styled-components의 서버측 className과 클라이언트측 className을 동일하게 유지되도록 하기 위해서 next.config.js를 수정해야된다. next.js 12.1버전 이상부터는 babel-plugin-styled-components를 사용하지 않아도 되고, 다음과 같은 코드만 next.config.js에 추가해주면 된다. compiler: { styledComponents: true }, 두 번째로 _document.tsx 파일을 아래처럼 작성해 주면..

styled-component와 antd로 회원가입 기능을 구현하던 중 input 태그의 onChange 속성에서 타입 오류가 발생하였다. 타입이 안맞아서 생기는 오류인것 같았지만 해결책을 찾을 수 없어 몇 시간 동안이나 구글링을 하며 삽질을 했다. 그러다 결국 에러메세지를 자세히 보고 해결 방법을 알게되었다. onChange 함수의 타입을 새롭게 정의해주기 위해 위와 같이 InputProps라는 타입을 만들고 onChange의 타입을 에러메세지에 나온대로 정의해주었다. 그리고 그것을 CustomInput의 props로 전달해주었다. 그 결과 에러가 해결되었다.