Bleeding edge

https://rinthel.github.io/rust-lang-book-ko/ch03-00-common-programming-concepts.html

오늘 점심을 먹고 있었는데 다음과 같은 질문을 같은 회사 동료에게 들었다. 지금 렌딩 페이지 배포 준비하고 있는 와중에 랜딩 페이지 하단에 pdf 다운로드가 안되는데(로컬에선 작동), 도메인에서 해당 정적 파일이 없어서 그런 것 같은데 해결할 수 있는 방법이 있을까요? # 문제 해결을 위한 고민 보통 ts나 js와 같이 컴파일을 하거나 압축을 진행해서 새로운 파일이 빌드에서 생성되는 것이 아닌 경우에는 public에 파일을 넣어서 관리하고 주소를 public을 기준으로 root를 잡으면 문제가 생기지 않는다. 그래서 파일의 위치를 먼저 확인해봤다. public/[pdffilename].pdf 그래서 위치는 맞다는게 확인이 되어서 파일을 git clone을 진행한 후 다운받았다. 파일을 열어보니.. 파일이..

Intro 이번에 카메라 앱에서 이미지를 crop하는 기능을 만들려고 canvas를 사용했다. canvas에서 이미지를 사용하려고 하니 input에서 받은 파일의 데이터 형식으로는 canvas에서 이미지를 바로 그릴 수 없다는 것을 알게 되었다. 우리가 웹을 만들면서 바로 받는 타입은 [URL, File] 두 가지이다. 이 두타입에 대해 간략하게 이야기하자면.. URL : 일반적으로 우리가 이미 알고 있거나 외부의 엔드포인트로부터 받은 이미지의 주소의 값을 말한다. File : Input type file을 사용하면 Input의 event.target.value로 들어오는 값이다. Image data map canvas의 이미지에 대해서 이해를 잘하기 위하여 구글링을 해보았더니 다음과 같은 관계도가 있었..

https://www.youtube.com/watch?v=-wgyxfuv0hU OCR tesseract

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