Git Product home page Git Product logo

react_movieapi's Introduction

HEY, C&N

๐Ÿšฉ ํ”„๋กœ์ ํŠธ ์„ค๋ช…

๐Ÿš€ ๋ฐฐํฌ ์ฃผ์†Œ

๐Ÿ–ฅ๏ธ ์‹ค์ œ ๊ตฌํ˜„ ํ™”๋ฉด

  • ๋ฉ”์ธ ํŽ˜์ด์ง€
  • ์ƒ์„ธ ํŽ˜์ด์ง€
  • ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€(์ธ๊ธฐ์žˆ๋Š”, ํ˜„์žฌ ์ƒ์˜์ค‘์ธ, ๊ฐœ๋ด‰ ์˜ˆ์ •์ž‘, ํ‰์ ์ˆœ)
  • ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ํŽ˜์ด์ง€

๐Ÿ”ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐ ๊ธฐ๋Šฅ ์š”๊ตฌ์‚ฌํ•ญ

  • react-query๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ์บ์‹ฑํ•  ๊ฒƒ
  • ๋กœ๋”ฉ ์ค‘์—๋Š” skeleton UI๋ฅผ ๋‚˜ํƒ€๋‚ผ ๊ฒƒ
  • ๋ชฉ๋ก์„ ๋ถˆ๋Ÿฌ์˜ฌ ๋•Œ๋Š” react-query์˜ useInfiniteQuery๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌดํ•œ ์Šคํฌ๋กค๋ง์œผ๋กœ ๋ถˆ๋Ÿฌ์˜ฌ ๊ฒƒ
  • ํŽ˜์ด์ง€
    • ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€
      • ๊ฐ ์˜ํ™”์˜ ํ‰์  ๋ฐ ์งง์€ ๋ฏธ๋ฆฌ๋ณด๊ธฐ(์†Œ๊ฐœ)๊ฐ€ ๋‚˜ํƒ€๋‚˜์•ผ ํ•จ
      • ๋ฏธ๋ฆฌ๋ณด๊ธฐ๋Š” ๊ธธ์ด๊ฐ€ ๊ธธ๋‹ค๋ฉด ํŠน์ • ๊ธ€์ž์ˆ˜๋ฅผ ๋„˜์–ด๊ฐ€๋ฉด ...์œผ๋กœ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋„๋ก UI๋ฅผ ๊ณ ๋ คํ•  ๊ฒƒ
    • ์ƒ์„ธ ํŽ˜์ด์ง€
      • ๋น„๋””์˜ค๊ฐ€ ์žˆ๋Š” ๊ฒฝ์šฐ, ํŽ˜์ด์ง€ ์ง„์ž… ์‹œ ์ž๋™์œผ๋กœ ๋น„๋””์˜ค ํ”Œ๋ ˆ์ด
      • ์ œ๋ชฉ, ํฌ์Šคํ„ฐ, ๋ณ„์ , ์ œ์ž‘ ์—ฐ๋„, ์žฅ๋ฅด ๋ฐ์ดํ„ฐ ํ™œ์šฉํ•ด์„œ UI ํ‘œ๊ธฐ
      • ๊ทธ ์™ธ์˜ ๋ฐ์ดํ„ฐ ์ถ”๊ฐ€ ํ™œ์šฉ ์—ฌ๋ถ€๋Š” ์ž์œ 
    • search
      • ์ œ๋ชฉ, ํฌ์Šคํ„ฐ, ๋ฏธ๋ฆฌ๋ณด๊ธฐ(์†Œ๊ฐœ), ๋ณ„์ 
      • ํฌ์Šคํ„ฐ ์—†๋Š” ๊ฒฝ์šฐ, ๋Œ€์ฒด ์ด๋ฏธ์ง€ ์‚ฌ

๐ŸŒณ ํ”„๋กœ์ ํŠธ ํด๋” ๊ตฌ์กฐ

