/book_shop

Primary LanguageJavaScript

๐Ÿ“‚  ํ”„๋กœ์ ํŠธ ์ด๋ฆ„ (Project Name)

Book Flex

Application Logo

๋ณธ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜์˜ ๋ฐ์ดํ„ฐ๋Š” Interpark book Open API๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๊ฐœ๋ฐœํ•˜์˜€์Šต๋‹ˆ๋‹ค.
(An application used to filter data form Interpark book open API, built with React, JavaScript, and CSS.)

Interpark book Open API : [http://book.interpark.com/bookPark/html/bookpinion/api_main.html]



๐Ÿ‘จโ€๐Ÿ’ป ์‚ฌ์šฉ๋œ ๊ธฐ์ˆ ์Šคํƒ (Used Tech Stack)

Front-End : HTML5, CSS, JavaScript

Back-End : -

Database : -

UI Framework and Libraries: ReactJS

Design pattern : Container and Presenter Pattern

Markdown Monster icon

A container

- child-components์— ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•œ๋‹ค.

- DOM Markup์— ๋Œ€ํ•œ ์ž‘์„ฑ์€ ์—†๋‹ค.

A presenter

- ์ฃผ๋กœ ๋ณด์—ฌ์ง€๋Š” ๊ฒƒ๊ณผ ๊ด€๋ จ๋œ ์ฒ˜๋ฆฌ๋ฅผ ํ•œ๋‹ค.

- ํ•ญ์ƒ DOM markup๊ณผ styles์— ๋Œ€ํ•œ ์ž‘์„ฑ์„ ํ•œ๋‹ค.

- ์–ด๋–ป๊ฒŒ data๊ฐ€ load, transformed, or mutated๋Š”์ง€์— ๋Œ€ํ•œ ์ฒ˜๋ฆฌ๋Š” ํ•˜์ง€ ์•Š๋Š”๋‹ค.(Container ์˜์—ญ)




๐Ÿ–ผ๏ธ  ํ”„๋กœ์ ํŠธ ์™€์ด์–ดํ”„๋ ˆ์ž„ (Project Wireframe)

Markdown Monster icon Markdown Monster icon
Main page Detail page



๐Ÿง‘๐Ÿผโ€๐Ÿ’ป ํ”„๋กœ์ ํŠธ์˜ ์š”๊ตฌ์‚ฌํ•ญ ๋ฐ ํŠน์ง• (Project Requirements and Features)

  • ํŒ๋งค๋˜๊ณ  ์žˆ๋Š” ์ฑ…์˜ ์ •๋ณด๋ฅผ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณตํ•œ๋‹ค.
  • IT ๊ด€๋ จ ์„œ์ ์€ ๋ณ„๋„์˜ ๋ฉ”๋‰ด์—์„œ ๊ด€๋ฆฌ๋ฅผ ํ•œ๋‹ค.
  • ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ, ์ถ”์ฒœ๋„์„œ, ์ƒˆ๋กœ ์ถœ๊ฐ„๋œ ๋„์„œ๋ฅผ ์นดํ…Œ๊ณ ๋ฆฌ๋ณ„๋กœ ๋ถ„๋ฅ˜ํ•ด์„œ ํ™”๋ฉด์— ์ถœ๋ ฅํ•œ๋‹ค.




Project Status

๐Ÿ—“๏ธ   2020.11.18

ํ”„๋กœ์ ํŠธ๋Š” ํ˜„์žฌ ๊ฐœ๋ฐœ์ค‘์ธ ์ƒํƒœ์ด๋ฉฐ, ์‚ฌ์šฉ์ž๋“ค์€ ํŒ๋งค์ค‘์ธ ์ฑ…์˜ ์ •๋ณด๋ฅผ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค. ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฉ”๋‰ด๋Š” ์„ธ ๊ฐœ์˜ ๋ฉ”๋‰ด๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ์œผ๋ฉฐ, ์ผ๋ฐ˜ ๋„์„œ, IT๊ด€๋ จ ๋„์„œ ๊ทธ๋ฆฌ๊ณ  ๊ฒ€์ƒ‰ ๋ฉ”๋‰ด๋กœ ๊ตฌ์„ฑ์ด ๋˜์–ด์žˆ๋‹ค.
(This project is currently in development. Users can get the information of the book on sale. Navigation menu is consist of three menu. One is general books information and the other is classified as an IT-related books, and another is search menu.)

๐Ÿ—“๏ธ   2020.11.23

ํ”„๋กœ์ ํŠธ ๊ฐœ๋ฐœ ์™„๋ฃŒ

ํ”„๋กœ์ ํŠธ ์Šคํฌ๋ฆฐ์ƒท (Project Screen Shot(s))

Example:

[ PRETEND SCREEN SHOT IS HERE ]

[ PRETEND OTHER SCREEN SHOT IS HERE ]

ํ”„๋กœ์ ํŠธ ์„ค์น˜ ๋ฐ ์„ค์ • ์ง€์นจ (Installation and Setup Instructions)

โ‘  Clone down this repository. You will need node and npm installed globally on your machine.

โ‘ก Installation:

npm install

โ‘ข To Start Server:

npm start

To Visit App:

Book Flex : [https://localhost:3000/]

๐Ÿค” ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ์น˜๋ฉฐ (Project Reflection)

โ“Q1. ์ด ํ”„๋กœ์ ํŠธ์˜ ๋ฐฐ๊ฒฝ์€ ๋ฌด์—‡์ธ๊ฐ€?
โ†’ ์‚ฌ์ด๋“œ ํ”„๋กœ์ ํŠธ(Side project)๋กœ ES6์ดํ›„์˜ JavaScript์™€ Component๊ธฐ๋ฐ˜์˜ React๋ฅผ ์‚ฌ์šฉํ•œ ๊ฐœ๋ฐœ์— ์ข€ ๋” ์ต์ˆ™ํ•ด์ง€๊ธฐ ์œ„ํ•ด ๊ฐœ์ธ์ ์œผ๋กœ ์ง„ํ–‰ํ•œ ํ”„๋กœ์ ํŠธ ์ž…๋‹ˆ๋‹ค. Container-Presenter Pattern์œผ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์—ฐ์Šต์„ ํ•ด๋ณด์•˜๋‹ค.

โ“Q2. ๋ฌด์—‡์„ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ๋ชฉ์ ์œผ๋กœ ๊ฐœ๋ฐœ๋˜์—ˆ๋‚˜?
โ†’ ์ฑ…์„ ๊ตฌ๋งคํ•˜๋Š” ์‚ฌ์šฉ์ž๋ฅผ ์œ„ํ•ด ๋ฒ ์ŠคํŠธ์…€๋Ÿฌ, ์ถ”์ฒœ๋„์„œ, ์‹ ๊ฐ„๋„์„œ๋กœ ์นดํ…Œ๊ณ ๋ฆฌ๋ฅผ ๋ถ„๋ฅ˜ํ•˜์—ฌ, ์ผ๋ฐ˜๋„์„œ์™€ ์†Œ์„ค, IT๊ด€๋ จ ์„œ์ ์— ๋Œ€ํ•œ ์ •๋ณด๋ฅผ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•ด ๊ฐœ๋ฐœ์„ ํ•˜์˜€๋‹ค.

โ“Q3. ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ํ†ตํ•ด์„œ ์–ป๊ณ ์ž ํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐœ๋ฐœ๊ฒฝํ—˜์— ์žˆ์–ด, ์–ด๋–ค ๋ถ€๋ถ„์ด ๋„์›€์ด ๋˜์—ˆ๋Š”๊ฐ€? โ†’ ์šฐ์„  Component๊ธฐ๋ฐ˜์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•˜๋Š” ์ข‹์€ ๊ฒฝํ—˜์ด ๋˜์—ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ํ™”๋ฉด์˜ ๊ตฌ์„ฑ์„ Component ๋‹จ์œ„๋กœ ์ชผ๊ฐœ์„œ ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๊ณ , ๊ฐ Component๊ฐ€ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๊ฐ€๋Šฅํ•ด์ง€๋ฉด์„œ ์ข€ ๋” ํšจ์œจ์ ์ธ ๊ฐœ๋ฐœ์ด ๊ฐ€๋Šฅํ–ˆ๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ES6 ์ดํ›„์— ์—…๋ฐ์ดํŠธ๋œ JavaScript์˜ ๋ฌธ๋ฒ•์ ์ธ ์‚ฌ์šฉ์— ์žˆ์–ด, ์ข€ ๋” ์ต์ˆ™ํ•ด์งˆ ์ˆ˜ ์žˆ์—ˆ๋˜ ์ข‹์€ ๊ธฐํšŒ์˜€๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

โ“Q4. ํ”„๋กœ์ ํŠธ ์ง„ํ–‰์ค‘์— ์˜ˆ์ƒ์น˜ ๋ชปํ–ˆ๋˜ ์–ด๋ ค์›€์ด ์žˆ์—ˆ๋‚˜?
โ†’ ํŠน๋ณ„ํ•œ ์–ด๋ ค์›€์€ ์—†์—ˆ์Šต๋‹ˆ๋‹ค.

โ“Q5. ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•จ์— ์žˆ์–ด ์‚ฌ์šฉํ–ˆ๋˜ ๋„๊ตฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
โ†’ ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•จ์— ์žˆ์–ด ์‚ฌ์šฉํ–ˆ๋˜ ๊ฒƒ์€ React framework์ž…๋‹ˆ๋‹ค.

โ“Q5. ์ด ํ”„๋กœ์ ํŠธ๋ฅผ ๊ตฌํ˜„ํ•จ์— ์žˆ์–ด ์‚ฌ์šฉํ–ˆ๋˜ ๋„๊ตฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฌด์—‡์ž…๋‹ˆ๊นŒ?
โ†’ Vanilla JS๋Œ€์‹ ์— React JS๋ฅผ ์‚ฌ์šฉํ•œ ์ด์œ ๋Š” ์›น์•ฑ์ด ์ ์  ๋” ๋ณต์žกํ•ด์ง€๊ณ  ์—ญ๋™์ ์ด๊ฒŒ ๋ณ€ํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ”„๋กœ์„ธ์Šค์˜ ์†๋„๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด์„œ React์™€ ๊ฐ™์€ ์ƒˆ๋กœ์šด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์„œ ๊ฐœ๋ฐœํ•˜๋Š” ๊ฒƒ์— ์ต์ˆ™ํ•ด์ ธ์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.
Front-End ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋œ ๋ฐฐ๊ฒฝ์€ ๋™์ ์ธ ์›น ํŽ˜์ด์ง€๋ฅผ ๋ณด๋‹ค ํšจ์œจ์ ์œผ๋กœ ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•จ์ธ๋ฐ, ์š”์ฆ˜ ์›น์€ ๋‹จ์ˆœํžˆ ์ •๋ณด์ „๋‹ฌํ•˜๋Š” ํŽ˜์ด์ง€๊ฐ€ ์•„๋‹Œ, User์˜ Interaction์„ ์ฒ˜๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ์ƒํƒœ ๋ณ€ํ™”๊ฐ€ ์ƒ๋‹นํžˆ ๋งŽ์€ ๋ถ€๋ถ„์—์„œ ์ด๋ค„์ง€๊ธฐ ๋•Œ๋ฌธ์— ์ข€ ๋” ์ž์—ฐ์Šค๋Ÿฌ์šด ์œ ์ € ์ธํ„ฐํŽ˜์ด์Šค๋กœ ๋งŒ๋“ค์–ด ์ฃผ๊ธฐ ์œ„ํ•ด ์ด๋Ÿฌํ•œ Front-End ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ/ํ”„๋ ˆ์ž„์›Œํฌ๊ฐ€ ๋“ฑ์žฅํ•˜๊ฒŒ ๋˜์—ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ด๋Ÿฌํ•œ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ข€ ๋” dynamicํ•˜๊ฒŒ ํ‘œํ˜„ํ•˜๋ฉฐ ๊ฐœ๋ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•ด ReactJS๋ฅผ ์„ ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
*ํ”„๋กœ์„ธ์Šค์˜ ์†๋„๋ฅผ ๋†’์ด๊ธฐ ์œ„ํ•ด์„œ
โ†’ React๋Š” ๋ฐ์ดํ„ฐ๊ฐ€ ๋ณ€๊ฒฝ๋จ์— ๋”ฐ๋ผ ์ ์ ˆํ•œ Component๋งŒ ํšจ์œจ์ ์œผ๋กœ ๊ฐฑ์‹ ํ•˜๊ณ  Renderingํ•˜๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.