diff --git a/README.md b/README.md deleted file mode 100644 index 99b72d9..0000000 --- a/README.md +++ /dev/null @@ -1,50 +0,0 @@ -# ๐Ÿผ ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ - -> _์ด ์ €์žฅ์†Œ๋Š” ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์˜ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๊ณณ์ž…๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ๋ฅผ ํด๋ก ํ•˜์—ฌ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์„ ์„ค์ •ํ•˜๊ณ , ๊ฐ ๋ธŒ๋žœ์น˜์—์„œ ํ•ด๋‹น ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ•ด ์ฃผ์„ธ์š”!_ ๐Ÿ› ๏ธ - -## ์†Œ๊ฐœ - -์•ˆ๋…•ํ•˜์„ธ์š”! ํŒ๋‹ค๋งˆ์ผ“ ํ”„๋กœ์ ํŠธ์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค! ๐Ÿฅณ -ํŒ๋‹ค๋งˆ์ผ“์€ ๋”ฐ๋œปํ•œ ์ค‘๊ณ ๊ฑฐ๋ž˜๋ฅผ ์œ„ํ•œ ์ปค๋ฎค๋‹ˆํ‹ฐ ํ”Œ๋žซํผ์ด์—์š”. ์—ฌ๋Ÿฌ๋ถ„์€ ์ด๊ณณ์—์„œ ์ƒํ’ˆ์„ ๋“ฑ๋กํ•˜๊ณ , ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๋“ค๊ณผ ์†Œํ†ตํ•˜๋ฉฐ, ์ž์œ ๋กญ๊ฒŒ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ์–ด์š”. ๋งค์ฃผ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์„ ํ†ตํ•ด ๊ธฐ๋Šฅ์„ ํ•˜๋‚˜์”ฉ ๋งŒ๋“ค์–ด ๊ฐ€๋ฉฐ ์„ฑ์žฅํ•ด ๋‚˜๊ฐ€๋Š” ์—ฌ์ •์„ ํ•จ๊ป˜ํ•ด์š”. ๐Ÿš€ - -![PandaMarket](https://github.com/user-attachments/assets/3784b99f-73c9-4349-a9a9-92b2a7563574) -_์œ„ ์ด๋ฏธ์ง€๋Š” ํŒ๋‹ค๋งˆ์ผ“์˜ ๋Œ€ํ‘œ ์ด๋ฏธ์ง€์ž…๋‹ˆ๋‹ค._ ๐Ÿ“ธ - -## ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์ด๋ž€? ๐Ÿค” - -์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์€ **ํ•˜๋‚˜์˜ ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ธธ๊ฒŒ ์ง„ํ–‰ํ•˜๋ฉด์„œ, ๊ทธ ๊ณผ์ •์—์„œ ์ฃผ๊ธฐ์ ์œผ๋กœ ํ”ผ๋“œ๋ฐฑ์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋Š” ์‹œ์Šคํ…œ**์ด์—์š”. ๊ฐ ์Šคํ”„๋ฆฐํŠธ๋งˆ๋‹ค ๋ฐฐ์šด ์ด๋ก ์„ ์ ์šฉํ•ด ๋ณด๊ณ , **๋ฉ˜ํ† ๋‹˜๊ป˜ ์ฝ”๋“œ ๋ฆฌ๋ทฐ๋ฅผ ๋ฐ›์•„๊ฐ€๋ฉฐ ์‹ค๋ ฅ์„ ์‘ฅ์‘ฅ ํ‚ค์›Œ๊ฐˆ ์ˆ˜ ์žˆ๋Š” ์ค‘์š”ํ•œ ๊ฐœ์ธ ๊ณผ์ œ**๋ž๋‹ˆ๋‹ค. ๐Ÿ’ช - -## ์ฃผ์š” ๊ธฐ๋Šฅ โœจ - -1. **์ƒํ’ˆ ๋“ฑ๋ก**: ๋‚ด๊ฐ€ ๊ฐ€์ง„ ๋ฌผ๊ฑด์„ ์˜ฌ๋ฆฌ๊ณ , ์‚ฌ์ง„๊ณผ ์„ค๋ช…์„ ์ถ”๊ฐ€ํ•ด ์ง์ ‘ ํŒ๋งคํ•  ์ˆ˜ ์žˆ์–ด์š”! -2. **๋ฌธ์˜ ๋Œ“๊ธ€**: ์ƒํ’ˆ์— ๋Œ€ํ•œ ๊ถ๊ธˆํ•œ ์ ์ด๋‚˜ ์˜๊ฒฌ์„ ์ž์œ ๋กญ๊ฒŒ ๋‚จ๊ธธ ์ˆ˜ ์žˆ๋‹ต๋‹ˆ๋‹ค. ๐Ÿ“ -3. **์ž์œ ๊ฒŒ์‹œํŒ**: ๋‹ค์–‘ํ•œ ์ฃผ์ œ๋กœ ์นœ๊ตฌ๋“ค๊ณผ ์ด์•ผ๊ธฐ๋ฅผ ๋‚˜๋ˆ„๊ณ , ์ •๋ณด๋ฅผ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„์ด์—์š”! ๐Ÿ—ฃ๏ธ - -## ํ”„๋กœ์ ํŠธ ๋ธŒ๋žœ์น˜ ๊ตฌ์กฐ ๐Ÿ—๏ธ - -ํ”„๋กœ์ ํŠธ๋Š” ๋‹จ๊ณ„๋ณ„๋กœ ๋‚˜๋‰˜์–ด ์žˆ๊ณ , ๊ฐ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜์— ๋งž๋Š” ๋ธŒ๋žœ์น˜๊ฐ€ ์žˆ์–ด์š”. ๊ฐ ๋ธŒ๋žœ์น˜๋ฅผ ํ†ตํ•ด ์ฒด๊ณ„์ ์œผ๋กœ ๊ฐœ๋ฐœํ•˜๋ฉฐ ํ•™์Šตํ•  ์ˆ˜ ์žˆ์–ด์š”. ๐ŸŽฏ - -### ๋ธŒ๋žœ์น˜ ์„ค๋ช… - -1. **basic (part1): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1 ~ 4 FE ์š”๊ตฌ์‚ฌํ•ญ** - - - ๊ธฐ๋ณธ์ ์ธ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ธฐ๋Šฅ ๊ตฌํ˜„์„ ์œ„ํ•œ ์ดˆ๊ธฐ ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. HTML, CSS, JavaScript ๋“ฑ์„ ์‚ฌ์šฉํ•ด ๊ธฐ๋ณธ์„ ๋‹ค์ง‘๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 1๋ถ€ํ„ฐ 4๊นŒ์ง€**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - -2. **react (part2): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5 ~ 7 FE ์š”๊ตฌ์‚ฌํ•ญ** - - - React ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ธŒ๋žœ์น˜์ž…๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ์•„ํ‚คํ…์ฒ˜์™€ ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ๋ฐฐ์›๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 5๋ถ€ํ„ฐ 7๊นŒ์ง€, ๊ทธ ์ดํ›„**์˜ ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ Next๊ฐ€ ์•„๋‹Œ React๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด react ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -3. **next (part3,4): ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8 FE ์š”๊ตฌ์‚ฌํ•ญ~** - - - Next.js๋ฅผ ์‚ฌ์šฉํ•ด ์„œ๋ฒ„ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง(SSR)๊ณผ ์ •์  ์‚ฌ์ดํŠธ ์ƒ์„ฑ(SSG) ๋“ฑ ๊ณ ๊ธ‰ ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. - - **์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 8๋ถ€ํ„ฐ** ์‹œ์ž‘ํ•˜๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๋‚ด์šฉ์„ ํฌํ•จํ•˜๊ณ  ์žˆ์–ด์š”. - - ๋งŒ์•ฝ ์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ 9๋ถ€ํ„ฐ ํ”„๋ก ํŠธ์—”๋“œ ์ฝ”๋“œ๋ฅผ React๊ฐ€ ์•„๋‹Œ Next๋กœ ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด next ๋ธŒ๋žœ์น˜๋ฅผ ์‚ฌ์šฉํ•ด์š”. - -> _์Šคํ”„๋ฆฐํŠธ ๋ฏธ์…˜ ๋‚ด ๋ฐฑ์—”๋“œ ์š”๊ตฌ์‚ฌํ•ญ์€ [๋ฐฑ์—”๋“œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ](https://github.com/codeit-sprint-fullstack/11-sprint-mission-be)์˜ ๋ธŒ๋žœ์น˜์—์„œ ๊ด€๋ฆฌํ•ด์ฃผ์„ธ์š”_ - ---- - -๋ณธ ํ”„๋กœ์ ํŠธ๋Š” [์ฝ”๋“œ์ž‡](https://www.codeit.kr)์˜ ์†Œ์œ ์ด๋ฉฐ, ๊ต์œก ๋ชฉ์ ์œผ๋กœ๋งŒ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ยฉ 2025 Codeit. All rights reserved. diff --git a/lib/api/articleService.js b/lib/api/articleService.js new file mode 100644 index 0000000..3e4b091 --- /dev/null +++ b/lib/api/articleService.js @@ -0,0 +1,117 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +function getArticleList( + page = 1, + pageSize = 10, + orderBy = 'recent', + keyword = '' +) { + return fetch( + `${BASE_URL}/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}` + ) + .then((res) => { + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + return res.json(); + }) + .then((data) => { + return data; + }) + .catch((error) => { + console.log(error); + throw error; + }); +} + +function getArticle(id) { + return fetch(`${BASE_URL}/articles/${id}`) + .then((res) => { + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + return res.json(); + }) + .then((data) => data) + .catch((error) => { + console.log(error); + throw error; + }); +} + +function createArticle(articleData) { + return fetch(`${BASE_URL}/articles`, { + method: 'POST', + body: JSON.stringify(articleData), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((res) => { + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + return res.json(); + }) + .then((data) => data) + .catch((error) => { + console.log(error); + throw error; + }); +} + +function updateArticle(id, articleData) { + return fetch(`${BASE_URL}/articles/${id}`, { + method: 'PATCH', + body: JSON.stringify(articleData), + headers: { + 'Content-Type': 'application/json', + }, + }) + .then((res) => { + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + return res.json(); + }) + .then((data) => data) + .catch((error) => { + console.log(error); + throw error; + }); +} + +function deleteArticle(id) { + return fetch(`${BASE_URL}/articles/${id}`, { + method: 'DELETE', + }) + .then((res) => { + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + return res.json(); + }) + .then((data) => data) + .catch((error) => { + console.log(error); + throw error; + }); +} + +export const articleService = { + getArticleList, + getArticle, + createArticle, + updateArticle, + deleteArticle, +}; diff --git a/lib/api/productService.js b/lib/api/productService.js new file mode 100644 index 0000000..a46874b --- /dev/null +++ b/lib/api/productService.js @@ -0,0 +1,113 @@ +const BASE_URL = 'https://panda-market-api-crud.vercel.app'; + +const getProductList = async ({ + page = 1, + pageSize = 10, + orderBy = 'recent', + keyword = '', +} = {}) => { + try { + const res = await fetch( + `${BASE_URL}/products?page=${page}&pageSize=${pageSize}&orderBy=${orderBy}&keyword=${keyword}` + ); + + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + + const data = await res.json(); + return data; + } catch (error) { + console.error(error); + throw error; + } +}; + +const getProduct = async ({ id } = {}) => { + try { + const res = await fetch(`${BASE_URL}/products/${id}`); + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text: ${res.statusText}` + ); + } + const data = await res.json(); + return data; + } catch (error) { + console.log(error); + throw error; + } +}; +const createProduct = async ({ productData } = {}) => { + try { + const res = await fetch(`${BASE_URL}/products`, { + method: 'POST', + body: JSON.stringify(productData), + headers: { + 'Content-Type': 'application/json', + }, + }); + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text:${res.statusText}` + ); + } + const data = await res.json(); + return data; + } catch (error) { + console.log(error); + throw error; + } +}; + +const updateProduct = async ({ id, productData } = {}) => { + try { + const res = await fetch(`${BASE_URL}/products/${id}`, { + method: 'PATCH', + body: JSON.stringify(productData), + headers: { + 'Content-Type': 'application/json', + }, + }); + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text:${res.statusText}` + ); + } + const data = await res.json(); + return data; + } catch (error) { + console.log(error); + throw error; + } +}; + +const deleteProduct = async ({ id } = {}) => { + try { + const res = await fetch(`${BASE_URL}/products/${id}`, { + method: 'DELETE', + }); + if (!res.ok) { + throw new Error( + `HTTP ERROR, status:${res.status}, text:${res.statusText}` + ); + } + const data = await res.json(); + return data; + } catch (error) { + console.log(error); + throw error; + } +}; + +export const productService = { + getProductList, + getProduct, + createProduct, + updateProduct, + deleteProduct, +}; + +//getProductList({ page: 1, pageSize: 10, orderBy: 'recent' }); diff --git a/main.js b/main.js new file mode 100644 index 0000000..71e5ac9 --- /dev/null +++ b/main.js @@ -0,0 +1,22 @@ +import { articleService } from './lib/api/articleService.js'; +// import { productService } from './lib/api/productService.js'; + +const articleData = { + image: 'https://example.com/...', + content: '๊ฒŒ์‹œ๊ธ€ ๋‚ด์šฉ์ž…๋‹ˆ๋‹ค.', + title: '๊ฒŒ์‹œ๊ธ€ ์ œ๋ชฉ์ž…๋‹ˆ๋‹ค.', +}; + +const productData = { + images: ['https://example.com/...'], + tags: ['์ „์ž์ œํ’ˆ'], + price: 0, + description: 'string', + name: '์ƒํ’ˆ ์ด๋ฆ„', +}; + +const articles = await articleService.createArticle(articleData); +console.log(articles); + +// const products = await productService.getProductList(); +// console.log(products);