본문 바로가기

React/React 기본11

[생활코딩] React - 샘플 웹앱 실행 Visual studio code의 장점은 터미널을 선택하면 명령어로 컴퓨터를 제어할 수 있는 프로그램이 내장되어 있다. 저 터미널에 yarn start라고 치면 새로운 웹 페이지가 뜬다. ctrl + C 를 누르면 실행이 중지된다. 저 웹앱은 public 폴더의 index.html을 실행한 결과이다. 컴포넌트들은 저 id가 root 태그에 들어가도록 약속이 되어있다. APP 컴포넌트가 들어가있는것을 확인해볼수있다. 대부분의 파일은 src디렉토리안에 넣을것이다. 그 중에서 진입 파일은 index.js라는 파일이다. App.js 파일이 함수형으로 선언되어 있는것을 class형식으로 변경해주자. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 7. 25.
[생활코딩] create-react-app 설치 npm으로 create-react-app 을 만들것이다. ※ 만약 설치 시 EACCES 에러가 발생한다면 저 명령어 앞에 sudo를 붙여준다. npm과 npx 차이 npm이 프로그램을 설치하는 프로그램이라면, npx는 이 create-react-app 이라는 프로그램을 임시로 설치해서 딱 한번 실행시키고 지우는 애라고 생각하면 된다. (공간을 낭비하지 않을수있고 매번 다운받아야되므로 최선버젼상태 유지가능) 이제 개발환경을 어디에 셋팅할것인지 알아보자. react-app이라는 폴더를 만들어서 cmd로 그 폴더가 있는 경로로 이동한 다음에 create-react-app . (점을 꼭 적어준다)이라고 입력하면 리액트 환경이 만들어진다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부.. 2020. 7. 25.
[생활코딩] React - 1 수업소개 / 2 공부 전략/ 3 개발환경의 종류 생활코딩 www.youtube.com/playlist?list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi 사용자 정의 태그(컴퍼넌트)를 만들어줄수있다. Component의 좋은점은 1. 가독성 2. 재사용성 3. 유지보수 CODING -> RUN -> DEPLOY 공식문서에 익숙해 지는것이 좋다. https://reactjs.org/ ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 7. 23.