Code Monkey home page Code Monkey logo

bridge's Introduction

๐ŸŒฑ Bridge


Presentation

bridge_J4k22bEy.mp4

Stack

๐Ÿ–ผ Frontend

  • JavaScript
  • React.js

๐Ÿ’ป Backend

  • Django Rest Framework
  • Nginx

๐Ÿ“ก Infra

  • Docker
  • k3s
  • GIST MobileX cluster

Service Architecture

Member

์„ฑ๋ช… ๋‹ด๋‹น ๊นƒํ—ˆ๋ธŒ
๊ณฝ๋ณ‘ํ˜ (leader) ์ „ ๊ธฐ๋Šฅ ํ’€์Šคํƒ ๊ฐœ๋ฐœ
Infra ๊ตฌ์„ฑ, ๋ฐฐํฌ
UI/UX
์„œ๋น„์Šค, ๊ธฐ๋Šฅ ๊ธฐํš
๊น€์žฌ์œค ์ผ๊ธฐ๋ณ€ํ™˜๊ธฐ๋Šฅ LLM ๊ฐœ๋ฐœ
diaryapp ๋ฐฑ์—”๋“œ ๊ฐœ๋ฐœ
diaryList ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ฐธ์—ฌ
์œค์„ธ๋ฆผ UI/UX
accountapp ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ฐธ์—ฌ

What is "Bridge" ?

๋งŽ์€ ์šฐ์šธ์ฆ ํ™˜์ž๋“ค์ด "์šฐ์šธ์ผ๊ธฐ"๋ผ๋Š” ๊ฒƒ์„ ์ž‘์„ฑํ•ฉ๋‹ˆ๋‹ค. ์ผ๊ธฐ์˜ ์ž‘์„ฑ์€ ์ž์‹ ์˜ ํ•˜๋ฃจ๋ฅผ ๋Œ์•„๋ณด๊ฒŒ ํ•˜๊ณ , ๋” ๋‚˜์€ ์‚ถ์„ ๊ณ„ํšํ•˜๋Š” ๋ฐ ๋ฐœ๋‹์›€์ด ๋ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋•Œ๋ก  ์ž์‹ ์˜ ์ƒ๊ฐ์„ ๊ฐ•ํ™”ํ•˜๊ณ , ํ–ฅ์ƒ์‹œํ‚จ๋‹ค๋Š” ์ผ๊ธฐ์˜ ์žฅ์ ์ด "์šฐ์šธ"์— ์žˆ์–ด์„  ๊ทธ์กฐ์ฐจ๋„ ๊ฐ•ํ™”์‹œ์ผœ๋ฒ„๋ฆฌ๋Š” ์—ญํšจ๊ณผ๋ฅผ ๋‚ณ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์šฐ์šธํ•œ ๊ฐ์ •์„ ๊ธฐ๋กํ•˜๊ณ  ๋˜์ƒˆ๊น€์œผ๋กœ์จ ๊ทธ ๊ฐ์ •์ด ๋” ๊นŠ์–ด์ง€๊ณ  ๊ณ ์ฐฉํ™”๋  ์œ„ํ—˜์ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. Bridge๋Š” ๊ทธ ์šฐ์šธ์„ ํ™˜๊ธฐ์‹œํ‚ค๋Š” ๊ฒƒ์„ ๋ชฉํ‘œ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

https://computer-system-team-06.dev.mobilex.kr

๐ŸŽ 1. ๊ธ์ •์ผ๊ธฐ : ์ž์‹ ์˜ ํ•˜๋ฃจ๋ฅผ ์ƒˆ๋กœ์šด ์‹œ์„ ์œผ๋กœ ๋Œ์•„๋ณด๊ธฐ

์ž‘์„ฑ๋œ ์ผ๊ธฐ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ๊ธ์ •์ ์ธ ์ผ๊ธฐ๋ฅผ ์ƒˆ๋กญ๊ฒŒ ์ƒ์„ฑํ•ด ์›๋ณธ๊ณผ ํ•จ๊ป˜ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค


