Bleeding edge

이미지와 PDF 업로드 및 미리보기 구현기이번 프로젝트에서 이미지와 PDF 파일을 업로드하는 기능을 개발해야 했고, 특히 PDF 파일에 대한 미리보기를 구현하는 부분에서 고민이 많았다. 이미지는 비교적 간단히 처리할 수 있었지만, PDF 미리보기는 구현 경험이 없어서 새로운 접근법을 찾는 과정이 필요했다. 아래에서는 문제 해결 과정을 공유하고, 각 문제점과 해결 방안을 설명한다. 접근 방법먼저 input 요소의 change 이벤트에서 파일 타입을 기준으로 이미지와 PDF 파일을 구분하여 상태(state)로 관리했다. const handleFileChange = (event: ChangeEvent) => { const selectedFiles = Array.from(event.target.files..

Fade-Out Gradient 효과 구현기이 글에서는 내가 개발 중인 프로젝트에서 overflow가 발생하는 컴포넌트에 적용한 "fade-out gradient" 스타일에 대해 설명한다. overflow된 부분이 단순히 잘리는 대신, 서서히 사라지는 느낌을 주기 위해 이 효과를 사용했다. 이 글에서는 문제 해결 과정과 함께, Tailwind CSS를 활용하여 효과를 구현한 방법을 공유하려 한다. 접근 방법 - Pseudo 클래스 활용하기현재 프로젝트에서는 Tailwind CSS를 사용하고 있다. Tailwind는 기본적으로 mask-image 속성을 지원하지 않지만, 양쪽 끝에 fade-out gradient를 적용하라는 요구사항이 있었다. 처음 시도한 방법은 before와 after pseudo 요소..

다음주를 위해 간단한 레포 세팅을 연습하기 위하여, 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을 입력하여 의도되지 않은 타..