React

01.React란?

Node.jsinstaller로 Node.js 설치를 원할 경우 node.js 공식 홈페이지로 이동하여 node.js를 다운 받습니다.Node.js 공식 홈페이지 바로가기nvm으로 node.js 설치를 원할 경우 nvm 명령을 이용하여 node.js를 다운 받습니다.n

ReactDOMReactReactDOM.render은 React 컴포넌트를 HTML에 연결하여 웹 브라우저에 렌더링 하는 API이다.JS 또는 JSX 문법을 사용하여 작성한 컴포넌트를 HTMLElement에 연결 시켜준다.HelloMessage를 document.get

React를 사용하지 않고 기존의 방법으로 해당 웹 페이지를 개발 해보도록 하겠습니다.Index.html이처럼 기존의 프론트엔드 개발 방식은 먼저 HTML로 기본구조를 잡고 CSS로 스타일을 입힌뒤 JS로 DOM을 제어 합니다.script의 type 디폴트가 text/

React.Component를 상속 받으면 무조건 상속 받은 클래스에서 render();메소드를 정의 해줘야 합니다.render(); 메소드는 반드시 return을 해줘야 합니다.주의사항script type에서 text/babel을 사용하기 때문에 반드시 babel 패

태그 이름을 React.Component에 정의하여 컴포넌트를 생성 합니다.새로 생성한 컴포넌트를 React.Component에 넣습니다.React.Component의 자식 요소를 여러개 정의할 때 사용합니다.

javascript의 확장 문법입니다. (JavaScript eXtension)XML과 유사하게 생겼습니다.쉽게 말해 HTML 문법을 JavaScript 코드 내부에 쓴 것을 JSX라고 합니다.React.createElement와 JSX를 비교하였을 때 JSX가 가독성

Props는 컴포넌트 외부에서 컴포넌트에게 주는 데이터 입니다.State는 컴포넌트 내부에서 변경할 수 있는 데이터 입니다. 둘 다 변경이 발생하면 렌더링이 다시 일어날 수 있습니다.랜더링(rendering)html 요소(element), 또는 React 요소 등의 코

JavaScript에서는 addEventListner라는 이벤트 핸들러를 사용하였습니다. HTML DOM에 클릭을 하면 이벤트가 발생하고 이에 맞는 변경을 일으키는 것이 Event Handling 입니다.JSX에 이벤트를 설정할 수 있습니다.클릭 이벤트에만 한정되는 것

01.Component Lifecycle

01.Component Lifecycle

Styled-component란 CSS-in-JS라고 하는 Javascript파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리이다.React의 Component와 비슷하게 따로 CSS 스타일을 지정하여 사용할 수 있기 때문에 스타일의 재사용성이 높아지게

카카오 지도 API 사이트 바로가기react로 개발하기 때문에 Web을 선택 합니다.왼쪽 하단 아래에 있는 키모양 버튼을 눌러서 키 발급 받습니다.애플리케이션 추가하기 클릭하여 해당 내용을 작성한 후 저장앱 이름과 사업자명은 아무거나 적어도 상관없음여기서 그대로 키를

spaceBetween: SwiperSlide 사이에 간격을 의미합니다. slidesPerView: 한 번에 보여지는 slide 개수를 나타낸다. loop: Boolean 타입으로 값을 넘기면 true일 때는 각 슬라이드가 반복하여 보여지게 되고 false로 넘기면

Create React App은 줄여서 CRA라고 부릅니다.페이스북에서 제공하는 오픈소스로써 리액트 프로젝트 생성 뿐만 아니라 개발에 필요한 여러가지 기능들을 제공 해줍니다.CRA 바로가기터미널에 해당 명령어를 입력하여 tic-tac-toc 이라는 이름의 react-a

ESLint는 ES 와 Lint를 합친 것입니다.ES는 Ecma Script로서, Ecma라는 기구에서 만든 Script 즉, 표준 Javascript를 의미합니다.Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다.ESLint는 자바스크립트 문법에서 에러를

파일을 저장할때마다 코드를 사용자가 원하는 형식으로 모양을 예쁘게 만들어주는 Node.js 패키지일관적인 코딩 스타일을 유지할 수 있게 도와주는 툴 입니다.코드 품질을 위해 사용하는 ESLint와는 다르게 사용자의 옵션에 따라 코드 스타일을 이쁘게 맞춰줍니다.index

프론트엔드 개발 환경에서 git hook을 손쉽게 제어하도록 도와주는 패키지 입니다.git hook은 git을 쓰다가 특정 이벤트(commit, push)가 벌어졌을 때 그 순간에 갈고리를 걸어서 특정 스크립트가 실행되도록 도와주는 것이다.husky는 git이 설치되어

Git에 staged 상태인 파일만 lint해주는 Node.js 패키지즉, git에 commit 하기전에 코드를 점검하고 수정할 수 있도록 도와주는 패키지를 의미한다.husky만 사용하면 프로젝트의 모든 코드를 검사히기 때문에 비효율적이지만 lint-staged는 Gi

React 개발시 컴파일을 쉽게 도와주는 Chrome extension이다.리액트 구글 확장프로그램 도구react developer tools를 사용하면 크롬 웹에서 개발자 모드로 컴포넌트 구조를 볼 수 있고 크롬 웹에서 직접 변경하면서 테스트 할 수 있습니다.reac

VS code 터미널창에서 해당 명령어를 입력하여 react-modal을 설치 합니다.import파일 상단에 react-modal로 부터 Modal 객체를 import 해줍니다.isOpen={boolean}Modal 태그의 isOpen 속성값(boolean)에 따라 모

