Frontend 개발자 - hyo.loui

🎯목적 : CRUD : Delete API 생성, Firebase : firestore data 삭제하기, CRUD 최종 완성 1. 삭제 아이콘에 함수 추가 태그에 onPress 속성으로 setDelete()함수를 추가하고 파라미터로 todo의 id를 넘겨줬다 2. create Delete API 아주 심플하다 지금까지 했던 과정을 생각해보자, 서버 통신이 이루어지기 때문에, 비동기 처리를 하고 "todos"라는 폴더에 존재하는 todo.id(파라미터로 받아온 것)를 deleteDoc 을 사용해서 삭제하면 된다! 3. 결과 화면 이로써, CRUD 모두 너무나도 잘 구현이 되었다! 하지만 UX를 고려했을 때 실수로 삭제버튼이 눌려진다면 내 소중한 todo가 순식간에 날아가버린다ㅜㅜ 그래서 다시한번 컨펌을 ..

❤️‍🔥TIL : Today I Learned 🎯목적 : CRUD : Read API 추가, onSnapshot API 활용하기 1. Firestore 의 DB 가져오기 저번 포스팅에서 Creat API를 만들어 Firestore에 "todos" 라는 db를 넣을 수 있었다 이번에는 가져와서 보여줘야한다! firebase API 활용하자! 선택지는 2가지다 getDocs API onSnapshot API getDocs로도 가져올 수 있겠지만 우리는 실시간으로 변동이 생기면 다시 데이터를 가져와야 하므로 state 처럼 사용해야 한다. 그래서 onSnapshot API 를 활용했다! import { onSnapshot } 으로 api를 가져온다 useEffect를 사용하여 컴포넌트가 마운트시 곧장 Read..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 위 영상처럼 수정 버튼을 클릭하고 수정을 한 후, 다른 투두에서도 이전에 수정했던 내용이 고스란히 남아있는 문제였다 🎈 문제 해결 과정 : 우선 코드부터 보자 수정 버튼을 클릭했을 때, 나타나는 태그이다 저 값에서 value가 editText 라는 state를 가지고 있었다.. onSubmitEditing 속성의 updateTodo라는 함수안에서 editText를 다시 setState로 바뀐 값으로 넘겨줄 수 있었다, 하지만, 더 간단하게 defaultValue 라는 것을 통해 처음 보여줄 값만 정해줬다. 수정하는 역할의 특성상 보여질 텍스트는 1회성이기 때문이다 input 태그에 기본값으로 가지고있는 속성으로 붙여줬고, editText를 ..

🎯목적 : CRUD : Create API 추가, Firebase : FireStore 연결 1. Layout 만들기 위와 같은 레이아웃을 만들어 보겠다! 사실 '투두리스트'를 많이 만들어서 캠프 커리큘럼, 학습의 다양성에 의문점이 있었지만, 프론트엔드 개발자의 기본 자질인 CRUD의 기본기를 가장 핵심적으로 다루는 학습이라고 생각한다. 다시한번 복습하자면, ios에서 카메라 영역으로 인해 layout이 가려지는 문제로 태그를 사용해준다! 안드로이드에서는 문제가 없지만 첫 작업은 보통 ios로 작업을 해야 2중 작업이 줄어든다 그래서 '노치 제거' 라는 주석으로 태그 사용의 이유를 주석으로 설명했다. 크게 두 섹션으로 나눌 수 있는데 위 사진에서 알수 있듯, 고정 영역(Fiexd Part) & 스크롤 영..

❤️‍🔥TIL : Today I Learned 🤢 문제 내용 : 선발대 과제로 redux 만을 사용하여 흔히 아는 '투두리스트' 앱을 만들고 있던 와중에 생긴 문제였다. 스스로 하드코딩을 연습 겸 해서 코드 작성중 state로 넣은 데이터를 module에 있는 initialState로 업데이트 시켜주려고 했으나, 전달하는 데이터가 한박자 느리고 에러가 발생했다.. (28 line) setTodoForm 으로 업데이트 한 state를 (36 line) 에서 payload 로 넘겼으나 Uncaught TypeError: Cannot read properties of null (reding 'id') 아직 state가 null 이라고 한다... 에러 메세지가 해석이 가능해서 스스로 여러 시도를 해봤지만 대표적..

❤️‍🔥TIL : Today I Learned 코드 구조 파악하기 이번 react-todo-list 과제를 진행 하면서 참조했던 repository를 활용하여 코드 구조를 파악하면서 다시한번 component, props, state 의 개념에 대해서 설명한다. 참조 - https://github.com/su-no/react-todo-list App.jsx 와 todo.jsx 코드를 보며 설명 하겠다 App.jsx + component 파일의 확장명은 js 로 사용해도 되고 jsx 로 사용해도 된다. 하지만 React에 쓰이는 파일이라는 것을 조금 더 명시적으로 표현하기 위해 jsx 를 많이 사용한다. import { useState } from 'react'; // useState 사용 import {..