Skip to content

2020 11 23 ํšŒ๊ณ 

ParkSeungHwan edited this page Nov 24, 2020 · 1 revision

๐Ÿ‘€ ํšŒ๊ณ 

  • ์˜ˆ์ง„
    • ์‚ฌ์‹ค(fact)

      • [1] Icon Component ์Šคํ† ๋ฆฌ๋ฅผ ์ž‘์„ฑํ•  ๋•Œ, knobs๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์‚ฌ์ด์ฆˆ๋ฅผ ์„ ํƒํ•˜๊ธฐ ์šฉ์ดํ•˜๊ฒŒ ํ•˜์˜€๋‹ค.

      • [2] Icon Button ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜๋ ค๋Š”๋ฐ, ์Šคํ† ๋ฆฌ๊ฐ€ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค.

      • [3] react-icons๊ฐ€ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค.

      • [4] ์˜ค๋Š˜ ๋‚ด๊ฐ€ ๋งก์€ ๊ฒƒ์€ nav bar์ด๊ณ , ์—ฌ๊ธฐ์— ๊ณตํ†ต์ ์œผ๋กœ ์“ฐ์ด๋Š” Icon Button component๋ฅผ ๋งŒ๋“ค ๊ฒƒ์ด๋‹ค.

      • [5] interface๋Š” ์—ฌ๋Ÿฌ ๊ฐœ ์ƒ์† ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.

        interface Square extends Shape, PenStroke {
          sideLength: number;
        }
    • ๋Š๋‚Œ(Feeling)

      • Fact[1] ์„ ์•Œ๊ฒŒ ๋˜์—ˆ์œผ๋‹ˆ, ์•ž์œผ๋กœ props๋กœ ๋‹ค์–‘ํ•œ ๊ฐ’์„ ํŽธ๋ฆฌํ•˜๊ฒŒ ๋„ฃ์„ ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™๋‹ค.

      • Fact[2]๋กœ ์ธํ•˜์—ฌ, ํ™”๊ฐ€ ์•„์ฃผ ์กฐ๊ธˆ ๋‚œ๋‹ค.

      • Fact[3] ๋กœ ์ธํ•˜์—ฌ, Svg๋ฅผ ์ผ์ผ์ด ์ฐพ์ง€ ์•Š์•„๋„ ๋  ๊ฒƒ ๊ฐ™๋‹ค.

        ๊ทธ๋Ÿฌ๋‚˜, ์ด๋ฏธ svg๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•˜๊ณ  icon component๋ฅผ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ...

        react-icons์™€ icon component๋ฅผ ๊ฐ™์ด ์“ธ ์ˆ˜ ์—†์„์ง€ ์•Œ๊ณ  ์‹ถ๋‹ค.

      • ์Šคํ† ๋ฆฌ๋ถ์€ ๋„ˆ๋ฌด ์ข‹์€๋ฐ, ๋„ˆ๋ฌด ์‹ซ๋‹ค.

    • ๊ตํ›ˆ(finding)

      • ์—ฌ๊ธฐ์ €๊ธฐ ๋ ˆํฌ์ง€ํ† ๋ฆฌ๋ฅผ ๊ธฐ์›ƒ๊ฑฐ๋ฆฌ๋ฉด ์ข‹์€ ์†Œ์Šค๋“ค์„ ์–ป์„ ์ˆ˜ ์žˆ๋‹ค.
    • ํ–ฅํ›„ ํ–‰๋™(Future action)

      • ์˜ค๋Š˜ icon button component ๋‹ค ๋๋‚ธ๋‹ค.
    • ํ”ผ๋“œ๋ฐฑ(Feedback)

      • icon ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์“ฐ๋Š” ํŒ๋‹จ ์•„์ฃผ ์ข‹์Šต๋‹ˆ๋‹ค.
      • ๋ชฝ๊ณ ๋””๋น„ ์„œ๋ฒ„๋ฅผ ์ฃผ์…”์„œ ๊ฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค.
      • ๋ฆฌ๋ทฐ๋ฅผ ๊ผผ๊ผผํ•˜๊ฒŒ ํ•ด์ฃผ์‹œ๊ณ  DB์Šคํ‚ค๋งˆ ์งœ๋Š๋ผ ํž˜๋“œ์…จ์„ ํ…๋ฐ ๊ฐ์‚ฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์ƒ์‹ 
    • ์‚ฌ์‹ค(fact)

      • ...props ๊ฐ€ ๊ฑฐ์Šฌ๋ ค์„œ ์ง€์šฐ๊ณ  ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค์—ˆ๋Š”๋ฐ ์ปดํฌ๋„ŒํŠธ ์ƒ์†๋ฐ›์•„ ์ƒˆ๋กœ ๋งŒ๋“œ๋‹ˆ๊นŒ ์Šคํƒ€์ผ์ด ์ ์šฉ์ด ์•ˆ๋๋‹ค.
      • ...props ๊ฐ€ ์Šคํƒ€์ผ ์ ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•ด์คฌ๋‹ค. ๊ณ ๋งˆ์šด ๋…€์„์ด์—ˆ๋‹ค.
      • Date ์ž…๋ ฅ์„ ๋ฐ›์•„ '23์ผ ์›”์š”์ผ' ์ฒ˜๋Ÿผ ์ถœ๋ ฅํ•ด์ฃผ๋Š” utilํ•จ์ˆ˜๋ฅผ ์ž˜ ๋งŒ๋“ค์—ˆ๋‹ค.
      • ๊ฐœ๋ฐœ ์ค‘์— develop์ด update๋˜๋ฉด mergeํ•˜๊ณ  ๊ฐœ๋ฐœํ•ด๋„ ๋ณ„ ๋ฌธ์ œ ์—†๋‹ค๋Š” ๊ฑธ ์•Œ์•˜๋‹ค.
    • ๋Š๋‚Œ(Feeling)

      • ํ•  ์ผ์ด ๋„ˆ๋ฌด ๋งŽ์•„ ๋ณด์ธ๋‹ค. ๐Ÿ˜ฅ
      • Atomic Design์œผ๋กœ ์งœ๊ณ  ์žˆ๋Š”๋ฐ ๋„ˆ๋ฌด ์ข‹์€ ๊ฒƒ ๊ฐ™๋‹ค.
      • Storybook์œผ๋กœ ๋ฐ”๋กœ ํ™•์ธํ•˜๋ฉด์„œ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“œ๋‹ˆ๊นŒ ๋„ˆ๋ฌด ํŽธํ•˜๋‹ค.
    • ๊ตํ›ˆ(finding)

      • ...props ๋ฅผ ๋ณด๊ณ  ๋Š๋‚€ ๊ฒƒ : ์˜๋ฏธ ์—†๋Š” ์ฝ”๋“œ๋Š” ์—†๋‹ค.
    • ํ–ฅํ›„ ํ–‰๋™(Future action)

      • ...props ์ฒ˜๋Ÿผ ๋‚ฏ์„  ๋…€์„์ด ๋ณด์ด๋ฉด ์ง€์šฐ์ง€ ๋ง๊ณ  ์•Œ์•„๋ณด์ž
      • ๊ฐœ๋ฐœํ•˜๋‹ค๊ฐ€ develop์ด update๋˜๋ฉด merge ํ•˜์ž
    • ํ”ผ๋“œ๋ฐฑ(Feedback)

      • ์ƒ์‹ ๋‹˜์€ ๊ธ์ •์ ์ธ ๋ง์„ ๋งŽ์ด ํ•ด์ฃผ์…”์„œ "์ข‹์€ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค" ๐Ÿ˜†
      • ํ•ญ์ƒ ์†Œํ†ต์„ ์›ํ™œํ•˜๊ฒŒ ํ•ด์ฃผ์‹œ๊ณ  ์งˆ๋ฌธ์— ๋Œ€ํ•ด ์ฆ‰๊ฐ์ ์œผ๋กœ ํ”ผ๋“œ๋ฐฑ ํ•ด์ฃผ์…”์„œ ๊ฐ์‚ฌํ•˜๋‹ค.
      • ์œ ํ‹ธ ํ•จ์ˆ˜ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ ์ข‹์€ ์Šต๊ด€์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค ๐Ÿ’ฏ.
  • ์„์ฃผ
    • ์‚ฌ์‹ค(fact)
      • router ๋ถ„๋ฆฌ์ž‘์—…์„ ์ง„ํ–‰ํ•˜์˜€๋‹ค.
      • passport-github์„ ์ด์šฉํ•ด github login์„ ๊ตฌํ˜„ํ•˜๊ณ ์žˆ๋‹ค.
    • ๋Š๋‚Œ(Feeling)
      • passport์™€ OAuth์— ๋Œ€ํ•ด ์กฐ๊ธˆ ๋” ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜์—ˆ๋‹ค.
      • express์™€ koa๋ฅผ ์‚ฌ์šฉํ• ๋•Œ์˜ ์ฐจ์ด์ ์ด ์žˆ์–ด์„œ ์ ์‘ํ•˜๋Š”๋ฐ ์‹œ๊ฐ„์ด ๊ฑธ๋ฆฌ๋Š” ๊ฒƒ ๊ฐ™๋‹ค.
      • typescript๋Š” ์–ด๋ ต๋‹ค
    • ๊ตํ›ˆ(finding)
      • ๊ธฐ์กด์— ์•Œ๋˜ ๋ฐฉ์‹์„ ๋ฏฟ๊ณ  ๊ทธ๋Œ€๋กœ ์ฝ”๋”ฉํ•˜์ง€ ๋ง๊ณ  ์ƒˆ๋กœ์šด ๋‚ด์šฉ์— ๋Œ€ํ•ด ๋” ์ฐพ์•„๋ณด๊ณ  ์ฝ”๋”ฉํ•œ๋‹ค.
    • ํ–ฅํ›„ ํ–‰๋™(Future action)
      • koa, typescript, passport์— ๋Œ€ํ•ด ๋” ๊ณต๋ถ€ํ•œ๋‹ค.
    • ํ”ผ๋“œ๋ฐฑ(Feedback)
      • passport, OAuth, koa ์ž˜ ๋ฐฐ์›Œ์„œ ๋ฉ˜ํ† ๋งํ•ด์ฃผ์„ธ์š” ๐Ÿ˜‰
      • ์ด์ „์— ํ•ด๋ณด์ง€ ์•Š์€ ๊ฒƒ์„ ๋„์ „ ํ•ด๋ณด๋Š” ๊ฒƒ, ์ข‹์•„์š” !
      • ์Šค๋งˆํŠธํ•˜์…”์„œ ๋„ˆ๋ฌด ์ข‹์Šต๋‹ˆ๋‹ค.
  • ์Šนํ™˜
    • ์‚ฌ์‹ค(fact)
      • ์žฌ์‚ฌ์šฉ๋˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌ ํ•˜์˜€๋‹ค.
      • css ๋ฅผ ๋Šฅ๋™์ ์œผ๋กœ ์‚ฌ์šฉํ•˜์ง€ ๋ชปํ•˜์˜€๋‹ค.
      • pulished ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์กด์žฌ๋ฅผ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. โ†’ ์Šคํƒ€์ผ ์œ ํ‹ธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
        • hex ๋ฅผ rgb ๊ฐ’์œผ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ.
      • PM์œผ๋กœ ์ œ๋Œ€๋กœ ์ธ๋„ํ•˜์ง€ ๋ชปํ•˜์˜€๋‹ค.
    • ๋Š๋‚Œ(Feeling)
      • ๋Šฅ์ด๋ฒ„์„ฏ ( ~== ๋‚˜๋Š” (์žฌํ™œ์šฉ) ์“ฐ๋ ˆ๊ธฐ๋‹ค)
      • ์•„ํ† ๋ฏน ๋„ˆ๋ฌด ์–ด๋ ต๊ตฌ๋‚˜
    • ๊ตํ›ˆ(finding)
      • ์ด๋•Œ ๊นŒ์ง€ ๋ฆฌ์•กํŠธ๋ฅผ ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™๋‹ค.
      • ๊ณ ๋ฏผ ๋  ๋• npmjs ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋’ค์ ธ๋ณด์ž
    • ํ–ฅํ›„ ํ–‰๋™(Future action)
      • css ๋ ˆ์ด์•„์›ƒ ๊ณต๋ถ€๋ฅผ ํ•ด์•ผ๊ฒ ๋‹ค.
      • issue๋ฅผ ์ฐธ๊ณ ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ ์™„์„ฑํ•˜๊ธฐ.
    • ํ”ผ๋“œ๋ฐฑ(Feedback)
      • CS์ ์ธ ์ง€์‹์ด ๊นŠ์œผ์‹  ๊ฒƒ ๊ฐ™์•„์„œ ํŒ€์›๋“ค์— ๋Œ€ํ•œ ํ”ผ๋“œ๋ฐฑ์ด ์ •ํ™•ํ•˜๊ณ  ์ข‹์Šต๋‹ˆ๋‹ค.
      • ์Šนํ™˜๋‹˜๋งŒํ•œ PM์€ ๋ณธ ์ ์ด ์—†์Šต๋‹ˆ๋‹ค!!!! ์ตœ๊ณ ์ตœ๊ณ  ๐Ÿค™
      • MongoDB๋ฅผ ์ž˜ ๋‹ค๋ฃจ์…”์„œ DB ์„ค๊ณ„์™€ ๊ฐœ๋ฐœ์ด ์•„์ฃผ ๋งŒ์กฑ์Šค๋Ÿฝ๊ฒŒ ์ž˜๋˜์„œ ์ข‹์Šต๋‹ˆ๋‹ค๐Ÿ‘

๐Ÿ“Œ Project

๐Ÿค Rules

๐Ÿ“š Documents

๐Ÿข๊ตฌ์กฐ

๐Ÿง๋…ผ์˜

โšฝ๏ธ TroubleShooting

๐Ÿ’ฌ Memoirs

1 ์ฃผ์ฐจ
2 ์ฃผ์ฐจ
3 ์ฃผ์ฐจ
4 ์ฃผ์ฐจ
5 ์ฃผ์ฐจ

๐Ÿ“ ํ”ผ์–ด์„ธ์…˜

<2์ฃผ์ฐจ> 24๊ทธ๋ฃน 25๊ทธ๋ฃน

<3์ฃผ์ฐจ> 24๊ทธ๋ฃน 25๊ทธ๋ฃน

<4์ฃผ์ฐจ> 24๊ทธ๋ฃน 25๊ทธ๋ฃน 26๊ทธ๋ฃน 27๊ทธ๋ฃน

Clone this wiki locally