[React] 실력다지기 프로젝트 - 프론트엔드

프레임워크 학습을 위한 미니 프로젝트 개발을 시작하였다.

프론트엔드 개발을 희망하는 사람으로서 리액트 학습과 함께 미니 프로젝트를 동시에 진행하였다.

과제 설명

개발범위

• 프론트: 게시판 UI를 구현
• 백엔드: 게시판 Server API 구현
• 추가적 구현 가능 (기술적 챌린지 요소)

초기에 나는 일단 프론트만 개발하겠다고 생각했다. 하지만 이후에 node.js 사용과, 데이터베이스와의 연결도 시도해보고 서버 클라이언트간 통신도 이뤄내보고 싶다고 생각해서 이후에 서버를 구현하였다.

인원구성

• 혼자 fullstack 개발 가능
• 프론트 UI만 구현할 경우 게시판 데이터는 브라우저상에서만 존재하도록 구성, 또는 postman mock server를 구성해서 사용
• 백엔드 ServerAPI만 구현한 경우, postman등으로 요청을 직접 보내서 시연 
• 또는 원하는 사람과 2인팀을 구성하고, 프론트/백엔드를 나누어서 개발

혼자서 풀스택 개발을 하였다.

구현 사항

구현

회원가입/로그인
- [X] 페이지 구조
- [  ] API 연결 및 DB 연결
- [  ] 인증
- [  ] 유효성 검사

게시물 작성
- [X] 페이지 구조
- [X] 페이지 디자인
- [X] API 연결 및 DB 연결

게시물 목록보기
- [X] 스크롤
- [X] 목록 별 제목, 이미지, 댓글 수 노출
- [X] API 연결 및 DB 연결
- [X] 버튼 컨테이너 디자인
- [X] 버튼 디자인

게시물 읽기
- [X] 페이지 구조
- [X] 스크롤
- [X] API 연결 및 DB 연결

댓글
- [X] 페이지 구조
- [X] 댓글 읽기 기능
- [X] 댓글 작성 기능
- [  ] API 연결 및 DB 연결

추가 구현 사항
- [X] 게시글 삭제
- [X] 게시글 업데이트

디버깅 리스트

css

• overflow
  게시물 목록 스크롤이 제대로 되지 않는데, div를 %가 아닌 px와 같은 절대적인 수치로 하면 작동됨.
  overflow 관련 티스토리
• overflow가 정상적으로 적용되지 않는 문제
  display:flex를 삭제함으로써 해결함. 애초에 적용될 필요가 없었는데, 생각없이 적용했음

[HTML, CSS] 스크롤바 생성 overflow (auto, scroll, hidden)

기능

• 댓글 읽기 기능 적용 후 board 초기 진입 시 게시물이 하나만 보이던 문제
  1. props.onChangeMode(Number(event.target.userId)를 props.onChangeMode(Number(event.target.id) 로 바꿈
  2. onClick시에 선택된 topic id를 저장하기 위한 state를 선언하고 if(selectedTopicId === t.id)의 조건문을 넣어 해당 게시물의 댓글만 보일 수 있도록 함.
• 게시물을 들어가서 댓글을 보면, 모든 게시물의 댓글이 보이던 문제
  1. if (readComment === "COMMENT")의 조건문이 for루프 안에 있어서 정상적으로 기능하지 못했음
• 게시물을 보기 상황에서 뒤로가기
  1. props에 함수 전달하여 함수를 해당 components에서 사용

• 댓글 추가 기능이 정상적으로 되지 않던 문제
  1. key값이 제대로 설정되지 못하는 문제로 판단
  2. commentList의 길이가 0일때와 0이 아닐때로 나누었는데, 이 로직은 글 생성 후 댓글을 2번 연속으로 달았을 때 문제가 생김
  3. commentNumber가 늘어나는 방식을 수정하여 해결
• 댓글 기능 구현 후 update 기능이 작동하지 않는 문제
  Nav 컴포넌트에서 관리되던 상태들을 부모 컴포넌트에서 관리하도록 하며 문제 해결

페이지

Main.js

메인 화면이고, 회원가입을 누르면 회원가입으로 넘어간다.

mode라는 state로 회원가입 페이지와 로그인 페이지를 관리하였다.

아쉬운 점은 유효성 검사, 실제로 서버와 통신하여 세션이나 토큰으로 회원가입과 로그인을 실제 수행하는 기능 구현을 이뤄내지 못했다는 것이다.

Board.js

Board.js 파일 안에 다양한 컴포넌트들을 구성했다.

어플리케이션 설계를 제대로 하지 않고 하니, 리액트의 장점인 컴포넌트의 재사용을 제대로 이뤄내지 못한 것 같다.

생활코딩님의 리액트 강의를 따라서 만들었고, 이후에 서버와 연결하여 api를 호출하는 로직으로 리팩토링을 시도하였다.

글 작성하기를 누르면 mode가 WRITE로 변함을 인지하고 state가 변하게 되면서 Board 컴포넌트의 좌측의 element가 바뀐다.

글 작성하기 form이 나오고, 글을 작성하면 정상적으로 오른쪽 board에 추가된다.

페이지를 클릭해서 들어가면, 보드의 왼쪽 부분과 오른쪽 부분에 대한 컴포넌트를 재사용 하였고, 글 목록을 받아오는 댓글 리스트에 대한 컴포넌트들도 재사용하였다.

 

아쉬운 점은 이후 서버와 연동하였을 때 새로 작성되는 댓글들이 데이터베이스와 연동되는 로직으로 리팩토링하지는 못했다는 것이다.

댓글 달기 모습이다.

---

회고

리액트에 대해 배울 수 있어서, 무언가를 구현해낼 수 있어서 기분이 좋았다.

 

CRUD의 핵심적인 기능들은 웬만하면 다 달성되었다. 하지만 여전히 회원 가입이나 로그인 등의 완벽한 처리를 하지 못했다는 점에서 아쉬움이 남는다. 추후 기회 로그인 회원가입 기능을 꼭 혼자서 구현해 보고 싶다.

 

추가로 공부해야한다고 느껴지는 것들은 다음과 같다.

• state를 전달하는 방식과
• state를 관리하는 효율적인 방법
• 재사용 될만한 function이나 component를 만드는 것
• application의 전반적인 설계
• useEffect, custom hook 등의 사용