React-DOM 공식문서 React를 사용하면 React-Dom을 볼 수 있는데 아래의 공식사이트에서 자세한 것을 알 수 있습니다. React-Dom 공식사이트 설명 ReactDOM – React A JavaScript library for building user interfaces ko.reactjs.org 내가 이해한 React-DOM은? 리엑트는 순수 자바스크립트로 컴포넌트를 만들어 브라우저를 구성합니다. 그런데 브라우저는 CSS, HTML 그리고 순수 자바스크립트를 이용할 수 있습니다. 즉, 위의 3 가지만 브라우저는 이해합니다. 그런데 리엑트를 보면 순수 자바스크립트와 다른 문법을 볼 수 있습니다. 이러한 다른 부분은 Babel 을 통해 순수 자바스크립트로 변환되어야 합니다. 그래야 브라우저..

React에서 Font Awesome 을 사용할 경우 이 블로그를 봐주세요! 공식문서 Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com FontAwesome 설치 npm 또는 yarn 을 이용하여 아래와 같은 명령어로 설치 가능합니다. // npm 일 경우 npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fo..

이번 글은 웹 게임을 만들며 배우는 React (By ZeroCho) 공부하면서 정리한 글 입니다. 1. 시작하기 리엑트를 사용하기에 앞서 필요한 준비가 있습니다. React: 리엑트 핵심 코드 및 문법 사용하기 ReactDOM: 사용한 리엑트를 웹에 보여주기 (렌더링) 위의 두 가지를 사용하기 위해 여기 링크로 접속 또는 아래의 CDN 링크를 복사 CDN 링크 – React A JavaScript library for building user interfaces ko.reactjs.org 위치는 아래와 같이 HTML 의 Head tag 안에 합니다. 그럼 이제 준비는 다 되었습니다. 2. 컴포넌트 만들기 컴포넌트를 만들기 위해 먼저 특정 tag를 가리키는 에 Id를 넣습니다. 이 태그에 React 문법..

React에서는 컴포넌트를 사용하는데 있어서 두 가지로 분류 1. 함수형 컴포넌트 2. 클래스 컴포넌트 함수형 컴포넌트 함수형으로 생겼으며 아래와 같이 참조 function App() { return ( Function Component ); export default App; 함수 형태 => Return 한 것을 스크린에 표시 클래스 컴포넌트 형태 class App extends React.Component { render() { return( Class Component ); } } export default App; 리엑트 컴포넌트를 확장시켜 가져와 사용 클래스 리엑트 컴포넌트는 return을 가지고 있지 않고 render 메서드를 가지고 있음 render 메서드 안에서 return을 사용하여 스크..

사전 준비 - NodeJs 설치 (Node -v 으로 버전 확인) NPX 설치하기 npm 5.2.0 이상에서는 자동으로 NPX 가 설치됨 npm 버전 확인하기 npm-v NPX 사용 이유 NPX 는 왜 사용해야 할까 라는 의문이 들었는데 NPM 이라는 무거운 패키지 안에는 자주 사용하지 않는 파일들이 로컬에 남는 것 최신 버전에 해당하는 패키지를 설치 및 실행 시 이전 버전 패키지를 제거 해줌 실행방법 아래와 같이 명령어를 입력 npx create-react-app 폴더이름 자세한 내용은 아래의 공식 문서 사이트를 이용가능 공식 문서 사이트 Create a New React App – React A JavaScript library for building user interfaces reactjs.org..

여러 페이지가 있는 싱글 페이지 애플리케이션에서 (SPA) 현재 페이지에서 다른 페이지의 이동을 하기 위해 사용하는 필요한 라이브러리 입니다. 1. 설치 설치 방법은 아래와 같은 코드를 입력 npm install react-router-dom 또는 해당 링크를 누른 후 따라하시면 됩니다. 2. 사용방법 크게 두 가지로 아래와 같이 나누어 지는 거 같습니다. - BrowerRouter import { BrowserRouter } from 'react-router-dom' - HashRouter import { HashRouter } from 'react-router-dom' 차이점은 사이트에 접속했을 때, 해쉬태그 # 유무 입니다. 또 필요한 기능이 아래와 같습니다. -Route 해당 페이지에 접속할 수 ..