Skip to content

[๐Ÿฑ KPT] ๊ฐœ์ธ ํšŒ๊ณ  _ ๊ฐ•์˜์„œย #178

@minjman2659

Description

@minjman2659

Keep (์œ ์ง€ํ•  ํ•ญ๋ชฉ)

  1. ์ผ์ •์— ๋งž์ถ”์–ด ์ง„ํ–‰ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•จ
    • ์Šคํ”„๋ฆฐํŠธ๋ฅผ ๋ณด๊ณ  ๊ณต๋ถ€ํ•˜๋Š” ๊ฒƒ์—์„œ ๋ฒ—์–ด๋‚˜ ์ฒ˜์Œ ํ•ด๋ณด๋Š” ํ”„๋กœ์ ํŠธ๋ผ์„œ ์ผ์ •์„ ์งœ๋ฉด์„œ๋„ ๊ธด๊ฐ€๋ฏผ๊ฐ€ ํ•œ ์ ์ด ๋งŽ์•˜๋Š”๋ฐ, ๊ทธ๋ž˜๋„ ์ง€์ •ํ•ด ๋‘” ์ผ์ •์— ๋งž์ถ”์–ด ์ง„ํ–‰ํ•˜๋ ค๊ณ  ๋…ธ๋ ฅํ•ด์„œ ์ด๋ ‡๊ฒŒ๋ผ๋„ ์ฒซ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งˆ๋ฌด๋ฆฌ ํ•  ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค.
    • ์ผ์ •์— ๋งž์ถฐ์•ผ ํ•œ๋‹ค๋Š” ์ƒ๊ฐ๋•Œ๋ฌธ์— ์ด‰๋ฐ•ํ•˜๋‹ค๋Š” ์ƒ๊ฐ์— ๋ฉ˜ํƒˆ์ด ๋งŽ์ด ๊นจ์ง€๊ธฐ๋„ ํ–ˆ์ง€๋งŒ ๊ทธ๋ž˜๋„ ํŒ€์›๋“ค๊ณผ ๊ฐ™์ด ๊ณ ๋ฏผํ•˜๊ณ  ์ž‘์„ฑํ•˜๋ฉด์„œ ํž˜์„ ์–ป์„ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
  2. ํŒ€์›๋“ค๊ณผ ์†Œํ†ตํ•˜๋ฉด์„œ ์ง„ํ–‰ํ–ˆ์Œ
    • ํ”Œ๋กœ์šฐ๊ฐ€ ์ดํ•ด๋˜์ง€ ์•Š์•„์„œ ์ง„ํ–‰ํ•˜๊ธฐ ์–ด๋ ค์šด ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ์—ˆ๋Š”๋ฐ, ํŒ€์›๋“ค๊ณผ ํ•จ๊ป˜ ๊ณ ๋ฏผํ•ด๋ณด๊ณ  ๋ฌด์—‡์ด ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š”์ง€ ๋ง๋กœ ํ’€์–ด๋ณด๋ฉด์„œ ํžŒํŠธ๋ฅผ ์–ป์€ ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค.

