Binary Journey

[React][CRUD] create-board-tutorial 본문

[React][CRUD] create-board-tutorial

반응형

 

* 더 쉽고 유익한 튜토리얼 v2가 4월 업데이트 되었습니다!

 

binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2

 

[React][CRUD] create-board-tutorial-v2

* 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/react-create-board-v2 cruellaDev/react-create-board-v2 updated version of react-create-board. Contribute to cruellaDev/react-create-..

binaryjourney.tistory.com

 

 

 

 

* 인용 시 출처 같이 기재부탁드립니다.

 

 

 

 

 

* 티스토리용으로 따로 관리하기 위해 github 계정을 새로 만들었습니다. (2021-04-06)

code1: github.com/cruellaDev/react-create-board

 

cruellaDev/react-create-board

Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - cruellaDev/react-create-board

github.com

code2: github.com/jwlee-lnd/react-create-board

 

#1 React App 생성하기

 

binaryjourney.tistory.com/8

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 1. React App 생성하기, VSCode npm extension/플러그인 활

빛과 소금 John Ahn 선생님의 online shop clone 강의를 다 들은 후 혼자서 온라인 쇼핑몰까진 아니지만 간단한 페이지를 만들어 보기로 했다. (작업환경은 Windows 10 와 VSCode, React 17, ES6 기준) 우선 작업..

binaryjourney.tistory.com

 

 

 

#2 필요한 모듈, 라이브러리 설치, react router 사용하기

 

binaryjourney.tistory.com/9?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 2. 필요한 모듈, 라이브러리 설치, react router 사용

VSCode extension 중 open native terminal 을 설치하면 root folder 와 현 파일이 들어있는 디렉토리 폴더(current folder) 중 어디서 터미널을 열 것인지 고를 수 있다. extension은 이렇게 생겼다 VSCode 에..

binaryjourney.tistory.com

 

 

 

#3 redux useState으로 input 값 집어넣기

* (11/6) useState보다 useSelector 사용을 더 추천합니다.

 

binaryjourney.tistory.com/10?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 3. redux, useState 으로 input 값 집어넣기

이번에는 게시글 저장을 구현해보려고 한다. RegisterPage.js 의 form 태그 안에 button을 만들어준다. 나는 RegisterPage를 게시글 등록뿐만 아니라 수정할 때도 재사용 것이기 때문에 react hook인 useState와..

binaryjourney.tistory.com

 

 

 

#4 redux-toolkit에 redux-saga 적용하기(configureStore), redux-toolkit으로 action, reducer 한꺼번에 생성하기(createSlice) 

 

binaryjourney.tistory.com/11?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 4. redux-toolkit에 redux-saga 적용하기(configureStore), redux

3편에서 RegisterPage.js 를 글 수정할 때도 재사용할 것이라고 언급한 적이 있었는데 RegisterPage 컴포넌트는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트가 합쳐져 있는 상태라 재사용할 수 없는

binaryjourney.tistory.com

 

 

 

#5 antd로 게시판 디자인 바꾸기

 

binaryjourney.tistory.com/12?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 5. antd 로 게시판 디자인 바꾸기

시간이 부족한 관계로 서버 연동 + 저장 기능은 가능하면 저녁 이후 혹은 내일에 해야 할 것 같다. 남은 시간 동안 뭘할까 하다가 antd 라이브러리 (Ant design)를 이용하여 만든 컴포넌트들을 예쁘게

binaryjourney.tistory.com

 

 

 

#6 json-server 연결하기, reducer와  saga 흐름 파악하기

 

binaryjourney.tistory.com/13?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 6. json-server 연결하기, reducer와 saga 흐름 파악하기

