타코딩

react-beautiful-dndReact 애플리케이션에서 드래그 앤 드롭 기능을 구현하는 데 널리 사용되는 라이브러리입니다. 복잡한 드래그 앤 드롭 인터페이스를 쉽게 만들 수 있도록 일련의 구성 요소와 유틸리티를 제공합니다. npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd 설치 후 typescript에서 react-beautiful-dnd를 인식시켜줘야 함 import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; function App() { const [minutes, setMinutes] = useRecoilState(minuteState);..

npm install react-hook-form interface IForm { email: string; FirstName: string; LastName: string; Username: string; Password: string; Password1: string; extraError?: string; } function ToDoList() { const { register, handleSubmit, formState: { errors }, setError, setValue, } = useForm({ defaultValues: { email: "@naver.com" } }); const onValid = (data: IForm) => { if (data.Password !== data.Passwo..

파일 > preferences >configure usersnippets > 언어선택 "rq": { "prefix": "rq", "body": [ "const { isPending, error, data } = useQuery({queryKey: ['repoData'],queryFn: () =>fetch('https://api.github.com/repos/TanStack/query').then((res) => res.json(),),})" ], "description": "react-query temp" } 주석처리된 예제를 참조하여 이런식으로 작성하면됨

import React, { useState } from "react"; const AppLogin = () => { const [form, setFrom] = useState({}); const handleLoginChange = (e) => { let { value, name } = e.target; console.log(e.target); setFrom({ ...form, [name]: value }); }; const handleSubmit = (e) => { e.preventDefault(); console.log(form); }; return ( 아디 비밀번호 로그인 {/* type지정은 되도록 해주기! onclick event로 할거면 type을 버튼으로하기 */} ); }; export d..

React Query 는 React 애플리케이션에서 서버 상태 및 데이터 가져오기를 관리하는 데 널리 사용되는 라이브러리입니다. 데이터 가져오기, 캐싱 및 상태 동기화 관리를 단순화하고 중앙 집중화하여 원격 API 및 데이터 소스 작업을 더 쉽게 만듭니다. React Query는 Redux와 같은 상태 관리 라이브러리가 아닙니다. 대신 데이터 계층, 특히 데이터 가져오기 및 캐싱을 처리하는 데 중점을 둡니다. 설치 (설치후index.js에 우산씌워야함) npm i @tanstack/react-query 템플릿 const { isPending, error, data } = useQuery({ queryKey: ['repoData'], queryFn: () => fetch('https://api.github..

import "bootstrap/dist/css/bootstrap.min.css"; import { Container } from "react-bootstrap"; import "./App.css"; import Content from "./components/Content"; import Navba from "./components/Navba"; import { useEffect, useState } from "react"; import axios from "axios"; function App() { const [dwitters, setDwitters] = useState([]); useEffect(() => { axios .get("/data/dwitter.json") .then((result) =..

import React, { useState } from "react"; import styled from "styled-components"; import Product from "./components/Product"; const Container = styled.div` max-width: 480px; margin: 10px auto; text-align: center; `; const ToggleButton = styled.button``; const AppToggle = () => { const [show, setShow] = useState(false); const handleClick = () => { setShow((show) => !show); }; return ( 토글버튼 {show &..

import { useState } from "react"; import "./App.css"; import Counter from "./components/Counter"; import styled from "styled-components"; const TotalBox = styled.div` display: flex; flex-direction: column; `; function App() { // 리턴시 반드시 하나의 태그만 출력한다 const [total, setTotal] = useState(0); return ( total : {total} ); } export default App; import React, { useState } from "react"; import styled from..

url이 바뀌지 않고 json출력을 바꿔가는 방법 연습 안녕하세요 ejs파일 테스트 가전제품 컴퓨터 생활용품 import * as categoryRepository from "../repository/categoryRepository.js"; export async function getHome(req, res) { res.render("index.ejs"); } export async function getList(req, res) { let { page } = req.params; const row = await categoryRepository.getHome(page); res.json(row); } import { db } from "../db/database.js"; export async fu..

# 1. why react? - 리액트는user interface를 만들기위한 자바스크릡트 라이브러리이다. - 2013년도 오픈소스 공개 2015년 reactnavtive공개 그후 계속적인 성능개선 진행 - 2019년 함수형 컴포넌트 출시 그전까지는 클래스 기반으로 생성 - 2022년도 서버사이트 렌더링 출시 - 리액트 개발 방식 두가지 : SPA/CSR - SPA는 Single Page Application의 약자이다 - CSR로 client side rendering 이다. # 2. 프레임워크와 라이브러리 차이 1. 프레임워크 - 통상적으로 프레임워크라고 하면, 무엇인가를 만드는데 필요한 모든 것들이 다 갖춰진 제공되는 것이라고 보면 된다. - 웹 프레임워크는 ui+routing+http client..