리액트(React)26 리액트(React) Context API 알아보기 Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 사용합니다. 예를들면 사용자 로그인 정보, 애플리케이션 환경 설정, 테마 등 리액트 애플리케이션은 컴포넌트 간에 데이터를 props로 전달하기 때문에 다양한 컴포넌트에서 필요한 데이터가 있을 경우 주로 최상위 컴포넌트인 App 의 state에 넣어서 관리합니다. 하지만 실제 리액트 프로젝트에서는 더 많은 컴포넌트를 거쳐야 할 때도 있고 다루어야 할 많아 질 수 있어서 이런 방식으로 사용하면 유지보수가 힘들어질 수 있습니다. 리덕스나 MobX 같은 상태관리 라이브러리를 사용하여 전역 상태 관리 작업을 편하게 처리하기도 하였는데 리액트 v16.3 업데이트 이후에는 Context API가 많이 개선되었기 때문에 별도의 라이브러리를 .. 2023. 6. 15. 블로그 만들기 - 프로젝트 생성 Node.js Koa 라이브러리 이용하여 블로그 서비스를 만들어 보겠습니다. 블로그 프로젝트 생성 $mkdir blog $cd blog $mkdir blog-backend $cd blog-backend $yarn init -y => 디렉토리에 package.json 생성 $yarn add koa ==> Koa 웹 프레임워크 설치 package.json 다시 조회시 dependencies에 koa 추가된 것 확인 { "name": "blog-backend", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "koa": "^2.14.2" } } 서버 파일 생성전에 ESLint 와 Prettier 를 프로젝트에 적용 $ya.. 2023. 6. 13. 리액트(React) 백엔드 Node.js 와 Koa 소개 리액트로 서비스 제공을 위해 데이터를 저장하고 조회하고 어떻게 보여 줄 것인지 로직을 만드는 것을 서버 프로그래밍 또는 백엔드 포르그래밍이라고 합니다. 백엔드 프로그래밍은 여러 가지 환경으로 진행할 수 있습니다. 즉, 언어도 PHP, Python, Java, Javscript, Rube 등과 같은 다양한 언어로 구현할 수 있는데 그중에서 Javascript로 서버를 구현할 수 있는 Node.js 를 사용하고자 합니다. 1. Node.js 처음에 자바스크립트는 웹브라우저에서만 사용했습니다. 구글이 크롬 웹 브라우저를 소개하면서 V8 이라는 자바스크립트 엔지도 공개했습니다. 이 자바스크립트 엔진을 기반으로 웹 브라우저뿐만 아니라 서버에서도 자바스크립트를 사용할 수 있는 런타임을 개발했는데 이것이 Node.j.. 2023. 6. 12. 리액트로 뉴스뷰어 만들어 보기(4) 리액트 라우터로 뉴스 카테고리 페이지 만들어 봅니다. 라우터를 사용하기 위해 리액트-라우터를 설치합니다. >npm i react-router-dom 리액트 라우터를 적용할 때 만들어야 할 페이지는 단 하나입니다. src 디렉터리에 pages라는 디렉터리를 생성하고, 그 안에 NewsPage.js 파일을 다음과 같이 만듭니다. import { useParams } from 'react-router-dom'; import Categories from '../components/Categories'; import NewsList from '../components/NewsList'; const NewsPage = () => { const params = useParams(); // 카테고리가 선택되지 않았으면.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(3) 뉴스 카테고리는 총 6개 입니다. business(비즈니스) science(과학) entertainment(연예) sports(스포츠) health(건강) technology(과학) API 카테고리는 영어로 되어 있어 카테고리 이름을 한글로 보여준 뒤 클릭시 영어로된 카테고리 값을 사용하도록 구현합니다. import styled from 'styled-components'; const categories = [ { name: 'all', text: '전체보기' }, { name: 'business', text: '비즈니스' }, { name: 'entertainment', text: '연예' }, { name: 'health', text: '건강' }, { name: 'science', text: '과학.. 2023. 6. 6. 리액트로 뉴스뷰어 만들어 보기(2) 뉴스 API 데이터를 연동해보겠습니다. 컴포넌트가 보이는 시점에 API를 요청하면되는데 이때 useEffect를 사용하여 컴포넌트가 렌더링되는 시점에 API를 요청합니다. 여기서 주의해야할 점은 useEffect에 등록하는 함수에 async를 붙이면 안됩니다. useEffect에서 반환해야 한느 값은 뒷정리 함수이기 때문입니다. 따라서 useEffect 내부에서 async/await 를 사용하려면 함수 내부에 async 키워드가 붙은 다른 함수를 만들어 사용합니다. API 요청이 대기 중인지 판별하기 위해 추가로 loading 이라는 상태도 관리하겠습니다. loagding 중일때는 true, 끝나면 false 로 변경합니다. import styled from 'styled-components'; impo.. 2023. 6. 6. 이전 1 2 3 4 5 다음 반응형
