반응형 Frontend/React5 [React] Router 실습 (+배포 완료, 소스코드 공유) React로 간단한 웹을 만들어보았는데, 제작하면서 확연히 느낀 React의 특징이 있었다. 가독성이 좋음 - 컴포넌트들을 여러 파일로 쪼개서 조립하는 원리여서 소스코드가 복잡하지 않다. 유지보수에 좋음 - 위의 이유로 중복 코드도 많이 줄일 수 있고, 좋은 가독성에 따라 물론 유지보수도 훌륭하다. 속도가 매우 빠름 - 일반 웹사이트들끼리 링크로 넘나들때의 로드 시간은 1초정도 걸리는데에 반해, React Router은 컴포넌트만 가져오는 식이라 눈깜짝할새에 로드된다. 웹사이트 주소 jooyeokkim.github.io/React-SimpleProject-Algorithm/ React App jooyeokkim.github.io 깃허브 소스코드 github.com/jooyeokkim/React-Simpl.. 2020. 10. 7. [React] JSX expresstion must have one parent element 오류 해결 JSX expresstion must have one parent element 해당 오류는 return할 요소가 2개 이상일 때 주로 발생하는 오류이다. javascript에서 return은 하나의 요소를 리턴 할 수 있다. 여러 요소들을 리턴하고 싶다면 태그로 감싸서 하나의 요소로 묶으면 된다. 오류 메세지가 사라진 모습을 볼 수 있다. 2020. 9. 29. [React] Component 단위로 요소 검사하기 chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related?hl=en React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision fed4ae024 on 7/15/2020. chrome.google.com Chrome 에서 이 툴을 추가한다. 요소 검사에 들어가면 Components 라는 메뉴가 추가 되었음을 알 수 있다. 본인은 Subject 라는 이름의 컴포넌트를 만들었고 Components에 들어가니 App에 Subject라는 하위 컴포넌트가 추가 된 것을 볼 수 있.. 2020. 9. 23. [React] React 프로젝트를 Github에 배포하기 배포 하기에 앞서, Github 저장소에 프로젝트가 업로드 되어있어야 한다. 업로드 및 연동 방법은 이 포스팅을 참고하자. https://kimcoder.tistory.com/78 과정은 복잡하지 않다. 해당 프로젝트의 커맨드 라인에서 npm install gh-pages --save-dev 를 입력하자 gh-pages 패키지를 프로젝트에 설치하겠다는 의미다. 설치가 끝났으면 프로젝트 폴더 내에 있는 package.json 파일에서 다음과 같이 3줄을 추가하자. 단, homepage는 반드시 여러분의 깃허브 저장소 주소를 입력해야 한다. 그리고 커맨드 라인에서 npm run deploy를 입력하면 배포가 끝난다. 여러분들이 gh-pages를 무사히 설치 했다는 사실은, 저장소의 settings에 들어가서.. 2020. 9. 1. [React] React를 git과 연동하여 버전관리 하기 React와 git을 연동하면 어떤 것이 편해질까? React 프로젝트를 Github에 저장하여 언제 어디서나 이어서 수행할 수 있을 뿐만 아니라, 프로젝트 내에서 수정 사항이 있을 시 변동 정보가 감지되어 수정된 목록을 확인 할 수도 있고, 수정된 파일만 commit 하여 바로바로 Github 저장소에 업데이트 할 수 있다. 아래 사진 App.js 19줄에서 Learn React!!!! 에서 ! 하나를 더 붙여 Learn React!!!!! 로 만들고 File을 저장했더니 좌측 3번째 메뉴에서 Changes에 1이 뜬 것을 볼 수 있다. 그 파일은 역시 App.js이고 ! 하나가 더붙었다는 변동 정보를 감지 한 것이다. 여러분들이 이 연동 과정을 수행하기 위해 사전에 해놓아야 하는 2가지가 있다. Vi.. 2020. 9. 1. 이전 1 다음
