Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
Tags
- package management
- version management
- 모던 자바스크립트 Deep Dive
- 제너레이터와 async/await
- 커리어
- 자바스크립트
- DOM
- 자바스크립트 패턴
- 진행기록
- 브라우저의 렌더링 과정
- 학습내용정리
- 프로그래머스
- 올림픽 통계 서비스 최적화
- middleware pattern
- 자바스크립트 딥다이브
- 블로그 서비스 최적화
- pr review
- 이미지 갤러리 최적화
- peerdependencies
- unique identifiers
- Babel과 Webpack
- 새 코드 받아오기
- 프론트엔드 성능 최적화 가이드
- 스코프
- 딥다이브
- 이벤트
- js pattern
- const
- mixin pattern
- js pattern
Archives
- Today
- Total
Dev Blog
20210309 21일차 그림일기장 수정 로직 구현 본문
구현 내용
-
그림판/일기장 로직 구현 완료
-
그림 일기장 수정 로직 구현 중
나의 일기 페이지에서 수정하고 싶은 일기의 수정 버튼을 누르면 수정이 가능한 일기 쓰기 페이지가 열린다.
다른 로직과 마찬가지로, App 으로의 상태 끌어올리기를 통해 해당 글의 모든데이터를 일기쓰기 페이지의 컴포넌트의 필요한 부분
에 전달한다.
function App(): ReactElement {
const [contentInfo, setContentInfo] = useState(0);
...
const conveyContent = (e: any) => {
setContentInfo(e);
console.log(contentInfo);
};
...
각 컴포넌트에서는 useEffect 를 사용하여 이 데이터의 유무에 따라 상태를 변경시키는데, 예를 들어
날짜, 그림, 제목, 내용, 기분, 공개여부 등이다. 여기서 주목할 점은 그림의 데이터는 좌표데이터이기 때문에 최초 그림을 그릴때와 마찬가지로 마지막 지우기 기능이 가능하다. (마지막 좌표 또는 선 부터 사라지는 기능).
해야할일
아직 API 를 통해 업데이트 요청을 보냈을 때 서버 에러가 발생해서 서버쪽에 확인이 필요하다.
그리고 상태 변화에 따라 예상치 못한 동작이 몇개 있어서(예를 들어, 뒤로가기 버튼을 누르고 다시 들어오면 상태가 그대로인 점.. 뒤로가기 버튼을 눌렀을때 contentInfo 가 있는 상태면 모든 상태를 리셋해주면 될 것으로 보인다.) 디테일한 에러 핸들링이 필요하다. 내일 글 수정 기능이 완성되면 바로 소셜로그인 구현을 시작할 예정이다.
요즘 너무 늦게 자는 것 같다. 새벽 네시라니.. 글 수정 기능을 왠만큼은 끝내고 싶었다. 자야지...
'BootCamp_Codestates > Final Project' 카테고리의 다른 글
20210311 23일차 카카오, 구글 소셜 로그인 구현 완료(OAuth) (0) | 2021.03.12 |
---|---|
20210310 22일차 카카오 소셜 로그인 구현(중) (0) | 2021.03.11 |
20210308 20일차 그림판/일기장 로직 구현(99% 완성) (0) | 2021.03.09 |
20210307 19일차 그림판/일기장 로직 구현(85% 완성) (0) | 2021.03.07 |
20210306 18일차 로그인/로그아웃 로직 구현 완료 (0) | 2021.03.07 |
Comments