Javascript/React

[React] fontawesome 리액트로 가져오기

https://fontawesome.com/v5/docs/web/use-with/react React The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome. fontawesome.com 위 세줄을 야무지게 다운받아 준다. npm i --save @fortawesome/fontawesome-svg-core npm install --save @fortawesome/free-solid-svg-icons npm install --save @fortawesome/react-fontawesome import React from..

[React] 리액트 라우터와 관련 Hooks 정리

- 라우터 개념이해 + Link 개념 - restful route 개념 이해 - react hook 중에서 useNavigate, useParams, useSearchParams이해 Route는 경로란 뜻이다. 웹페이지를 여러개 만들고, 이 각각의 웹페이지를 가기 위한 경로가 필요하다. 설치 명령어 npm install react-router-dom BrowserRouter 다른 창의 URL에 대한 변경 사항을 추적하는 데 사용할 수도 있다 import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , root ); R..

[리액트] 컴포넌트 단축키 깡패 rafce

리액트의 최고 장점, 컴포넌트라는 개념은 개발자가 원하는글 묶어서 태그화(컴포넌트)화 시킬 수 있다는 것이다. Box.js로 작명한 js 파일에 rafce 작성 후 엔터치면! import React from 'react' const box = () => { return ( ) } export default box 위와 같은 템플릿이 바로 만들어진다. 컴포넌트 만들 시 주의 사항: 컴포넌트 이름은 반드시 대문자로 시작해야 한다. 이는 리액트가 컴퓨넌트와 일반 html 태그를 구별하는 방법이 대묹바로 시작하는지 여부를 검토하기 때문이다. 1. 반복되는 아이템 2. 기능별 아이템(테스트, 유지보수 용이) 3. 나중에 재활용될 것으로 예상되는 기능 \first-react\src\App.js import "./A..

[리액트] 환경설정

요약: npx create-react-app 폴더명 npm start 싱글페이지애플리케이션인 리액트는 매 페이지를 전환하는 것이 아니라 자바스크립트로 하나의 HTML 페이지 안에서 계속 새로운 그림을 그려나가는 형식(안에 있는 내용만 계속 바꿔줌)으로, 페이지가 여러개인 것처럼 보이게끔 한다. 즉, 웹을 앱처럼 보여주게 만드는 눈속임을 가능케 한다. 1: Nodejs 설치하기 node -v 명령어를 통해 nodejs가 설치 확인 npm : Node Package Manager. NodeJS로 개발된 모듈들을 설치하고 관리해주는 패키지 매니져 nodeJS로 만들어진 유용한 모듈들을 가져다 쓰고 관리 2: 프로젝트 시작 : 리액트에 필요한 패키지를 자동으로 설치해주는 명령어 입력 프로젝트를 설치하고싶은 경로..

[React] index.html 에 리액트와 바벨 불러오기

참고 페이지 : React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 (reactjs.org) React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리 A JavaScript library for building user interfaces ko.reactjs.org 1. 리액트 불러오기 2. 바벨 불러오기 3. 리액트 적용할 script 에 다음과 같이 타입지정