Skip to content

Yangjaecheon-Otter-Guardians/qa-simple-thumbnail

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

banner

Simple-Thumbnail

๐Ÿ“Œ Summary

๊ธฐ๊ฐ„ 2023.02.22 ~ 2023.02.27
๋ฐฐํฌ simple thumbnail
๋””์ž์ธ figma
ํšŒ์˜๋ก Team Notion

๐Ÿ“Œ Team

์ž๋ชฝ ๋งฅ์Šค ์ˆ˜๋‹ฌ ์šดํ„ฐ ์›ํšจ ์ฒด๋‹ค ํ˜„
์ž๋ชฝ์˜ ์‚ฌ์ง„ ๋งฅ์Šค์˜ ์‚ฌ์ง„ ์ˆ˜๋‹ฌ์˜ ์‚ฌ์ง„ ์šดํ„ฐ์˜ ์‚ฌ์ง„ ์›ํšจ์˜ ์‚ฌ์ง„ ์ฒด๋‹ค์˜ ์‚ฌ์ง„ ํ˜„์˜ ์‚ฌ์ง„
Designer FrontEnd FrontEnd FrontEnd FrontEnd FrontEnd FrontEnd

๐Ÿ“Œ Background

๊ธฐ์กด์˜ ๋””์ž์ธํˆด์€ ๋‹ค๋ฃจ๊ธฐ ์–ด๋ ต๋‹ค๋Š” ๋ฌธ์ œ๊ฐ€ ์žˆ์–ด, ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ์ธ๋„ค์ผ์„ ์ œ์ž‘ ํ•˜๋Š” ์„œ๋น„์Šค๊ฐ€ ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค.

Target

  • ๋””์ž์ธ์„ ์–ด๋ ค์›Œํ•˜๊ณ , ์—ญ๋Ÿ‰์ด ๋ถ€์กฑํ•œ ์‚ฌ๋žŒ
  • ๊ฐ„๋‹จํ•œ ์ธ๋„ค์ผ์ด ํ•„์š”ํ•œ ์‚ฌ๋žŒ.

๐Ÿ“Œ Getting Start

git clone 'https://github.com/Yangjaecheon-Otter-Guardians/simple-thumbnail.git'
npm install
npm start

๐Ÿ“Œ Stack

  • TypeScript
    • ํƒ€์ž…์˜ ์•ˆ์ •์„ฑ์„ ์ด์šฉํ•˜๊ณ ์ž ์ฑ„ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • React
    • ์„ ์–ธ์  ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์ด๋ฉฐ SPA ๊ตฌ์ถ•ํ•˜๋Š”๋ฐ ์šฉ์ดํ•˜์—ฌ ์ฑ„ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Tailwind CSS
    • ์›น ํŽ˜์ด์ง€ ๋กœ๋”ฉ ์†๋„๋ฅผ ํ–ฅ์ƒ ์‹œํ‚ค๊ณ  ์œ ์ง€ ๋ณด์ˆ˜๊ฐ€ ์‰ฌ์›Œ ์ฑ„ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Recoil
    • Preview ์„ค์ • ๋‚ด์šฉ์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ฑ„ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • Axios
    • HTTP ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
  • eslint, prettier
    • ์ฝ”๋“œ ์ •๋ ฌ ๋ฐ ํšจ์œจ์ ์ธ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์œ„ํ•ด ์ฑ„ํƒํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • downloadjs, html-to-image
    • ์ด๋ฏธ์ง€๋ฅผ ๋‹ค์šด ๋ฐ›๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
  • react-color
    • ์ปฌ๋Ÿฌ ํ”ฝ์ปค ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
  • react-toastify
    • ๋‹ค์–‘ํ•œ ์•Œ๋ฆผ ๋ฉ”์‹œ์ง€๋ฅผ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
  • react-icons
    • ์—ฌ๋Ÿฌ ์•„์ด์ฝ˜์„ ์ œ๊ณตํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
  • react-helmet-async
    • HTML์˜ head ํƒœ๊ทธ๋ฅผ ๊ด€๋ฆฌํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.

package.json ๋ฐ”๋กœ๊ฐ€๊ธฐ


๐Ÿ“Œ File Structure

