[React] CRUD 블로그 만들기 - 2. 프론트엔드

[React] CRUD 블로그 만들기 - 1. 백엔드 에 이은 포스팅입니다. 

[React] CRUD 블로그 만들기 - 1. 백엔드

 

프로젝트 목적

React 프로젝트로 CRUD 게시판 만들기

 

프론트엔드 개발

 

 

구현 기능 및 화면

회원가입/로그인, 포스트 목록 조회, 특정 포스트 조회, 포스트 작성/수정/삭제

상태 관리

모듈, 컴포넌트를 react-router-dom와 Redux로 상태 관리

---

해결한 오류

Fix typo(오타, 필드 네임 불일치, 코드 위치)

• 버튼 색상 오류: backgroud - > background 오타 수정
• 포스트 목록 조회 API 작동 오류: 포스트 하나는 post / 여러개 조회는 posts. 필드 네임 차별화의 중요성을 깨달았다.
• 게시물 수정 버튼 이름 조건 처리 오류: 컨테이너의 onEdit을 isEdit으로 해결
• 회원가입 시, POST http://localhost:3000/api/auth/register 404 (Not Found): package.json의 proxy path 수정

 

API 연결 오류

• 게시물 수정 시, 게시물이 수정되지 않고 계속 신규 생성되는 버그: writeAPI를 호출하고 있어, updateAPI로 수정하여 현재 리덕스 id값과 지금 게시물의 id 값이 일치한다면 수정 가능하도록 처리

 

의존성 배열 누락 오류

• React Hook useEffect has a missing dependency: 'match.params'. 

// PostListContainer.js
useEffect(() => {
  const { username } = match.params;
  const { tag, page } = qs.parse(location.search, {
    ignoreQueryPrefix: true,
  });
  dispatch(listPosts({ tag, username, page }));
- }, [dispatch, location.search]);
+ }, [dispatch, location.search, match.params]);

 

match.params가 비어있어서 username이 파싱이 안 되고 있었다. useEffect의 의존성 배열에 match.params 추가

 

그 외 css 스타일링 수정 사항

• 태그 추가 버튼 레이아웃이 잘려서 어색함. (수정 완료)
• 로고, 버튼, 포스트 제목 등 <Link/> 태그의 text-decoration, color 설정해주기. (수정 완료)
• 새 글 작성하기 버튼 위치 오른쪽 끝으로 변경하기. (수정 완료)

 

라이브러리

• esm: nodejs에서 import / export 문법을 사용
• Eslint: 문법 검사
• prettier: 코드 정리
• qs: URL의 query string을 stringify이나 파싱
• styled-components: css 스타일링
• react-router-dom, redux, react-redux, react-redux-saga: 프로젝트 모듈, 컴포넌트 관리
• quill: 에디터 라이브러리
• sanitize-html: html을 텍스트로 변환하여 필터링할 때 사용
• immer: Auth(회원 인증 시스템) 데이터 변경 시 불변성 유지
• react-helmet-async: 페이지 meta 헤드 제목 설정

 

마치며

결과적으로 얻은 것:

• JavaScript로 프론트엔드/백엔드까지 프로젝트 전체 개발
• MongoDB, Koa 프레임워크로 백엔드 개발
• React로 프론트엔드 개발, Redux로 상태관리, Router로 SPA 웹 구현.

와 리액트 블로그 프로젝트 완료! 뿌듯하다. 다음엔 또 뭘 만들어볼까? 더 익숙해지게 몇 번 더 만들어보고 연습해야겠다.