새로운 페이지를 로드하는 기존의 방식과 달리 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 의미합니다.전통적인 웹 구조전통적인 웹 구조는 유저가 요청할 때 마다 페이지가 새로고침되며 페이지를 로딩 할 때 마다 서버로부터 리소스를 전

Routes의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 의미합니다.제품 카드들이 있을 경우 제품 상세를 보기 위해 클릭하게 되었을때 url주소 끝만 변경되는 것을 본적이 있을 것이다. 동적라우팅은 그런 기능을 쉽게 가능하게 해준다.Dynamic

여러 Route중에 순서대로 위에서 아래로 가장 먼저 맞는 하나만 보여줍니다.exact를 뺄 수 있는 로직을 만들 수 있습니다.위에서부터 아래로 순서대로 검사하며 내려가다가 마지막 Route 까지 path에 맞지 않으면 보여지는 페이지를 Not Found컴포넌트로 설정

React에서는 페이지를 이동할 때는 <a href="/">대신 <Link to="/">를 사용합니다.<a>태그 대신 <Link /> 컴포넌트를 사용하는 이유는?<a> 태그는 Server로 부터 새로운 페이지를 받아오기 때문에 페이지 이동이나

App.jsLogin.js버튼 클릭 이벤트 발생시 /long 페이지에서 1초후에 / 메인 페이지로 이동 합니다.실행결과로그인 버튼 클릭전http://localhost:3000/login로그인 버튼 클릭후http://localhost:3000로그인 버튼

Redirect는 react-router-dom에서 import해서 사용 합니다.Redirect 컴포넌트는 랜더링되면 to로 지정된 경로로 이동 합니다.App.jsRoute컴포넌트에서는 component 속성 말고도 render 속성을 사용해서 페이지 이동할 수 있습니

style Loaders는 React Component를 스타일링하는 방법중 하나 입니다.webpack은 스타일시트를 처리하는 css-loader와 style-loader라는 두 가지 로더를 제공 합니다..css 파일을 import하게되면 style-lodaer와 cs

css에서 scss로 변경하는 과정App.css 방식의 App.jsApp.css실행결과http://localhost:3000App.scss 방식의 App.jsApp-header -> headerApp-logo -> logoApp-Link -> LinkApp.s

App.jsApp.module.cssstyles객체 출력 결과App: "App_App_04Aij" => App: FileName ClassName HashApp-link: "App_App-link_jGcae" => App: FileName ClassName Hash

Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 대표적인 CSS-in-JS 라이브러리로 React 프레임워크를 주요 대상으로 한 라이브러리 입니다.StyledButton.jsx 파일 생성src폴더안에 componetns 폴더 생성componetns 폴더

<input type="file">를 이용해 파일 업로드 버튼을 만들어준다.accept='image/\*' 속성을 넣어서 image 확장자만 선택적으로 업로드하도록 해준다.input을 숨겨버리기 위해 display: none; 속성을 준다.<UserLabel

다음과 같은 형태의 달력이 나타난다.2022년 1월이라는 버튼을 클릭하면 월을 선택하게 바뀐다.react-calendar 구성 요소에는 기본 스타일시트를 가져오는 옵션이 있습니다.해당 css파일을 import하면 기본 스타일시트를 사용할 수 있습니다.라이브러리에 있는

1-1.설치1-2.소스 코드1-3 실행 결과1-4.겪었던 오류 사항react-chartjs-2 with chartJs 3: Error "arc" is not a registered elementreact-chartjs-2 with chartJs 3: "arc" 오류는

Line Chart실행 결과RadarChart실행 결과PieChart실행 결과

01.설치 > 02.사용법 > 03.실행 결과 >

01.설치 > 02.사용 예제 > 실행 결과 >

파일 위치: src/component/pages/Chatbot.js실행 결과파일 위치: src/component/pages/CheckBox.js실행 결과문제 상황해당 사진처럼 처음 React-Chatbot을 만들때 메시지가 중복해서 출력되는 문제가 발생했었다.문제 원인

실행 결과참고 블로그: https://wazacs.tistory.com/38

src/component/MainClick/pages.Review.jssrc/component/MainClick/Loading.jssrc/component/MainClick/Paused.js

TodoList를 이용하여 팔굽혀펴기 챌린지기능을 만들었다.팔굽혀펴기 챌린지에서는 사용자가 직접 챌린지를 추가, 삭제, 할수 있으며 성공 여부를 버튼으로 체크하여 목표 달성률을 바로 확인할 수 있도록 만들었다.참고한 블로그https://react.vlpt.us

전역 상태관리 도구context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다.Context 객체를 생성하기 위해서는 Context객체를 생성해주는 모듈인 createContext를 import 해줘야한다.Co

TodoList를 응용해서 게시판 기능을 만들었다.사용자가 게시글을 추가 및 삭제 할 수 있으며 게시글 정보에는 사진, 제목, 내용, 작성자 이름, 작성일이 보여지도록 만들었다.참고한 블로그https://react.vlpt.us/mashup-todolist/0

https://firebase.google.com/?hl=ko'React 설치되어 있는 폴더에 가서 firebase설치firebase-config.js 라는 파일을 생성 후 SDK 코드를 복사 후 붙여넣기firebase-config.js회원가입이메일 로그인

read write가 초기값은 false인데 true로 수정하고 게시한다.docs(....) 라고 되있으면 ....을 클릭하면 열린다. },\[]) // 생성 - C const createUsers = async () =>{ // addDoc을 이용해서 내가