๐Ÿ“ฆfrontend
 โ”ฃ ๐Ÿ“‚public
 โ”ฃ ๐Ÿ“‚src
 โ”ƒ โ”ฃ ๐Ÿ“‚assets  # ๋ฒˆ๋“ค๋ง ๋˜์–ด์•ผํ•˜๋Š” ์ž์‚ฐ์„ ๋ชจ์•„๋‘” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚atom  # recoil์˜ atom์„ ๋ชจ์•„๋‘” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚components  # ๋Œ€ํ‘œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ชจ์—ฌ์žˆ๋Š” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“‚common  # ๊ณตํ†ต ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ชจ์•„๋‘” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ƒ โ”ฃ ๐Ÿ“‚text  # ํ…์ŠคํŠธ ๋ ˆ์ด์•„์›ƒ ๋ฐ ์•„์ดํ…œ์„ ๋ชจ์•„๋‘” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚constants  # ์ „์—ญ์ ์œผ๋กœ ์‚ฌ์šฉ๋  ์ƒ์ˆ˜๋ฅผ ๋ชจ์•„๋‘” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚features
 โ”ƒ โ”ƒ โ”— ๐Ÿ“œApp.tsx  # App ์ „์ฒด๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚fonts  # ํฐํŠธ ํŒŒ์ผ๋“ค์ด ๋ชจ์—ฌ์žˆ๋Š” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚sections  # ํ™”๋ฉด์„ ๊ตฌ์„ฑํ•˜๋Š” ๋Œ€ํ‘œ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ชจ์—ฌ์žˆ๋Š” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚styles  # module๋กœ ์ž‘์„ฑํ•œ cssํŒŒ์ผ์ด ๋ชจ์—ฌ์žˆ๋Š” ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ƒ โ”ฃ ๐Ÿ“‚utils  # ์œ ํ‹ธ์„ฑ ํ•จ์ˆ˜๋ฅผ ์œ„ํ•œ ํด๋”์ž…๋‹ˆ๋‹ค.
 โ”ฃ ๐Ÿ“œ.eslintrc.js
 โ”ฃ ๐Ÿ“œ.gitignore
 โ”ฃ ๐Ÿ“œ.prettierrc
 โ”ฃ ๐Ÿ“œpackage-lock.json
 โ”ฃ ๐Ÿ“œpackage.json
 โ”ฃ ๐Ÿ“œREADME.md
 โ”ฃ ๐Ÿ“œtailwind.config.js
 โ”— ๐Ÿ“œtsconfig.json

๐Ÿ“Œ Demo

0001-4813.mp4

๐Ÿ“Œ TODO

