Dev/reactJS14 React 실행 오류: npm ERR! errno -4058 해결 방법 React 실행 오류: npm ERR! errno -4058 해결 방법 npm ERR! errno -4058 오류의 이해와 원인 파악 React 개발 환경에서 가끔 마주치는 npm ERR! errno -4058 오류는 개발자들에게 당혹감을 줄 수 있습니다. 이 오류는 주로 Node.js와 관련된 패키지 관리자인 npm을 사용할 때 발생하는 문제로, 파일 시스템 접근과 관련된 문제에서 주로 발생합니다. 오류 메시지가 표시되는 주요 원인은 다음과 같습니다. 파일 또는 디렉토리 접근 권한 부족: npm이 필요한 파일이나 디렉토리에 접근할 수 없는 경우 발생합니다. 존재하지 않는 경로 참조: 설치하려는 패키지나 스크립트가 참조하는 파일/디렉토리가 실제로 존재하지 않을 때 발생합니다. 시스템 경로 문제: 시스템의.. 2023. 11. 22. 리액트 쿼리 v5 에서 바뀐 점 react query v5 react query v5 리액트 쿼리 v5 에서 바뀐 점 리액트 쿼리 v5의 변화에 대해 자세히 알아보겠습니다. 이 업데이트는 많은 중요한 변화를 포함하고 있으며, 특히 함수 호출 방식, 콜백 처리, 그리고 타입스크립트 지원 등의 분야에서 변화가 이루어졌습니다. react query v5 함수 호출 방식의 단순화 하나의 객체로 단일 서명 지원: 이전 버전에서는 useQuery와 같은 함수들이 여러 오버로드를 가지고 있었으나, 이제는 단일 객체 형식만을 지원합니다. 이 변경으로 인해 타입스크립트 유지 관리가 간소화되고, 런타임 시에 파라미터 유형을 확인하는 절차가 단순화됩니다. // 이전 useQuery(key, fn, options) // v5에서 useQuery({ queryKey, queryFn, .. 2023. 11. 16. 리액트 프로젝트의 폴더 구조 리액트 프로젝트의 폴더 구조 리액트(React)는 유저 인터페이스를 구축하기 위한 자바스크립트 라이브러리로, 컴포넌트 기반 아키텍처를 중심으로 한다. 이러한 구조는 개발자가 대규모 어플리케이션을 구축할 때 모듈성, 재사용성, 그리고 관리 용이성을 제공한다. 리액트 프로젝트에서 효율적인 폴더 구조를 갖추는 것은 프로젝트의 유지보수성을 높이고, 팀 작업의 생산성을 촉진하는 데 매우 중요하다. 본 글에서는 리액트 프로젝트를 위한 폴더 구조에 대해 논의하며, 이 구조가 왜 중요한지, 그리고 어떻게 구성되어야 하는지에 대한 깊이 있는 통찰을 제공할 것이다. 리액트 프로젝트의 폴더 구조 중요성 리액트 프로젝트의 폴더 구조를 적절히 구성하는 것은 다음과 같은 여러 가지 이유로 매우 중요하다: 코드의 가독성: 체계적인.. 2023. 10. 30. 리액트 초기 세팅 환경 구축하기: Windows에서의 React 설치 가이드 리액트 환경 구축하기: Windows에서의 React 설치 가이드 안녕하세요! 이번에는 리액트(React)를 Windows 환경에서 설치하는 방법에 대해 알아보겠습니다. 리액트는 페이스북에서 개발한 프론트엔드 라이브러리로, 주로 컴포넌트 기반의 개발에 중점을 두고 있습니다. 이제부터 순차적으로 진행해보겠습니다. 리액트 초기 세팅 전 준비 사항 리액트를 설치하기 전에 몇 가지 준비 사항이 필요합니다. 아래와 같이 진행해보세요. Node.js 설치: 리액트를 사용하기 위해서는 Node.js가 필요합니다. Node.js는 Webpack과 Babel과 같은 도구를 사용하기 위해 필요한 기반 환경을 제공합니다. Node.js 공식 웹사이트에서 설치하세요. Yarn 설치: Node.js와 함께 설치되는 패키지 매니.. 2023. 8. 22. javascript classList.toggle로 jquery addClass, removeClass, toggleClass 구현하기 / 더보기 버튼 클릭시 영역 확장 아래처럼 더 보기 버튼을 누르면 위 영역이 확장되면서 내용을 더 보여주는 컴포넌트를 구현하려고 한다. 사실 jquery라면 일도 아니지만, javascript 특히 react에서는 귀찮다. 여러분이 느끼셨을 것 같지만, JavaScript, 특히 React를 사용하면서 DOM을 선택하는 작업이 매우 번거로울 때가 많습니다. 그리고 이것은 jQuery를 사용하시던 분들에게는 특히 더 그렇게 느껴질 수 있습니다. jQuery의 힘을 알고 있는 우리에게 이는 상당히 실망스러운 측면 중 하나일 것입니다. 그러나, 이렇게 불편함을 겪고 있는 것은 저희들만은 아닙니다. 사실, 이 문제를 해결하기 위한 방법은 많습니다. 여러 가지 가능한 방법들이 있지만, 주요한 두 가지 해결책은 ref 사용과 useState 사용입.. 2022. 11. 3. autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated. 뜻 해결 방법 /end value has mixed support, consider using flex-end instead / Node-sass incompatible with ^4.0.0 VSCODE업데이트 이후 갑자기 에러가 뜨기 시작했다. 하아...뭐야... 아 물론 내 소스는 아니다. 난 이미 해결을 했으므로... WARNING in ./node_modules/bootstrap/dist/css/bootstrap.min.css (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[5].use[2]!./node_modules/source-map-loader/dist/cjs.js!./node_modules/bootstrap/dist/css/bootstrap.min.css) Module .. 2022. 10. 20. 리액트 모달창 드래그 방법 react bootstrap modal draggable jquery에서 bootstrap 모달 창을 드래그하는 방법은 굉장히 직관적이고 쉽다. 반면에 리액트 부트스트랩 콤포넌트 라이브러리를 사용하면서 react bootstrap modal draggable 하기는 쉽지 않다. 아니, 쉽다. 쉬운데 레퍼런스가 부족하다. react bootstrap, react-draggable만을 사용해서 정통으로 리액트 부트스트랩의 모달을 드래그하는 것을 웬만하면 포기하고 antd, dragm 조합으로 넘어가는 사람들이 많은 듯하다. 구글에서 react Bootstrap modal draggable주제로 검색하면, 대부분 리액트 예제를 클래스형으로 설명해두고 있다. how to make react-bootstrap modal draggable I've tried making.. 2022. 9. 13. 리액트 api axios 엑셀 다운로드 버튼 구현 react.JS filesaver.saveAs javascript blob response.headers 값에서 filename추출하기 리액트 api 엑셀 다운로드 버튼 구현 filesaver.saveAs javascript blob response.headers 값에서 filename 추출하기 리액트를 제대로 시작한지 그리 오래되지 않은 관계로, php나 angular에서는 당연하게 되는 것들이 react에서는 제약이 많은 경우가 있다. 특히 파일다운로드를 구현하는데 좀 애를 먹긴 하는데, 그게 엑셀 다운로드라면 더... 일단 엑셀 파일은 백엔드에서 만들어준다 치고... api를 통해서 axios로 token을 통해서 인증도 있어야 한다. token axios는 별제로 다루도록 하고, 일단 axios instance를 만들어 둔 프로젝트에서 엑셀 다운로드를 구현하는 법은 filesaver컴포넌트를 사용하면 간단하다. 다만 멋들어지게 f.. 2022. 2. 4. react-toastify new line 줄바꿈 리액트 토스트 라이브러리를 사용하다 보면, 토스트를 띄울 때 2줄을 써야 할 때가 있다. 한 줄이면 문제가 안되는데, 개행처리를 해서 이쁘게 보이고 싶을 때는 문제가 된다. 리액트는 개행처리가 까다롭다. \n을 사용하면 될 것 같지만, \\n이건, \n이건 이건 다 안 먹힌다. react-toastify가 toastMsg로 입력된 값을 자동으로 텍스트로 전환시켜버리기 때문이다. 그래서 리액트 토스트에서 멀티라인을 사용하려면 함수로 직접 쏴줘야 한다. 컴포넌트로 사용하기 때문에, 리덕스를 통해서 props를 넘기는데, 이번 프로젝트에서는 보통 이렇게 사용했다. dispatch( createToastNoti({ toastType: "SUCCESS", toastMsg: "회원가입이 저장되었습니다.이메일 인증을.. 2022. 1. 5. 리액트 데이트피커 포맷 api axios error문제 react datepicker date format axios not working 리액트에서는 jquery용 데이트 피커를 사용할 수 없다. 아니 사실 리액트용 데이트피커인 react datepicker가 훨씬 깔끔하게 사용되기 때문에 굳이 제이쿼리 데이트 피커를 붙여야 할 필요가 없다. 사실 아직 리액트가 초짜라 react datepicker를 온전히 다루지는 못하고 있기 때문에 정석으로 설정하는 방법은 사실 나도 잘 모르겠다. 일단, 신규 프로젝트에서 datepicker를 사용할 일이 있어서 설치했다. yarn add react-datepicker 혹은 npm i react-datepicker 로 설치 하면 되겠다. 그런데 문제는 이렇게 설치하고 import DatePicker from "react-datepicker"; 했을 경우 스타일 깨짐 문제가 발생했다. 이유는 모르겠지만 .. 2021. 5. 27. ReactJS input, select disabled 제어. Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? ReactJS input, select disabled 제어. index.js:1 Warning: Received the string `false` for the boolean attribute `disabled`. The browser will interpret it as a truthy value. Did you mean disabled={false}? at input at td at tr at tbody at t.. 2021. 4. 14. 리액트 Warning: Use the `defaultValue` or `value` props on <select> instead of setting `selected` on <option>. 리액트 프런트엔드 개발 중에 select를 사용할 때 jquery를 쓰던 습성대로 코딩을 하다 보면 반드시 만나게 되는 흔한 오류 중의 하나가 바로 selected를 사용하지 말라는 경고다. Warning: Use the `defaultValue` or `value` props on instead of setting `selected` on . 'selected'대신에 select에 defaultValue 또는 value props를 사용하라는 뜻이다. 잘못 쓴 리액트 셀렉트 사용법 선택안함 가맹 해지 ; 아래와 같이 쓰면 간단하다. 선택안함 가맹 해지 ref props는 필요에 따라 사용된 것이니 신경 쓰지 않아도 무방하다. 만약 select에서 멀티플 셀렉트로 선택할 경우에는 value를 배열로 주면.. 2021. 3. 26. 이전 1 2 다음