[ ์ผ๊ธฐ ์ž‘์„ฑ ํŽ˜์ด์ง€ ]

[ ์ž‘์„ฑ๋œ ์ผ๊ธฐ ํ™”๋ฉด : ๊ธ์ •์ผ๊ธฐ ]


๐Ÿ‹ 2. ํ•  ์ผ ์ถ”์ฒœ : ๋‚ด์ผ ๋‚ ์”จ์™€ ์ผ๊ธฐ๋‚ด์šฉ์„ ๋ฐ”ํƒ•์œผ๋กœํ•œ ํ• ์ผ ์ถ”์ฒœ


๐Ÿซ 3. ๊ณต๊ฐ ๋Œ“๊ธ€ : ๊ณต๊ฐ ๋Œ“๊ธ€ ๋‹ฌ๊ธฐ

bridge's People

Stargazers

Jaeyoon-Kim avatar

Watchers

 avatar

bridge's Issues

๋งˆ์ง€๋ง‰ ํƒœ์Šคํฌ

  1. volume mount ์ ์šฉ ์œ„ํ•ด PersistentVolume ๊ณต๋ถ€
  2. create-diary ํผ ์ œ์ถœ์‹œ ๋ฒ„ํŠผ ์—ฐํƒ€์‹œ ์—ฌ๋Ÿฌ๊ฐœ ์ œ์ถœ๋˜๋Š” ๋ฌธ์ œ ์ฐจ๋‹จ.
  3. ์ž‘์„ฑ๋œ ์ผ๊ธฐ ์—†์„๋•Œ, ์•„์ง ์ž‘์„ฑ๋œ ์ผ๊ธฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. ๋„์šฐ๊ธฐ
  4. ์ŠคํŠธ๋Ÿญ์ณ ๋„์‹ ์ž‘์„ฑ (๋ฐœํ‘œ์šฉ)
  5. ๊นƒํ—ˆ๋ธŒ ๋ฆฌ๋“œ๋ฏธ ๊พธ๋ฏธ๊ธฐ
  6. ๋ฐœํ‘œ์˜์ƒ ์ฐ๊ธฐ

์•„์ง๋„ authentication credential์„ ๋ฐ”๋กœ ํ•ด๊ฒฐ๋ชปํ•˜๋Š”๊ฒŒ ๋ง์ด๋˜๋‚˜

  1. cors? ์•„๋‹˜
  2. csrf ๋ฌธ์ œ?
  • settings์—์„œ trusted_origins ์„ค์ •ํ•จ.
  • vite๋กœ ์„ค์ •ํ•œ ๋ฆฌ์•กํŠธ๋Š” 127.0.0.1๋ง๊ณ  localhost๋กœ๋งŒ ๋จ. ์ด๊ฒƒ๋„ ๊ณ ๋ คํ•จ
  1. axios response ๋ฌธ์ œ?
  • withCredentials:true,
  • headers: ์— X-CSRFToken ์ž˜ ๋„˜๊น€.
  • ์ฟ ํ‚ค์— ๊ฐ’์ด ์•ˆ๋‹ด๊ธด๊ฑฐ ์•„๋‹˜? ์•„๋‹˜ ์ž˜ ๋‹ด๊น€.

๋‚จ์€ ํƒœ์Šคํฌ

  1. ๋กœ๊ทธ์ธ, ํšŒ์›๊ฐ€์ž…ํŽ˜์ด์ง€ css ์กฐ์ •
  2. ์ผ๊ธฐ ์ž‘์„ฑ ํ›„ llm ๋„๋Š” ์‹œ๊ฐ„ ๋„ˆ๋ฌด ๊ธธ์–ด. ๋กœ๋”ฉ ํ™”๋ฉด ๊ตฌ์ƒ
  3. ๋‹ฌ๋ ฅ ํ™”์‚ดํ‘œ ์ˆ˜์ •

์—ฌ๊นŒ์ง€๋งŒ ํ•˜๊ณ  ์ด์ œ infra ์„ค๊ณ„

