강의보고 안 먹혀서 찾아보니까 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 - 사용하려면 패키..

어쩌다보니 우연히 찾아서 하게되었다. 매번 vsc에서 터미널 powershell로 기본 설정되어있어서.. 바꿔서 bash로 열어도 이게 또 다른 폴더에서 열리는등.. 매번 바꿔주는 등 좀 성가셨는데ㅠㅠ 윈도우 사용자라면, 기본설정 터미널인 powershell보다 bash 로 여는게 좋다고 했기 때문에 ! 아래처럼 bash로 터미널 여는 경우, 맨 오른쪽 괄호에 현재 branch 위치도 확인할 수 있고 색깔도 들어가서 가독성도 좋고ㅎㅎ bash로 기본 터미널 설정을 바꿔보자 첨엔 구글링으로, 다른 분의 velog글을 참고했는데 그 글에서 설정 검색창에 입력하는 terminal.integrated.shell.window 검색어가 먹히지 않았다... ㅎㅎ 그분이랑 나랑 좀 다르게 떠있는 거 같다. 여튼 설정 ..

240219 TIL 🎶 대표적인 비동기 통신 방법으로는 axios와 fetch가 있다. 이번에는 fetch에 대해 알아보고 이 라이브러리가 axios에 비해 가진 단점을 알아보자 :) Fetch 먼저 Fetch는, ES6부터 도입된 Javascript 내장 라이브러리로, Promise 기반 비동기 통신 라이브러리이다. 내장 라이브러리이기 때문에 (axios와 달리) 별도의 설치 및 import가 필요하지 않다 BUT, axios에 비해 단점이 있다. 미지원 브라우저 존재 개발자에게 불친절한 response axios에 비해 부족한 기능 axios에 비해 불편한 단점은 크게 다음의 두 케이스에서 볼 수 있다. 1) 데이터를 읽어올 때 2) 에러 처리 시 1) 예를 들어, 데이터를 읽어올 때의 단점은, 아래..

240216 ✨ react 심화주차 강의를 듣는 중, json-server 패키지를 설치해야 했었는데, 강의에서 아무 탈 없이 되던 것과 다르게 내 컴에서는 되지 않았다 .. ㅠㅠ node 버젼의 문제여서 이를 업그레이드하기 위해 nvm 설치 등 했던 과정을 기록해보기로 ! 여기서 json - server 란? 아주 간단한 DB와 API 서버를 생성해주는 패키지(라이브러리). 빠르고 간단하게 rest api를 구축할 수 있다. Backend에서 실제 DB와 API Server가 구축될 때까지- Frontend개발에 임시적으로 사용할 mock data를 생성하기 위해 json-server를 사용할 수 있는데, json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 ..

240215 TIL React 뉴스피드 팀프로젝트 (프론트엔드) 를 하면서 백엔드 서비스는 Firebase를 활용해서 했었다-! firebase의 firestore에 게시글 posts 컬렉션을 만들고, 그 안에 게시글 하나하나 아이템을 문서로서, 데이터를 넣어야 했는데.. 그 중 한 필드로 date가 있었다. 글 쓴 시각을 date 필드값에 넣어주고, 그 시간을 read 조회하면서 꺼내와야 했다. 이 과정에서 약간 문제가 있었는데 ... ㅠㅠ 일단, 직접 date에 대한 value값을 파이어스토어에서 timestamp 를 활용해서 찍어봤더니.. 파이어스토어 통해 데이터를 가져올 때, 이 date 필드에 대한 value값이 timestamp 형태로 들어오기 때문에.. 이걸 조회하면서 페이지에 뜨게 하려면 ..

240209 뉴스피드 팀 프로젝트를 진행하며 현재 header의 nav에서 선택된 카테고리에 맞춰 해당 카테고리 리스트 항목을 뜨게하는 기능을 구현하고 있었다. 이전에 배웠던 기능이라 잘 구현할 수 있었는데, 아직 redux도 익숙치않지만 배웠던 대로 쓰니 잘 되었다. 하지만 !! 나는 선택된 해당 태그 (여기서 Tab) 의 textContent (태그사이 텍스트) 를 가져오길 원치않았고 (배운 내용에서는 카테고리를 선택하면, 클릭이벤트로 - event.target.textContent를 가져오는 식이었다) 선택된 태그의 className으로 가져오고 싶었다. const Header = () => { const activeCategory = useSelector((state) => state.catego..

240207 TIL ✏️ React의 hook useContext 를 활용해 Context api 로 전역 상태 관리를 해보기 ! 컴포넌트간에 데이터를 전달할 때 props를 쓰는 방법을 배웠었는데, 이 경우 props-drilling이 발생할 수 있다는 게 문제점이었다. 즉 불필요하게 여러 컴포넌트를 거치며 데이터를 전달하게 될 수도 있다는 것. 상위 컴포넌트 -> (중간) 컴포넌트 -> 컴포넌트 -> 하위 컴포넌트 .. 이렇게! => Context api를 통해 이러한 문제를 해결할 수 있음 원하는 컴포넌트에서 바로 데이터를 전달받아 쓸 수가 있다 context 폴더 안에 ~ Context.jsx 파일 생성 그 안에 아래와 같이 {createContext } import 등 설정을 해주고 이걸 담은 ..