This is it. it's IT.

npm = node package manager npx = executed node package binaries (npm 안에 포함되는 개념) yarn = npm보다 더 안정적인 프로젝트 관리자(근데 자료는 npm보다 별로 없다고 한다. )

npx create-react-app my-app --template typescript 타입스크립트를 적용한 리액트 프로젝트를 만들기 위해서는 다음의 명령어를 터미널에 입력하도록 합니당. npm install @types/styled-components typescript에서 styled-components를 사용할 때 cli로 설치해야할 것

npm i styled-components 터미널에 입력한다. 그러면 스타일 컴포넌트와 관련된 것들을 다운로드 받을 수 있다. .. . import styled from "styled-components"; App.js 상단에 import해서 가져와준다. import styled from "styled-components"; const Father = styled.div` display: flex; `; const BoxOne = styled.div` background-color: teal; height: 100px; width: 100px; `; const BoxTwo = styled.div` background-color: tomato; height: 100px; width: 100px; `; fu..

create-react-app 명령어를 사용하여 리액트 프로젝트를 생성할 때, 보안오류로 생성이 거부되는 문제가 있다. 이럴 때는 관리자 권한으로 powershell을 실행시켜서 관리자 권한을 획득하도록 지시해주어야 한다. [PowerShell]이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다. 에러 발생 Visual Studio Code에서 create-react-app 명령어로 React 프로젝트 생성 도중 에러가 발생하였습니다. PowerShell 실행 정책에서 스크립트 실행을 허용하지 않을 때 발생하므로 실행 정책을 변경합 developer-talk.tistory.com 시작메뉴에서 windows powershell을 관리자 권한으로 실행 후 다음의 명령어를 입력한다. Set..

동적인 값 = 상태(State) 사이트에서 값이 동적으로 바뀌는 경우, 상태를 관리해야 한다. useState()는 16.8버전부터 도입된 Hooks라는 기능의 일부분이며 함수형 컴포넌트에서도 상태를 관리할 수 있게 한다. 원래 코드는 이렇다 const numberState = useState(0); const number = numberState[0]; const setNumber = numberState[1]; 이 코드를 간략화시켜 아래와 같이 만들 수 있다. const [number, setNumber] = useState(0); 첫번째 원소 number = 현재 상태 값 변수 두번째 원소 setNumber = 상태 값을 갱신해주는 Setter함수 useState 괄호 안의 값 = 상태의 초기 값 ..

index.html html파일 script 부분 이전에는 html요소를 먼저 만들고 js에서 그것을 조작했다면, react에서는 js를 통해 html요소를 만들게 된다. 이로써 얻을 수 있는 이점은 사용자들에게 보여질 내용을 컨트롤 할 수 있다는 것이당 ^.^ 라우팅 라우팅이란? React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. - 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다. https://goddaehee.tistory.com/305 [React] 6. React Router (리액트 라우터) 사용하기 6. [Rea..

https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related React Developer Tools Adds React debugging tools to the Chrome Developer Tools. Created from revision 2f8f60ca8 on 10/31/2021. chrome.google.com React Developer Tools 이 크롬 익스텐션 도구를 설치하면 개발자도구에 react 탭이 생기며, 컴포넌트 별로 요소를 볼 수 있다.... !!!!

다른 프레임워크에서 mvc구조를 사용하는데에 비해 리액트는 flux 구조를 사용한다. ? Action -> Dispatcher -> Store 단방향 데이터 흐름이다. 리액트가 담당하는 부분은 mvc 중 view 뿐이다. 이것이 장점인 이유는 상황에 따라 다른 라이브러릴를 섞어서 쓸 수있기 때문이다? (ex. Redux) 또한 가상 돔(Virtual DOM)을 활용하여 렌더링 시간을 줄여줄 수 있다. 정보가 바뀔때마다 전체를 다시 로드해오면 시간이 많이 걸리고 비효율적이지만리액트는 필요한 페이지만 그때그때 다시 가져오는 것이다... (SSR : server side rendering, CSR(Client Side Rendering))어떻게 이렇게 하느냐!??!?각각의 UI를 Component로 묶어 캡슐..