6주차: React 미니프로젝트 "오늘도 무사히"

시연영상

 

---

 

# 오늘도 무사히

 

고된 일상을 버티고 오늘 하루도 무사히 넘겨보자는 취지의 공유 일기장입니다. 비대면에 익숙한 사회가 되어버린 오늘 날,  서로가 일상을 공유하며 혼자가 아님을 일깨워주고자 공유일기장 이라는 아이디어를 내게 되었습니다. 
유저들은 서로의 일상을 사진과 함께 공유하고,  댓글도 달고, ‘좋아요’로 반응해주며 공감과 위로를 공유할 수 있는 서비스 입니다.

 

 

---

# GitHub

FrontEnd Github

GitHub - nonjee888/fe_6week_miniproject: 미니프로젝트 - 공유일기장

BackEnd Github

GitHub - kminsic/diary: 2조 다이어리 프로젝트 beck-end

 

 

---

# 컴포넌트 구조

---

# 와이어 프레임

 

 

---

# 트러블슈팅

Back End

1. 회원가입은 되는데 로그인 실패

SQL error 500 메시지 나옴. 기존 아이디는 로그인이 가능했었음
 postman으로 새로운 아이디 생성 후 로그인시도 콘솔에 nullpointerexception이 터져서 확인,  refresh토큰 테이블에 잘못된 entity속성이 들어갔음. db초기화 후 로그인 성공함.

 

2. 헤더에 토큰이 요청되지 않는 사항 발생

Service에 Refresh-Token을 헤더에 보내는 과정에서 Refresh-Token에 대한 명칭 통일(refreshtoken)

 

Front End

1. 로그인 후 포스팅 시 415에러 : 지원되지 않는 Media Type 코드수정 후 완료 

 

2. 서버 연결 후 포스팅 리스트, 댓글 리스트 렌더링 안됨

API Response 확인 후 리덕스 미들웨어에서 return 하는 코드 수정 후 에러 해결

 

3. 로그인후 로그인 유지 안됨

토큰 저장이 안되어서. 서버에서 localhost:3000에 access token, refresh token을 볼 수 있는 권한을 설정 해 주지 않아서 권한 설정 요청 후 각각 쿠키에 저장. 

 

4. FormData 전송 안됨

FormData로 한번에 묶어 보내니 서버 DB에 데이터가 들어오지 않아서 title, content는 Json으로, img는 formdata로 보냈다. 

 

5. 게시글 수정에서 이미지만 변환되고 타이틀과 내용은 바뀌지 않음 

onchange에서 새로 저장해준 state를 서버로 전송하는게 아닌 post.data.title, post.data.content 라는 기존에 작성했던 title과 content의  value가 계속 서버로 전송 되었기 때문이었다. 새로 저장된 state로 코드를 수정 해 오류를 해결했다.

 

---

# 새로 도전한 기술?

BE: 이미지 업데이트 시  s3에 존재하는 기존 이미지를 지우고 업데이트한 이미지를 업로드
FE:  쿠키를 이용한 Access token, Refresh token 관리, RESTful API 활용한 서버로 form-data 전송, 회원가입, 로그인, 좋아요 기능구현

 

 

 

---

# 앞으로 시간이 더 있었다면 어떤 것을 더 할 수 있었을지? 회고하기

Back End: 깃 액션,무한스크롤

현재 post 업데이트에서 모든 데이터의 값을 바꿔줘야 정상적으로 작동하는데,
구글링해보니 patch라는 api 어노테이션이 있었다.
put과 patch는 디폴트로 변경해준다는 성능을 지니고 있는데
put은 데이터를 모두 바꿔줘야하는 반면 patch는 일부분의 데이터만 수정가능하다고 한다.
이 기능으로 post 업데이트 기능을 만들어 보고 싶다.

 

Front End: 회원 탈퇴 기능, 무한스크롤, 사진 비공개 설정

시간이 없고 거의 모든 프론트엔드 기능과 css를 혼자서 작업하고 배포까지 하다보니 시간이 너무 부족해서 더 진행하고 싶었던 회원 탈퇴 기능이나 무한스크롤, 사진 비공개 설정 등을 하지 못한 점이 아쉽다. 또한 자기가 작성한 post에만 삭제 버튼과 수정 버튼이 뜨게 만들고 싶다.

 

---

# 회고하기

협업을 처음 하다보니 초반에는 백과 프론트가 어떻게 연동되는지 감이 오지 않았다.
하지만 계속해서 소통하다보니 어떤식으로 데이터를 주고받는지 알게 되었다.
이 과정에서 프론트엔드와 백엔드의 커뮤니케이션이 얼마나 중요한지 깨닫게 되었습니다.
cors권한설정이나 데이터를 어떻게 주고받을지를 하나하나 설정해주며 개발에 임하게 되었고 api설계가 얼마나 중요한일인지 다시 한번 생각하게 해주는 프로젝트였다. 기본적인 CRUD만을 구현한 프로젝트였지만 프로젝트를 뼈대를 세우고, 컴포넌트 구조를 잘 모르는 팀원들을 위해서 컴포넌트 구조도를 만들어 설명했고,  배포까지 혼자서 진행하다보니 많이 타이트하고 밤도 많이 세운 것 같다. 아쉬운 점이 많은 프로젝트여서 리팩토링을 할 시간이 있었으면 좋겠지만 코드 리팩토링은 내일 또 시작하는 클론코딩이 있어서 조금 미뤄 두어야 할 것 같다.