React - pair coding (login, board CRUD)

---

목차

1. 요구사항

2. App에서 설정

3. 회원가입

4. 메인페이지

5. 글쓰기

6. 글보기

7. 글 수정하기

---

 

 

 

완성 코드 github → https://github.com/subinkr/react-pair-coding

 

 

 

 

1. 요구사항

- user 회원가입, 로그인, 마이페이지

- board 리스트(main), 글쓰기, 보기, 수정하기, 삭제하기

   - 회원가입하고 로그인해야 글쓰기가 가능

   - 수정, 삭제도 작성자일 경우 가능

 

 

 

 

2. App에서 설정

- Routes, Route, useState 사용

- [ user, setUser], [ userList, setUserList ], [ boardList, setBoardList ] 각 페이지에 맞는 상태를 props로 전달해주기

  

 

 

 

 

3. 회원가입

- username이 있다면 메인페이지로 이동

   - 없다면 Redirect로 로그인하는 페이지가 보이게하기

 

- input box의 입력값으로 이미 존재하는 아이디인지 userCheck를 해서 회원가입하기

- 입력한 값으로 userCheck해서 로그인 성공과 실패 alert으로 알려주기

 

 

 

 

 

4. 메인페이지

- Header에는 title과 로그인 버튼 존재 (모든 페이지에 같은 Header가 있어야하므로 component로 작성)

   - username이 있다면 마이페이지와 로그아웃 버튼이 보여짐

 

- <table> 태그 사용해서 게시판 리스트 보여주기

      → 테이블 태그 사용시 <thead> 태그와 <tbody> 태그안에 tr, th, td 태그 작성하기

 

- map함수를 사용하여 boardList item, index로 돌려서 게시글이 생길때마다 tr, td가 생성되어지게 작성

  - map사용시 "key"값을 넣어주기!!! (index) 

 

 

 

 

 

5. 글쓰기

- input box에는 게시글 title을, textarea에는 게시글 content를 담기

- boardList 속에서 id를 찾아 + 1 을 해준다음에 input box 입력값과 함께 setBoardList에 추가해주기

- setBoardList 상태에는 boardList를 스프레드로 복사해서 새로운 게시글을 넣어주기

 

- 취소하기와 작성하기 버튼생성 

   - 취소하기는 Link로 메인페이지로 이동

   - 작성하기는 onClick으로 setBoardList을 추가해주었던 함수를 넣어준다.

      → boardList의 id를 같이 넘겨서 해당 게시글을 보여주는 뷰 페이지로 이동

 

 

 

 

 

6. 글보기

- 글쓰기에서 넘겨준 id를 파라미터에서 찾아서 boardList에 있는 id와 일치하는지 확인하기

- board의 제목, 내용을 보여주기

 

- 목록가기, 수정하기, 삭제하기 버튼 생성하기

   - 목록가기는 Link로 메인페이지로 이동

   - 수정하기는 board의 id를 같이 넘겨서 해당 게시글을 수정할수있는 수정페이지로 이동

   - 삭제하기는 boardList에서 filter를 사용해서 item.id를 돌려 setBoardList에 넣어준다.

 

 

 

 

7. 글 수정하기

- username이 없거나, username이 board작성자와 같지않다면 메인으로 이동

  - 있다면 Redirect로 수정할수있는 페이지 보여주기

 

- params에서 id를 찾아서 boardList에 있는 id와 일치하는지 확인하기

- 기존에 작성한 게시글의 내용이 보일수 있게 useEffect를 사용

   - input box와 textarea의 value를 찾아 board의 title과 content라고 지정해주기

 

- boardList에서 findIndex를 사용해서 게시글 id를 찾고

- 반환값을 기준으로 boardList를 slice 사용해서 잘라낸 다음

- setBoardList 상태에 잘라진 boardList와 수정된 게시글을 넣어준다.

 

- 취소하기와 수정하기 버튼생성 

   - 취소하기는 Link로 메인페이지로 이동

   - 작성하기는 onClick으로 setBoardList을 추가해주었던 함수를 넣어준다.

      → boardList의 id를 같이 넘겨서 해당 게시글을 보여주는 뷰 페이지로 이동

 

 

 

---

※ 페어코딩은 처음해봐서 자신 없었는데 구현이 되고나니 뿌듯했다!

※ slice, map, filter, find, findIndex 메서드들의 공부가 더 필요하다고 느꼈다.

※ 리액트는 상태가 변하면 화면이 바뀐다는것을 계속 인지하고 상태를 잘 전달하고 작성해야겠다.

    그리고 동일한 내용이 반복될것같다면 전역에 빼서 같이 사용해야겠다. (내 경우에는 wrapper)

※ 서버없이 작성한 코드니까 서버 연결해서 작성도 해봐야겠다.