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..

외부 이미지를 image src에 사용하는 경우에 종종 Invalidsrc prop에러가 나오는데 이 에러를 막는 방법이다. 외부의 이미지를 많이 사용하는 경우 혹은, 외부 이미지로 다른 프로젝트를 테스트 하는경우에 사용하면 편리하다.(방금도 새로운 프로젝트를 테스트하다가.. 윽..) const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "**", }, { protocol: "http", hostname: "**", }, ], }, }; module.exports = nextConfig;

보통 pc를 고려해서 웹을 만드는 경우에는 hover정도만 고려해서 css를 만들라는 요구사항이 있어서 크게 고민해본 적이 없었는데.. 최근에 react-native와 webview를 이용하여 프로젝트를 진행하다보니 마우스를 pressed를 하는 경우 다른 상태로 버튼을 적용하는 것을 만들일 일 생겼다. 임시 해결 방법 버튼을 누르고 있는 상태를 pseudo class로 캐치하는 방법이 당장에 나지 않았고, 고민할 시간이 없어서 빠르게 touchmove event를 이용하여 pressed를 감지했다. 문제점 버튼이 눌리고 있는 것에 대한 유무에 따라서 무언가 다른 변화가 없는데, 굳이 이를 상태로 관리하는 것보다는 hover와 같이 pseudo class로 해결하는 방법에 대해서 찾아봤다. 해결 방법 :..

고민한 이유 서버에서 데이터테이블을 받았지만, 그 데이터가 잘못되었다던가 삭제되었을 수도 있다. 이번 프로젝트에서 데이터가 삭제된 경우에 404페이지에 도달하는 경우가 있어서 404페이지를 만들필요가 생겼었다. 문제는.. 프로젝트의 디렉토리가 app이라 이전에 알고 있던 방법을 활용할 수 없었다 참고 : pages 디렉토리의 404 Nextjs pages 디렉토리에서는 404 페이지를 만드는 방법은 너무나 간단하고 Nextjs 공식홈에서 찾아볼 수 있다. https://nextjs.org/docs/pages/building-your-application/routing/custom-error Routing: Custom Errors | Next.js Override and extend the built-i..