์ธ๋„ค์ผ ๋ฐฐ๊ฒฝ

  • ์ปจ๋ฒ„์Šค ์‚ฌ์ด์ฆˆ๋ฅผ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค.
    • ๋“œ๋กญ๋‹ค์šด์„ ํ†ตํ•ด 1:1, 4:3, 16:9 ๋น„์œจ๋กœ ๋ณ€๊ฒฝํ•˜๋„๋ก ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๋ฐฐ๊ฒฝ์„ ๋ณ€๊ฒฝํ•˜๊ณ  ์‹ถ๋‹ค.
    • ์ƒ‰์ƒ ๋ฐฐ๊ฒฝ : ํŒ”๋ ˆํŠธ์—์„œ ์ƒ‰์ƒ์„ ์„ ํƒํ•˜๊ฑฐ๋‚˜, ๊ทธ๋ผ๋ฐ์ด์…˜์œผ๋กœ ๋ณ€๊ฒฝํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
    • ์ด๋ฏธ์ง€ ๋ฐฐ๊ฒฝ : Unsplash api๋ฅผ ์ด์šฉํ•˜์—ฌ ์ด๋ฏธ์ง€๋ฅผ ๋žœ๋คํ•˜๊ฒŒ ์ ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ณผ๋„ํ•œ api์š”์ฒญ์„ ๋ง‰๊ธฐ์œ„ํ•ด ๋””๋ฐ”์šด์‹ฑ์„ ์ถ”๊ฐ€ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
    • ์ง์ ‘ ์—…๋กœ๋“œ : ์›ํ•˜๋Š” ์‚ฌ์ง„์„ ์—…๋กœ๋“œํ•˜์—ฌ ๋ณ€๊ฒฝํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์ธ๋„ค์ผ ํ…์ŠคํŠธ

  • ํ…์ŠคํŠธ๋ฅผ ์ž…๋ ฅ/์ˆ˜์ •ํ•˜๊ณ  ์‹ถ๋‹ค.
    • ์ž…๋ ฅ์ฐฝ์— ๋ฌธ๊ตฌ๋ฅผ ์ž‘์„ฑ/์ˆ˜์ •ํ•˜๋ฉด ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ™”๋ฉด์— ๋ฐ˜์˜๋˜๋„๋ก ๊ตฌํ˜„ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ํ…์ŠคํŠธ ๋ ˆ์ด์•„์›ƒ์„ ์„ค์ •ํ•˜๊ณ  ์‹ถ๋‹ค.
    • ํ…์ŠคํŠธ ๊ฐฏ์ˆ˜์— ์•Œ๋งž์€ ํ…์ŠคํŠธ ๋ ˆ์ด์•„์›ƒ์„ Carousel๋กœ ๋ณด์—ฌ์คŒ์œผ๋กœ์„œ ์„ ํƒํ•˜๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ํ…์ŠคํŠธ ํฐํŠธ๋ฅผ ์„ค์ •ํ•˜๊ณ ์‹ถ๋‹ค.
    • ๋ชจ๋“  ํ…์ŠคํŠธ์— ์ ์šฉ๋  ํฐํŠธ๋ฅผ ๋“œ๋กญ๋‹ค์šด์œผ๋กœ ์„ ํƒํ•˜์—ฌ ์ ์šฉ๋˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ํ…์ŠคํŠธ ๊ฐ•์กฐ(๊ตต๊ธฐ)๋ฅผ ์„ ํƒํ•˜๊ณ  ์‹ถ๋‹ค.
    • ๊ฐ ํ…์ŠคํŠธ์˜ ๊ตต๊ธฐ๋ฅผ ๊ตต๊ฒŒ, ๋ณดํ†ต, ์–‡๊ฒŒ์˜ ๋ฒ„ํŠผ์„ ์„ ํƒํ•˜๋„๋ก ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ํฐํŠธ ์ƒ‰์ƒ์„ ์„ ํƒํ•˜๊ณ ์‹ถ๋‹ค.
    • ๊ฐ ํ…์ŠคํŠธ์— ์ ์šฉ๋  ์ƒ‰์ƒ์„ ํŒ”๋ ˆํŠธ, ColorPicker๋ฅผ ํ†ตํ•ด ๋ณ€๊ฒฝ๋˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ธฐํƒ€

  • ์ธ๋„ค์ผ์„ ์ €์žฅํ•˜๊ณ  ์‹ถ๋‹ค.
    • ๋ฏธ๋ฆฌ๋ณด๊ธฐ์— ๋‚˜์˜จ ํ™”๋ฉด์„ downloadjs์™€ html-to-image ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์ด์šฉํ•˜์—ฌ ์ž๋™์ €์žฅํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ €์žฅํ•˜๋Š” ์ž‘์—…์ด ๊ธธ์–ด์งˆ ๊ฒฝ์šฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ์œ„ํ•ด ๋กœ๋”ฉ์ฒ˜๋ฆฌ๋ฅผ ์ถ”๊ฐ€ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ์ž‘์—… ๋‚ด์šฉ์„ ์ดˆ๊ธฐํ™”ํ•˜๊ณ ์‹ถ๋‹ค.
    • ๊ฐ ์„ค์ •๋œ ๋ชจ๋“  recoil๊ฐ’์„ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ๋Œ๋ ค๋†“์•„ ์ดˆ๊ธฐํ™”ํ•˜๋„๋ก ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.

