* 더 쉽고 유익한 튜토리얼 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 생성하기
[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>
[React][CRUD] 리액트로 간단한 게시판 페이지 만들기 - 18. 오류, issue 고치기, validateDOMNesting(...):
Hi Everybody 안녕 Hola! 오랜만의 포스팅이다. 지난주부터 개발 들어가고 2주를 바삐 보냈다. react는 공부할수록 새롭다. 새로워....! 기회가 된다면 library 중 하나인 redux-persist 도 추가하면 어떨까 생
binaryjourney.tistory.com
# 19 - Refactoring, useState 구문 useSelector 로 클린코딩하기
[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