본문 바로가기
반응형

📍 Front-End72

[React/리액트] react-scripts: command not found / Command failed with exit code 127. 에러 발생 리액트 프로젝트를 열어서 start를 했더니 아래와 같은 상황이 발생했다 $ portfolio % yarn start yarn run v1.22.10 warning ../../../package.json: No license field $ react-scripts start /bin/sh: react-scripts: command not found error Command failed with exit code 127. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. 에러의 원인 정확하진 않지만 git에 있는 리액트 프로젝트를 내 로컬에 다른 이름으로 clone 받았는데 그러면서 경로가 꼬인.. 2022. 2. 13.
[React/리액트] 리액트로 .txt 파일 다운로드 예제 다운로드 버튼 클릭 시 사용자의 정보를 .txt 파일로 다운로드되게 해 달라는 요청을 받았다. 거두절미하고 바로 예제로 들어가보겠습니다 1) 컴포넌트 예제를 위해 간단한 버튼을 하나 생성하여 click 하면 exportTXT() 함수가 실행되게 작성했습니다 return exportTxt()}>export 2) 함수 const exportTxt = useCallback(() => { let fileName = '파일이름.txt'; let output = "string 타입의 데이터"; const element = document.createElement('a'); const file = new Blob([output], { type: 'text/plain', }); element.href = URL.cre.. 2022. 2. 10.
[자바스크립트/javascript] 두 배열의 값이 같은지 비교하는 방법 개발하면서 두 배열 안의 값이 같은지 비교해야 될 때가 많다. 상황에 따라 비교하는 방법도 여러 가지라 이번에 한 번 정리해봐야겠다. 배열 A와 배열 B의 값이 같은지 비교할 때 const arrA = [1,2,3,4,5] const arrB = [1,2,3,4,5] arrA === arrB // 당연히 false.. arrA.toString() === arrB.toString() // true JSON.stringify(arrA) === JSON.stringify(arrB) // true - arrA와 arrB는 배열의 주소 값을 가지고 있기 때문에 === 로 비교할 경우 당연히 false를 출력한다 - 배열을 toString()으로 형 변환 한 다음 비교했기 때문에 true를 출력한다 - 두 번째 방.. 2022. 2. 9.
[React-select] Select 컴포넌트에 z-index 적용하기 React-select 라이브러리를 이용해서 Select 컴포넌트를 생성했는데 컴포넌트를 클릭하면 펼쳐지는 dropdown 영역이 다른 컴포넌트에 가려서 보이지 않았다. 공식 홈페이지에 있는 문서를 참고하여 수정해봐도 안됨,,,, 먼저 내가 첫번째로 시도한 방식은 아래에 있는 공식홈페이지에 Docs를 참고하였다 React-Select A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support. jedwatson.github.io const CustomSelect = ({ }) => { const customStyles = { container: (provided) => ({ .. 2022. 2. 4.
반응형