목록전체 글 (435)
보라코딩
리액트 CRUD 기능 추가하기
목록페이지 작성 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..
VS Code Extension 추천 (REACT 관련)
Reactjs code snippets 리액트 개발자에게 아주 유용한 확장 프로그램 (여러 예제 코드 제공해서 개발 속도 높여줌) ESLint 오타와 구문 오류 빠르게 찾고 소스코드 형식 쉽게 지정 Prettier 코드 저장 후 자동으로 코드 형식 적용됨 그런데 설치 후 몇가지 해줘야 함 ctrl + , 눌러서 setting 키고 1. 검색 창에 "Default Formatter" 을 검색 ㄴ 옵션에서 "Prettier - Code formatter" 를 선택 2. 검색 창에 "Format on save" 를 검색한 뒤 체크 박스 선택