task 0527 : 23-24

  1. ๋ฐฑ์—”๋“œ ํ”„๋กœํ•„ ์ง€์—ญ ์ถ”๊ฐ€. ๋””ํดํŠธ ์„œ์šธ
  2. ํ”„๋ก ํ”„ ํ”„๋กœํ•„ ์˜์—ญ์—์„œ ์ง€์—ญ ์ˆ˜์ • ๊ฐ€๋Šฅํ•˜๊ฒŒ
  3. ์ผ๊ธฐ์“ฐ๊ธฐ์—์„œ ์ง์ ‘ ๋ฐ›์•„์„œ ์ „์†กํ•˜๊ณ  ์žˆ๋Š” ๋‚ ์”จ๋ฅผ ํ”„๋กœํ•„๋ชจ๋ธ์—์„œ ๋ฐ›์•„์„œ ์ถ”๊ฐ€์‹œ์ผœ์„œ axios ์ „์†ก
  4. diaryDetail ๊ตฌ์ƒ

๋‹ฌ๋ ฅ ํด๋ฆญํ–ˆ์„๋•Œ ํ•ด๋‹น ๋‚ ์งœ ์ผ๊ธฐ ๋ฆฌ์ŠคํŒ…: ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•  ๊ฒƒ์ธ๊ฐ€?

  1. ์ผ๊ธฐ๊ฐ€ ์ž‘์„ฑ๋œ ๋‚ ์งœ๋Š” ์ƒ‰๊น”์น ํ• ๊ฑฐ์ž„
    : ๊ทธ๋Ÿผ ์ฒ˜์Œ์— ์ „์ฒด ์ผ๊ธฐ๋ฅผ ๊ฐ€์ ธ์™€์•ผํ• ๊นŒ? > ์˜ค๋ฒ„ํ—ค๋“œ๊ฐ€ ๋„ˆ๋ฌด ํฌ๋‹ค.
    : ํ•ด๋‹น ์›”๋งŒ ๊ฐ€์ ธ์˜ค๊ณ  ์บ์‹ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์ตœ์„ ์ผ ๊ฒƒ ๊ฐ™์Œ.
    : ๊ท€์ฐฎ์œผ๋‹ˆ๊นŒ ์šฐ์„  ํ•ด๋‹น ์›”๋งŒ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ์‹์œผ๋กœ ๊ตฌํ˜„ํ•œ๋‹ค.

Search : ๋งˆ์ง€๋ง‰ ํ•œ๊ธ€์ž ์ž…๋ ฅ์ด ์•ˆ๋“ค์–ด๊ฐ€๋Š” ๋ฌธ์ œ (์žฌ์œคํ•„๋…)

์ด๊ฑฐ search state๋ฅผ ๋”ฐ๋กœ ๋ฐ›์œผ๋ฉด์„œ handleInputChange()๋กœ ํ•œ๋ฒˆ์— ๋‹ค ๊ด€๋ฆฌํ•˜๋ ค๋‹ค๋ณด๋‹ˆ๊นŒ ์ˆœ์„œ๋ฅผ ๋„ˆ๊ฐ€ ๊ณ ๋ ค ๋ชปํ•œ๊ฑฐ์•ผ.
๊ฐ’์ด ์ „๋ถ€ ๋‹ด๊ธฐ๊ธฐ์ „์— ์š”์ฒญ์ด ๊ฐ€๊ณ  ์žˆ์—ˆ์–ด. input Onchange๋กœ๋Š” search state๋งŒ ๊ด€๋ฆฌ๋ฅผ ํ•˜๊ณ  useEffect๋กœ search ๋ณ€ํ™” ๊ฐ์ง€ํ•ด์„œ handleInputChange()๋กœ axio ๋‚ ๋ฆฌ๋Š” ์‹์œผ๋กœ ๊ด€๋ฆฌํ•˜๋ฉด ์ข€ ๋” ๊น”๋”ํ•จ. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ์•ˆํ—ท๊ฐˆ๋ ค. ์ฐธ๊ณ ํ•˜๋„๋ก

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.