오늘은 오전 중에 회원가입 벨리데이션을 구현하고 게시글을 수정하는 기능을 구현하기 시작했다. 레이아웃이나 다른 것들은 몰라도 C,R,U,D는 완성 시켜놔야 다음 프로젝트에 지장이 적을 것 같았기 때문이다.
문제는 게시글 수정을 지금 시간까지 구현하지 못했다. 처음에는 라우팅을 하는 것에 시간을 많이 썼고 그다음은 기능을 구현하는 것에 많은 시간을 쏟았다. 기능이 완성됬다고 생각하고 보니까 게시글에 있던 이미지 URL을 불러오지 못해 오류가 났다. 매니저님이 방문하실 때 여쭈어 봤는데 비동기 처리를 하면서 순서가 꼬여서 일어난 일이라 특정한 조건에서 dispatch를 실행하게 하면 된다고 하셨는데. onchange에서는 동작하는데 onclick에서는 동작이 안된다. 일단 찾아보니까 state에 값을 줘서 undefined가 안나오게 하면 된다는데 내일 조금 더 찾아봐야 겠다. 일단 이것만 해결이 되면 게시글 올리는 기능도 문제가 없고 수정기능도 할 수 있을 것 같은데
지난 주에 과제가 일찍 끝났다고 추가 기능도 구현하고 끝내버린걸 후회중이다. 그렇게 기능 구현하면서도 공부가 됬을 텐데 결국에는 이론만 알고 실제로 사용을 못하는 사태가 발생했다. 아 내가 생각해도 이런 과제하나 처리하지 못하는 내가 오늘따라 너무 한심하다.
이번 주 주말에는 심화 강의를 복습하고 과제를 구현하지 못한다면 구현하신 분들께 양해를 구해 코드도 뜯어보며 내것으로 만들어야겠다. 과제는 못할 수 있다. 그런데 못한걸 못한채로 두지 말고 다음 주에는 할 수 있게 만들자.
항해 리액트 심화과정 개인 프로젝트
- 게시글
-
목록 가져오기
- 게시글 목록 노출 ✅
- 게시글은 작성자, 작성시간, 이미지 미리보기, 텍스트 내용으로 구성
=> 작성자를 가지고 오려면 firebase에서 했던 로그인 기능을 리덕스로 옮겨서 로그인이 되었을 때 작성자의 이름을 불러오면 될 것 같은데 현재 컴포넌트에 있는 내용을 리덕스로 옮기지 못하고 있다. 그외 기능은 구현했다. - 게시글 클릭시 상세페이지로 이동 ✅
- 게시글 상세페이지는 게시글 레이아웃에 맞춰 이미지, 텍스트 위치 조절해서 노출
-
추가하기 (+이미지 업로드하기)
-
3가지 레이아웃 중 선택
-
이미지가 오른편에, 텍스트는 왼편에 위치한 레이아웃
-
이미지가 왼편에, 텍스트는 오른편에 위치한 레이아웃
-
텍스트가 위에, 이미지는 아래에 위치한 레이아웃
-
-
레이아웃 선택 시, 게시글 레이아웃(모양새)대로 보이도록 할 것
=> 레아아웃이 있는 박스나 체크버튼 등을 클릭시 useState를 이용해서 바뀐 값을 저장하고 그 값에 맞춰서 작성페이지를 보여주면 될 것 같은데 그 값을 어떻게 넘겨줘야 할지 모르겠다. -
텍스트, 이미지 중 입력 안된 게 있다면 게시글 작성 버튼 비활성화
=> 3번 내용과 같이 시도 했으나 실패, 아마 image부분에서 오류가 나는 것 같다. 파일 선택이 되어 있는지 아닌 지의 여부를 확인하는 것이 필요하다.
-
-
작성 완료 시 메인 페이지로 이동 ✅
-
삭제하기 ✅
-
수정하기
=> 첫번째로 시도한 방법은 다음과 같다. 현재 상세 페이지는 각 메인페이지에 리스트에서 각각의 인덱스로 접근을 할 수 있다. 그렇게 했을 때 상세 페이지에 인덱스 값에서 각각의 인덱스에 맞는 수정 페이지로 접근시켜주려고 했고 그 곳에서 상세 페이지에 있던 데이터를 받아와 포스트를 수정하게 하려고 했는데 상세 페에지에 있던 값들을 못불러오는 현상이 발생했다. 왜 그렇지?
=> 두번째로 시도한 방법은 작성 페이지에서 작성과 수정 두가지의 기능을 동시에 하게 하는 것이다. 그렇게 하면 기존에 존재하던 데이터 값들을 받아 올 수 있고 새로운 페이지를 작성하지 않아도 된다는 이점이 있었는데 이 역시 image의 url을 받아오지 못했다. 이미지를 업로드 할 때 리덕스에서가 아닌 기존 컴포넌트 내에서 파이어베이스로 업로드 했는데 아마 여기서 비동기 통신을 하면서 문제가 또 생긴 것 같다. 아니면 코드가 잘못 됬던가. 어제 매니저님의 조언을 참고해서 업로드 부분을 다시 수정해서 기존에 글을 먼저 작성하고 그림을 올리면 글이 작성이 안되는 현상은 해결 했는데 이 부분은 아직 해결하지 못했다.
- 회원가입하기
- 이메일 형식, 비밀번호 체크 할 것 ✅
- 로그인하기
- 이메일, 패스워드 미기입 시 로그인 버튼 활성화 막을 것 ✅
- 파이어베이스 or S3로 배포 ✅
