분류 전체보기 (49) 썸네일형 리스트형 리덕스패턴을 버전에 따라 변경하지 않아서 나오는 에러 에러내용 기존 리덕스에서 사용했던 덕스 패턴에 따른 개발자의 고민을 듣고 나온 리덕스 툴킷을 이용하면서 나온 에러가 있음 우리가 기존 리덕스에서 액션 생성자와 유형을 따로 생성했지만, 리덕스 툴킷에서는 액션 생성자와 액션 유형을 자동으로 만들어주는 API 가 있습니다. 바로 createSlice 입니다. 그 API의 표기법이 다른 형태로 변경이 되었다는 것입니다. 그래서 들은 생각 위의 에러 메시지옆에 뜬 사이트를 들어갑시다. ( https://redux-toolkit.js.org/api/createSlice ) createSlice | Redux Toolkit redux-toolkit.js.org여기서 찾다보면 표기법 관련해서 찾아보았습니다. 그래서 이것을 토대로 수정하기로 .. 이번 테스트를 바라보며 느낀 점 나는 오늘 1. 사용자의 상품 데이터를 받아와서 나타내기 2. 사용자의 상품 데이터가 개수가 추가된 것을 cart 라는 페이지에 보여주기 3. 사용자가 선택한 상품 데이터의 총합을 보여주기 이렇게 조건이 주어진 채로 내가 공부를 잘하고 있는지 테스트를 하였다. 1 사용자의 상품 데이터를 받아와서 나타내기 사용자의 상품 데이터를 dummy 라는 변수에 집어넣었습니다. 데이터에 대해서 설명하자면 id : 상품 식별 id값 name : 상품 이름 price : 상품 금액 count : 사용자가 몇개를 선택했는가? 우리가 리액트에서 state는 변하는 값을 저장할때 사용한다고 했습니다. 그러면 dummy도 state 로 관리하는게 나을까요 ? => 정답은 .... 맞습니다. 왜냐하면 count 라는 사용자가 클.. TIL: 리덕스를 들어오다. 리덕스란? 우리가 부모 컴포넌트로부터 자식 컴포너트로 , 자식의 자식 ... 자식의 자식의 자식.... 으로 상태를 전달하는 패턴인 props-drilling 이 발생하지 않게 합니다. 말 그대로 전역해서 관리하게 해줍니다. 리덕스 흐름 살펴보기 예를 들어서 카운터를 생각해봅시다. 1. 버튼을 클릭 2. . 내가 클릭한 행위(=액션) 가 Reducer 함수에 들어감 3. 가 실행됨 , 상태값이 Store에 전달됨 4. UI의 값이 변경됨 리덕스 설치하기 ( feat. 리액트 ) # 다음 명령어를 통해 리액트 프로젝트를 설치합시다. > npx create-react-app my-app # 그 다음 명령어로 통해 리덕스를 구축하는데 필요한 패키지를 설치합니다. # 리덕스도 npm 을 통.. npm start 에러 에러 내용 > my-letter@0.1.0 start > react-scripts start node:internal/modules/cjs/loader:452 throw err; ^ Error: Cannot find module 'C:\Users\andan\OneDrive\바탕 화면\리덕스청크프로젝트\react_letter\node_modules\isexe\index.js'. Please verify that the package.json has a valid "main" entry at tryPackage (node:internal/modules/cjs/loader:444:19) at Module._findPath (node:internal/modules/cjs/loader:715:18) at Modu.. 프로젝트 후 느낀 점 , 어려운 점 무엇이 좋았는가? 같은 팀원분들과 오늘 하면서 나의 부족한점이 무엇인지 알수 있었고 , 서로 의견을 공유하면서 해결해나갈수 있어서 너무 좋았습니다. 무엇이 어려웠는가? 전역적으로 상태를 관리하는 패러다임을 따라가는 것이 어려워서 리덕스 부분을 집중해서 볼 예정입니다. 그리고 파이어베이스 공식문서를 보면서 파이어베이스에 더 친해지겠습니다. 프로젝트2 이어집니다. https://devpost.tistory.com/74 TIL : 프로젝트 1 1. 더미데이터 만들기 도서 더미데이터를 만들었습니다. 노란색 네모 박스 보이시죠 , 저 부분은 lorem ipsum 제너레이터를 이용해서 데이터를 장만했습니다. 더미데이터는 ? 저는 프론트엔드 로써 devpost.tistory.com 팀 프로젝트 설명 저는 2조에 속해있으며 문서는 다음과 같습니다. https://www.notion.so/2-S-A-fbe26f86cc334b59a8883c0b7449c41c 팀 프로젝트 초기 세팅 본격적인 파이어베이스 서버를 구축하기전까지 더미데이터를 만들고 , 백엔드로부터 데이터를 받아왔다고 가정하고 시작하게 되었습니다. 참고 userData : 사용자 계정 더미 데이터 book.. 프로젝트 1 1. 더미데이터 만들기 도서 더미데이터를 만들었습니다. 노란색 네모 박스 보이시죠 , 저 부분은 lorem ipsum 제너레이터를 이용해서 데이터를 장만했습니다. 더미데이터는 ? 저는 프론트엔드 로써 가상의 백엔드 서버에서 데이터를 받아왔다는 것에 이 더미데이터를 이용하게 되었습니다. lorem ipsum는 뭔가요 ? 그리고 제너레이터는 무엇인가요 출판이나 그래픽 디자인 분야에서 폰트 , 타이포그래피 , 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄때 사용하는 텍스트인데요. 특히 , 저는 bookIntro , bookName 과 같은 텍스트를 다루는 부분에 사용하였습니다. 추가로 여기서 제너레이터는 생성하는 기계라 보시면 되겠습니다. 제가 사용한 lorem ipsum 제너레이터 >>> 참고 Lorem.. TIL : ES 6 문법 복습하기 let , const , var 변수 선언할 때 사용되는 키워드입니다. // let : 값이 변할 여지가 있는 변수 let day = 1; day = 2; // 값이 변할 수 있다. // let day = 20; 재선언을 하면 에러가 나온다. // const : 값이 변할 여지가 없는 변수 const yourBirthDate = "2000/11/04"; // yourBirthDate = "2000/11/02"; const는 한번선언하면 값을 수정할 수 없다. // console.log(yourBirthDate); TypeError: Assignment to constant variable. // var : 값을 할당과 선언 재할당과 재선언이 가능한 변수 ( ES6 나오기 전까지 쓰였음) // var a .. TIL : TMDB API 키 발급받기 들어가며 설치 (https://docs.themeluxury.com/movieasap/getting-started/how-to-get-a-tmdb-api-key/) 오늘 이용할 데이터(https://developer.themoviedb.org/reference/movie-details) 데이터 가져오는 코드 API로부터 데이터 받아오기 1. 기본 틀을 붙여넣기 한다. 2. 발급받은 `api키`를 url에 붙여넣기 한다. const apikey = '당신의 api 키'; const url = `https://api.themoviedb.org/3/movie/${movieId}?api_key=${apiKey}`; 3. 웹사이트를 실행한다. 다음에 의해 크롬 개발자 도구 창의 콘솔에 json형식의 데이터가 나온.. 이전 1 2 3 4 5 다음