게시글 저장 구현에 본격적으로 들어가기 전에 임시 서버를 띄워보도록 하겠다. 그나마 과정이 간단한 json-server를 이용해보려고 한다. json server의 대략적인 내용은 이 블로그를 참조하면 좋다. (

binaryjourney.tistory.com

 

 

 

#7 axios 데이터 전송, 게시글 저장, useSelector로 state 가져오기

 

binaryjourney.tistory.com/14?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 7. axios 데이터 전송, 게시글 저장, useSelector 로 state

들어가기 전에 이전까지 만든 소스에 문제가 없는지 (블로그 포스팅하면서 내가 소스 수정하고 빼먹은 부분이 있을 수도 있기에) 잠깐 확인하고 본격적으로 내용에 들어가겠다. 봐야 할 파일은

binaryjourney.tistory.com

 

 

 

#8 saga에서 게시글 저장부터 화면이동까지 처리하기, saga에서 router 연결하기

 

binaryjourney.tistory.com/15?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 8. saga에서 게시글 저장부터 화면 이동까지 처리하

saga 로 이용 중인 파일에서는 react-router-dom이 바로 import 되지 않는 것으로 알고 있다 . import 를 쓰려해도 아마 terminal에서 module not found가 드거나 import가 impossible 하다고 뜰 것이다. 우회적인..

binaryjourney.tistory.com

 

 

#9 useDispatch와 useEffect로 게시글 페이지 내용 나타내기

 

binaryjourney.tistory.com/16?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 9. useEffect와 useDispatch로 게시글 페이지 내용 나타

화면 이동이 해결되었으니 이제 내가 등록한 글의 내용이 화면에 나타나는 것을 구현해보도록 해보자 첫번째로 articleSlice에 서버에서 내용을 불러오는 부분과 불러온 내용을 알맞은 형식으로

binaryjourney.tistory.com

 

 

 

#10 게시판에서 게시글 전체 목록 보여주기

 

binaryjourney.tistory.com/17?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 10. 게시판 전체 글 가져오기, useDispatch, createSlice, r

9편에서는 게시글 한 개의 내용을 불러오는 것을 다뤘고 이번 편에서는 게시글 목록 전체 조회를 다룰 것이다. 이번 편도 꽤나 쉽다! articleSlice 와는 다른 initialState를 쓸 것이기 때문에 slice를 새

binaryjourney.tistory.com

 

 

 

#11 NullPointerException 처리하기, axios put 으로 조회수 증가 반영하기

 

binaryjourney.tistory.com/18?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 11. NullPointerException 처리하기, axios put으로 조회수

board 목록 조회를 데이터 존재 유무 상관없이 가능하도록 해놨기 때문에 서버를 실행시키지 않았거나 board.json에 데이터도 아무것도 없을 때 아마 에러가 발생할 것이다. 그래서 11편의 순서는 1.

binaryjourney.tistory.com

 

 

 

#12 axios put으로 게시글 수정하기

 

binaryjourney.tistory.com/19?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 12. axios put으로 게시글 수정하기, redux-saga, redux-tool

11편에서 a 태그와 router의 Link 컴포넌트의 차이점을 혹독히 경험하면서 응용으로 수정하기 버튼은 Link 컴포넌트로 만들 것이다. 그 전에 수정된 부분이 있는데 ArticleDetail에 있던 버튼을 ArticlePage

binaryjourney.tistory.com

 

 

 

#13 게시글 삭제하기

 

binaryjourney.tistory.com/20?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 13. 게시글 삭제하기, redux-toolkit , redux-saga, useDispatc

이제 board.json을 비우는 등의 서버를 직접 건드리는 일은 더 이상 발생하지 않도록 게시글 삭제 기능을 만들겠다. 시작하기 전에 양해를 구할 것은 ArticleDetail과 ArticlePage를 약간 수정했다. 컨테이

binaryjourney.tistory.com

 

 

 

# 13 - (1) Issue React에서는 Date()를 바로 렌더링 할 수 없다

 

binaryjourney.tistory.com/21?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - [Issue] React 는 Date() 를 rendering 하지 못한다. (Objects

date를 화면에 나타내 보려다 계속해서 만난 오류 Objects are not valid as a React child 찾아보니 new Date 이거나 Date의 값인 경우 Object라서 리액트에서 렌더링을 못한다는 것이다. 그래서 toString()을 해..

binaryjourney.tistory.com

 

 

 

#14 댓글달기(데이터 저장만 구현)

 

binaryjourney.tistory.com/22?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 14. 댓글 달기(우선 댓글 저장부터), redux-toolkit, redu

퇴근 전까지 진도 나갈 수 있을지는 모르겠으나 일단 도전해보겠다. 나는 화면부터 만들었다. /src/components/views/ArticlePage/Sections 에 Comment.js 파일을 생성했다. Comment 컴포넌트를 생성하는데 나름..

binaryjourney.tistory.com

 

 

 

#15 json-server에서 foreign key처럼 게시글 ID로 댓글리스트 가져오기

 

binaryjourney.tistory.com/23?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 15. json-server에서 foreign key처럼 게시글 ID로 댓글 리

url 구조가 이렇게 되어 있다면 http://localhost:portNumber/resources/parameter?queryString=stringValue json-server에서는 이렇게 받아들인다. http://localhost:포트번호/Resources/id 그래서 (json-server..

binaryjourney.tistory.com

 

 

 

#16 댓글 삭제하기

 

binaryjourney.tistory.com/24?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들어보기 - 16. 댓글 삭제하기, useDispatch, axios, redux-saga, redux-too

앞서 말했듯이 댓글 삭제 기능을 구현해보겠다 일단 ArticlePage에 빈 이벤트함수 onDeleteComment 를 만들어서 ArtDetail 에 deleteComment라는 프로퍼티에 넘겨준다. // ArticlePage const onDeleteComment = (c..

binaryjourney.tistory.com

 

 

 

#17 - (1) 게시판 화면에서 게시글 목록마다 댓글 개수 띄우기 (saga에서 처리)

 

binaryjourney.tistory.com/25?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들기 - 17.(1) 게시판 목록에 댓글 개수 띄우기, redux-saga, axios

앞 두 편에서 계속 말한 대로 이번 편에서는 첫 페이지 전체 게시글을 조회하는 게시판 목록에서 각 게시글의 댓글을 보여주는 기능을 만들 것이다. 목표는 이렇다. 생각하고 있는 방법은 두 가

binaryjourney.tistory.com

 

 

 

#17 - (2) createSelector를 이용하여 댓글 개수 띄우기

 

binaryjourney.tistory.com/26?category=916264

 

[React][CRUD] 간단한 게시판 페이지 만들기 - 17. (2) createSelector를 이용하여 게시판 목록에 댓글 개수

// BoardList import React from "react"; import { Link } from "react-router-dom"; import { Button } from "antd"; function BoardList(props) { // console.log(props.board); return ( 번호 제목 조회수 {pr..

binaryjourney.tistory.com

 

 

 

# 18 - 오류, issue 고치기, validateDOMNesting(...): <td> cannot appear as a child of <a>

 

binaryjourney.tistory.com/30

 

[React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 18. 오류, issue 고치기, validateDOMNesting(...):

Hi Everybody 안녕 Hola! 오랜만의 포스팅이다. 지난주부터 개발 들어가고 2주를 바삐 보냈다. react는 공부할수록 새롭다. 새로워....! 기회가 된다면 library 중 하나인 redux-persist 도 추가하면 어떨까 생

binaryjourney.tistory.com

 

 

 

# 19 - Refactoring, useState 구문 useSelector 로 클린코딩하기

 

binaryjourney.tistory.com/31

 

[React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 19. Refactoring, useState 구문 useSelector 로 클린코

렌더링 최적화를 위해 useState로 사용했던 const [TitleValue, setTitleValue] = useState("") const [ContentValue, setContentValue] = useState("") 요 useState 구문을 useSelector를 이용하여 코드도 줄이고..

binaryjourney.tistory.com

 

 

 

* 티스토리용으로 따로 관리하기 위해 github 계정을 새로 만들었습니다. (2021-04-06)

code1: github.com/cruellaDev/react-create-board

 

cruellaDev/react-create-board

Description(korean) : https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial - cruellaDev/react-create-board

github.com

code2: github.com/jwlee-lnd/react-create-board

반응형