1

❌ React - Error ❗Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 알아보니 - router component로 설정해놓은 page 컴포넌트가 export 없이 비어있어서 - import한 컴포넌트의 네이밍 문제로 . . 등으로 발생하는 에러라고 한다. 내 경우도 위와 ..

0228 즐겨찾기 (or 좋아요) 기능은 구현해보고 싶었지만 한번도 시도해본 적이 없었다. 다른 분들이 하신 걸 보면서 우와 어떻게 한거지, 생각만 했던 거 같다. 근데 이번 기회에 구현해볼 수 있게 돼서 넘넘 뿌듯하고 좋은 경험이었다 !! ㅠ^ㅠ 사실 로그인/회원가입을 맡아주신 팀원분이 session stroage에 유저 uid를 set하고, 내가 그걸 get해서 쓰는 식으로, firestore를 활용해 데이터 넣고 가져오고 하면 될 거라고 잘 알려주시고, 필드값도 어떻게 할 건지 잘 전달해주셔서 정말 수월하게 된 것 같다. 세션스토리지는 처음 써봤는데, 로컬스토리지와 쓰는 방법이 똑같았다. 또 파이어스토어는 이전에 활용한 경험이 있어서, 다시 구글링해서 잘 써먹은 거 같다. (근데 배열에 원소 추가,..

프로젝트 메인페이지에서 필요한 정보들을 api - axios get 해서 가져오고, 그 정보들을 하나의 객체로 묶어, 배열 state (useState) 에 하나씩 담고 map으로 돌리면서 출력했다. 은 컴포넌트 ! 그 외에도 input에 부여하는 onKeyDown 속성 등을 배웠다. 이번에는 trim() 메서드를 사용해 유효성 검사도 추가 ! (다른 분들이 쓰신 코드도 있음 /스타일컴포넌트 부분은 생략) import { useEffect, useState } from 'react'; import styled from 'styled-components'; import HeaderSlider from '../sliders/HeaderSlider'; import { useMostPopularVideos } ..

이런 식으로 api 를 쓰는게 맞는 지 모르겠으나.. 아마 api - axios.get 제외한 부분은 따로 빼는 게 좋을 것 같긴 하다. ...api.js import axios from 'axios'; import request from './request'; // 메인페이지 BodySlider - 유튜버 영상 슬라이더에 사용될 youtube data api export const mainSliderDataClient = axios.create({ baseURL: import.meta.env.VITE_APP_YOUTUBE_BASE_URL_GET, headers: { 'Content-Type': 'application/json' }, responseType: 'json' }); // input: 영상id..

2.23 TanStack | High Quality Open-Source Software for Web Developers TanStack | High Quality Open-Source Software for Web Developers tanstack.com React-Query (aka. Tanstack-Query) 리액트쿼리는 서버 상태관리를 쉽게 하도록 도와주는 라이브러리로, 서버 DB 연결 관리와 전역상태관리를 한 번에 해준다 ! (Redux 미들웨어이자, Redux Toolkit에 내장되어있는, Thunk의 대체재라고 할 수 있다. Thunk는 요새 안 쓰는 추세라고도 하고, 또 Thunk보다 React-Query 가 더 쉽다고 한다.) * 리액트쿼리의 서버상태관리 용이성 - 다음의 4가지를 ..

강의보고 안 먹혀서 찾아보니까 json-server에서 정렬방식이 새롭게 바뀐 거였다 . 공식문서에는 아래와 같이 나와있는데 사실 첨엔 봐도 잘 몰랐다. view는 두번째 기준인가, 이러면서...ㅎ https://www.npmjs.com/package/json-server json-server > [!IMPORTANT] > Viewing alpha v1 documentation – usable but expect breaking changes. For stable version, see [here](https://github.com/typicode/json-server/tree/v0). Latest version: 1.0.0-alpha.23, last published: a month ago. Start..

2.22 해결하고보니 정말 가벼운 에러였지만 .. 찾느라 너무 오래걸렸다 .. ㅠㅠ 리덕스 툴킷, axios - json-server api , thunk 함수 까지 같이 쓰려다보니 정확히 잘 모르는 나는 .. 다른 데에서 에러가 난 줄 알고 한참을 헤맸다 😭 콘솔로 일일히 하나하나 찍어가며 다시 에러를 파악.. 하지만 이 참에 useSelector 로 state 불러올 때라든가 정확히 알게 됐다 !! // CommentList.jsx const commentList = useSelector((state) => state.comments.commentsData); .. useEffect(() => { dispatch(__getComments()); }, [dispatch]); 🔥Problem 리덕스툴킷으..

배운 대로 .env 파일을 통해 환경 변수 설정을 하고 .. 깃헙에 그냥 올라가는 바람에 .gitignore 설정도 구글링을 통해 해서 해결! 근데 이번에는 환경변수를 가져오는데 배운대로 process.env .. 이렇게 가져오는데 에러가 났다. 페이지는 흰화면만 뜨고.. 😭 자꾸 process is not defined 라고 콘솔창에 떴다. 하지만 환경변수 가져올때 process.env. . 맞는데?! 다음과 같이 코드를 썼는데- (.env파일에서는 REACT_APP_SERVER_URL = http://... 맞게 써줌) (참고로 " " 쌍따옴표는 원래 안넣는 것으로 알지만, 쌍따옴표를 써도 문제 없이 잘 떴다) import axios from "axios"; const commentClient = a..

240220 TIL 🏃‍♀️ 저번 글에서, 비동기 통신 방법 중 fetch와 axios 가 있다고 소개하고 fetch에 대해 알아봤었다. fetch는 axios에 비해 불편한 점이 있었는데 (json으로 따로 변환해줘야 하거나 에러 처리 등에 있어서) axios는 그에 비해 기능적 장점이 있어서, 지금 진행하는 프로젝트나 앞으로 많이 활용해볼 것 같다! * Axios 란 node.js와 브라우저를 위한 Promise 기반 http 클라이언트. http를 이용해서 서버와 통신하기 위해 사용하는 패키지 - 하지만 자바스크립트에 내장된 fetch와 달리, axios는 패키지 설치를 따로 해줘야 한다. 아래 명령어로 설치해주기! yarn add axios 혹은 npm install axios - 사용하려면 패키..