Problem (๋ฌธ์ œ๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ํ•ญ๋ชฉ)

  1. SR์„ ๋” ๊ผผ๊ผผํžˆ ์ง„ํ–‰ํ–ˆ์—ˆ์–ด์•ผ ํ–ˆ์Œ
    • ๊ทธ๋ž˜๋„ SR์„ ๊ฐ€์ด๋“œ์— ๋งž์ถฐ ์ถฉ์‹คํ•˜๊ฒŒ ์ง„ํ–‰ํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ๋Š”๋ฐ, ์ง„ํ–‰ํ•˜๋ฉด์„œ ๋ณด๋‹ค๋ณด๋‹ˆ ๋„ˆ๋ฌด ๋ชจ์ž๋ฅธ ์ ์ด ๋งŽ์•˜๋‹ค.
    • ํŠนํžˆ SR์—์„œ ์™€์ด์–ดํ”„๋ ˆ์ž„์— ์‹œ๊ฐ„์„ ๋งŽ์ด ๋“ค์˜€๋Š”๋ฐ, ๋””์ž์ธ ์ชฝ๋„ ์ค‘์š”ํ•˜์ง€๋งŒ state๋‚˜, ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ง„ํ–‰๋˜๋Š”์ง€ ํ๋ฆ„์„ ๋” ์ž์„ธํžˆ ์ž‘์„ฑํ•˜๊ณ  ์ฐธ๊ณ ํ–ˆ์—ˆ์–ด์•ผ ํ–ˆ๋‹ค. ๋””์ž์ธ์€ ์ค‘๊ฐ„์— ๋ฐ”๊ฟ”๋„ ์ฝ”๋“œ๋ฅผ ํ†ต์งธ๋กœ ์ด์‚ฌ์‹œํ‚ค๊ฑฐ๋‚˜ ์‚ญ์ œํ•ด๋„ ์–ผ์ถ” ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ๋ฐ์ดํ„ฐ ํ๋ฆ„์ด๋ผ๋˜์ง€ ํ”Œ๋กœ์šฐ๋Š” ์ฒ˜์Œ๋ถ€ํ„ฐ ์ƒ๊ฐํ•ด๋‘๊ณ  ๋งŒ๋“ค์ง€ ์•Š์œผ๋ฉด state๋ฅผ ์—…๋ฐ์ดํŠธ ํ•˜๊ฑฐ๋‚˜, useEffect๋ฅผ ์“ฐ๊ณ ์‹ถ์„๋•Œ ๋„ˆ๋ฌด ๋ณต์žกํ•ด ์ง€๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์•˜๋‹ค.
      • ํ•œ ์ปดํฌ๋„ŒํŠธ์— 8~10๊ฐœ์— ๊ฐ€๊นŒ์šด props๋ฅผ ์ „๋‹ฌํ•ด ์ฃผ์–ด์•ผ ํ• ๋•Œ ๋„ˆ๋ฌด ๊ณ ํ†ต์Šค๋Ÿฌ์› ๋‹ค(...)
  2. ์ „์ฒด ์ฝ”๋“œ ์ž‘์„ฑ ์‹œ๊ฐ„ ์ค‘์— CSS์— ๋Œ€ํ•œ ๋น„์œจ์ด ๋„ˆ๋ฌด ๋†’์•˜์Œ
    • ์ง„ํ–‰ํ• ๋•Œ ๋จผ์ € ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋‹ค ์ž‘์„ฑ(JSX + styled-component)ํ•˜๊ณ  ๋‚œ ํ›„ state๋ฅผ ์ „๋‹ฌํ•˜๊ณ  ๊ด€๋ฆฌํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ, ์ƒ๊ฐ๋ณด๋‹ค CSS์—์„œ ๋„ˆ๋ฌด ๋งŽ์€ ์‹œ๊ฐ„์„ ํˆฌ์žํ•˜๊ฒŒ ๋˜์„œ state ๊ด€๋ฆฌ๋ฅผ ์‹œ์ž‘ํ–ˆ์„๋•Œ ์‹œ๊ฐ„์ด ๊ต‰์žฅํžˆ ์ด‰๋ฐ•ํ•˜๊ฒŒ ๋А๊ปด์กŒ๋‹ค.
    • state๋ฅผ redux๋ฅผ ํ†ตํ•ด ๊ด€๋ฆฌํ•˜๋ ค๊ณ  ํ–ˆ๋Š”๋ฐ, styled-component ๋””์ž์ธ์— ์‹œ๊ฐ„์„ ๋‹ค ์จ๋ฒ„๋ ค์„œ ๋ฆฌ๋•์Šค๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜๊ฐ€ ์—†์—ˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฒฐ๊ตญ์— ํ”„๋กญ์Šค๋กœ ์ „๋‹ฌํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์ง„ํ–‰ํ–ˆ๋Š”๋ฐ, ๊ทธ๋Ÿฌ๋‹ค๋ณด๋‹ˆ ๋” ์ฝ”๋“œ๊ฐ€ ๋ณต์žกํ•ด์ง€๊ณ  ์ง„ํ‡ด์–‘๋‚œ์ด์˜€๋‹ค. ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋ฉด์„œ๋„ ์ค‘๊ฐ„์ค‘๊ฐ„ ๋ฆฌ๋•์Šค๋ฅผ ์ผ์œผ๋ฉด ์กฐ๊ธˆ์€ ํŽธํ–ˆ์„ํ…๋ฐ ๋ผ๋Š” ์ƒ๊ฐ์ด ๋งŽ์ด ๋“ค์—ˆ๋‹ค.
    • ์ง„ํ–‰ํ•˜๋ฉด์„œ ์–ด๋–ค ๋ถ€๋ถ„์˜ styled-component๋‚˜ CSS๋ฅผ ์ˆ˜์ •ํ•˜๊ฒŒ ๋˜๋ฉด ๊ทธ๊ฒŒ ๋‹ค๋ฅธ ๋ถ€๋ถ„์— ์˜ํ–ฅ์„ ๋ผ์ณ ์˜๋„ํ–ˆ๋˜ ๋””์ž์ธ์ด ๋‚˜์˜ค์ง€ ์•Š์„ ๋•Œ๋ผ๋˜์ง€, ์•„๋‹ˆ๋ฉด ์˜๋„ํ•œ๋Œ€๋กœ ๋””์ž์ธ์„ ๋งŒ๋“ค์—ˆ์œผ๋‚˜ ๋งˆ์Œ์— ๋“ค์ง€ ์•Š์•„ ์ˆ˜์ •์„ ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์ž์ฃผ ์ƒ๊ฒผ๋Š”๋ฐ, ๊ทธ๋Ÿด๋•Œ ํ•ด๋‹น styled-component๋ฅผ ์ฐพ์œผ๋ ค๊ณ  ์˜ค๋žœ ์‹œ๊ฐ„์„ ์“ฐ๊ฒŒ ๋˜๋ฉด์„œ styled-component๊ฐ€ ์ข‹์€๊ฒŒ ๋งž๋‚˜ ๋ผ๋Š” ์˜๋ฌธ๋„ ์ƒ๊ฒผ์—ˆ๋‹ค.

