[5주차 개인과제] 매거진 사이트 만들기! 아쉬워 ㅠ

 

 

5주차 과제도 어찌어찌 마무리..!

아직 손봐야할 부분이 많다.

 

영상찍다가 급 발견한 오류도 있고 ㅠ...

늘 과제에 아쉬움이 남는다는게 참...

 

그래도 기본 요구사항은 채웠으니까.. 하고 만족해야 하나..

 

그러나 잡지 못한 오류들과 빈틈들이.. 아숩다 아수워..

일찍 끝낼 줄 알았는데 이렇게 꽉 채워 시간을 쓰게 될 줄이야..

 

리덕스 툴킷을 이용해서 비동기 처리하는 방법을 안배웠는데

억지로 찾아서 하느라 관련 문제가 파바아ㅏ방방 발생해버렸다..

심지어 리액트 라우터도 손에 안 익은 ... v6... 

 

구버전이 더 손에 익은데... 구버전으로 했어야 했나 싶다가도

아니 그래도.. 써봐야하지 않나 싶기도 하고.. 모르겠다.

 

 

리액트 심화주차

개인과제 요구 조건

 

 

■ 회원가입 페이지

1. 이메일 형식 체크, 비밀번호 체크할 것

 

■ 로그인 페이지

1. 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것

 

■ 메인페이지 (글 목록)

1. 게시글 목록 노출

2. 게시글 하나는 작성자, 작성 시간, 이미지 미리보기, 텍스트 내용으로 구성

3. 게시글 하나를 클릭 시, 게시글 상세 페이지로 이동

 

■  글 작성 페이지

1. 레이아웃 선택 버튼 : 3가지 레이아웃 중 선택하도록 한다.
2. 텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
3. 작성 완료 시 메인 페이지로 이동

 

■  게시글 상세 페이지

1. 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출

 

■ 배포

AWS S3  또는 파이어베이스를 이용해 배포한다.

-> 이번에도 또 파이어베이스 사용..! S3을 더 많이 쓰는 것 같은데..

둘다 써보니 더 쉬운건 파이어베이스쪽.. ㅎ.. 다음번엔 S3 한번 더 써봐야겠다.

참고용 샘플 프로젝트 : http://megazine.shop.s3-website.ap-northeast-2.amazonaws.com/

 

 

■ 추가 기능 (필수 X 선택사항)

- 메인 페이지 무한 스크롤
  구현하지 못했다.. 진짜 하고싶었는데.. 오류 잡다 하루가 다 갔다.. 하루만 더 주세요...

 

- 좋아요 기능 : 게시글 중 좋아요 버튼(분홍색 하트 버튼)을 누르면 [좋아요]를 +1한다.
   다시 누르면 분홍색 하트가 회색 하트가 되고 좋아요가 -1개 된다.
    구현 완료!

 

- 이미지 여러장 업로드 (상세 페이지에서는 슬라이더로 이미지 넘겨가며 보도록 처리)

   처음에 넣을 생각하지 않고 만들었더니 손댈곳이 많아져서 스킵했다.

   아쉽.. 다음번엔 더 확장성있게 코드를 만들자.

 

- 알림 기능 만들기 (+알림페이지도 추가할 것!)

  구현했다!

 

- 좋아요 눌렀을 때 게시글 위로 하트 이미지가 나타났다 사라지게 해보기

  구현 했다! 리스트에서 여러 곳에서 한번에 나타나는 오류가 있다.
  제출 기한이 되어 픽스하지 못하고 제출 했다. 역시 아쉽다 ㅠ

 

 

------------------------------------------------------------------------

 

 

완성한 과제 홈페이지

https://mymagazinepjt.web.app/

 

깃헙

https://github.com/Trainy32/magazine_homework

 

 

------------------------------------------------------------------------

 

 

보완할 점 & 시간 내 해결하지 못한 오류들..

 

1. 리스트 정렬이 안되어 있는게 거슬린다. 다음 번엔 정렬을 시간 순으로 예쁘게 해보자!

 

2. 리스트에서 좋아요를 눌렀을 때, 애니메이션이 한곳에서만 떠야하는데 여러군데서 뜬다. 
    마감 직전에 추가로 슥 만들어 붙인 기능이라 미처 발견을 못했었다. 아쉽다...

 

3. 리스트에서 해당 유저가 좋아요 버튼을 눌렀는지 판별하는 부분이 조금 느리게 작동한다.
   결과적으로 새로고침 하지 않으면 싱크가 안맞는다.. 콘솔 찍으면서 데이터를 확인해 보면

   게시물 로딩이 fulfilled 되기 전에 처리가 끝나버리는 것 같은데..

대체 어떻게 그렇게 될 수 있지..?

 

   차라리 오류가 난다면 모를까... 아무튼 고쳐야한다 ㅠㅠ..
   이번 과제 하면서 비동기 처리시 로딩 관련 문제가 가장 많이 발생했고 제일 고치기 어려웠다.  ㅠㅠ..

   공부 열심히 ㅠㅠ 하자 ㅠㅠ... 

 

4. 로딩 문제다 이것도... 알림 삭제시 삭제도 참 잘되고 반영도 참 잘되는데...
   마지막으로  1개 남았을때는 삭제해도 화면에 남아있다. 실제로 데이터가 남은건 아니다.
   그냥 리렌더링이 안되는거다. 왜지. 왤까... 아.....후 ㅠ

 

5. 어라...! 로그인 / 회원가입 시 적합성 여부만 판별해주면 될 줄 알았는데 버튼 비활성화였다고...?
   이건 진짜 포스팅 쓰면서 발견했다. 과제 요구사항 잘 읽자..! 

 

6. 컴포넌트 쪼개는게 미숙한 것 같다. 거의 리액트 쓰는 의미가 없는 수준 아닌가 이거...

   분명 똑같은 기능인데 반복해서 코드를 쓴 부분들이 계속 거슬린다. 
   잘 계획해서 쪼개서, 코드의 재사용성을 높이자. 지금보다 더 잘게 잘게 쪼개어도 될것 같다.

 

7. 아 무한 스크롤 ㅠㅠㅠ 무한스크롤 ㅠㅠㅠㅠ 이번주에 하는 게 목표였는데 ㅠㅠㅠㅠ

   다른 추가기능 다 버리고 무한스크롤만 팔걸 ㅠㅠㅠㅠㅠㅠ 못한거 진짜 천추의 한이다...

 

8. 회원가입, 로그인 기능을 더 테스트 했어야 했나보다. 뭐가 안되는건 딱히 아니긴 한데..
   기대하던 리스폰스랑 다른 것들이 가끔 걸린다. 여기는 중요한 부분인데 간과했네...