์„œ๋น„์Šค

  • Github Pages ๋ฐฐํฌ. + ์ปค์Šคํ…€ ๋„๋ฉ”์ธ ์—ฐ๊ฒฐ (+ main branch์˜ CI/CD ํŒŒ์ดํ”„๋ผ์ธ ๊ตฌ์ถ•)
    • Github Pages workflow๋ฅผ ์ž‘์„ฑํ•˜์—ฌ CI/CD๋ฅผ ๊ตฌ์ถ•ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
    • Github Pages๋กœ ๋ฐฐํฌ๋œ ์ฃผ์†Œ๋ฅผ Github Custom Domain์„ ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.
  • ๋ฐ˜์‘ํ˜• ์›น ์ ์šฉ
    • Mobile, Tablet, Desktop์œผ๋กœ ๋‚˜๋ˆ  ๋ฒ”์œ„์— ์†ํ•˜๋Š” ์‚ฌ์ด์ฆˆ์— ๋งž๊ฒŒ ๋ฏธ๋””์–ด์ฟผ๋ฆฌ๋ฅผ ์ ์šฉํ–ˆ์Šต๋‹ˆ๋‹ค.
  • SEO ์ตœ์ ํ™”
    • metaํƒœ๊ทธ, title, description ๋“ฑ์„ ์ด์šฉํ•˜์—ฌ Open Graph, ๊ตฌ์กฐํ™”๋œ ๋งˆํฌ์—…์œผ๋กœ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค.
  • Google Search Console์— ํŽ˜์ด์ง€ ๋“ฑ๋ก
    • ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ์—”์ง„์— ์›น์‚ฌ์ดํŠธ๊ฐ€ ๊ฒ€์ƒ‰๋˜๋„๋ก ๋“ฑ๋กํ•ด์ฃผ๊ณ , ๊ตฌ๊ธ€ ๊ฒ€์ƒ‰ ๊ฒฐ๊ณผ๊ฐ€ ์–ด๋–ป๊ฒŒ ์ด๋ค„์ง€๊ณ  ์žˆ๋Š”์ง€ ๋ชจ๋‹ˆํ„ฐ๋ง ๊ฒฐ๊ณผ๋„ ์•Œ๊ธฐ์œ„ํ•ด ๋“ฑ๋กํ–ˆ์Šต๋‹ˆ๋‹ค.
  • GA(๊ตฌ๊ธ€ ์• ๋„๋ฆฌํ‹ฑ์Šค)
    • ์›น์‚ฌ์ดํŠธ๋กœ ์œ ์ž…๋˜๋Š” ๋ชจ๋“  ๋ฐฉ๋ฌธ์ž์˜ ์ •๋ณด๋ฅผ ํ™•์ธํ•˜๊ณ ์ž ์‚ฌ์šฉํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๐Ÿ“Œ Sprint Retrospect

Day 1

์Šคํ”„๋ฆฐํŠธ ๋ชฉ์ 
์–ด๋–ป๊ฒŒ ํ•˜๋ฉด ์•ž์œผ๋กœ ํ˜‘์—…์„ ๋” ์ž˜ ํ•  ์ˆ˜ ์žˆ์„์ง€ ๊ทธ ๋ฐฉ๋ฒ•์„ ๋ฐฐ์šฐ๋Š” ๊ฒƒ

์Šคํ”„๋ฆฐํŠธ ํšŒ์˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ์ง„ํ–‰ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

  1. ์‹œ๊ฐ„์„ ์ •ํ•˜๊ธฐ
  2. ๊ฐ์ž์˜ ์ด์•ผ๊ธฐ๋ฅผ ์“ฐ๊ธฐ
  3. ๋Œ์•„๊ฐ€๋ฉฐ ์–˜๊ธฐํ•˜๊ธฐ
  4. ์ ๊ทน์ ์œผ๋กœ ๋ฆฌ์•ก์…˜ํ•˜๊ธฐ

๊ทธ ์ค‘ ์ ๊ทน์ ์ธ ๋ฆฌ์•ก์…˜์„ ํ†ตํ•ด ๋ฐœํ‘œ์ž๋ฅผ ํŽธํ•˜๊ฒŒ ํ•˜๊ณ , ์ƒˆ๋กœ์šด ์ƒ๊ฐ๊ณผ ๋ง์„ ๊บผ๋‚ด๋Š”๋ฐ ํฐ ๋„์›€์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

์ƒˆ๋กœ์šด ์‚ฌ๋žŒ๋“ค๊ณผ ํ˜‘์—…ํ•˜๊ธฐ ์œ„ํ•ด ๊ฐ€์žฅ ๋จผ์ € ์ง„ํ–‰ ํ•œ ๊ฒƒ์€ ํŒ€ ์บ”๋ฒ„์Šค ์ž‘์„ฑ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹จ๊ณ„ ๋ณ„๋กœ ์ž์‹ ์„ ์†Œ๊ฐœํ•˜๋ฉฐ ๊ฐ€๊นŒ์›Œ์ง€๋Š” ๊ณผ์ •์œผ๋กœ "๋‚ด๊ฐ€ ์ด ์‚ฌ๋žŒ๋“ค ์•ž์—์„œ๋Š” ๋ˆˆ์น˜๋ฅผ ๋ณด๋ฉด์„œ ๋ง ํ•  ํ•„์š”๊ฐ€ ์—†๋‹ค"๋Š” ์‹ฌ๋ฆฌ์  ์•ˆ์ „ ์žฅ์น˜๋ฅผ ๋งˆ๋ จํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

