분류 전체보기 (290) 썸네일형 리스트형 1_state & 상태관리 😉 상태관리를 왜 할까요? 1️⃣ 컴포넌트 간 데이터 공유: props 전달만으로는 복잡한 컴포넌트 간 데이터 공유를 효율적으로 처리하기 어렵기 때문에 여러 컴포넌트가 동일한 데이터를 공유해야 할 때 상태 관리가 필요합니다. 2️⃣ UI 상태 관리: 사용자 입력, API 호출에 따른 데이터 로딩, 조건부 렌더링 등 UI 상태 변경을 효율적으로 관리해야 하기 때문입니다. 3️⃣ 성능 최적화: 불필요한 렌더링을 방지하고 성능을 최적화하기 위해서 상태관리가 필요합니다. 😊 평소 state 관리는 어떻게 하시나요? 1️⃣ ( 함수 컴포넌트에서 상태를 관리하기 위해 ) useState Hook 사용: 컴포넌트 내부에서 로컬 상태를 관리합니다. 2️⃣ ( 대규모 애플리케이션에서 상태 관리를 위해 ) Redux 사용.. clonecoding_NEWNEEK 🦔 https://youtu.be/zoBAAoKpjZc ✨깃헙주소 : https://github.com/Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE.git GitHub - Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE Contribute to Clone-Coding-Unicorn/Clone-Coding-Unicorn-FE development by creating an account on GitHub. github.com 🔥클론코딩 트러블이슈🔥 ✅[ SignUp ] 회원가입 아이디, 비번 유효성 검사에서 ( button 클릭 후 보이게 조정 / RED 인풋창 ) X 코드 로직을 조정해 적용하지 못함 CheckBox 작동 후 버튼 활성화.. [주특기 프로젝트] 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로 객체.. 깃허브 그룹프로젝트 첫 셋팅 1️⃣ Repository 생성 2️⃣ [팀원 초대하기] invite collaborators > Manage access에서 Add people버튼을 클릭 > 팀원 이메일 주소 입력 후 버튼 클릭 3️⃣ [프로젝트 초기세팅] 로컬에서 프로젝트 환경설정 초기세팅 마치고 > 터미널> git init git add . git commit -m "first commit(메시지 제목)" git remote add origin https://github.com/webcreastory/group-project.git(깃 주소) git push origin master 4️⃣ develop(master의 복사본) branch 만들기 git checkout -b develop(브랜치명) git push git push.. axios interceptor -> api 적용 REACT_APP_SERVER_URL=http://localhost:4000 ⚠️ json-server 설정을 먼저 해주세요! src > axios > api.js import axios from "axios"; // axios.create의 입력값으로 들어가는 객체는 configuration 객체에요. // https://axios-http.com/docs/req_config // 위 주소를 참고해주세요! const instance = axios.create({ baseURL: "http://localhost:4000", }); export default instance; import "./App.css"; import { useEffect } from "react"; import api from "... axios.post / axios.delete / axios.patch // src/App.jsx import React, { useEffect, useState } from "react"; import axios from "axios"; // axios import 합니다. const App = () => { // 새롭게 생성하는 todo를 관리하는 state const [todo, setTodo] = useState({ title: "", }); const [todos, setTodos] = useState(null); const fetchTodos = async () => { const { data } = await axios.get("http://localhost:3001/todos"); setTodos(data); }; const onSubmitHandler = a.. [비동기통신 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은 서버의 데이터를 조회할 때 사용합니다. 기본적인 사용방법은 아래와.. JSON-Server 설치에서 배포까지 json-server 설치하기 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. yarn add json-server json-server 실행하기 위해 먼저 db.json파일을 만들기 json-server가 간단한 패키지이긴 하나, 말그대로 서버 입니다. 그래서 리액트와는 별개로 따로 실행을 해줘야 합니다. 다시 말해 리액트도 start하고, json-server로 start 해야 합니다. 그래야 리액트와 json-server가 서로 통신 할 수 있습니다. 아래 명령을 통해 json-sever를 실행합니다. 명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 .. 리덕스툴킷 ✅일반 리덕스와 코드 비교 툴킷 설치하기 CRA를 통해 새로운 프로젝트틀 생성하고 yarn을 통해 아래 패키지를 설치합니다. yarn add react-redux @reduxjs/toolkit // 일반 리덕스 예시 코드 // Action Value const ADD_NUMBER = "ADD_NUMBER"; const MINUS_NUMBER = "MINUS_NUMBER"; // Action Creator export const addNumber = (payload) => { return { type: ADD_NUMBER, payload, }; }; export const minusNumber = (payload) => { return { type: MINUS_NUMBER, payload, }; }; //.. React Router로 SPA 개발하기 ## 1. react-router-dom이란? - **(1) 여러 페이지를 구현할 수 있게 해주는 패키지** `styled-components`, `redux` 에 이어서 또 하나의 패키지. // 바로 `react-router-dom` 웹사이트를 사용할 때 여러 페이지로 오가며 이동할 수 있는데, `react-router-dom`을 배우면 여러 페이지를 가진 웹을 만들 수 있게 됨! 2. react-router-dom 설치하기 (1) 패키지 설치 vscode 터미널에서 아래 코드를 입력해서 패키지를 설치할 수 있음. yarn add react-router-dom **(2) 페이지 컴포넌트 생성** 1. 가상의 여러 페이지를 만들기. - `Home`, `About`, `Contact`, `Works` 총 .. 이전 1 ··· 4 5 6 7 8 9 10 ··· 29 다음
