본문 바로가기

전체 글

(140)
[TIL_포켓몬 도감_트러블슈팅(5)] 2/10 Redux TLK로 리팩토링하기 1. TypeError아주 낯이 익은,,,에러이다myPokemons를 store에서 가져와서 넣어줬는데 제대로 값이 들어가지 않은 모양이다초반에 연결해주면서 에러 때문에 값을 확인할 수 없어서 일단 저렇게 넣어놨는데 이제 콘솔로 찍어보고 리턴값을 수정해주면 될 듯 하다콘솔로 확인해보니 이런 값이 나왔다그럼 저기서 list값까지 같이 리턴해주면 될 것이다에러는 사라졌고 myPokemos의 출력값은 이러하다의아한건 myPokemons에 값을 넣어주는 로직은 아직 수정하지 않아 초깃값인 빈 배열이 들어있고 빈 배열이 잘 출력이 됐는데나오지 않던 화면이 보이고 있는 것!즉, 나는 myPokemons를 수정했는데 pokemons가 해결된?것?같다?에러때문에 막혀있던게 풀려서 그런가보다왜냐하면 myPokemons만..
[TIL] 2/7 React 숙련주차(6) Redux 복습이라 부르고 처음 뵙겠습니다.라고 읽는다 개인 과제 contextAPI로 리팩토링하는것까지 끝냈고 이제 ReduxTLK으로 리팩토링이 남았는데내 머리에는 여전히 리덕스가 들어있지 않다,,,,,,오전에 실강도 들었지만 남들은 잘 이해해서 설명도 막 하는데 왜 나는!!!! 모르겠냐!!!!contextAPI도 다시 혼자 강의 들으면서 이해했기 때문에리덕스도 그렇게 하면 된다!이제 강의 ReduxTLK 전까지 다시 들었다남은 강의 듣고 녹강도 다시 들으면서 머리에 넣고, 과제하면서 내걸로 만들기가 목표!!
[TIL_포켓몬 도감_트러블슈팅(4)] 2/6 CSS(hover, @media) 1. unique "key" prop 해결하기어제부터 말썽인 에러 오늘은 꼭 해결하고 말테다 니가 이기나 내가 이기나 해보자 라는 마인드로 모든 요소에 key를 넣어줬다 return ( 나만의 포켓몬 {myPokemons.map((pokemon) => { // 몬스터볼임 if (isUUID(pokemon.id)) { return ( ); } const key = `my-${pokemon.id}`; return ( ..
[TIL_포켓몬 도감_트러블슈팅(3)] 2/5 useContext로 리팩토링하기 1. SOOOOOO many errors!!!!와악 너무 어려워오전에 실강 들었던거 다시 보면서 연습하고 해보는데 너무 어렵당,,,,무튼,,,여러 props 중 하나씩 하면서 해보자하고 하는데 vscode에는 없는 에러가 window에는 엄청나게 뜬다 아예 첫화면도 뜨지 않아,,,차근차근 에러를 해결해봅시다 첫 에러 !이 부분이다경고로 뜬건데 만들어준 컨텍스트를 바로 사용하는건 지원하지 않고 이제 추후의 버전에서는 없어질것이라고 하는 것 같다생각해보니 강의에서는 사용할 때 .Provider를 같이 썻던 것 같다저 코드에서 빠진 이유는 실강 코드에는 없었기 때문,,,암튼 추가해주니 화면도 잘 나오고 에러도 사라졌다그 많던 에러가 다 사라지고 이거 한 개 남았다,,,,,,,,,많은 에러가 있었고 하나하나 잘..
[TIL_포켓몬 도감_트러블슈팅(2)] 2/4 1. react에서는 100% -> vh, vw!height 100%, width 100%;을 했는데도 아무 변화가 없어서 뭐지 했는데react에서는 view port 즉 현재 실행중인 스크린 크기에 맞워서 상대적 크기를 반환해주는vh(viewport height), vw(viewportwidth)를 쓴다고 한다2. query Stringid를 사용해서 구현하다가 처음 query String을 써봤는데 사용이 익숙치 않아 조금 어려웠다쿼리 파라미터는 /뒤에 ?가 나오는 부분부터 시작이고, key=value 형태로 이루어져 있다 나는 id 값을 넘겨줄 것이기 때문에 id=${pokemon.id}로 해줬다const [searchParams] = useSearchParams(); 을 통해 useState 사용..
[TIL_포켓몬 도감_트러블슈팅(1)] 2/3 1. return 했는데 왜 추가하니?나의 카드가 6개 보다 많으면 return하게 해서, return이 된다 근데 추가도 된다,,,?처음에는 7번 코드처럼 return alert()이었는데, 그래서 안되나 싶어서 (그럴리가 없지만) 다 빼고 중괄호도 넣어서 return했는데도 안된다하단의 화면 사진처럼 리턴되어서 밑의 리스트는 없어졌는데(이건 또 왜 그런지,,,ㅜ), myCards는 추가되어서 7개인 것을 볼 수 있다는 너무 바보같았음을,,,,,,,그저 함수 밖에 있었기 때문인 것을,,,,,,,,,,,,,2. type="button"의 역할이란 무엇일까?왼쪽의 부분과 오른쪽의 부분은 같은 코드였다오른쪽의 코드를 복붙했기 때문이다이유가 뭘까? 검색을 해보니 form 태그 안에 타입을 명시해주지 않은 버..
[TIL] 2/2 React 숙련주차(5) Supabase, LocalStorage BaaSBackend as a System 필요한 이유 : 프론트엔드 개발에 집중하고 싶어서장점 : 개발 속도 향상(백엔드를 직접 만들 필요가 없음), 유지보수 간편, 자동 확장단점 : 유연성 부족, 비용 예측 어려움, 플랫폼 의존성SupabasePostgreSQL을 기반으로 하는 오픈 소스 BaaS 플랫폼Firebase의 대안으로 자리잡으면서, 관계형 데이터베이스를 사용하면서도 실시간 기능을 원하는 개발자들 사이에 인기 React에서 사용하기설치 및 세팅yarn add @supabase/supabase-jsuseEffect를 사용하는데 fetch가 2번 된다? supabase로 데이터를 추가하는 로직을 배우고 있는데 fetch가 2번 되는걸 발견했다fetchData()는 여기 한번만 쓰였는데 netwo..
[TIL] 2/1 React 숙련주차(4) React Router Dom 설치터미널에서 yarn add react-router-dom으로 설치한다 라우터 연결src-pages폴더를 만들고 연결할 페이지 컴포넌트 파일들을 만든다src-shared폴더를 만들고 위에서 만든 페이지 컴포넌트들을 연결한다 App.jsx에서 라우터 연결을 해준다이때, 내가 만든 shared폴더에서 오는 라우터인지 잘 확인해줘야 한다React에서 제공하는 라우터로 연결하면 아무것도 뜨지 않는다!!useNavigate()pages에서 만든 페이지들 간에 이동을 하기 위해선 navigate 훅을 사용할 수 있다url=""같은 느낌이다변수를 선언해서 navigate훅을 넣어주고, 호출할 때 이동할 페이지 path를 넣어주면 된다 useLocation()현재 페이지의 location을 알려준다console.lo..