Bleeding edge

이 에러를 없애지 않는다고 해서 문제가 생기지 않는 경우도 있지만, 이런 메세지들 때문에 중요한 에러 메세지를 놓칠 수 있기 때문에 이 에러 메세지를 없애는 방법에 대해서 이야기하려고 한다. 보통 이 메세지는 배열을 맵으로 컴포넌트를 반복해서 넣는 경우에 생긴다. 이 때는 배열의 고유한 값을 이용하여 (고유한 값이 없다면 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..

css처럼 애니메이션을 바로 사용하게 된다면 scss에서는 문제가 발생한다. 이유는 애니메이션의 name이 바뀐다! 만일 animation이름을 fadeOut이라는 이름을 SnackBar에서 사용하면 애니메이션이름은 다음과 같이 바뀐다 .Snackbar_wrapper{ animation-name: Snackbar_fadeOut__uuidexample; } scss에서는 애니메이션을 제외하고는 이름의 중복을 피해주는 sass 덕분에 편리하지만, 애니메이션에서 mixin을 사용하지 않으면 상당히 불편하다. 그래서 다음과 같은 mixin을 작성하였다. mixin @mixin animate($animation, $duration, $method, $times) { animation-name: $animation..

React Native와 웹뷰를 이용하여 어플리케이션을 만들다보니, 항상 QA를 많이 받는 것이 "앱처럼 만들어 주세요" 였다. 이번 주에는 앱처럼 "페이지가 없는 부분에서는 스크롤을 막아주세요" 라는 요청을 받았다. 해결 만일 x축 y축 모두 막고 싶다면 다음과 같이 사용하면 되지만, 나같은 경우에는 y만 막으면 ok이기 때문에 이 방법을 사용하였다. overscroll-behavior-y: none; 이 부분을 body와 해당하는 div에 추가적으로 적용하면 되지만, default가 되는 부분은 모두 막고 싶었기 때문에 *{ overscroll-behavior-y: none; } 모든 y에 대한 over scroll을 막아버렸다.

글을 쓴 이유 사실 이 코드를 작성하는 방법이 어렵다, 이런건 아니지만 보통 이 코드를 사용하는 순간은 너무나도 분노가 많을 때여서 붙여넣기 용으로 하나 작성한 코드이다. Object.keys(window).forEach(key => { if(/./.test(key)){ window.addEventListener(key.slice(2), event => { console.log(key, event) }) } }) 언제 사용하는게 좋은가 이전에 웹만 만들 때는 잘 몰랐었는데, React native로 웹뷰를 개발하면서 pc가 아닌 다른 기기에 대한 이벤트를 다루면서 어떤 이벤트가 어떤 순서 혹은 언제 발생하나를 보기 위해서 사용하게 되었다. (정확히는.. iOS에서 원하지 않는 순간에 alert가 발생했는..

문제점 이번에 React native와 Nextjs를 이용하여 앱을 만들고 있었다. 전역 상태로 window를 사용하는 함수가 있었고, SSR 에서 window 객체가 없는 순간에 에러가 나오기 때문에 빌드 에러가 발생한다. 에러 메세지 일반적인 window is not defined 해결 방법 처음부터 끝까지 내가 작성한 함수의 경우 window is not defined는 그 함수가 시작하는 지점 혹은, window 객체를 사용하는 지점에서 다음과 같이 return을 하면 문제가 없다. if(typeof window === 'undefined') return 하지만 이번에 문제를 일으킨 함수같은 경우 heic2any라는 라이브러리라서 import를 하는 순간 window is not defined가 ..

스마트폰이나 다른 여러 디바이스가 등장함에 따라서 다양한 aspect를 고려해야 했던 것 처럼, 새로운 모양의 device를 고려해야하는 케이스가 아이폰의 노치가 등장하면서 생겼다. 노치? 우선 아래의 사진을 보자. 처음에는 m.... 이런식으로 많이 표현되었던 모양이지만(개인적으로는 상단에 배터리나 다른 공간을 활용할 수 있기 때문에 꼭 나쁘다고 생각은 하지 않는다) 이건 디바이스인 생각이고, 프론트엔드로써나는 저 노치의 공간이 생겼을 때의 css를 고려할 수밖에 없었다.이전에 웹에서는 노치를 신경을 별로쓰지 않았던 것 같은데 주소창이 없는 웹뷰 react native에서는 이를 고려할 일들이 몇 번 생겼다. 1. 태그 설정 서론이 길었으니 우선 사전작업을 하는 방법을 이야기하면 우선 head태그 안에..