본문 바로가기

2024내일배움캠프

(59)
[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..
[TIL] 1/31 React 숙련주차(3) Redux Redux전역상태 라이브러리프롭스 드릴링을 해결하기 위한 도구 1. Global state와 Local state - Local state(지역 상태)    컴포넌트에서 useState를 이용해서 생성한 state로 좁은 범위 안에서 생성된 state - Global state(전역 상태)    Global state는 컴포넌트에서 생성하지 않고 중앙화 된 특별한 곳에서 State들이 생성된다    즉, 중앙 state 관리소라고 생각하면 된다     중앙 State관리소에서 State를 생성하고, 만약 어떤 컴포넌트에서 State가 필요하다면    컴포넌트가 어디에 위치하고 있든 상관없이 State를 불러와서 사용할 수 있게 된다Redux 설정 1. 리덕스 설치 리엑트 파일을 만들고 터미널에서 yarn..
[TIL] 1/30 React 숙련주차(2) hooks useRefuseState와 더불어서 값을 저장하는데 쓰는 대표적인 react훅 rendering과 상관없이 값을 저장하고 싶을 때 쓴다돔요소를 핸들링하기 위해서도 많이 사용useState는 렌더링을 일으킬 수 있지만 useRef는 렌더링을 일으키지 않는다useContext나중에 redux 배울 때 가장 중요하게 참조될 개념! 1. react context의 필요성일반적으로 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 전달해 줄 때 props를 사용했다하지만 이게 너무 깊어지면 prop drilling 현상이 일어난다 prop drilling의 문제점1. 깊이가 너무 깊어지면 이 prop이 어떤 컴포넌트에서 왔는지 파악이 어려워진다2. 어떤 컴포넌트에서 오류가 발생할 경우 추적이 힘들어진다 -> 대처가 ..
[TIL] 1/27 React 숙련주차(1)_CSS in JS 간편하게 컴포넌트 꾸미기작업하는 파일에서 터미널 - yarn add styled-components - 익스텐션에서 styled-components 깔아준다import styled from "styled-components"; 해준다 변수명 적고(맨 앞 대문자) styled. 적고 ``안에 css 값을 넣어준다컴포넌트 나눠서 사용하는 것과 동일하게 사용하면 된다  이 방법의 장점은 js를 같이 쓸 수 있다는 것전역 스타일 적용다른 파일에 컴포넌트 함수 만들고 body{}를 담는다 이걸 body 상단에 로 호출해주면 적용된다 useState : state의 값이 변경되면 리렌더링이 일어난다set00으로 값에 접근한다 useEffect: 리엑트가 렌더링 된 이후마다 특정 작업을 수행하게 하는 리엑트 훅즉, ..