오늘도 난 존버한다

https://legacy.reactjs.org/  React – A JavaScript library for building user interfacesA JavaScript library for building user interfaceslegacy.reactjs.org tutorial > developer tools  다운로드  다운 완료 후 크롬 창을 닫았다가 다시 재실행 한다재실행이 되면 개발자도구에서 Compnents 를 클릭해 아래를 확인할 수 있고 props에서 작성된 sub 또는 ttitle을 바로 변경해 확인도 가능하다!대박

리액트 웹페이지에서 doc 를 클릭해 오른쪽 매뉴를 보면 아래를 확인할 수 있다.이를 확인해서 저번에 배운것에 이어서 코드를 래팩토링 한다 https://legacy.reactjs.org/docs/components-and-props.html  Components and Props – ReactA JavaScript library for building user interfaceslegacy.reactjs.org   저번 시간의 코드, 정적인 header코드를 리팩토링을 해보자!  - , , 태그를 다른 웹페이지 또는 패키지/소프트웨어로 만들어 인터넷에 올리면 다른 사람이 자신의 애플리케이션에 사용할 수 있다- a태그의 속성은 href 링크a href="1.html">HTMLa>- 속성 html의 태그..

순수한 html 코드를 react로 잘 정리정돈을 해보자!  객체지향, App이라는 클래스를 만들고 react의 Compnent 라고 하는 react가 갖고있는 클래스를 상속해 새로운 클래스를 만든다. 그리고 그 클래스는 render라는 메소드를 가지고 있다.  - 반드시 render() 가 있어야 한다- 일반적인 함수는 funcion이 있지만 --> funcion render() 이런식으로~ 그러나 자바스크립트의 최신 스펙이 들어가 있는 클래스라는 것 안에 소속되는 함수는 funcion을 생략한다.- 중요! Component를 만들땐, 반드시 하나의 최상위 태그로 시작되고 써야만 한다.  이제 Component를 만들어보자!pure.html에 있는 코드를 App.js에 정리해 하나 씩 넣어준다 , , ..

지금까지 유튜브를 보면서 잘 진행되다가 pure.html에서 막혔다. 알려주시는데로 진행했다.저번에 했던데로 Visual Studio에서 진행 > public 에서 pure.html를 만들어주고 그 안에 html 코드를 넣어주었다그런데 실행이 안되고 계속 같은 index.html만이 실행된다.. 30분이상 오류를 구글로 찾아보면서 해결해보았다. 맨날 생각하는 왜 안되지? ㅎㅎ 알고보니 간단한 문제해결이었다.  캐시 비우기 및 강력 새로고침을 누르니, pure.html이 실행이 된다... 휴.. 이제 계속 진행할 수 있겠다! 생활코딩https://www.youtube.com/watch?v=QG4RxNHz-bc&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=10

시작하기전, index.css 와 App.css를 모두 지워준다 Terminal에서 npm run start를 했으면 웹에 http://localhost:3000/index.html 를 실행 > 개발창 열기 F12  새로고침버튼에 오른쪽 마우스 클릭을 하면 캐시비우기 및 강력새로고침 버튼을 누른다그러면 아래 전체용량이 1.7MB 라는 것을 확인할 수 있다 한 개 없는데 용량이 1.7MB 이상 되는 이유는 react가 개발의 편의성을 위해 여러가지 기능을 추가해 놓은 상태이기 때문이다. 그러므로 create react app의 개발환경은 파일의 무게가 상당하다.여기서 문제는 사용자들이 사용하게 하면 안되고 또 보안적인 문제가 생길 수 있다 다시 Terminal에서 npm run build 를 입력후 엔터를..

Visual Studio를 실행파일은 바탕화면에 만들어놓았던 react-app을 선택해 열어준다. Visual Studio에서 view > terminal를 선택해 아래 창을 띄어준다 Terminal 를 선택한 후 npm run start 입력 후 엔터를 치면 실행이 시작되고 웹 브라우저 아래 창이 띄어진다실행:  npm run start  실행을 off 하고싶으면 ctrl + c 를 누르면 꺼진다다시 실행시키고 싶으면 npm run start 를 terminal에 입력해주면 된다.

npm 다운로드 > create react app > create react app 이용해 개발환경 완성하기 1. Node.js 다운로드 https://nodejs.org/en 2. 다운 완료 후 명령cmd 창에 npm -v 쓰고 엔터를 누르면 아래처럼 번호가 나온다. 잘 설치된 버전의 숫자가 나온다. 3. 위처럼 나오면 다시 npm install -g create-react-app 을 입력 후 엔터를 친다.--> 혹시 에러가 생겼을 경우 sudo npm unistall create-react-app 을 입력하고  다시 엔터를 친다-g: global 의 약자로 어디서든지 실행할 수 있다. 4. 완료 후 다시 create-react-app -V를 입력하면 설치한 프로그램 버전이 나온다 * 참고 npx cr..

리액트 강의를 찾아보다가 유튜브 생활코딩의 리액트가 있어서 공부를 시작하려한다이전에 생활코딩 이고잉 분의 강의가 너무 좋아서 이 강의도 믿고 보게 되는것 같다. 시작은 아래 웹페이지로 리액트를 볼 수 있는 웹https://legacy.reactjs.org/ 여기서 리액트를 실행할 수 있는 여러 방법들이 있다.그 중에 생활코딩에서 추천해준 것은 CodeSandbox 이다.리액트를 설치하지 않고 온라인 상으로 공부할 수 있다고 한다. 또 아래 많은 것들이 있는데 그 중에 toolchains 이라는 것이 있다. 이것은 우리가 리액트로 개발할 때 어떤 목표에 따라 그 목표를 달성하기 위해 필요한 여러 개발환경 도구들을 잘 모아 해결해주는 것을 toolchains이라고 한다고 한다.  Learn how 를 클릭하..