REACT
-
"ENOSPC: System limit for number of file watchers reached"라는 오류 메시지는 파일 감시자 수에 대한 시스템 제한이 초과되었음을 나타냅니다. 파일 감시자는 다양한 응용 프로그램과 서비스에서 파일 및 디렉터리의 변경 사항을 모니터링하는 데 사용됩니다. 파일 감시자의 시스템 제한에 도달하면 더 이상 감시자를 만들 수 없어서 이 오류가 발생할 수 있습니다. 이 오류는 주로 Linux 시스템에서 볼 수 있지만 다른 플랫폼에서도 발생할 수 있습니다. 이 문제를 해결하려면 다음 단계를 시도해볼 수 있습니다: 시스템 제한 증가: 시스템에서 허용하는 파일 감시자의 최대 수를 증가시킬 수 있습니다. 이는 일반적으로 시스템 구성을 수정하여 수행할 수 있습니다. Linux에서는 ..
Error: ENOSPC: System limit for number of file watchers reached, watch"ENOSPC: System limit for number of file watchers reached"라는 오류 메시지는 파일 감시자 수에 대한 시스템 제한이 초과되었음을 나타냅니다. 파일 감시자는 다양한 응용 프로그램과 서비스에서 파일 및 디렉터리의 변경 사항을 모니터링하는 데 사용됩니다. 파일 감시자의 시스템 제한에 도달하면 더 이상 감시자를 만들 수 없어서 이 오류가 발생할 수 있습니다. 이 오류는 주로 Linux 시스템에서 볼 수 있지만 다른 플랫폼에서도 발생할 수 있습니다. 이 문제를 해결하려면 다음 단계를 시도해볼 수 있습니다: 시스템 제한 증가: 시스템에서 허용하는 파일 감시자의 최대 수를 증가시킬 수 있습니다. 이는 일반적으로 시스템 구성을 수정하여 수행할 수 있습니다. Linux에서는 ..
2023.08.16 -
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can..
BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "timers": require.resolve("timers-browserify") }' - install 'timers-browserify' If you don't want to include a polyfill, you can..
2023.02.28 -
react로 반응형 웹을 만들때 css로 media query를 적용하지만 javascript로도 적용을 할 필요가 있을때가 분명 있습니다. 저 같은 경우는 주로 페이지의 width에 따라 컴포넌트를 변경을 해줄때 사용합니다. 반응형 웹앱을 위해 검색을 하여 react-responsive, react-media.. 등 주 사용하는것으로 나오는데 react-media같은 경우는 쓰기에는 단순하지 못하고(주관적 의견입니다.) react-responsive같은 경우는 크롬에서 개발자모드에선 잘 작동하지만 일반적으로 사용할때는 잘 적용이 안되었습니다.(NextJS 환경입니다.) 계속 찾아보다가 가장 잘 작동하여 적용한 코드를 소개해 드립니다. 장점은 yarn이나 npm으로 설치할 필요도 없고 javascript..
React 반응형 웹앱 만들기 Best media query codereact로 반응형 웹을 만들때 css로 media query를 적용하지만 javascript로도 적용을 할 필요가 있을때가 분명 있습니다. 저 같은 경우는 주로 페이지의 width에 따라 컴포넌트를 변경을 해줄때 사용합니다. 반응형 웹앱을 위해 검색을 하여 react-responsive, react-media.. 등 주 사용하는것으로 나오는데 react-media같은 경우는 쓰기에는 단순하지 못하고(주관적 의견입니다.) react-responsive같은 경우는 크롬에서 개발자모드에선 잘 작동하지만 일반적으로 사용할때는 잘 적용이 안되었습니다.(NextJS 환경입니다.) 계속 찾아보다가 가장 잘 작동하여 적용한 코드를 소개해 드립니다. 장점은 yarn이나 npm으로 설치할 필요도 없고 javascript..
2021.07.01 -
개발하다보면 const text = "정보를 등록해주세요." 처럼 string 문장안에 태그를 넣어서 렌더링을 해야될때가 있다. 문장안의 태그를 인식하려면 dangerouslySetInnerHTML을 사용하면된다. 하지만 위 처럼 사용하면 아래의 에러가 생긴다. Can only set one of `children` or `props.dangerouslySetInnerHTML`. 번역을 하자면 "`children` 또는`props.dangerouslySetInnerHTML` 중 하나만 설정할 수 있습니다."이다. 지금 태그안에 내용도 있고 p태그 props에도 값을 넣어서 생긴 문제인데 아래처럼 props에만 값을 넣으면 된다.
Can only set one of `children` or `props.dangerouslySetInnerHTML`.개발하다보면 const text = "정보를 등록해주세요." 처럼 string 문장안에 태그를 넣어서 렌더링을 해야될때가 있다. 문장안의 태그를 인식하려면 dangerouslySetInnerHTML을 사용하면된다. 하지만 위 처럼 사용하면 아래의 에러가 생긴다. Can only set one of `children` or `props.dangerouslySetInnerHTML`. 번역을 하자면 "`children` 또는`props.dangerouslySetInnerHTML` 중 하나만 설정할 수 있습니다."이다. 지금 태그안에 내용도 있고 p태그 props에도 값을 넣어서 생긴 문제인데 아래처럼 props에만 값을 넣으면 된다.
2021.05.24 -
Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'. 웹팩 설정중에 발생한 에러 입니다. devServer에서 Configuration타입이 존재하지 않는다고 합니다. 이 문제는 다른 @types와의 버전 문제이거나 타입스크립트에서 인식이 실패하여 나타난것입니다. 해결책은 아래의 링크 마지막줄처럼 webpack-dev-server 버전을 낮추는 방법이 있습니다. 하지만 이게 안통한다면 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570 webpack과 webpack-dev-server import를 아래와 같..
Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration' : webpack-dev-server 오류Object literal may only specify known properties, and 'devServer' does not exist in type 'Configuration'. 웹팩 설정중에 발생한 에러 입니다. devServer에서 Configuration타입이 존재하지 않는다고 합니다. 이 문제는 다른 @types와의 버전 문제이거나 타입스크립트에서 인식이 실패하여 나타난것입니다. 해결책은 아래의 링크 마지막줄처럼 webpack-dev-server 버전을 낮추는 방법이 있습니다. 하지만 이게 안통한다면 https://github.com/DefinitelyTyped/DefinitelyTyped/issues/27570 webpack과 webpack-dev-server import를 아래와 같..
2021.05.23 -
친구 중에 글로벌 설문조사 소프트웨어 기업에 다니고 있는 개발자가 있다. 이 친구가 새로 뽑을 신입의 기술면접과 코딩 테스트를 본다고 나한테 코딩 테스트하기 전에 테스트 해보고 싶다고 하여 친구의 코딩 테스트에 응해줬다. 실시한 코딩 테스트 조건은 이렇다. 1. React 프론트엔드 개발자이니 React를 사용한다. 2. Todo list app을 만들어 볼 것인데 다음의 주소의 api를 사용한다. https://documenter.getpostman.com/view/8858534/SW7dX7JG 3. 40분 이내로 끝낸다. 4. 로그인, 회원가입부터 시작. Todo list야 리액트를 배우는 데에 있어서 기초적인 프로젝트이면서도 웹 개발에 있어서 핵심적인 기능을 대부분 포함을하고 있다. 그리고 지금의 ..
SurveyMonkey 개발자가 알려준 React, Frontend 코딩 테스트 비결친구 중에 글로벌 설문조사 소프트웨어 기업에 다니고 있는 개발자가 있다. 이 친구가 새로 뽑을 신입의 기술면접과 코딩 테스트를 본다고 나한테 코딩 테스트하기 전에 테스트 해보고 싶다고 하여 친구의 코딩 테스트에 응해줬다. 실시한 코딩 테스트 조건은 이렇다. 1. React 프론트엔드 개발자이니 React를 사용한다. 2. Todo list app을 만들어 볼 것인데 다음의 주소의 api를 사용한다. https://documenter.getpostman.com/view/8858534/SW7dX7JG 3. 40분 이내로 끝낸다. 4. 로그인, 회원가입부터 시작. Todo list야 리액트를 배우는 데에 있어서 기초적인 프로젝트이면서도 웹 개발에 있어서 핵심적인 기능을 대부분 포함을하고 있다. 그리고 지금의 ..
2021.05.22 -
yarn build 할때 오류가 생겼다. CORS problem이나 null, undefined를 참조할 수 없는 흔한 에러가 아닌 FATAL ERROR: v8::HandleScope 에러가 발생 했을때 검색을 해도 사실 막상 들어가보면 내용이 시원찮다.자료 참고중에 그나마 힌트를 얻을 수 있었던 사이트다. answers.netlify.com/t/fatal-error-v8-createhandle-cannot-create-a-handle-without-a-handlescope/22957현재 노드 버전이 12버전이었는데 14버전으로 업그레이드 해주니 해결되었다고 한다. node version을 확인해보니 정말 12버전이었고 최신 버전으로 업그레이드 해주니 해결 되었다. 같은 증상이 있다면 node versi..
FATAL ERROR: v8::HandleScope::CreateHandle() Cannot create a handle without a HandleScopeyarn build 할때 오류가 생겼다. CORS problem이나 null, undefined를 참조할 수 없는 흔한 에러가 아닌 FATAL ERROR: v8::HandleScope 에러가 발생 했을때 검색을 해도 사실 막상 들어가보면 내용이 시원찮다.자료 참고중에 그나마 힌트를 얻을 수 있었던 사이트다. answers.netlify.com/t/fatal-error-v8-createhandle-cannot-create-a-handle-without-a-handlescope/22957현재 노드 버전이 12버전이었는데 14버전으로 업그레이드 해주니 해결되었다고 한다. node version을 확인해보니 정말 12버전이었고 최신 버전으로 업그레이드 해주니 해결 되었다. 같은 증상이 있다면 node versi..
2021.03.16