[React] async와 await를 사용한 CRUD

1. Create (C) - 비동기적으로 데이터 생성 POST // 예시: Axios를 사용한 POST 요청 const createData = async (data) => { try { const response = await axios.post('/api/data', data); console.log(response.data); // 생성된 데이터 확인 } catch (error) { console.error('Error creating data:', error); } }; 2. Read (R) - 비동기적으로 데이터 조회 GET // 초기 데이터 로딩 const fetchInitialData = async () => { try { const response = await axios.get('/api/..

[Git] 스테이징 / 브랜치 / 원격 저장소

1. 스테이징(Staging) 개념: 스테이징은 변경된 파일을 Git이 추적하고 있는 작업 디렉토리에서 선택적으로 포함시키는 단계입니다. 활용: 변경된 파일 중 일부만을 골라서 스테이징하고 싶을 때 사용합니다. git add 명령어를 통해 파일을 스테이징 영역으로 올립니다. 예시: # 파일을 스테이징 git add 파일명 # 모든 변경된 파일을 스테이징 git add . 2. 브랜치(Branch) 개념: 브랜치는 코드를 분리하여 독립적으로 개발할 수 있게 해주는 개념입니다. 활용: 새로운 기능을 개발하거나 버그를 수정할 때 브랜치를 생성하여 작업합니다. git branch 명령어로 브랜치를 생성하고 git checkout 또는 git switch 명령어로 브랜치 간 이동이 가능합니다. 예시: # 새로운 ..

[한입 크기로 잘라 먹는 리액트] simpleDiary 코드

App.js import { useState, useRef, useEffect } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // https://jsonplaceholder.typicode.com/comments function App() { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then(..

[한입 크기로 잘라 먹는 리액트] React에서 API 호출하기

https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com https://jsonplaceholder.typicode.com/comments App.js - API 호출 코드 getData작성 - mount될 때 나와야 하는 데이터 > useEffect 사용(빈배열) - 초기 데이터 initData 설정 import..

[한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect

출처 https://inf.run/N9fZn 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요. www.inflearn.com

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기

1. onDelete > onRemove로 변수명 변경 2. DiaryItem.js에 수정하기 버튼 추가 DiaryItem.js - 수정하기 버튼 추가 - 삭제하기 버튼 onClick 함수를 handleRemove로 빼서 정리 - state 생성 - 토글함수 생성 : isEdit이 true면 수정중이라고 간주 > content부분에 수정폼 띄우기 - 토글 상태(T/F)에 따른 버튼 기능 수정 - 수정 취소 후 다시 수정클릭 시 내용 원본 복구 - 수정완료 후 기능 추가 import { useRef, useState } from "react"; const DiaryItem = ({ author, content, emotion, created_date, id, onRemove, onEdit, }) => { ..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 3 - 데이터 삭제하기

1. DiaryItem.js에 삭제버튼 생성 2. App.js에 onDelete 함수 생성 3. props로 DiaryList.js에 onRemove 함수 전달, DiaryItem에 또 전달 DiaryItem.js - props에 onDelete 추가 - 삭제하기 button 생성 후 windo.confirm창 추가 const DiaryItem = ({ author, content, emotion, created_date, id, onDelete, }) => { return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(created_date).toLocaleString()} {content} { if (window.confirm(`${id}번째 일기를 정말 삭제하시겠..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 2 - 데이터 추가하기

1. dummyList 주석 2. App.js에 전역적으로 데이터 관리하는 useState 추가 3. App.js에 onCreate 함수 추가 4. DiaryEditor에 prop으로 onCreate함수 내려주고 handleSubmit에 함수 추가 5. 작성 후 기존 editor에 남아있는 데이터 초기화 App.js import { useState, useRef } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // const dummyList = [ ... function App() { const [data, setData] = useState([])..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 1 - 리스트 렌더링 (조회)

1. DiaryList.js 파일 생성 2. App.js에 추가 3. 임시배열 만들어서 prop으로 전달 4. DiaryList가 undefined로 전달될 경우 에러 해결 5. DiaryItem.js 생성 App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "도로시", content: "하이 1", emotion: 5, created_date: new Date().getTime() }, { id: 2, author: "나로시", content: "하이 2", emotion: 3, created_date:..

[한입 크기로 잘라 먹는 리액트] React에서 DOM 조작하기 - useRef

1. handleSubmit에 조건문, focus문 추가 2. DOM에 접근하는 useRef() 사용 DiaryEditor.js import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = ..