본문 바로가기

2024내일배움캠프/포켓몬 도감_개발_트러블슈팅

(6)
[TIL_포켓몬 도감_트러블슈팅(5)] 2/11 vercel로 배포! 1. 훅은 컴포넌트 안에서 사용하기!디테일 페이지에서도 포켓몬을 추가할 수 있게 하려고 하니기존에 사용하던 함수를 재사용하며 될 것 같았다그래서 컴포넌트 분리해서 사용했는데 이런 에러가 나왔다이 함수 안에 훅이 있기는한데 컴포넌트 분리하게 되면 다른 방식으로 호출해야하나 보다코드는 이러하다컴포넌트의 바디 안에서 호출해야하기 때문에저 함수를 호출하는 곳에서 인자로 redux 훅들을 인자로 넘겨줘야 한다이렇게 바꿔줬더니 원활히 작동한다!근데 기존의 함수를 그저 분리만 해준건데 무슨 차이가 있는걸까? 공식 문서에 따르면 js 함수에서 호출하지 말고 react 함수 컴포넌트에서 호출하라고 알려준다js 함수와 react 함수 컴포넌트의 차이는 jsx를 반환하냐 안하냐의 차이!즉, 위의 나의 코드는 jsx를 반환하..
[TIL_포켓몬 도감_트러블슈팅(5)] 2/10 Redux TLK로 리팩토링하기 1. TypeError아주 낯이 익은,,,에러이다myPokemons를 store에서 가져와서 넣어줬는데 제대로 값이 들어가지 않은 모양이다초반에 연결해주면서 에러 때문에 값을 확인할 수 없어서 일단 저렇게 넣어놨는데 이제 콘솔로 찍어보고 리턴값을 수정해주면 될 듯 하다콘솔로 확인해보니 이런 값이 나왔다그럼 저기서 list값까지 같이 리턴해주면 될 것이다에러는 사라졌고 myPokemos의 출력값은 이러하다의아한건 myPokemons에 값을 넣어주는 로직은 아직 수정하지 않아 초깃값인 빈 배열이 들어있고 빈 배열이 잘 출력이 됐는데나오지 않던 화면이 보이고 있는 것!즉, 나는 myPokemons를 수정했는데 pokemons가 해결된?것?같다?에러때문에 막혀있던게 풀려서 그런가보다왜냐하면 myPokemons만..
[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 태그 안에 타입을 명시해주지 않은 버..