React (26) 썸네일형 리스트형 2024.2.28 기록 ( 협업과정 중 패키지를 관리하기 ) npm install (혹은 i ) 터미널에서 패키지를 설치할 떄 기본적으로 이런 방식으로 설치하게 된다. npm install --save 기존에는 이런 방식으로 작성을 했는데, package.json 내부에 존재하는 depandencies 항목에 추가하기 위함이다. 기본적으로 깃허브를 통해 협업을 진행할 때는 node_module 자체를 깃허브에 공유를 하지않기 때문에 패키지를 추가하면, package.json에 dependencies 라는 key값으로 저장해두고 자료를 받았을 때 기록된 패키지들을 npm install 명령어를 통해 인스톨하는 과정을 거치게 된다. 중요한 부분은 기존에 --save를 더이상 추가해주지 않아도 되는 부분이다. npm5버전부터는 save기능을 내부에 포함하고 있다. 2024.2.23 기록 (새로운 팀 프로젝트) 오늘은 프로젝트 발제와 기획에 대부분의 시간을 사용했다. 특히 코드컨벤션과 깃허브 룰을 신경써서 제작했다. 기능을 압축했다. 카카오 지도 API를 이용해 필수구현 과제를 빠르게 채우고, 남는 시간을 길게 가져가서 선택사항을 구현하고자 한다. 이 부분에서 supabase의 Realtime 기능을 사용 해볼 거 같다. 스타일링은 CSS Module을 사용해서 진행하고, 카카오 지도의 API의 기능들을 충분히 활용하는 시간을 가지려고 한다. 2024.2.22 기록 (react-query) 리액트 미들웨어 청크 (thunk) 쿼리 (react-query) 오늘은 이 중에서 리액트 쿼리에 대해서 알아보는 시간을 가졌다. 청크에 비해서 굉장히 짧고 편함.. 핵심 query = Read mutation = Create, Update, Delete query Invalidation = 이전 값 무효화 = 최신데이터로 갱신함 선행되어야 모듈 설치 yarn add axios yarn add json-server 실행하기 yarn json-server --watch 파일.json --port 포트 상위 컴포넌트에 redux provider 를 설정했던 것처럼 설정해주기 const 쿼리클라이언트 = new QueryClient(); 이렇게 되면 작업 전역에서 사용이 가능하다. DB를 별도로 분리하고 (a.. 2024.2.21 기록 (redux-thunk에 대한 짧은 이야기) 이번에 프로젝트를 마감하면서.. 시간이 많이 모자랐던 것과는 별개로 이것 저것 많은 정보가 쏟아졌던 것 같다. 그 중 axios와 redux-thunk는 환장의 콜라보를 이뤘는데, 짚고 넘어가야 하는건 비동기 통신의 상태라고 할 수 있는 3가지 상태이다. pending, fufliled, rejected 각각 요청, 수행, 거절됨 정도로 요약이 가능한데 비동기 통신은 기본적으로 주고 받아야 하나의 사이클인 점에서 이 부분들을 여러가지 방법으로 지켜주고 있다. async/ await가 그 방법중 가장 많이 사용하는 방법이었다. 또한 반드시 실패하는 일을 고려해서 try / catch , then, catch를 사용하여 어떠한 이유로 비동기 통신이 실패했는지, 알아두고 넘어가는 부분은 굉장히 중요하다는 것을.. 2024.2.20 기록 (프로젝트를 하며 나온 자잘한 실수) 깃허브에 push 할 때 발생 할 수 있는 오류 새로운 프로젝트를 진행하면서 보통 마주하는 오류이다. 보통 리포지토리 생성을 조금 늦게 진행하는 경우 발생, reject가 발생하기 때문에 git pull을 진행 한 후 재차 git push를 하게 된다. * branch main -> FETCH_HEAD fatal: refusing to merge unrelated histories 그 때 이런 오류가 발생하는데, 원인은 깃허브에서 생성한 히스토리와 로컬에서 진행한 히스토리의 충돌(없는 기록)이 발생하기 때문에 발생하게 된다. 따라서 다음과 같이 진행해주면 해결이 된다. git pull origin main --allow-unrelated-histories 이후 다시 git push를 진행하자 vite을 .. 2024.2.19 기록 (비동기통신을 위한 Json-server 라이브러리와axios) react 비동기통신을 위한 라이브러리 axios 먼저 Json-server 를 설치함. 그 이전에 선행되어야 할 항목 vite으로 진행 시 → yarn create vite@latest → 경로이동 → yarn install → yarn add axios CRA로 진행 시 yarn add axios json서버와 개발자 브라우저를 동시에 실행하기 위해서는 터미널을 2개 사용 yarn json-server --watch 데이터베이스이름.json --port 원하는포트 ex) yarn json-server --watch db.json --port 4000 다른 터미널에서는... yarn run dev CRUD CRUD는 각각 post, get, patch, delete를 사용하였다. db.JSON { "t.. 2024.2.16 기록 ( vite, 자바스크립트의 배열과 객체) Vite 새로운 프로젝트를 시작하기 전, 이번에는 CRA가 아닌 Vite를 이용해보기로 하였다. 바이트가 아닌 빗에 가까운 발음으로 읽는다. CRA와 다른 몇가지 차이점이 있는데, 우선 명령어에 차이가 있다. CRA는 create-react-app 을 입력하여 프로젝트를 생성했지만, vite는 create vite@latest 를 입력한다 이후, 프로젝트 명을 입력하라는 메시지가 출력된다. 프로젝트명을 입력하면 어떤 환경에서 개발을 할 지 물어보게 된다 이후 CRA의 초기 세팅이 끝난것과 거의 비슷하게 된다. 다만 차이점이 있다면 npm install를 추가적으로 진행해줘야 한다는 점이 있다. 하지만 그조차도 빠르고 심지어 개발 서버를 시작하는 부분조차 빠르다. (명령어는 npm run dev를 그대로 .. 2024.2.15 기록 (프로젝트 마무리 회고) 명절을 낀 기간동안 뉴스피드 프로젝트가 마무리 되었다. 이번 프로젝트에서 제일 큰 문제였던 건 파이어베이스였다. 기본적으로 데이터가 도착하는 시간보다 랜더링이 빨랐기 때문에 비동기 통신을 진행해야했고, 그 과정에서 useEffect를 이용해서 데이터를 받아오는 기능이 존재했고, 그 내부에서 데이터를 받아오는 과정이 겹쳐서 짧게는 1초 길게는 5초까지 딜레이가 걸렸다. useEffect(() => { const checkAuthState = async () => { const user = auth.currentUser setIsLoggedIn(!!user); if (user) { const userRef = doc(db, 'users', user.uid); const userSnap = await getD.. 이전 1 2 3 4 다음