src
โ”‚  App.js
โ”‚  index.js
โ”‚
โ”œโ”€Apis
โ”‚      index.js
โ”‚      movieApi.js
โ”‚
โ”œโ”€Atoms
โ”‚      sidebar.atom.js
โ”‚
โ”œโ”€Components
โ”‚  โ”œโ”€IconBox
โ”‚  โ”‚      IconBox.js
โ”‚  โ”‚      IconBox.style.js
โ”‚  โ”‚
โ”‚  โ”œโ”€Layouts
โ”‚  โ”‚  โ”‚  index.js
โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”œโ”€Footer
โ”‚  โ”‚  โ”‚  โ”‚  Footer.js
โ”‚  โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ”‚  โ””โ”€TopButton
โ”‚  โ”‚  โ”‚          TopButton.js
โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€Header
โ”‚  โ”‚      โ”‚  Header.js
โ”‚  โ”‚      โ”‚
โ”‚  โ”‚      โ””โ”€SideBar
โ”‚  โ”‚              SideBar.js
โ”‚  โ”‚
โ”‚  โ””โ”€Skeleton
โ”‚          Skeleton.js
โ”‚
โ”œโ”€Consts
โ”‚      category-title.js
โ”‚      query-key.js
โ”‚
โ”œโ”€Hooks
โ”‚  โ””โ”€Queries
โ”‚          @config.js
โ”‚          get-category.js
โ”‚          get-detail.js
โ”‚          get-search.js
โ”‚          get-trailer.js
โ”‚
โ”œโ”€Pages
โ”‚  โ”œโ”€Detail
โ”‚  โ”‚  โ”‚  index.js
โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€Components
โ”‚  โ”‚          StarEval.js
โ”‚  โ”‚          Video.js
โ”‚  โ”‚
โ”‚  โ”œโ”€Home
โ”‚  โ”‚  โ”‚  index.js
โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€Components
โ”‚  โ”‚          Search.js
โ”‚  โ”‚          Section.js
โ”‚  โ”‚
โ”‚  โ”œโ”€List
โ”‚  โ”‚  โ”‚  index.js
โ”‚  โ”‚  โ”‚
โ”‚  โ”‚  โ””โ”€Components
โ”‚  โ”‚          Information.js
โ”‚  โ”‚          Section.js
โ”‚  โ”‚
โ”‚  โ””โ”€SearchResult
โ”‚          index.js
โ”‚
โ”œโ”€Routes
โ”‚      routing.js
โ”‚
โ”œโ”€Styles
โ”‚      common.js
โ”‚      global.js
โ”‚      theme.js
โ”‚
โ””โ”€Utils
        isMobile.js

๐Ÿ‘จโ€๐Ÿ‘ฉโ€๐Ÿ‘งโ€๐Ÿ‘ฆ ํŒ€์› ์†Œ๊ฐœ ๋ฐ ์—ญํ• 

๋นˆํƒœ์ฐฌ ๊น€๋„์€ ์œค๋™์˜ ์ดํ•˜๋Š˜ ์ด์ฃผํ™
beenbin Doeunnkimm JacobYoon97 twosky0202 LEE JUHONG
PM,
์ „์ฒด UXUI,
์ƒ์„ธ ํŽ˜์ด์ง€ ์กฐํšŒ ๊ธฐ๋Šฅ
API ๋ชจ๋“ˆํ™”,
react-query๋กœ ์ฟผ๋ฆฌ ํ›… ํ•จ์ˆ˜ ์ •์˜,
๋ฉ”์ธ ํŽ˜์ด์ง€ ์กฐํšŒ ๊ธฐ๋Šฅ
๋ฌดํ•œ ์Šคํฌ๋กค๋ง ๊ธฐ๋Šฅ,
์ƒ์„ธ ๋ฆฌ์ŠคํŠธ ํŽ˜์ด์ง€ ์กฐํšŒ ๊ธฐ๋Šฅ,
๋ฉ”์ธ ๋ฐ ์ƒ์„ธ ํŽ˜์ด์ง€ UI ์ฐธ์—ฌ
๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ,
๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ ์กฐํšŒ ๊ธฐ๋Šฅ
-

โš’๏ธ ์‚ฌ์šฉ ๊ธฐ์ˆ  ์Šคํ…

๊ธฐ์ˆ  ์Šคํƒ ์ข…๋ฅ˜
์–ธ์–ด
Javascript
ํ”„๋ก ํŠธ์—”๋“œ
React
์‚ฌ์šฉ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉํ•œ ๋ถ€๋ถ„
styled-components ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ ๊ตฌ์„ฑ ์‹œ ์‚ฌ์šฉ
react-router-dom URL์— ๋”ฐ๋ผ ํ™”๋ฉด์„ ๋ Œ๋”๋ง ์‹œ ์‚ฌ์šฉ
axios api๋ฅผ ํ†ตํ•œ ๋น„๋™๊ธฐ ํ†ต์‹  ์‹œ ์‚ฌ์šฉ
recoil ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ ์‹œ ์‚ฌ์šฉ
react-query ๋ฐ์ดํ„ฐ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ

๐Ÿค ํ˜‘์—…

react_movieapi's People

Contributors

doeunnkimm avatar showme0241 avatar jacobyoon97 avatar twosky0202 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.