Try (Action Items)

  • SR ์ž‘์—… ํ•  ๋•Œ ๋””์ž์ธ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ํ•„์š”ํ•œ ์ƒํƒœ ๊ฐ’์ด๋ผ๋˜์ง€, ๊ทธ ์ƒํƒœ๊ฐ’์ด ์–ด๋–ค ๋•Œ์— ์“ฐ์ด๋Š”์ง€, ์–ด๋–ป๊ฒŒ ์—…๋ฐ์ดํŠธ ๋˜๋Š”์ง€ ๊ผผ๊ผผํžˆ ํŒŒ์•…ํ•˜๊ธฐ
  • JSX + styled-component(๋˜๋Š” CSS)๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์ „์— JSX + ์ƒํƒœ๊ฐ’ ํ”Œ๋กœ์šฐ ํ™•์ธํ•˜๊ณ  ํ•˜๊ธฐ
  • styled-component ์ด์™ธ์— ๋‹ค๋ฅธ CSS ๋ฐฉ๋ฒ•๋ก (tailwind CSS)์— ๋Œ€ํ•ด์„œ๋„ ๊ณต๋ถ€ํ•˜๊ณ  ์ ์šฉํ•ด๋ณด๊ธฐ
  • ํ”„๋กœ์ ํŠธ ์ดˆ๋ฐ˜์— redux ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•˜๊ธฐ
  • ๋ฐฐํฌ ์ž๋™ํ™” ๋ฐ cloudfront์™€ route53 ์‚ฌ์šฉํ•ด์„œ ๋„๋ฉ”์ธ์œผ๋กœ ๋ฐฐํฌํ•ด๋ณด๊ธฐ

Metadata

Metadata

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions