Bleeding edge

다음주를 위해 간단한 레포 세팅을 연습하기 위하여, vite를 pnpm으로 세팅하는 연습을 하였다 vite를 선택한 이유는 개발 환경에서 아주 강력한 속도를 가지고 있기 때문에 선택하였다. (프로덕션에서 rollup을 사용하는 vite는 마이그레이션이나 안정성이 떨어지는거 아닙니까!) 위의 마이그레이션이나 안정성에 대한 대책으로 개발 환경은 vite, 프로덕션에서는 webpack이 안정적이고 빠르다라는 이야기는 있지만, 최근에 vite팀에서 rolldown을 만드는 것으로 이 것도 안전하게 잡지 않을까 라는 생각에(그리고 문제가 생기면 직접 pr을 올릴겸) vite를 선택하였다. 일단 평소에 사용하는 패키지 매니저인 yarn 대신에 pnpm을 선택하였다. 이유는 아래에 링크로 냄겨두었지만.. https:..

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

고민한 이유 서버에서 데이터테이블을 받았지만, 그 데이터가 잘못되었다던가 삭제되었을 수도 있다. 이번 프로젝트에서 데이터가 삭제된 경우에 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..

제목이 다른 사람에게도 이해가 될지 모르겠지만.. 1. 모바일 환경에서(chrome의 개발자도구에서는 안보인다.) 2. 주소창이 있다가 없어지는 경우(계속 보이는 경우나 계속 안보이는 경우에는 문제가 안생긴다.) 2번의 케이스는 touch event를 진행중일 때 발생한다. 이 viewport height에 변화가 생기는 이유는 모바일의 경우에 처음에는 주소창이 보이다가 스크롤을 움직이는 경우에는 주소창이 사라지면서 view port에 변화가 오기 때문이다. css에서는 이를 계산하는 dvh라는 것도 존재한다. 안드로이드에서는 사실 이 글을 쓰지 않아도 될 정도로 간단하게 해결되는데, 문제는 사파리에서는 dvh를 사용해도 이 문제가 생긴다. 이 문제가 발생하는 이유는 브라우저에서 스크롤 이벤트가 발생하는..

https://dalaranl.github.io/react/redux-mobx-context/ 상태관리 라이브러리의 장단점 정리 상태관리 라이브러리는 여러가지가 있다. 각 라이브러리의 장단점을 알아보자. dalaranl.github.io

사용하게된 이유 사용자에게 원하는 타입의 값을 받아서 처리를 한다고 하면, 두 가지 방법이 있다. 1. validator를 이용해서 원하는 값이 나오지 않는다면 사용자에게 다시 값을 입력하라고 알린다. 2. 원하지 않는 값이 나온 경우에 input에 값의 입력을 받지 않는다. 이번에 적용해야할 기능은 2번이었다.(물론 1번도 부분 적용..) 이번에 적용해야하는 것은 숫자와 %였다. input vs contentEditable View적인 차이 input은 value의 하나의 textNode에 대한 스타일링을 적용할 수 있지만 contentEditable은 innerHTML을 이용하여 다양한 태그를 감쌀 수 있기에 다양한 스타일링이 가능하다 코드에서의 차이 input은 type을 입력하여 의도되지 않은 타..

onKeyDown, onKeyUp onKeyDown은 키를 누르고 있을 때, onKeyUp은 키를 누르다가 뗐을 때의 키보드 이벤트 함수이다. 이렇게 누르고 있을 때와 누르다가 땠을 때로 구분하니 종종 둘이 언제 사용해야하는지 헷갈리는 경우가 많았다. 그래서 순서로 생각을 해보기로 했다. 순서 키를 누르고 => 키를 뗀다. 즉 onKeyDown 이벤트가 먼저 발생하고, onKeyUp 이벤트가 발생한다. 또 다른 차이점은 onKeyDown은 여러번 발생하고, onKeyUp은 한번 발생한다라는 차이점도 있지만, 이런 횟수적인 차이보다는 순서적이 차이로 구분하는게 기억하기 좋았다. 언제 구분해야할까? 사실 위에서 무시한 횟수 때문에 구분해서 사용되는 경우도 있지만, 이 같은 경우에는 횟수에 따라 둘 중 하나만..

고민한 이유 Single Page Application을 만들다가, 서버에서 모든 Single Page Application에 대한 초기 정보를 저장하는 것이 너무 부담되어서, Local Storage에서 초기 State를 관리하기로 하였다. 이 문제를 해결하기 위해 만났던 문제들 nextjs에서 localStorage is not defined 이 문제는 nextjs에서는 window가 undefined인 순간이 있을 수 있는 nextjs에서 나올 수 있는 케이스로 해결 방법은 심플하다(단지 언제 undefined 인지 시점을 지정하는게 타이트할수록 번거로울 수 있다..) function App(){ if(typeof window==="undefined") return //...localStorage에..