본문 바로가기

TIL✨

 (71)
TIL(53) 1.내가 만난 오류 Objects are not valid as a React child - React component를 렌더링할 때, 데이터를 화면에 표시하려면 표시하려는 데이터 타입에 맞는 데이터를 넣어주어야 한다. 컴포넌트로 전달된 데이터와 표시하려는 데이터의 타입이 일치하지 않으면 다음과 같은 에러가 발생한다. 한곳에서 작성했던 list page를 컴포넌트 나누었다. 나누다 보니 props로 내려주고 필요한 함수,styled들을 들고오다가 navigate props가 문제가 생겼다. 기존list에 있던 navigation:{navigate} 속성이 props를통해서 하위 컴포넌트로 넘어갔어야하는 상황이였다. 2.시도 사실 그냥 넘겨주기만하면되는거라 여느때와 다름없이 navigate={naviga..
파이어베이스...ㅂㄷㅂㄷTIL(52) 파이어베이스 진짜 어렵다.... 아무리 봐도 어렵다..... 공식문서를 들여다봐도 어렵다..... 누가 파이어베이스 딱 붙잡고 머리에 집어넣어줬으면 좋겠다...ㅎㅋㅋㅋㅋ 1. 내가만난 문제 프로젝트에서 남은 부분이 불러온 글에서 작성자의 프로필이미지를 가져오려고 했다. 근데 글을 불러오는 부분은 json으로 하고 있었고 유저의 프로필은 파이어베이스를 사용하고 있었기때문에 혼동이 왔다. 그래서 내가 생각한 루트는 json서버의 불러온 데이터안에있는 uid와 파이어베이스 user들의 uid가 일치하면 그 일치하는 user의 프로필이미지를 들고오려고 했다. 2.시도 위와같은 로직으로 해결을 하려면 ㄱ. 파이어베이스의 user들의 list를 다 가져와서 돌린다. ㄴ.list에 있는 uid도 돌린다. ㄷ.uid가..
TIL(51) 네이티브 과제 중에 내가 맡은 부분이 카테고리를 누르면 그에 해당하는 글들을 불러오는 lists스크린을 맡았다. 어떻게 보면 로직이 get만하면 되는거라 오히려 쉬울꺼라고 생각했지만 react query를 이용해서 하니까 어려웠다. 내가 아직 리액트쿼리부분이 부족한거 같으니까 더 공부해야겠다. 서론 끝ㅎ 1.내가 만난 문제 querykey를 통해서 가져온 data들을 가져오고나서 최신순,인기순 눌렀을때 어떻게 데이터들을 정렬할 것인가 2.시도🔥 ㄱ. 쿼리스트링도 시도해봤다 아무래도 같은 json-server니까 괜찮을꺼라 생각했다. -> 이미 배포가 진행된 상태의 서버에서는 먹히지 않았다 (배포가 된 json이 처음이라 좀 더 알아봐야할듯) -> 혹시나 인코딩을 해서 요청하면 되지않을까 하는 마음에 그것..
네이티브 프로젝트 시작 TIL(50) 리액트 프로젝트가 언제 끝났다고 벌써 다시 네이티브 시작이다. 그래서 오늘은 하루 종일 계획을 짜고 와이어프레임을 작성했다. 리액트는 컴포넌트가 많아서 분리도 잘해야하고 데이터베이스를 사용해야하기때문에 어떻게 데이터베이스 구조를 짤지도 미리 계획했다. 이렇게 데이터베이스 까지 짜는건 처음이긴한대 오히려 다하고 나니까 보기 더 편해서 다음에도 이렇게 해야겠다라는 생각이 들었다. ✨팀명 나 이거 사(4)조 👻 프로젝트 주제 : 사고싶은 제품들을 저장할 수 있게 관리하고 사용자들과 공유할 수 있는 앱 👍 팀 약속 1.전체 구조 2.역할분담 3.데이터베이스 프레임 시간은 오래걸렸지만 꼼꼼하게 계획을 다 짜서 오히려 프로젝트 만들때 기대가 된다. 피그마도 제대로 사용해보고 노션도 요즘 활용중이라 점점 현업을 할때..
Todo 돌이켜보기_TIL(49) 리액트를 시작하고 매 주차마다 todo를 만들고 있다. 싫타기보다 이렇게까지 하는데 todo를 못만들면 스스로 자괴감이 올꺼같을정도였다. 그래서 많이 했으니까 이제 todo는 왠만큼 만들겠지라고 생각하고 있다가 근래 네이티브 공부를하면서 순수 리액트로 투두를 다시 한번 만들면서 컴포넌트와 state관리 등을 상기시킬켬 다시 만들었다. 참고하지않고 처음 맨땅에서 부터 쭉 만들기 시작했는데ㅋㅋ 왠열... 한 1시간에 필요한 기능과 컴포넌트 분리를 다 한것 같다. 처음에는 투두를 어떻게 만들어야될지 몰라서 시작도 못했었는데 지금 만든거 보고 아 진짜 성장하긴 했구나 하는 생각이 들었다.. 괜시리 뿌듯하고 난리ㅋㅋ👍 뿌듯함도 있지만 중간에 막히는 구간도 있었다. 😱 이 부분 처음 todo 접했을때 엄청 이해안되..
Axios_TIL(48) 리액트를 공부하면 할 수록 어렴풋이 알고 지나갔던 것들이 부메랑🪃처럼 되돌아 오고 있다. 그래서 오히려 좋다👍는 마인드로 하나씩 다시 열심히 리마인드를 하고 있다. 오늘의 주제는 Axios다. 프로젝트할 때 axios를 사용해서 json-server에서 db에서 데이터를 가져왔었는데 그 때는 급한마음에 갖다 썼지만 지금은 다음 프로젝트를 위해서 공부했다. 이 때까지 하나씩 야금야금 공부했던 useEffect , async & await , promise.then() 등이 합쳐져서 완성본을 이룬 느낌이다. axios는 비동기 통신이다. 데이터값이 언제 들어올지 각각 다 다르니까 이렇게 사용한다. 데이터를 가져온다는 예시로 axios.get("localhost:주소")일때 -->await axios.get(..
async await 간단한 정리_TIL(47) 서버에서 데이터를 가져오는 과정을 프로젝트에서 쓰다보면 제대로 알지도 못하면서 쓰고 있는 async await을 간단하게 정리하려고한다. 요즘 들어서 내가 모르고 썼었던 기능들이 자주 나오는 것을 보고 그냥 지나쳐서는 안되겠다해서 모던자바스크립트를 보면서 정리했다. 확실히 알고나서 코드를 보는 거는 다른 것 같다. 1.Async : async는 항상 function 앞에 붙는다. 그렇게 되면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 것은 프라미스로 감싸서 반환한다. ** const a = async()=>{} 이렇게 사용도 한다. 2.await :await는 async함수 안에서만 동작한다. 프라미스(async)에서 처리될 때까지 기다린다. async function f() { let pr..
useEffect_TIL(46) 오늘 내일 비동기에 대해서 공부한 것을 정리해보려고 한다. 1.만난 문제 useEffect를 통해서 axios를 사용했지만 어렴풋이만 알고 확실히 알지 못해서 useEffect에 대한 오류가 났을 때 항상 곤란했었다. 그래서 이번에 확실히 정리하자 해서 공부를 시작했다. 2.useEffect? 자바스크립트는 동기적으로 즉 한번에 하나의 일만 진행을 시킨다. 그렇게 되면 연산이 오래걸리거나 서버로 부터 데이터를 가져와야 할때 시간이 오래걸릴 경우 html렌더링이 늦어지면서 사용자들이 불편함을 느낄 수가 있다. 그래서 useEffect를 사용해서 오래걸리는 로직들을 비동기적으로 처리를 할 수 있다. 3.사용법 ㄱ.[ ]사용 let[alert,setAlert]=useState(true) useEffect(()..

티스토리툴바