개발 프로젝트/[리액트] 게시판 만들기(10)
-
데이터 수정하기
1. 액션, 액션크리에이터 생성 2. axios 통신 연결하기 formData.append("title", title); // "title" = key, title = value 3. AddPost.js에서 useState를 사용하여 state변수 선언해주기 useState 공식문서 참고 Using the State Hook – React A JavaScript library for building user interfaces ko.reactjs.org is_edit 변수를 만들어 수정모드인지 아닌지 확인해준다. let _post = is_edit? post_list.find((p) => p._id === post_id) : null; // 이부분 아직 이해 잘 안됨 수정하기 버튼을 눌렸을때 state를..
2021.04.26 -
데이터 추가하기
1. 액션과 액션생성함수 만들어주기 2. axios통신 연결하기 포스팅 제목, 글쓴이, 내용 세가지 데이터가 필요하니 title, author, comment를 formData에 넣어준다. axios통신에 성공하면 .then 실패하면 .catch 3. 메인 페이지에서 추가하기버튼을 누르면 addpost 페이지로 이동하도록 history.push해준다. 4. AddPost페이지에서 addPostDB를 dispatch를 사용해 실행시켜준다.
2021.04.25 -
데이터 삭제하기
https://www.zerocho.com/category/HTML&DOM/post/59465380f2c7fb0018a1a263 1. 액션과 액션 크리에이터를 생성해준다. const DEL_POST = "post/DEL_POST"; // post = 모듈명 // DEL_POST = 액션명 const delPost = createAction(DEL_POST, (post_id) => ({post_id})); const delPost = createAction(액션타입, (post_id) => ({post_id})); 그리고 타입 외에 추가적인 필드를 넣을 수 있다. 여기서 post_id는 삭제할 데이터(i guess..) 2. axios를 사용하여 api연결해준다. delPostDB라는 함수를 만들어주는데 ..
2021.04.25 -
데이터 불러오기!!
몇일간 진전없었던 나의 게시판.. 드..디어.. axios로 api연동에 성공하였고 데이터 불러오기 그리고 추가하기를 성공시켰다. (질척 쭈글거리는 나를 하루종일 도와주신 동기분에게 감사하며 오늘의 회고 시작🥲) 데이터 불러오기 먼저 dispatch로 getPostDB액션을 실행시켜준다. axios로 api연결을 하고 state(=res)의 데이터를 가져와 loadPost를 dispatch시켜준다. 이제 다시 QnA.js로 돌아가서 useSelector를 사용하여 데이터를 가져와주고 contents_list를 맵돌려준다. (데이터 추가하기 흐름은 다음 올라올 포스팅) 리덕스와 react hooks의 개념들을 익혀도 막상 코드로 짜려니 어디서부터 시작하는건지 막막했던 나😭 리덕스를 이해하는 과정에서 좌절하..
2021.04.19 -
글쓰기 기능 구현1
import React, { useState } from "react"; useState를 사용할거니 import먼저 해준다. 이제 함수를 만들어준다. 근데 이렇게 만드는게 맞는지 잘모르겠다😅 onChange와 value를 추가해주었다. 일단 콘솔에 뜨긴하는데 이게 맞는걸까😅 정말이지 난 이길이 맞는걸까😅 ㅎr지만 포ㄱI란 없ㄷr.. 일단 ㅎH본ㄷr...... falaner.tistory.com/59 [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ② 입력 기능 구현 2020/10/30 - [프로그래밍/react] - [react] 간단한 리액트 게시판 만들기 : WYSIWYG ckeditor - ① 인터페이스 인터페이스 개발은 위 포스팅 내용을 참고하면 된다. 완성된 프..
2021.04.16