[TIL] Day38 #React-CRUD-client

2022.06.19(Sun)

[TIL] Day38

✅ 이번 주말에는 React로 CRUD(create, read, update, delete) 기능 구현해서 간단한 일기장 형태의 토이 프로젝트를 진행했다.

하필 이삿날에, 알바에 정신없는 이번 주말이었지만 틈틈이 구현해서 어찌어찌 update 기능을 제외한 create, read, delete 기능까지는 구현했다.
구치만,, 끝끝내 update 기능은 구현이 안 됐다,,
1️⃣ 1차 고비는 목록에 있는 제목 클릭시 옆 editor에 내용을 띄워야 하는데 filter를 이용해서 같은 id 값을 가져오려는데 계속 undefined가 찍혔다..🥲
2️⃣ 2차 고비는 프로젝트 컴포넌트 분리를 이상하게 해서 App.js에서 자식 컴포넌트들에게 props로 값을 넘겨주는 부분에서 너무 많은 것들을 넘겨줘야 해서 코드가 점점 꼬여가는 느낌을 받았다 🫠
3️⃣ 3차 고비는 수정 버튼이 있는 editor.js와 수정해야 하는 값들은 다른 형제 컴포넌트의 자식 컴포넌트에 두어서 값들을 주고 받는데에서 단단히 꼬여버렸다는 점.. 그래서 update 기능이 제대로 작동이 안 됐다 😱
4️⃣ 마지막으로 이사하는 집에 공유기만 새로 설치하면 와이파이된다고 했다는데 원래 쓰던 공유기는 sk이고, 지금 집은 hello TV 꺼라 호환이 안된다고 했대서 집에 있는 동안 일단 핫스팟 데이터로 기능 구현,,
일욜날 iptime 공유기 새로 사서 연결했는데도 계속 '인터넷 연결 없음'이 떠가지고, 리필한 데이터까지 다 쓰고, 아빠가 선물한 데이터로 다시 리필했다.🥲
월욜 아침에는 심지어 핫스팟 연결도 안되가지구 오전에 hello TV 전화해서 결국 해결쓰.. 다사다난했던 주말쓰😭

간략한 폴더 구조는 다음과 같다.

• App.js
  • ContentList.js
    • ContentItem.js
  • Editor.js

➰ ContentList 컴포넌트는 왼쪽에 보이는 글 목록 화면
➰ Editor 컴포넌트는 오른쪽에 보이는 상세 글 내용 및 글쓰기/수정/삭제 화면
➰ ContentItem 컴포넌트는 글 목록에 보이는 각각의 글 아이템

📎 암튼 주말동안 구현한 화면&기능은 아래와 같다.

1. 제일 처음에 나타나는 화면으로, 제일 최신 글 내용이 오른쪽에 보임

2. [CREATE] 왼쪽 글쓰기 버튼을 눌렀을 때 오른쪽 Editor 컴포넌트에서 글 제목, 내용을 작성할 수 있다.
   

3. [READ] 내용을 작성하고, 저장 버튼을 누르면 왼쪽 글 목록에 새로 작성한 글이 추가된 것을 확인할 수 있다. + 목록에 있는 제목을 누르면 오른쪽에 해당하는 글 상세 내용이 나온다.
   

4. [DELETE] 번호 2인 글 제목을 눌러서 오른쪽 화면 하단에 나타나는 삭제 버튼 클릭시 번호 2인 글이 목록에서 삭제된 것을 확인할 수 있다.
   

➕ [UPDATE] 수정 기능은 잘 작동하지 않으므로 다시 구현해보고 코드 과정 블로깅 다시 하기!

CRUD가 제일 기본 기능 구현일텐데 이것 마저도 못하는 나의 실력에 다른 의미로 놀랍다 정말 🥲 그래도 이번 토이 프로젝트를 통해 값 주고 받는 부분을 조금이나마 감 잡을 수 있었던 TIME.