행복을 담는 블로그

const [letters, setLetters] = useState(null); const fetchLetters = async () => { const { data } = await axios.get("http://localhost:4000/letters"); setLetters(data); }; useEffect(() => { fetchLetters(); }, []); 컴포넌트가 렌더링이 처음 됐을 때, 비동기 함수가 실행되기 이전에 map이나 filter 함수가 먼저 호출된다. 따라서 letters에 아무 데이터가 들어있지 않는다면, 해당 데이터를 읽어 올 수 없으므로 오류가 난다. async보다 map 또는 filter 함수가 먼저 돌아간다. Error가 난 LetterList로 들어가보면, f..

리덕스 미들웨어 (Redux Middleware) 란? 리덕스에서 dispatch를 하면 action이 reducer로 type과 payload를 가지고 전달이 되고, 새로운 state를 반환한다. 하지만 middleware를 사용한다면, 이 과정 사이에서 하고 싶은 작업을 넣을 수 있다! 리덕스 미들웨어를 사용하는 이유는? 서버와 통신을 위해서 사용. 그 중에서도 가장 많이 사용되고 있는 리덕스 미들웨어가 redux-thunk이다. Thunk란 무엇인가? 리덕스에서 가장 많이 사용하고 있는 미들웨어 중 하나. thunk를 사용하면, 객체가 아닌 함수를 dispatch 할 수 있게 해준다. dispatch(함수) → 함수 실행 → 함수 안에서 dispatch(객체) 리덕스 미들웨어 사용하기 : 액션이 리..

Redux toolkit을 배우기에 앞서 기존 redux 구조를 복습해보고 넘어가보도록 하자. redux 폴더에는 config 폴더와 modules 폴더가 있다. redux : 리덕스 관련 코드를 모두 몰아넣음 config : 리덕스 설정 관련 파일 전부 configStore : 중앙 state 관리소 => 설정 코드(.js) modules : state의 그룹! 1. configStore.js에서 store를 생성한다. // redux > config > configStore.js import { combineReducers, createStore } from "redux"; import counter from "../modules/counter"; const rootReducer = combineRe..

Firebase CRUD 파이어베이스 CRUD 코드 중에서 내가 이번 프로젝트에 맡았던 부분 중 CREATE와 READ 코드에 대해서 복습해보고자 한다. CREATE 코드 서버에 네트워크 요청을 한 번 더 보낸다. 장점 : 데이터의 일관성을 유지할 수 있다. 단점 : 서버의 부담을 늘린다. Optimistic Update 서버의 부담을 줄이고, UI를 미리 업데이트 하는 방법 /* 포스트 글 추가하기 */ const addPostSubmit = async (newpost) => { const collectionRef = collection(db, "postInfo"); await addDoc(collectionRef, newpost); setPosts((posts) => [newpost, ...posts..

나 진짜 환장해... FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore 이 에러 때문에 진짜 미치고 팔짝 뛸뻔 했는데... 역시 나같은 에러를 겪는 사람은 꼭 존재한다... import { collection, getDocs, query } from "firebase/firestore/lite"; "firebase/firestore/lite" 바로 firebase 경로에서 firebase/firestore/ 뒤에 lite를 붙여주니 오류가 해결이 되었다...허허허...

또다시 오늘의 멍청한 실수 ... const CardClickHandler = () => { if (todo.id === id) { navigate(`/detail/:${todo.id}`); } }; navigate(`/detail/:${todo.id}`); 오늘 한 멍청한 실수는 바로... navigate에서 /detail 뒤에 /id 값만 붙여줘야하는데, /:id로 :을 함께 써서 id 값을 계속 못 찾고 있었던 것...!!! console.log 찍어보니 id 값이 숫자 또는 문자열만 나오는게 아니라 : 1 이런식으로 나오고 있었다... /:는 Router에서만 사용하는 문법으로 뒤에 params를 붙이도록 설계되어 있다. 이 값을 url 경로로 사용하기 위해서는 /detail/id로 사용해야 했던..

완성된 프로젝트를 서버에 배포하는 방법에 대해서 알아보고자 한다. 로컬에서 배포 서버를 미리 확인하기. 실제 서버를 배포하기 전에 개발 서버를 통해 미리 확인을 해 보자. 🚨 개발 서버 v.s. 배포 서버 개발 서버 : 실제 서버를 배포하기 전에 로컬에 바로 띄워서 확인하는 서버를 말한다. 최적화 전이라 속도가 느리다. 배포 서버 : 배포 후 사용자가 볼 수 있는 실제 서버를 말한다. 빌드 과정을 통해 최적화 되었으므로 속도가 빠르다. 1. 빌드하기 소스 코드 변환 : JSX, ES6+ 문법 등을 브라우저가 이해할 수 있는 javascript 코드로 변환한다. 모듈 번들링 : 여러개의 파일과 모듈을 하나 또는 여러 개의 파일로 합친다. 압축 및 최적화 : 코드 압축 및 최적화 npm run build 또..

요구 사항 라우팅 설정 - React Router를 사용하여 투두 리스트 페이지와 투두 아이템 상세 페이지 간의 라우팅을 구현합니다. - URL 경로는 / 로 투두 리스트 페이지를, /:todoId 로 각 투두 아이템의 상세 페이지를 나타냅니다. 상세 페이지 구현 - 투두 아이템의 상세 정보(예: 제목, 설명, 완료 여부 등)를 표시합니다. - 상세 페이지는 투두 아이템의 ID를 기반으로 해당 아이템의 정보를 찾아 표시합니다. 1. page와 Router 설정하기 1) HomePage 와 DetailPage를 구분한다. /* Home 페이지 */ function Home() { return ( ); } ▶️ 기존의 Header와 TodoController를 Home 페이지 하위로 넣어준다. 2) Rout..