react17 [React] Create React App 생성 및 초기 설정 Create React App Create React App 리액트 어플리케이션을 쉽게 만들 수 있게 해줌 많은 스크립트와 configuration 들이 도와줌 자동 새로고침, 즉각적인 CSS 포함 등의 기능 제공 CRA 실행 방법 1. nodeJS 설치 https://nodejs.org/en/ 에서 버전에 맞는 걸로 설치하기 2. nodeJS 설치 확인 cmd 에 node -v 실행 npx 도 확인 그럼 CRA 만들 준비 완료!! 3. Create-React-App 생성 cd C:\(사용할 폴더 주소) 명령어를 이용해 어플리케이션을 만들 폴더로 이동 npx create-react-app [사용할 app 이름] 자동으로 설치가 진행된다. 설치 완료 후, code (사용할 app 이름) 을 실행하면 자동으.. 2022. 2. 24. [React] npm 모듈 설치, 삭제 / install, uninstall 모듈 설치 npm install 모듈 삭제 npm uninstall 2022. 1. 16. [React] The engine "node" is incompatible with this module. 오류 해결 create-react-app 을 생성하려 했더니 해당 오류가 떴다. The engine "node" is incompatible with this module. Expected version... Found incompatible module... Aborting installation... 찾아보니 node 의 버전 문제 라고 한다. 따라서 Node.js 를 최신 버전으로 업데이트 해줘야 한다. 참고로 node 의 버전 확인은 node -v 로 확인할 수 있다. 나는 윈도우를 사용하기 때문에 npm install -g n 으로 업데이트를 시도했지만 제대로 실행되지 않았다... 그래서 그냥 Node.js 를 재설치 하니까 정상적으로 실행되었다. https://nodejs.org/en/ Node.js N.. 2022. 1. 16. [ReactJS] Conclusions - ReactJS 로 영화 웹 서비스 만들기 (13) 마무리 시간!! #7.8 - 7.10 Conclusions Summary 길이 제한 영화마다 설명의 길이가 제각각이다. summary 의 길이 제한을 두어 좀 더 깔끔한 UI 를 구성하도록 해보자. 235 를 최대 길이로 잡아보겠다. {summary.length > 235 ? `${summary.slice(0, 235)}...` : summary } summary 의 길이가 235 보다 크면 slice 를 이용해 235 까지 자르고 뒤에 ... 붙여주기 summary 의 길이가 235 보다 작으면 그대로 summary 출력 결과 Breaking Change Breaking Change : 버전을 업데이트하면서 코드가 깨져서 코드를 수정 해야하는 경우 React.js 에는 없다. => 예전 코드에 기반해서.. 2021. 12. 12. [ReactJS] Publishing - ReactJS 로 영화 웹 서비스 만들기 (12) 구현한 프로젝트를 GitHub Pages 로 배포하기 #7.7 Publishing gh-pages 설치 npm i gh-pages gh-pages : 결과물을 github pages 에 업로드 할 수 있게 해주는 패키지 github 에서 제공하는 무료 서비스이다. package.json build scripts 의 build 를 이용하면 웹 사이트의 production ready code 를 생성 production ready code : 코드가 압축되고 모든게 최적화 된다 npm run build => build 폴더가 생성됨 homepage 추가 package.json 에 homepage 추가 "homepage": "https://{github username}.github.id/{github rep.. 2021. 12. 12. [ReactJS] Parameters - ReactJS 로 영화 웹 서비스 만들기 (11) 사실상 ReactJS 강의의 마지막 이론 부분이다. Parameter 를 이용해 movie 의 id 를 넘겨받아보자. #7.6 Parameters 영화의 제목을 클릭하면 해당 영화의 정보 페이지로 넘어가도록 구현해보자. 그러기 위해서 영화의 id 를 주고받아야 함 React Router 는 동적인 url 을 생성할 수 있다. 여기서 동적 이라는 의미는 url 에 변수를 넣을 수 있다는 것. 동적 url 에서 Parameter 를 이용해 정보를 넘겨줄 수 있다. 이것을 이용해서 영화의 id 를 주고받을 것이다. App.js function App() { return ( ); } Detail 컴포넌트 부분의 Route 를 보자. "/movie/:id" 의 형태를 이용하면 id 부분에 변수 넣기 가능 Home.. 2021. 12. 12. 이전 1 2 3 다음
