Bleeding edge

Vercel을 사용하다보면, 종종 로컬에서는 실행이 문제없이 되지만, Vercel에서는 컴파일에 실패하는 경우가 있다. 사실 천천히 파일의 문제를 읽어보면서 접근하면 아주 간단하게 문제는 찾을 수 있는데, 대충 읽다보면.. 컴파일 에러를 쉽게 찾지 못하게 된다... 원인 파일을 import 할 때 대소문자에서 나온 문제이다. import는 colLayoutFilled20로 하였지만, 실제파일은 ColLayoutFilled20이라 생긴 문제였다. nextjs에서는 build error가 없었지만 vercel에서 compile failed가 발생한 것을 보면, vercel이 대소문자에 좀 더 엄격하다는 것을 알 수 있다. 또 다른 문제 처음에는 파일 이름을 수정하고 코드를 push 하려고 했는데 문제는.. ..

이 에러를 없애지 않는다고 해서 문제가 생기지 않는 경우도 있지만, 이런 메세지들 때문에 중요한 에러 메세지를 놓칠 수 있기 때문에 이 에러 메세지를 없애는 방법에 대해서 이야기하려고 한다. 보통 이 메세지는 배열을 맵으로 컴포넌트를 반복해서 넣는 경우에 생긴다. 이 때는 배열의 고유한 값을 이용하여 (고유한 값이 없다면 index라도 이용하여) key 값을 넣어주면 된다. 일반적인 htmlElement로 작성하는 경우에는 eslint에서 미리 알려주기 때문에 key 값이 안들어간 경우를 미리 알 수 있지만.. export function BreakSpan({ children, ...rest }: Props) { return ( {children.split(/\n|\\n/).map((text, index..