리액트6 [Develog] 유튜브 API 요청 후 파이어베이스에 저장하는 방법2 1탄 [Develog] 타입스크립트 + 유튜브 API로 데이터 요청 후 파이어베이스로 저장하는 방법 첫 번째로 했던 작업은 타입스크립트로 유튜브 API를 요청하고 요청한 데이터를 가공해서 파이어베이스에 저장하는 방법이었다. 이 때는 API 사용법이 아직 익숙하지 않아 플레이리스트를 요청 subtlething.tistory.com 저번시간에 유튜브 API를 이용해 데이터를 받아 오는 것 까진 했는데 생각해보니 우리 프로젝트에서는 플레이리스트가 필요했다. 우리가 짠 와이어 프레임 상 대시보드 페이지에 아래처럼 강의 리스트를 보여줘야 하기 때문이다.. 근데 이미 데이터를 단일 데이터로 넣었는뎅...... 힝 대시보드 없애버릴까 싶었지만 개발자로서 그럴 쑨 없쥐 플레이리스트 가져오기? 그게 왜 안되겠어. 바로 .. 2023. 1. 29. [Error] 타입스크립트 라우터 오류 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise<Element>'은(는) 유효한 JSX 요소가 아닙니다. Promise값 리스트로 변환하기 오류내용 'Page'은(는) JSX 구성 요소로 사용할 수 없습니다. 해당 반환 형식 'Promise'은(는) 유효한 JSX 요소가 아닙니다. 'Promise' 형식에 'ReactElement' 형식의 type, props, key 속성이 없습니다. 타입스크립트 라우터에서 발생하는 오류메세지이다. 트러블 슈팅 순서 문제 정의 사실 수집 원인 추론 조치 및 방안 검토 결과관찰 (만약 문제가 다시발생한다면 4번으로 다시) 1. 문제 정의 난 이 페이지에서 자바스크립트처럼 비동기 async / await를 쓰고 싶어서 아래 이미지 처럼 async 키워드를 써주면 Router페이지에서 이렇게 오류가 빵빵 터진다. 2. 사실 수집 오류 메세지를 잘 살펴보자. 'DashboardPage'은(는) JSX 구성 요소로.. 2023. 1. 28. Redux로 투두리스트 만들기 문제 해결 원장님께 질문을 통해 문제를 해결할 수 있었다. 1. checked가 true임에도 화면상에서는 체크가 해제된 이유 => 렌더링이 되지 않았기 때문! 렌더링은 state나 props가 변경될 때 수행이 되는데, checked는 단순 속성이 자동으로 변경된 것이기 때문에 렌더링이 이루어지지 않는 것으로 보인다. onChange를 통해 todo의 상태(isDone)가 변경될 때 렌더링이 되므로 그 때 checked 속성도 수동으로 변경시켜준다. 왼쪽의 기존 코드는 조건문을 통해 변경시켜주고 오른쪽의 수정된 코드는 todo.isDone의 상태를 통해 변경시켜준다. 2. 수정 시 내용 입력이 없으면 기존 내용이 사라지는 오류 이 부분은 set이되지 않아서 발생한 오류이다. 기존의 코드는 다음과 같고 40번째 줄.. 2022. 12. 20. [React] Redux, React-router-dom으로 TodoList만들기 1. 구현모습 1) 메인 페이지 2) 상세 페이지 2. 시나리오 1) 메인페이지에서 input창에 내용 입력하여 버튼 클릭 시 dispatch를 통해 setTodo에 새로운 데이터를 payload로 전송 → 전송된 데이터를 useSelector를 통해 가져온 데이터 리스트를 화면에 뿌림 2) 체크버튼 클릭 시 상태 변경 : 완료↔진행중, dispatch를 통해 isDone 상태 변경내용 전달 3) Todo 제목 클릭 시 상세 페이지로 이동 4) 상세페이지에서는 id, title, contents를 보여줌 5) 수정 버튼 클릭 시 제목, 내용 수정 화면이 나타나고 버튼명은 완료로 변경됨 6) 삭제버튼 클릭 시 해당 todo는 삭제되고 navigate를 통해 메인페이지로 넘어감 7) Home 버튼 클릭시 메.. 2022. 12. 15. [React] 리액트로 todo리스트 만들기 컴포넌트: Todo, Button 추가기능: 가로스크롤 id를 Date.now()로 지정해 id 겹침현상 제거 완료된 모습 App.js import React, { useState } from 'react'; import './App.css'; import Todo from './components/Todo'; import CustomBtn from './components/CustomBtn'; function App() { const [todo, setTodo] = useState([ { id: Date.now(), title: 'todotest', contents: '리액트기초를 공부해봅시다.', }, { id: Date.now() + 1, title: 'todotest222', contents: '.. 2022. 12. 7. [React] 리액트 기초 개념 컴포넌트/JSX/Props/State 리액트를 공부하는 첫 날이다! 기대된다. 1. 컴포넌트란? 재사용할수 있는 조립 블록. 화면에 나타나는 UI 요소라고 생각하면 이해하기 쉽다. 단순히 UI 역할 뿐만 아니라 부모로부터 받은 속성(props)이나 자신의 상태(state)에 따라 표현이 달라지고 다양한 기능을 수행한다. 리액트는 데이터와 UI 요소의 집합체라고 할 수 있는 컴포넌트를 이용하여 화면을 구성하게 된다. 2. JSX 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다. JSX는 가독성이 높고 작성하기도 쉬우며 XML과 유사하다는 점에서 중첩된 구조를 잘 나타낼 수 있다는 장점이 있다. *JSX에서 여러개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야한다. 위와 같이 작.. 2022. 12. 5. 이전 1 다음
