* 인용시 출처 부탁드립니다.
완성 소스 code:
github.com/cruellaDev/react-create-board-v2
cruellaDev/react-create-board-v2
updated version of react-create-board. Contribute to cruellaDev/react-create-board-v2 development by creating an account on GitHub.
github.com
# 1. React App 생성, 디렉토리 구조설정, json-server 설치 및 실행
[React][CRUD] 게시판 만들기 All in One (1). react App 생성, 디렉토리 구조 설정, json-server 설치 및 실행
들어가기 전에 10월 말부터 연재(?)한 게시판 crud 시리즈(간단한 게시판 만들기)는 presentation component, container component 가 따로 분리 되어있는 구조로 만들었는데 동작 부분(container) 화면에 보이는..
binaryjourney.tistory.com
# 2. npm install, veiw, router 생성
[React][CRUD] 게시판 만들기 All in One (2). npm install, view, router 생성
앱을 키기 전에 일단 모듈을 설치하겠다. npm i이나 yarn add 도 괜춘하다 모듈이 설치될 폴더위치는 ./reat-create-board 이다. yarn add redux react-redux react-router react-router-dom redux-saga @reduxjs/..
binaryjourney.tistory.com
# 3. Side Bar 게시판 조회해오기
[React][CRUD] 게시판 만들기 All in One (3). 게시판 조회해오기, redux, react-redux, redux-saga, axios, get, REST A
들어가기 전에 파일 구조를 맞추고 들어가겠다. Board.js // Board.js import React from 'react'; import { Link } from "react-router-dom"; function Board() { return ( Main board1 board2 ); } export defau..
binaryjourney.tistory.com
# 4. 게시판 따라 다른 게시글 목록 조회해오기
[React][CRUD] 게시판 만들기 All in One (4). 게시판 따라 다른 게시글 목록 불러오기, redux, redux-saga, redu
조회 방식은 지난번 게시판 board 불러오는 것과 거의 비슷하다. 그러나 이번에는 articles 내 데이터 중 원하는 boardId 를 가진 것들만 불러올 것이다. 게시글 목록 불러오는 것과 한 게시글의 내용
binaryjourney.tistory.com
# 5. 게시글 단건 내용 조회해오기, 조회수 증가시키기
[React][CRUD] 게시판 만들기 All in One (5). 게시글 내용 조회해오기. 그리고 이제 조회수 view 증가를
ArticleList 에서 나오는 게시글 목록 중 하나를 클릭하면 http://localhost:3000/article/2 이렇게 url이 바뀐다. /article/:articleId 로 해놨으므로 param : { articleId: 2 } 이렇게 값을 받을 수 있을 것이다..
binaryjourney.tistory.com
# 6. 댓글 조회, 댓글 등록, 댓글 삭제
[React][CRUD] 게시판 만들기 All in One (6). 댓글 리스트 조회, 댓글 달기, 댓글 삭제, axios, redux-saga, redu
이번엔 Comment 에서 댓글을 조회하는 걸 만들 것이다. 운과 시간이 된다면 댓글 달기, 더 되면 댓글 삭제까지 해볼참이다. commentSlice와 commentSaga 를 만들자. commentSlice의 형태도 거의 똑같다. // commen
binaryjourney.tistory.com
# 7. 새글 쓰기
[React][CRUD] 게시판 만들기 All in One (7). 새 글 쓰기, axios, post
이제까지 거의 GET방식을 이용한 조회를 해봤다 (조회수 update, 댓글 등록, 댓글삭제 제외) 이번엔 새 글 쓰기를 해보겠다. 새 글 쓰기는 지난번 Route.js 에서 경로가 "/insert" 일 때 컴포넌트는 Post
binaryjourney.tistory.com
# 8. 글 수정하기
[React][CRUD] 게시판 만들기 All in One (8). 글 수정, axios, put
수정으로 들어가기 전에 Article.js 에 수정 버튼을 만들어준다. // Article.js const history = useHistory(); function onClickUpdateButton() { history.push(`/update/${params?.articleId ?? 0}`); } 수정 나..
binaryjourney.tistory.com
# 9. 글 삭제하기
[React][CRUD] 게시판 만들기 All in One (9). 글 삭제, axios, delete
articleSlice.js 에 삭제 액션을 만들어준다. // articleSlice.js deleteArticle: (state, action) => {}, deleteArticleSuccess: (state, action) => { state.article = initialState.article; state.status = ac..
binaryjourney.tistory.com
# 10. 설정 만들기 (게시판 등록, 수정, 삭제, 코드 등록, 수정, 삭제)
[React][CRUD] 게시판 만들기 All in One (10). 설정 만들기 (총 복습용), redux, action, redux-saga, redux-toolkit,
이건 원래 계획에 없었는데 근데 깨끗한 db상태에서 시작하려면 필요할 것 같아 결국 만들었다. 이제껏 해온 saga, redux, CRUD의 총집합이다. (react-router가 없군..!) board와 code만 db에 남기면 되기에 필
binaryjourney.tistory.com
# Issue 1. 줄바꿈 문제 (\n 를 <br/> 로 변환하기)
https://binaryjourney.tistory.com/71
[React][CRUD] 게시판 만들기 All in One - (Issue) \n 을
변경하기
textarea 태그에서 줄바꿈이 포함된 글은 \n 을 포함하여 서버에 저장된다. 탭의 경우 \t 로 들어간다. html editor 를 이용하게 되면 자동으로 replace 를 해줄테니 이러한 문제가 생기지 않겠지만 v2 소
binaryjourney.tistory.com
# refactoring 1. 불필요한 삼항연산자 제거
https://binaryjourney.tistory.com/72
[React][CRUD] 게시판 만들기 All in One - (refactoring.1) Extract this nested ternary operation into an independent stateme
목차 돌아가기: https://binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial-v2 [React][CRUD] create-board-tutorial-v2 * 인용시 출처 부탁드립니다. 완성 소스 code: github.com/cruellaDev/rea..
binaryjourney.tistory.com
완성 소스 code:
github.com/cruellaDev/react-create-board-v2
cruellaDev/react-create-board-v2
updated version of react-create-board. Contribute to cruellaDev/react-create-board-v2 development by creating an account on GitHub.
github.com
* 인용시 출처 부탁드립니다.