React
-
[TypeScript + React] 공통 UI 컴포넌트 interface 선언개발/TypeScript 2023. 1. 8. 16:39
공통 UI 컴포넌트를 쓰다 보면 부모 컴포넌트에서 전달해야할 props가 각기 다른 경우가 태반이다. 이럴 때 TypeScript에서는 어떤 식으로 interface를 작성해야 하는지 감을 못 잡고 있었는데 거금을 주고 강의 결제했더니 바로 거기서 튀어나왔다. 아주 값진 쓰임이었다...! 아래와 같이 인터페이스에서 [key: string]: any; 로 각종 props를 처리할 수 있게 넣어준 후 컴포넌트가 받을 props 선언하는 부분에서는 ...rest와 같이 spread 연산자로 풀어주면 끝 interface TextAreaProps { label?: string; name?: string; [key: string]: any; } export default function TextArea({ lab..
-
React 프로젝트 생성부터 깃허브 페이지 배포까지개발/React 2020. 2. 29. 14:32
웹개발자로 쪼금 끄적였답시고 시작하는 토이프로젝트마다 DB 연결부터 하고 보니 프로젝트 크기가 쓸데없이 커져서 항상 이걸 어디에 어떻게 배포해야할지....웹호스팅하려면 또 돈이 나가는데...하면서 집에서 대충 코드를 짜다가 말기만 수차례 그러다 리액트에 입문한지 어언 반년... DB 연결 없이 간단하게 돌아가는 앱 정도라면 내 사랑 깃허브가 제공하는 github page에서 배포가 가능하다는 것을 깨달았다...! 기쁨에 겨워 처음 리액트 어플리케이션 생성에서부터 배포하는 과정까지를 남겨본다. 1. 리액트 프로젝트 생성 원하는 폴더 위치로 이동 명령어 입력 : create-react-app [애플리케이션명] 소스 코드 수정 후 로컬에서 실행 2. github에 새로운 저장소 생성 편의를 위해 생성했던 애플..
-
[Mac OS] react.js 앱 초기화 시 error Command failed with exit code 1. 해결개발/문제 해결 2019. 3. 26. 16:04
난생 처음으로 맥OS를 써보는지라 진짜 엉망진창 와장창으로 소중한 맥북을 혹사시키고 있다.오늘은 react.js 기반으로 웹 어플리케이션을 하나 만들어보려고 설치했다. 신나게 설치 후 npm start 명령어를 날리자 라고 error Command failed with exit code 1 가 뜬다. ㅠㅠ조짐이 좋지 않지만 친절하게도 어떻게 해결해야할지 터미널에 찍어주므로 하나씩 따라해봤다. 첫번째 시도 : rm -rf yarn.lock / rm -rf package-lock.json -> 실패두번째 시도 : yarn upgrade -> 실패세번째 시도 : yarn install -> yarn 설치는 성공했으나 react 앱 초기화 실패네번째 시도 : rm -rf node_modules -> 성공!!!!..