💎 TodoList 3️⃣ - TodoList 3️⃣ 에 이어서 진행하는거라 참고하자! [ React ] TodoList3️⃣ 로그인/로그아웃 💎 React code 📣 App.js - Login 처리를 위한 컴포넌트를 생성해주고 improt를 진행한다. - export const TodoListContext = createContext() : export 내보내기를 통해 TodoListContext를 전역변수로 사용하겠다!! : ContextApi mungwang.tistory.com 💎 App.js - {loginMember && ()} : 로그인멤버가 담겨있으면 TodoList컴포넌트를 실행할거다. import React, { useState, createContext } from 'react'; ..
react
💎 React code 📣 App.js - Login 처리를 위한 컴포넌트를 생성해주고 improt를 진행한다. - export const TodoListContext = createContext() : export 내보내기를 통해 TodoListContext를 전역변수로 사용하겠다!! : ContextApi를 이용해서 자식컴포넌트에게 담아준 3개의 값을 사용할수있게한다. import React, { useState, createContext } from 'react'; import './App.css'; import SignupContainer from './Signup'; import Login from './Login'; export const TodoListContext = createContex..
💎TodoList 1️⃣ ↓ 밑에 회원가입이후 추가된거니까 2️⃣를먼저 보지말고 1️⃣을 먼저봐야한다!! [ React ] TodoList 서버 연결 1️⃣ 💎 Todo-list + Spring [ React ] TodoList 2️⃣ 1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으 mungwang.tistory.com 📣 App.js - App.js같은경우에는 변한게 없다 기능적인 부분에 추가이기때문! import React, { useState, createContext } from 'react'; impor..
💎 Insomnia Insomnai : REST API 테스팅 툴 ↓ 해당주소에서 다운로드 Download Download Insomnia the best API Client for REST, GraphQL, GRPC and OpenAPI design tool for developers insomnia.rest 실행후 collection 옆에 + 누르고 테스트파일을 생성해준다 Filter 오른쪽에 있는 + 버튼을 눌러 해당하는 Request를 클릭한다. 주소적는창 옆에 GET ▼ 누르면 요청 방식을 선택할수있고 요청주소를 적어주면 테스트결과를 받아볼수있다 ↓ 결과
- 콘솔로 React와 Spring 비동기연결을 테스트 하는데 ↑ 같은 오류가 발생하였다.. - 코드는 정확했는데 안됐던이유는 멍청하게 Spring서버를 키지않고 콘솔창에만 테스트를 해봤기때문이였다 😅😅 Spring 서버를 키고나서는 ↓ 아래와 같이 연결이 잘된걸 볼수있다!! 🔔
💎 Todo-list + Spring [ React ] TodoList 2️⃣ 1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으로 key값을 넣어줘야한다!! - 각 엘리먼 mungwang.tistory.com npx create-react-app todo-list : todo-list 폴더를 생성해준다. React 주소는 localhost:3000이고 Spring은 localhost:8080 이기 때문에 proxy를 사용하여 동기화시켜줘야한다. 만든폴더안에 .env 환경설정할수있는 파일을 만든후 PORT=80 으로..
💎 Context API 📣 createContext - ContextAPI를 사용하기위해 전역변수로 쓸수있는 컴포넌트를 하나만들어준다!! import React, { createContext } from 'react'; // createContext(초기값) : Context 생성 const UserContext = createContext(); export default UserContext; 📣 Context API 실습 - import를 2개해주는데 하나는 기본적으로해줬던 import에서 useContext를 사용할거기때문에 추가해주고 ↑ 위에서 만들어준 UserContext도 import해준다. import React, { useState , useContext } from 'react'; im..
1️⃣ : https://mungwang.tistory.com/entry/React-TodoList 에서 추가된부분이니 참고해서 보기!! 💎 TodoList li key={index} : react에서 배열을 map 통해 렌더링할 떄 고유값으로 key값을 넣어줘야한다!! - 각 엘리먼트에 안정적인 고유성을 부여하기 위해서 key 값을 써야한다. - 고유성을 통해서 React가 이름이 똑같은 컴포넌트를 각각의 항목을 변경, 추가 또는 삭제할지 식별 한마디로 ** key값을 지정해주지않으면 변화한값만 리렌더링되야하는데 전체가 리덴더링되게된다!! ** - 체크박스에 기본 cheked = 속성은 체크가되었을때는 true , 체그가 안되어있을대는 false 값을 가지고있다. 💥 배열.map( (배열요소,인덱스) ..
💎 Context API - Context API는 React 컴포넌트 트리 전체에서 데이터를 공유할 수 있는 방법을 제공합니다. 이를 통해 중첩된 구조에서 데이터를 전달하는 데 있어서 불필요한 props drilling을 방지 할 수 있습니다. 🌈 props drilling 은 React 컴포넌트 구조에서 하위 컴포넌트로 데이터를 전달하기 위해 상위 컴포넌트를 거치는 것을 의미합니다. 이는 컴포넌트 구조가 깊어지면 서 코드가 복잡해지고 유지보수가 어려워지는 문제를 유발합니다. Context API 는 이러한 문제점을 해결하기 위한 방법 중 하나입니다. - Context를 사용하기 위해서는 createContext() 함수를 사용하여 Context 객체를 생성해야 합니다. 이후 Context.Provid..
💎 TodoList - useState : 리액트에서 가장많이쓰는 상태 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다. 이번에는 useState 라는 함수를 사용해보게 되는데 - const newTodos [ ...todos,newTodo ] : 전개구문을 사용하여 todos 2개객체와 newTodo에 입력되어 생성되는객체를 합쳐준다. 전개변수(참고)--> https://mungwang.tistory.com/entry/React-1 import React, { useState } from 'react'; // useState 복습 const InputName = () => { // state : 컴포넌트의 상태 // useState : 컴포넌트의 상태를 관리 // -> state 변화가 감지되면..
