React Router에서 저장소에 데이터 추가하기

이번 강의에서는 저장소에 상품을 추가하는 작업을 다루겠습니다. 먼저 상품 생성을 위한 함수 createProduct가 필요합니다. forStorage.js 파일의 getProducts 함수 뒤에 추가하세요:

export async function createProduct() {}

먼저 someNetwork를 다시 추가합니다:

export async function createProduct() {
	await someNetwork();
}

다음으로 각 상품에 대한 고유한 id가 필요합니다. React 튜토리얼에서 이미 이 개념을 접해보셨을 것입니다. 이를 위해 nanoid 라이브러리를 사용하겠습니다. 터미널에서 다음 명령어를 입력하세요:

npm install --save nanoid

forStorage.js 파일에 라이브러리를 임포트합니다:

import { nanoid } from 'nanoid'

id는 6자리로 설정하겠습니다:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
}

상품 생성 시 객체에는 처음에 id만 포함됩니다. getProducts를 호출하고, 생성된 상품을 추가한 다음 저장소의 상품 목록을 업데이트합니다. 완료되었습니다:

export async function createProduct() {
	await someNetwork();
	let id = nanoid(6);
	let product = { id };
	let products = await getProducts();
	products.unshift(product);
	await setProducts(products);
	return product;
}

저장소의 목록을 업데이트하는 함수는 다음과 같습니다 (키 products 아래에 상품을 저장할 것입니다). createProduct 함수 뒤에 배치하세요:

function setProducts(products) {
	return localforage.setItem('products', products);
}

이전 강의의 과제에서 만든 애플리케이션을 가져오세요. 강의 자료를 참고하여 forStorage.js 파일에 저장소에 학생 데이터를 추가하기 위한 createStudent 및 setStudents 함수를 작성하세요.