일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- github lfs
- augmentedDevice
- adb connect
- 티스토리 성능
- Each child in a list should have a unique "key" prop.
- nextjs
- camera permission
- rolldown
- custom printing
- Failed to compiled
- ffi-napi
- Can't resolve
- vercel git lfs
- html
- camera access
- github pdf
- animation
- dvh
- adb pair
- electron-packager
- device in use
- 이미지 데이터 타입
- react-native
- Recoil
- silent printing
- Git
- github 100mb
- pnpm
- react-native-dotenv
- ELECTRON
- Today
- Total
목록Javascript (54)
Bleeding edge
브라우저에서 일반적으로 인쇄버튼을 누르면 프린터 앱이 나오면서, 인쇄 설정에 대한 옵션을 확인하도록 되어있다. 이번에 만드는 앱은 이러한 옵션이 나오면 안되는 앱이기 때문에(web 혹은 데스크탑 앱) 이 플로우를 변경할 필요가 있었다. 우선, 윈도우에서는 크롬에 다음과 같은 flag를 붙여주면 된다. "C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --kiosk-printing
Intro 이번에 카메라 앱에서 이미지를 crop하는 기능을 만들려고 canvas를 사용했다. canvas에서 이미지를 사용하려고 하니 input에서 받은 파일의 데이터 형식으로는 canvas에서 이미지를 바로 그릴 수 없다는 것을 알게 되었다. 우리가 웹을 만들면서 바로 받는 타입은 [URL, File] 두 가지이다. 이 두타입에 대해 간략하게 이야기하자면.. URL : 일반적으로 우리가 이미 알고 있거나 외부의 엔드포인트로부터 받은 이미지의 주소의 값을 말한다. File : Input type file을 사용하면 Input의 event.target.value로 들어오는 값이다. Image data map canvas의 이미지에 대해서 이해를 잘하기 위하여 구글링을 해보았더니 다음과 같은 관계도가 있었..
이 에러를 없애지 않는다고 해서 문제가 생기지 않는 경우도 있지만, 이런 메세지들 때문에 중요한 에러 메세지를 놓칠 수 있기 때문에 이 에러 메세지를 없애는 방법에 대해서 이야기하려고 한다. 보통 이 메세지는 배열을 맵으로 컴포넌트를 반복해서 넣는 경우에 생긴다. 이 때는 배열의 고유한 값을 이용하여 (고유한 값이 없다면 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..
글을 쓴 이유 사실 이 코드를 작성하는 방법이 어렵다, 이런건 아니지만 보통 이 코드를 사용하는 순간은 너무나도 분노가 많을 때여서 붙여넣기 용으로 하나 작성한 코드이다. 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가 ..
react-native에서 환경변수를 관리하는 라이브러리는 1. react-native-config 2. react-native 두 가지가 있습니다. react-native-config 같은 경우에는 초기 설정이 많이 있기 때문에, react-native-dotenv를 선택하였다. 1) install npm i react-native-config 혹은 yarn add react-native-config 2) babel config module.exports = { //... "presets": ["module:metro-react-native-babel-preset"], "plugins": [ ["module:react-native-dotenv", { "moduleName": "@env", "path":..
0) RN-Camera에 들어가기 전 고민... React Native로 카메라 앱을 만들기 위해서 크게 두 가지 View를 토이프로젝트에 넣기로 했다. 1. 카메라 앱 2. Image picker 기존에 사진을 가지고 있지 않은 경우 사진을 직접 촬용하기 위한 카메라뷰 사진을 가지고 있다면 이를 선택하기 위한 Image picker 뷰 React native에서는 카메라의 선택지가 react-native-camera(지금은 deprecate가 되어서 react-native-vision-camera)와 expork 가 있지만, react-native-camera의 오픈소스를 deprecate를 한 것을 보면 expo가 react-native보다 더 코드를 관리를 잘한다고 생각이 들어서 expo에 있는 카..