전체 글

[프론트엔드] REACT 뉴스 뷰어 만들기 [6]

이전 글 2022.03.25 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [5] 1. 카테고리 기능 구현 뉴스 카테고리는 아래와 같이 여섯개의 카테고리를 사용한다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(기술) - App.js App.js 파일을 아래와 같이 수정한다. 선택한 카테고리를 관리할 state 컴포넌트에 넘겨줌으로써 클릭한 카테고리를 활성화 시켜줄 함수 두개를 props로 넘겨준다. import React, { useCallback, useState } from 'react'; import Categories from './components/Categories'..

[프론트엔드] REACT 뉴스 뷰어 만들기 [5]

ㅁ이전 글 2022.03.24 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [4] 1. 데이터 연동하기 이제 useEffect를 사용하여 컴포넌트가 처음 랜더링하는 시점에 API를 요청해야 한다. 여기서 주의점은 async를 useEffect 사용시에 붙여 사용하면 안된다는 점이다. 이유는 useEffect 반환하는 값이 뒷정리 목적의 함수이기 떄문이다. 따라서 async/await를 사용하려면 함수내부에서 처리를 해줘야 한다. - NewList.js API를 연동하여 아래와 같이 소스를 수정하도록 한다. API를 호출하여 map을 사용하여 컴포넌트에 API 배열 데이터를 props로 넘겨주자. articles : API 배열을 담을 state loading : API 호출..

[프론트엔드] REACT 뉴스 뷰어 만들기 [4]

이전 글 2022.03.24 - [프론트엔드/React] - [프론트앤드] REACT 뉴스 뷰어 만들기 [3] 1. UI 만들기 스타일 컴포넌트 라이브러리를 추가해주자. yarn-add styled-components src 디렉토리 하단의 NewsItem.js NewsList.js 두개를 파일을 추가한다. - NewsItem.js author: "정규묵" content: "" description: "일본이 호주를 꺾고 카타르 월드컵 본선 진출을 확정했습니다. 일본은 호주에서 열린 카타르 월드컵 아시아 최종예선 B조 9차전에서 후반 44분과 추가 시간에 터진 연속골로 2대0으로..." publishedAt: "2022-03-24T12:02:50Z" source: {id: null, name: "Imbc..

[프론트엔드] React-MoBx 오류 Support for the experimental syntax 'decorators-legacy' isn't currently enabled

1. 문제 원인 react-mobx 프로젝트를 추가하는 과정에서 발생한 오류를 정리해놓는다. react function 프로젝트에서 class 프로젝트로 mobx를 적용해야 하는과정에서 발생한 오류이다. "@observer" 클래스에서는 위와 같이 선언을 해야 oberser 선언이 가능하여 적용하려고 하니. decorator 에러가 발생했다. Support for the experimental syntax 'decorators-legacy' isn't currently enabled 2. 문제 해결방법 먼저 아래의 decorators 라이브러리를 mpm, yarn 명령어로 설치한다. npm i @babel/plugin-proposal-decorators - package.json 해당 파일에 아래의 pl..