[리액트] html,css,react로 간단한 블로그 만들어보기(css오류 해결방법/ npx create- react-app 보안오류 해결방법)

- 기존 웹사이트에 react 적용

link는 html과 외부 리소스 링크를 연결해주는 역할 

-ex. css나 웹브라우저의 아이콘 같은 것을 불러옴.

href는 경로 

css 오류 해결방법
html과 css 파일은 동일한 디렉터리(같은 폴더) 안에 있어야 함! 

react 사용. dom container! virtual dom과 빠른 렌더링이 장점인 리액트.

id="root"는 버츄얼 돔의 시작점

자바스크립트 두 번 불러오기. mybutton 이라는 react component 만들어야함

마지막 두 줄의 코드는 리액트 돔에 랜덤함수를 사용해서 리액트 컴포넌트를 돔컨테이너 안에 랜더링 하는 코드

필요한 이유: 스크립트 태그를 사용해서 컴포넌트를 가져왔다고 해도 컴포넌트가 화면에 보이지 않기 때문

-> 직접 누르면 state가 변경됨 ( click here! 누르면 clicked라고 뜸)

---

-React, ReactDOM 대소문자 구분 확실히 하기

-React.useState, React.createElement 대소문자 구분 확실히!

이 부분도 JavaScript오류와 마찬가지로 대소문자에 문제가 있음.

몰랐던 사실은 script 태그가 로드된 순서 중요하다는 것! ★

같은 폴더 안(같은 디렉토리 안)에 안들어있었더니 css 적용 되지도 않음..

---

-creat- react- app 사용하기 (npx 다운로드 방법)

npx : npm 패키지를 설치한 이후에 실행까지 해주는 명령어. 패키지를 정해진 위치에 설치하고 실행하면 번거롭기 때문에

1. npx create-react-app <프로젝트 이름> 입력
2. ok to proceed?(y)가 뜨면 y라고 입력하기

 

- Terminal 에서 create-react-app 오류 (보안오류 PSSecurityexception)

 

- Terminal 에서 create-react-app 보안 오류 해결 방법

 1. powershell을 검색한다
2. 마우스 오른쪽 버튼 클릭 후 '관리자 권한으로 실행'을 누른다
3.  Set-ExecutionPolicy - Scope CurrentUser- ExecutionPolicy Bypass를 입력한다
4. 프롬포트가 표시되면 Y 를 입력하여 정책 변경을 승인한다
 다시 vs code에서  terminal에 'npx create-react-app <하고싶은 프로젝트 네임>'을 실행한다

 

---

 

$cd 프로젝트 이름

cd는 change directory의 약자. window 탐색기에 비유하자면 폴더를 더블클릭해서 안으로 들어가거나 뒤로가기 버튼을 눌러서 빠져나오는 역할. 

$npm start

 애플리케이션 실행