ํ…Œ์˜ค์˜ ์Šคํ”„๋ฆฐํŠธ 14๊ธฐ 5์กฐ Team Canvas

Day 2

์ง€๋„ ๊ทธ๋ฆฌ๊ธฐ
์„œ๋กœ์˜ ์•„์ด๋””์–ด๋ฅผ ํ™•์žฅ ํ•˜๊ณ  ๋ฐœ์‚ฐ ํ•˜๊ณ  ๊ตฌ์ฒดํ™” ํ•˜๋Š” ์‹œ๊ฐ„

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

ํ…Œ์˜ค์˜ ์Šคํ”„๋ฆฐํŠธ 14๊ธฐ 5์กฐ ์ง€๋„ ๊ทธ๋ฆฌ๊ธฐ

Day 3

์Šค์ผ€์น˜

๋ฌด์—‡์ด ๋งž๋Š” ๋ฐฉ๋ฒ•์ธ์ง€ ๋…ผ์˜๋ฅผ ๊ธธ๊ฒŒ ์ด์–ด๊ฐ€๊ธฐ ๋ณด๋‹ค๋Š” ์šฐ์„  ๊ฐ์ž์˜ ์Šค์ผ€์น˜ํ•œ ์•„์ด๋””์–ด๋ฅผ ๋ฐœํ‘œํ•จ์œผ๋กœ์จ ๋ชจ๋“  ์˜๊ฒฌ์„ ๋ˆ„๋ฝ์—†์ด ๊ณต์œ ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

๊ฒฐ์ •

์ˆ˜ํ‰์ ์ธ ํŒ€์›Œํฌ๋ฅผ ๋งŒ๋“ค๊ธฐ์œ„ํ•ด ๋ฌด์–ธ๊ฐ€๋ฅผ ์ œ์ผ ์ž˜ํ•˜๋Š” ์‚ฌ๋žŒ์ด ์ œ์ผ ์ž˜ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋ฉฐ ์ด๋Š” ๊ถŒ์œ„๋‚˜ ์ง๊ธ‰์ด ์•„๋‹ˆ๋ผ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•˜๋Š” ๊ฒƒ์ด๋ผ ์ƒ๊ฐํ•˜์—ฌ ๊ฒฐ์ •๊ถŒ์ž(PL)๋ฅผ ์„ ์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์ด๋กœ์จ ๊ฒฐ์ •๊ถŒ์ž๋ฅผ ํ†ตํ•ด ์—ฌ๋Ÿฌ ์˜๊ฒฌ์„ ํ•˜๋‚˜๋กœ ์ขํ˜€๋‚˜๊ฐˆ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ ๊ฒฐ์ •๊ณผ ์ฑ…์ž„์ด ๋ถ„๋ช…ํ•˜์ง€ ์•Š์œผ๋ฉด ๋‚จ์—๊ฒŒ ์ฑ…์ž„์„ ๋ฏธ๋ฃจ๊ฑฐ๋‚˜ ๋ˆ„๊ตฐ๊ฐ€๊ฐ€ ๋…๋‹จ์ ์œผ๋กœ ๊ฒฐ์ •ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์„ ์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค.

์„ค๊ณ„

BDD(behavior driven development)
์‚ฌ์šฉ์ž์˜ ํ–‰๋™์„ ์ค‘์‹ฌ์œผ๋กœ ๊ฐœ๋ฐœ์„ ์ง„ํ–‰ํ•˜๋Š” ๋ฐฉ์‹

ํ…Œ์˜ค์˜ ์Šคํ”„๋ฆฐํŠธ 14๊ธฐ 5์กฐ BDD ์„ค๊ณ„

About

๐ŸšจQA๋ฅผ ์œ„ํ•œ ๋ ˆํฌ์ง€ํ† ๋ฆฌ ์ž…๋‹ˆ๋‹ค.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • TypeScript 79.3%
  • CSS 13.0%
  • JavaScript 4.8%
  • HTML 2.9%