보라코딩

리액트훅에 대한 15분 정도 짧은 강의인데 예제도 심플해서 좋고 설명도 깔끔하게 잘 하신다. 아주 좋음 :)

부모(NewExpense.js)에서 자식(ExpenseForm)으로 ExpenseForm onSaveExpenseData={saveExpenseDataHandler} 함수 전달하고 자식에서 props로 받는다. 자식에서 props.onSaveExpenseData(expenseData); // expenseData에는 form으로 전달한 데이터가 들어있다. 이러한 방식으로 부모에게 전달한다. const submitHandler = (event) => { event.preventDefault(); const expenseData = { title: enteredTitle, amount: enteredAmount, date: new Date(enteredDate), }; props.onSaveExpenseDa..

글씨체 귀여운 것 같아서 ㅎ.ㅎ index.css @font-face { font-family: "Pretendard-Regular"; src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff"); font-weight: 400; font-style: normal; } body { margin: 0; font-family: "Pretendard-Regular"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } 눈누 (noonnu.cc) 눈누 프리텐다드 - 길형진 (orioncact..

공공데이터 포털 국가에서 보유하고 있는 다양한 데이터를『공공데이터의 제공 및 이용 활성화에 관한 법률(제11956호)』에 따라 개방하여 국민들이 보다 쉽고 용이하게 공유•활용할 수 있도록 공공데이터(Datase www.data.go.kr import React from "react"; import axios from "axios"; import { useState, useEffect } from "react"; export default function Api() { const URL = "http://apis.data.go.kr/1360000/VilageFcstInfoService_2.0/getUltraSrtNcst"; const [data, setData] = useState(null); const ..

useEffect useEffect() 함수 실행시점 1. 최초 function 그림이 최초로 그려질 때 2. 상태 변수가 변경될 때 3. 의존 리스트 관리 가능함 useEffect( () => { }, [무언가]); [무언가] : 무언가가 변경될 때마다 useEffect 실행 됨 (무언가에 의존) [ ] : 비워두면 의존되는 것 없음. 그래서 다시 useEffect가 실행되지 않음 메타코딩님 강의 들었는데 설명 매우 잘하심...!

spread 연산자 깊은 복사할 때 사용 const a = [1,2,3]; const b = [...a]; ㄴ 이렇게하면 const b = [1,2,3]; 과 동일함 concat (추가하기) const a = [1,2,3]; //1,2,3 const b = a.concat(4); //1,2,3,4 filter (걸러내기_보통 삭제할 때 사용) const a = [1,2,3]; //1,2,3 const b = a.filter( (n) => { return n != 1; }); //2,3 필터는 boolean을 return 받아서 true만 걸러낸다! slice (잘라내기) const a = [1,2,3]; const b = a.slice(0,2); //1,2 map (반복) const a = [1,2,3]..

DELETE Carlist.js 1. 표의 각 행에 버튼 만들기 버튼 필드 : 자동차에 대한 링크인 _links.self.href filterable과 sortable은 false (정렬과 필터링 필요 없기 때문) const columns = [ {field:'brand', headerNmae: 'Brand', width: 200}, {field:'model', headerNmae: 'Model', width: 200}, {field:'color', headerNmae: 'Color', width: 200}, {field:'year', headerNmae: 'Year', width: 150}, {field:'price', headerNmae: 'Price', width: 150}, { field: '_l..

목록페이지 작성 REST API로 데이터 삭제, 추가, 업데이트 사용자에게 알림 메시지 표시 리액트 앱에서 CSV 파일로 데이터 보내기 MUI 데이터 표 컴포넌트 이용하면 페이지 매김, 필터링, 정렬 기능 사용 가능! 우선 백엔드에서 GET 요청을 하면 _embedded.cars 노드에 있음을 확인할 수 있다. VS Code에서 새폴더(components)를 만들어준다. 앱에 여러 컴포넌트가 있을 때는 컴포넌트용 폴더를 만드는 것이 좋다. 컴포넌트에 Carlist.js 새파일을 만든다. Carlist.js 파일에 컴포넌트의 기본 코드를 다음과 같이 작성한다. import React from "react"; function Carlist() { return ; } export default Carlist;..

1. PowerShell이나 터미널에서 새 리액트 앱 만든다 npx create-react-app carfront 2. 프로젝트로 폴더 이동 후 머티리얼 UI 컴포턴트 라이브러리 설치 cd carfront npm install @mui/material @emotion/react @emotion/styled 3. 앱 실행 npm start 4. VS code에서 src 폴더 열고 App.js 파일 작성 import logo from "./logo.svg"; import "./App.css"; import AppBar from "@mui/material/AppBar"; import Toolbar from "@mui/material/Toolbar"; import Typography from "@mui/mate..

Reactjs code snippets 리액트 개발자에게 아주 유용한 확장 프로그램 (여러 예제 코드 제공해서 개발 속도 높여줌) ESLint 오타와 구문 오류 빠르게 찾고 소스코드 형식 쉽게 지정 Prettier 코드 저장 후 자동으로 코드 형식 적용됨 그런데 설치 후 몇가지 해줘야 함 ctrl + , 눌러서 setting 키고 1. 검색 창에 "Default Formatter" 을 검색 ㄴ 옵션에서 "Prettier - Code formatter" 를 선택 2. 검색 창에 "Format on save" 를 검색한 뒤 체크 박스 선택