행복을 담는 블로그

Error: listen EADDRINUSE: address already in use :::5000 아니 나는 분명 port 5000을 사용한 적이 없는데, db.json 파일을 json-server로 열려고 하니 이미 5000 포트가 사용 중이라고 에러가 났다. 진짜 뭐지 왜지 했는데... 이게 윈도우에서는 netstat -aon 을 사용하면 해당 port의 PID를 알 수 있고, 이 포트가 어디에서 사용되고 있는 포트인지를 확인 할 수 있다고 한다. 근데 맥북에서는 내가 원하는 값이 안 나와서 서칭을 하다보니 아래 코드로 확인해 볼 수 있었다. sudo lsof -iTCP -sTCP:LISTEN -n -P 찾았다 요놈! 찾아보니 5000 port 에는 ControlCe 가 연결이 되어 있는데, 바로..

리덕스 미들웨어 (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로 사용해야 했던..

원래는 CRA로 계속 프로젝트를 진행하다가 이번에 처음으로 vite을 쓰는 중인데,,, 그동안 안 나던 error가 알게 모르게 계속 나는 것 같다.. 그 중에서 오늘 하루종일 제일 거슬렸던 건 바로, 이 props 로 받아온 값이 계속 유효성 검사에서 누락되었다는 경고가 옆에 뜨는 것이었다. 🚨 'children' is missing in props validation근데 심지어 console.log 값도 잘 찍히고, 브라우저에서는 아무런 에러도 뜨지 않는단 말이지,,, (그냥 코드 짜는 내내 너무 거슬렸음) 그래서 막 구글링을 해보니, 부모 컴포넌트로부터 전달받은 props 중에서 특정한 prop이 컴포넌트의 PropTypes에 정의되지 않았을 때 발생한다고 한다. 즉, 해당 props..

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