본문 바로가기

React

(32)
회원가입 페이지 README 분석 README DevCamp - Frontend Material 위에 제공된 애플리케이션 코드는 React, TypeScript 및 다양한 커스텀 컴포넌트를 사용하여 2단계 프로세스로 사용자 등록 양식을 생성하도록 설계되었습니다. 이 문서에서는 코드를 단계별로 설명하고 외부 라이브러리, 사용자 정의 COM 사용을 강조합니다. Tech Stacks 이 프로젝트에는 다음 기술과 라이브러리가 사용됩니다. 1. React: 사용자 인터페이스 구축을 위한 JavaScript 라이브러리입니다. 2. TypeScript: 정적 유형을 추가하는 JavaScript의 상위 집합입니다. 3. React-hook-form: React 애플리케이션에서 양식 상태 및 유효성 검사를 관리하기 위한 라이브러리입니다. 4. zod: ..
shadcn/ui, Zod, React Hook Form ✅ shadcn/ui shadcn/ui 라이브러리는 Tailwind CSS를 사용하여 구축된 재사용 가능한 컴포넌트로 Next.js에서 컴포넌트의 호환성이 좋으며,앱에 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트 모음. (컴포넌트 자체를 패키지 install 하는 방식의 UI 컴포넌트의 모음) shadcn/ui Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source. ui.shadcn.com [참조영상] Build a Reusable Component in React (Shadcn/ui, Tailwind) ✅ Zod Zod 는 schema validat..
Detail :UI_FloatingButton 스타일 적용 import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import { useParams } from "react-router-dom"; import { fetchFundingDetail } from "../../../apis/funding"; import Navbar from "../../../components/Navbar"; import { useDispatch, useSelector } from "react-redux"; import { userLogout } from "../../../redux/authSlice"; import { MainContainer, LeftCont..
수정, 삭제, 완료 API 연결 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { fundingCreate } from '../../../api/api'; // 펀딩 생성 API import import { useParams } from 'react-router-dom'; import CreateModal from './Modal/CreateModal'; import Navbar from '../../../components/Navbar'; // 추가된 코드 import { useDispatch, useSelector } from 'react-redux'; // 추가된 코드 import { userLogout }..
입력한 post -> get 디테일 페이지에 출력 import React, { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { fundingCreate } from '../../../api/api'; // 펀딩 생성 API import import { useParams } from 'react-router-dom'; import CreateModal from './Modal/CreateModal'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, // PlusImg, Body, ..
모달창 Url 입력 -> 이미지 출력 import React, { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, ProducImgtDiv, InputTag, FundingImg, // PlusImg, Body, FundingDiv, SponserDiv, RadioInput, SponserComment, TogetherDiv, } from './FundingCreateStyles'; import CreateModal from './Modal/CreateModal'; import {..
api post, get, patch 기능 구현 import axios from "axios"; import Cookies from "js-cookie"; export const instance = axios.create({ baseURL: process.env.REACT_APP_API_URL, withCredentials: true, // 쿠키 전송을 위한 옵션 }); // 토큰을 쿠키에 저장하는 함수 const saveTokensToCookies = (accessToken, refreshToken) => { // 쿠키에 저장하는 로직 구현 Cookies.set("accessToken", accessToken, { path: "/" }); Cookies.set("refreshToken", refreshToken, { path: "/" }); }; /..
카카오페이 결제 import React from 'react'; import { useNavigate } from 'react-router-dom'; import { MainContainer, LeftContainer, Logo, P, Button, RightContainer, Navbar, NavbarBtn, SponserMoney, InputTag, Body, FundingDiv, SponserDiv, SponserComment, SponsorImg, TogetherDiv, } from './FundingPayStyles'; import CheckBox from '../FundingPay/CheckBox/CheckBox'; import KakaoPay from './KakaoPay/KakaoPay'; const Fu..
[주특기 프로젝트] FE & BE : 첫 협업 [3조 주특기 프로젝트] 항해18기 소통 커뮤니티⭐️ DEV STAR 아쉬움이 많았던 이번 주특기 FE & BE 첫 협업 ✅ https://github.com/webcreastory/star-Hub-FE-.git GitHub - webcreastory/star-Hub-FE- Contribute to webcreastory/star-Hub-FE- development by creating an account on GitHub. github.com ✅ https://youtu.be/gzd7RBGkGUU StarHub에서 아쉬웠던 부분은 이미지 파일 업로드 부분에서 연결 구현하는 부분까지는 가능했지만, 서버와 연결하는 부분에서 이미지 주소의 데이터가 무거워 이미지 주소를 전달하는 대신 form-data로 객체..
[비동기통신 axios.get 요청] json-server API 명세서 확인 Axios 설치하기 CRA를 통해서 새로운 프로젝트를 생성하고, 터미널에 아래의 명령어를 입력해서 axios를 설치합니다. yarn add axios json-server 설정 📌 API 서버는 우리가 만든 json-server를 사용합니다. 배포는 하지 않아도 되고, 한 프로젝트 내에서 3001 포트로 서버를 가동시켜 사용합니다. (1) 테스트용 db.json 설정 json-server 의 데이터를 아래와 같이 설정했습니다. { "todos": [ { "id": "1", "title": "react" } ] } // 설치하기 yarn json-server --watch db.json --port 4000 (1) Axios get get은 서버의 데이터를 조회할 때 사용합니다. 기본적인 사용방법은 아래와..