๐Ÿ›ผ ์šฐ์•„ํ•œ ํ…Œํฌ์บ ํ”„ 1์ฃผ์ฐจ ํšŒ๊ณ (0705~0708)

Lee Jooamยท2022๋…„ 7์›” 9์ผ
2

๐Ÿค˜ 1์ฃผ์ฐจ ๋ฏธ์…˜

1. ๋ฐฐ๋ฏผ ํšŒ์›๊ฐ€์ž… ํ”„๋ก ํŠธ์—”๋“œ ๊ตฌํ˜„(๋ฐ”๋‹๋ผ JS ์ด์šฉ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ์‚ฌ์šฉ ๋ถˆ๊ฐ€)

2. ๋ฐฐ๋ฏผ ํšŒ์›๊ฐ€์ž… ๋ฐฑ์—”๋“œ ๊ตฌํ˜„(ExpressJS, pug ํ…œํ”Œ๋ฆฟ ์ด์šฉ, npm ํŒจํ‚ค์ง€ DB ์ด์šฉ)

3. Heroku ์ด์šฉ ๋ฐฐํฌ


๋ฐฐ๋‹ฌ์˜ ๋ฏผ์กฑ ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฏธ์…˜์„ ์ˆ˜ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค. ExpressJS ํ”„๋ ˆ์ž„์›Œํฌ๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„๋ฅผ ๊ตฌ์ถ•ํ•˜๊ณ  ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ•ด ๋ทฐ๋ฅผ ๊ตฌํ˜„ํ•ฉ๋‹ˆ๋‹ค. ์ž‘์—…๋ฌผ์€ ์ตœ์ข…์ ์œผ๋กœ Heroku๋ฅผ ์ด์šฉํ•ด ๋ฐฐํฌํ•˜๋Š” ๊ณผ์ •์œผ๋กœ ๋งˆ๋ฌด๋ฆฌํ•ฉ๋‹ˆ๋‹ค.

์ฃผ์˜์‚ฌํ•ญ์œผ๋กœ๋Š” ๋น„์ฆˆ๋‹ˆ์Šค ๋กœ์ง์„ ์ž‘์€ ํ•จ์ˆ˜๋“ค๋กœ ๋ถ„๋ฆฌํ•˜๋Š” ๊ฒƒ๊ณผ, ๊ณตํ†ต๋œ ์Šคํƒ€์ผ ์ •๋ฆฌ, ์˜ฌ๋ฐ”๋ฅธ ์‹œ๋งจํ‹ฑ ํƒœ๊ทธ์˜ ์ ์šฉ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์•„์‰ฝ์ง€๋งŒ ๊ฒฐ๊ณผ์ ์œผ๋กœ, ์ฃผ์–ด์ง„ ์š”๊ตฌ์‚ฌํ•ญ ์ค‘ ํšŒ์›๊ฐ€์ž… ๊ธฐ๋Šฅ์€ ์‹œ๊ฐ„์— ์ซ“๊ฒจ ๊ตฌํ˜„ํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜ข

โš’ ์„ค๊ณ„

## ๋ฉ”์ธ ํŽ˜์ด์ง€

๋กœ๊ทธ์ธ ๋ฒ„ํŠผ 

- ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.

## ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€

๋กœ๊ทธ์ธ ์•„์ด๋”” ์ธํ’‹ 

- ์œ ํšจ์„ฑ ๊ฒ€์ฆ(์ด๋ฉ”์ผ ํ˜•์‹ ๋˜๋Š” ์•„์ด๋”” ํ˜•์‹), ๊ฐ’ ์ž…๋ ฅ์ด ์™„๋ฃŒ๋˜์ง€ ์•Š์„ ์‹œ ๊ฒฝ๊ณ  ๋ฉ”์‹œ์ง€

ํšŒ์›๊ฐ€์ž… ๋ฒ„ํŠผ 

- ํšŒ์›๊ฐ€์ž… ํŽ˜์ด์ง€๋กœ ์ด๋™ํ•œ๋‹ค.

## ๊ฐ€์ž… ์•ฝ๊ด€ ๋™์˜

์•ฝ๊ด€๋™์˜ ์ฒดํฌ๋ฐ•์Šค

- ์•ฝ๊ด€ ํ•ญ๋ชฉ์ด ๋ชจ๋‘ ์„ ํƒ๋  ์‹œ ์ „์ฒด๋™์˜ ์ฒดํฌ๋จ
- ์•ฝ๊ด€ ํ•ญ๋ชฉ์ด ํ•˜๋‚˜๋ผ๋„ ๋น ์ ธ์žˆ์œผ๋ฉด ์ „์ฒด๋™์˜ ์ฒดํฌ ํ•ด์ œ
- ์ „์ฒด๋™์˜ ์ฒดํฌ ์‹œ  ๋ชจ๋“  ํ•ญ๋ชฉ์ด ์ฒดํฌ๋จ

๋‚˜์ด ์„ ํƒ ๋ฒ„ํŠผ

- ๋‘˜ ์ค‘ ํ•˜๋‚˜๋งŒ ์„ ํƒ ๊ฐ€๋Šฅ(14์„ธ ์ด์ƒ ๋˜๋Š”...
.
.
.
.

ํ”„๋ก ํŠธ์—”๋“œ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํŽ˜์ด์ง€ ๋ณ„๋กœ ๊ธฐ๋Šฅ์„ ๋‚˜๋ˆด์Šต๋‹ˆ๋‹ค. ์œ ํšจ์„ฑ ๊ฒ€์ฆ ์—ฌ๋ถ€, ๋ฐœ์ƒํ•˜๋Š” ์ด๋ฒคํŠธ ๋“ฑ์„ ์ค‘์ ์œผ๋กœ ๋ถ„์„ํ•˜๊ณ  ์ด์Šˆ๋ฅผ ๋ฐœ๊ธ‰ํ•ฉ๋‹ˆ๋‹ค.

๋ฐฑ์—”๋“œ๋Š” ์•„์ง ์—ญ๋Ÿ‰์ด ๋ถ€์กฑํ•ด ๋”ฐ๋กœ ์„ค๊ณ„๋ฅผ ์ง„ํ–‰ํ•˜์ง€ ์•Š๊ณ , Express์™€ ์—์ƒ API๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ผ์šฐํŒ… ์„ค์ •, request body ์„ค์ • ๋“ฑ์„ ์ง„ํ–‰ํ–ˆ์Šต๋‹ˆ๋‹ค.

HTML์ด ์•„๋‹Œ pug ํ…œํ”Œ๋ฆฟ์„ ์ด์šฉํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ดˆ๊ธฐ ์ง„์ž…์žฅ๋ฒฝ์ด ์žˆ์—ˆ์ง€๋งŒ ์–ด๋Š์ •๋„ ์—ฐ์Šต์„ ๊ฑฐ์น˜๋‹ˆ ๋งˆํฌ์—…๊ณผ ์Šคํƒ€์ผ๋ง์€ ์ˆ˜์›”ํ•˜๊ฒŒ ํ•  ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค.

๐ŸŽ ๋ฏธ์…˜ ์ง„ํ–‰ ์ค‘ ๊ณ ๋ คํ•œ ์‚ฌํ•ญ

ํ”„๋ก ํŠธ์—”๋“œ

  • ์ „์—ญ์  ๋ณ€์ˆ˜ ์„ ์–ธ, ํ•จ์ˆ˜ ํ˜ธ์ถœ ์ตœ์†Œํ™”

    addEventListner๋‚˜ DOM object ์ฐธ์กฐ ๋“ฑ ๋‹ค์–‘ํ•œ ๊ตฌ๋ฌธ์„ ์ตœ๋Œ€ํ•œ ํ•จ์ˆ˜ ์•ˆ์—์„œ ํ•˜๋„๋ก ๋งŒ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค. ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„ ์•ˆ์— ํ•ด๋‹น ์‚ฌํ•ญ๋“ค์„ ๋„ฃ์–ด ์™ธ๋ถ€์—์„œ ์ฐธ์กฐ๋ฅผ ๋ง‰๊ธฐ ์œ„ํ•จ์ž…๋‹ˆ๋‹ค. ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ์‚ฌ์ด๋“œ์ดํŽ™ํŠธ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ๋Š” ์ข‹์€ ์Šต๊ด€์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
  • ์œ ํ‹ธ ํ•จ์ˆ˜ ๋ถ„๋ฆฌ

    ๋ฏธ์…˜์˜ ์š”๊ตฌ์‚ฌํ•ญ ์ค‘ 4์ž๋ฆฌ์˜ ๋ฌด์ž‘์œ„ ์ˆซ์ž๋ฅผ ์ƒ์„ฑํ•ด ์ธ์ฆ๋ฒˆํ˜ธ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด๋•Œ n์ž๋ฆฌ์˜ random number๋ฅผ ์ƒ์„ฑํ•˜๊ณ , ํ•ด๋‹น ๋กœ์ง์˜ ์—ฐ์†์ ์ธ ํ˜ธ์ถœ์„ ๋ง‰๊ธฐ ์œ„ํ•ด debouncer๋ฅผ ์‚ฌ์šฉํ–ˆ๋Š”๋ฐ, ๋‘ ๋ฉ”์†Œ๋“œ๋Š” ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’๋‹ค๊ณ  ํŒ๋‹จํ•ด ์œ ํ‹ธ ํŒŒ์ผ๋“ค๋กœ ๋ถ„๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.
  • ๋„คํŠธ์›Œํฌ ์š”์ฒญ ๋ถ„๋ฆฌ

    login request๋‚˜ register request ๋“ฑ ๋„คํŠธ์›Œํฌ ์š”์ฒญ์„ ์œ ํ‹ธ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ๋ถ„๋ฆฌ ๊ณผ์ •์„ ๊ฑฐ์ณค์Šต๋‹ˆ๋‹ค.
  • ๊ณตํ†ต ์Šคํƒ€์ผ์„ ๊ณ ๋ คํ•œ stylesheet

:root {
  --baemin-mint: #2ac1bc;
  --baemin-gray: #d7d7d7;
  --baemin-light-gray: #f6f6f6;
  --baemin-font-gray: rgb(147, 146, 146);
  --baemin-red: #da0d0d;

  --large-img-size: 3rem;
  --middle-img-size: 2rem;
  --small-img-size: 1rem;

  --large-font-size: 1.2rem;
  --middle-font-size: 1rem;
  --small-font-size: 0.8rem;
}

.baemin-btn--primary {
  color: white;
  background-color: var(--baemin-mint);
  padding: 0.75rem;
  border: none;
  font-size: var(--middle-font-size);
  font-weight: bold;
  border-radius: 0.5rem;
  cursor: pointer;
}

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

๋ฐฑ์—”๋“œ

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

pug

extends layout 

mixin checkInput(id, className, text)
  if className.includes('agree--all')
    div(class=`checkbox__container ${className}`)
          input(type="checkbox" id=id)
          label(for=id)=text
  else
    div(class=`checkbox__container ${className}`)
      input(type="checkbox" id=id)
      label(for=id)= text
      img.arrow(src="/images/terms_and_conditions/right-arrow.svg", alt="right-arrow")

block stylesheet
  link(rel="stylesheet", href="/stylesheets/agree_terms.css")

block scripts 
    script(src="/javascripts/agree_terms.js" defer)

block content 
  body 
    header.header
      a.header__right-link(href="/")
      h2.header__title ํšŒ์›๊ฐ€์ž…
    p.guide-ment ์–ด์„œ์˜ค์„ธ์š”
    p.guide-ment ์•ฝ๊ด€ ๋™์˜๊ฐ€ ํ•„์š”ํ•ด์š”.
    form.agree-terms__form
      +checkInput("agreeAll", "agree--all", "์ „์ฒด๋™์˜")
      +checkInput("baemin", "agree essential", "๋ฐฐ๋‹ฌ์˜ ๋ฏผ์กฑ ์ด์šฉ์•ฝ๊ด€ ๋™์˜")
      +checkInput("fintech", "agree essential", "์ „์ž๊ธˆ์œต๊ฑฐ๋ž˜ ์ด์šฉ์•ฝ๊ด€ ๋™์˜")
      +checkInput("personalInfo", "agree essential", "๊ฐœ์ธ์ •๋ณด ์ˆ˜์ง‘์ด์šฉ ๋™์˜")
      +checkInput("personalInfoToThirdParty", "agree option", "๊ฐœ์ธ์ •๋ณด ์ œ3์ž ์ œ๊ณต ๋™์˜(์„ ํƒ)")
      +checkInput("marketing", "agree option agree--last", "๋งˆ์ผ€ํŒ… ์ •๋ณด ๋ฉ”์ผ, SMS ์ˆ˜์‹ ๋™์˜(์„ ํƒ)")
      label.age-select__container
        input(type="radio" name="age" id="age" checked=true)
        p ๋งŒ 14์„ธ ์ด์ƒ์ž…๋‹ˆ๋‹ค.
        img.age-select__avatar(src="/images/terms_and_conditions/over.png", alt="over_person")
      label.age-select__container
        input(type="radio" name="age" id="age")
        p ๋งŒ 14์„ธ ๋ฏธ๋งŒ์ž…๋‹ˆ๋‹ค.
        img.age-select__avatar(src="/images/terms_and_conditions/under.png", alt="under_person")
      button.baemin-btn--primary.next-btn(type="submit" disabled) ๋‹ค์Œ์œผ๋กœ

๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ์ด๋ฃจ์–ด์ง„ ํ…œํ”Œ๋ฆฟ์ž…๋‹ˆ๋‹ค. ๋งˆํฌ์—…์„ ์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์ฒ˜๋Ÿผ ์žฌ์‚ฌ์šฉ, ๋ถ„๊ธฐ ์ฒ˜๋ฆฌ, ๋ชจ๋“ˆํ™”๋ฅผ ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์žฅ์  ๋•Œ๋ฌธ์— ์œ ์šฉํ•˜๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ๋‹ค์‹œ ์‚ฌ์šฉํ• ์ง€๋Š” ๋ชจ๋ฅด๊ฒ ์Šต๋‹ˆ๋‹ค. ๐Ÿฅต

๊ฐ™์€ ์บ ํผ๋ถ„๋“ค๋„ ๋Œ€๋ถ€๋ถ„ ์ฒ˜์Œ ์‚ฌ์šฉํ•˜์‹œ๋Š” ๋ถ„๋“ค์ด์—ˆ์„ ํ…๋ฐ ์ €์ฒ˜๋Ÿผ ๋งˆ๊ตฌ์žก์ด๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์•„๋‹ˆ๋ผ ๋„๊ตฌ์˜ ์žฅ๋‹จ์ ์„ ๋จผ์ € ํŒŒ์•…ํ•˜๊ณ  ํŠน์„ฑ์— ๋งž๊ฒŒ ์‚ฌ์šฉํ•˜๋Š” ๋ถ„๋“ค๋„ ๊ณ„์…จ์Šต๋‹ˆ๋‹ค.

๊ทธ๋Ÿฐ ๋ถ„๋“ค์„ ๋ณด๋ฉด์„œ ๋„๊ตฌ ์‚ฌ์šฉ์— ์žˆ์–ด ์˜ฌ๋ฐ”๋ฅธ ์ ‘๊ทผ๋ฒ•์ด ๋ฌด์—‡์ธ์ง€ ๊ณ ๋ฏผํ•ด๋ดค์Šต๋‹ˆ๋‹ค.

Express

๋ฏธ๋“ค์›จ์–ด
Express ํ”„๋ ˆ์ž„์›Œํฌ์˜ ํ•ต์‹ฌ ๊ธฐ๋Šฅ ์ค‘ ํ•˜๋‚˜๋Š” ๋ฏธ๋“ค์›จ์–ด์ž…๋‹ˆ๋‹ค. ๋ฏธ๋“ค์›จ์–ด๋ฅผ ํ†ตํ•ด ์š”์ฒญ์— ์•ž์„œ ์ฟ ํ‚ค๋ฅผ ์กฐํšŒํ•˜๋ฉฐ ๋‹ค์–‘ํ•œ ๊ธฐ๋Šฅ์— ๋ถ„๊ธฐ๋ฅผ ๋งŒ๋“ค์–ด ๋‚ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด ์œ ์ €์˜ ๋กœ๊ทธ์ธ ์—ฌ๋ถ€๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

  1. ๊ฒŒ์‹œ๊ธ€ ์“ฐ๊ธฐ, ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ, ๊ฒŒ์‹œ๊ธ€ ์ˆ˜์ • API ์ƒ์„ฑ
    ์“ฐ๊ธฐ๋Š” ์œ ์ € ๋กœ๊ทธ์ธ ์—ฌ๋ถ€ ํ•„์š”, ์‚ญ์ œ์™€ ์ˆ˜์ •์€ ํ˜„์žฌ ์‚ฌ์šฉ์ž๊ฐ€ ์ž‘์„ฑ์ž์ธ์ง€ ํ™•์ธํ•˜๋Š” ๊ณผ์ •์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ฒŒ์‹œ๊ธ€ ์“ฐ๊ธฐ์˜ ๋ฏธ๋“ค์›จ์–ด์— ์œ ์ € ๋กœ๊ทธ์ธ ์—ฌ๋ถ€ ํ™•์ธ ๋ฏธ๋“ค์›จ์–ด ์ถ”๊ฐ€
  3. ๊ฒŒ์‹œ๊ธ€ ์‚ญ์ œ, ์ˆ˜์ •์— ์œ ์ € ๊ถŒํ•œ ํ™•์ธ ๋ฏธ๋“ค์›จ์–ด ์ถ”๊ฐ€
// board.js

const express = require('express');
const router = express.Router();

router.get('/', readPosts);
router.post('/write', checkUserLogin, writePost);
router.post('/edit', checkUserAuthority, editPost);
router.post('/delete', checkUserAuthority, deletePost);

module.exports.router;

๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ๋ฏธ์…˜์—์„œ ๋น„๋ก ๋ฏธ๋“ค์›จ์–ด์˜ ์›ํ™œํ•œ ์‚ฌ์šฉ์€ ํ•˜์ง€ ๋ชปํ–ˆ์ง€๋งŒ ๋‹ค์Œ ๋ฏธ์…˜์—์„œ๋Š” ์ด๋Ÿฌํ•œ Express์˜ ํŠน์„ฑ์„ ์ž˜ ์‚ด๋ ค๋ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค! ๐ŸŽฏ

๋กœ์ง ๋ถ„๋ฆฌ
ํ”„๋ก ํŠธ์—”๋“œ์ฒ˜๋Ÿผ ๋ฐฑ์—”๋“œ์—์„œ๋„ ์ตœ๋Œ€ํ•œ ๋กœ์ง์„ ๋ถ„๋ฆฌํ•˜๋ ค๊ณ  ํ–ˆ์Šต๋‹ˆ๋‹ค. DB ์ ‘๊ทผ ๋ฉ”์†Œ๋“œ, ์ฟ ํ‚ค ํŒŒ์‹ฑ ๋“ฑ ์žฌ์‚ฌ์šฉ์„ฑ์ด ๋†’์€ ๋กœ์ง๋“ค์€ lib ํด๋” ์•ˆ์— ๋„ฃ์–ด ๊ด€๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค.

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

ํ˜„์žฌ api ๊ตฌํ˜„์—์„œ๋Š” ์œ ํšจ์„ฑ ๊ฒ€์ฆํ•˜๋Š” ๋กœ์ง๋„ ํ•จ๊ป˜ ํฌํ•จ๋˜์–ด์žˆ๋Š”๋ฐ ํ•ด๋‹น ๋ถ€๋ถ„์„ ๋”ฐ๋กœ ๋นผ์„œ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒŒ ๋” ๊ฐ€๋…์„ฑ ์ธก๋ฉด์—์„œ ์ข‹์•˜์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๐Ÿง  ๊ณ ๋ฏผ๊ณผ ์ƒ๊ฐ

๋ฏธ์…˜ ์ˆ˜ํ–‰ ํ›„ ํฌ๋กฑ๊ณผ ํ˜ธ๋ˆ…์Šค์˜ ๋ฆฌ๋ทฐ๋ฅผ ๋“ฃ๊ณ , ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๊ตฌํ˜„๊ณผ ์ œ ์ฝ”๋“œ๋ฅผ ๋น„๊ตํ•˜๋ฉด์„œ ์ƒ๊ฐํ•ด ๋ณธ ๋‚ด์šฉ๋“ค์ž…๋‹ˆ๋‹ค.

1. ์ฝ”๋“œ์˜ ํ’ˆ์งˆ๊ณผ ์™„์„ฑ๋„

์ด๋ฒˆ ๋ฏธ์…˜์˜ ๊ธฐํ•œ์ด ์‚ฌ์‹ค ์ƒ ์ดํ‹€์ด์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ €์—๊ฒŒ๋Š” ๊ต‰์žฅํžˆ ์งง์€ ์‹œ๊ฐ„์ด์—ˆ์Šต๋‹ˆ๋‹ค. ์ฃผ์–ด์ง„ ๊ธฐ๋Šฅ์˜ ์™„์„ฑ๊ณผ ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๋ฅผ ๋ชจ๋‘ ์ฑ™๊ธฐ๊ธฐ๋ž€ ์–ด๋ ค์šด ์ƒํ™ฉ์ž…๋‹ˆ๋‹ค.

๊ธฐ์กด์— ๊ฐ€์ง€๊ณ  ์žˆ์—ˆ๋˜ ์ƒ๊ฐ์€ ๋ฌด์กฐ๊ฑด ์™„์„ฑ๋„๊ฐ€ ์ค‘์š”ํ•˜๋‹ค๋Š” ์ชฝ์ด์—ˆ์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ ์—…๋ฌด๋ผ๋ฉด ๊ธฐํ•œ ๋‚ด์— ์ผ๋‹จ ์™„์„ฑ์„ ์‹œํ‚ค๊ณ  ์ถ”ํ›„ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ํ†ตํ•ด ํ€„๋ฆฌํ‹ฐ๋ฅผ ์˜ฌ๋ฆด ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค.

ํ•˜์ง€๋งŒ ์ง€๊ธˆ์€ ๊ต์œก์ด ์ค‘์ ์ด ๋˜๋Š” ๊ธฐ๊ฐ„์ด๊ธฐ ๋•Œ๋ฌธ์— ์ฒซ ๋ฒˆ์งธ ๋ชฉํ‘œ๋Š” ํ•™์Šต์ž…๋‹ˆ๋‹ค. ๊ทธ๋™์•ˆ ๊ฐœ์ธ์ ์ธ ์ž‘์—…๋งŒ ํ•ด์™”๊ธฐ ๋•Œ๋ฌธ์— ๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๋‚ด ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ์–ด๋–ป๊ฒŒ ๋Š๋ผ๋Š”์ง€๋Š” ์ค‘์š”์‚ฌํ•ญ์ด ์•„๋‹ˆ์—ˆ์ง€๋งŒ ์ง€๊ธˆ์€ ํ˜‘์—…์„ ๊ฒฝํ—˜ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐํšŒ์ž…๋‹ˆ๋‹ค.

๋™๋ฃŒ๋“ค๊ณผ ๋†’์€ ํ’ˆ์งˆ์˜ ์ฝ”๋“œ์— ๋Œ€ํ•ด ํ•™์Šตํ•˜๋Š” ๊ฒƒ์ด ๋†’์€ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ€์ ธ์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ์‹ค๋ ฅ์ด ์ถฉ๋ถ„ํ•˜๋‹ค๋ฉด ํ’ˆ์งˆ๊ณผ ์™„์„ฑ๋„ ๋‘˜ ๋‹ค ์ฑ™๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค... โ˜ ๏ธ ๊ฒฐ๋ก ์ ์œผ๋กœ ํฌ๋กฑ์€ ์™„์„ฑ๋„์™€ ํ’ˆ์งˆ ๋ชจ๋‘ ํฌ๊ธฐํ•  ์ˆ˜ ์—†๋Š” ๊ฒƒ๋“ค์ด๋ผ๊ณ  ๋งํ–ˆ์Šต๋‹ˆ๋‹ค. ใ…Žใ…Ž

2. ์ปค๋ฐ‹์˜ ๋‹จ์œ„

์ปค๋ฐ‹์€ atomic ํ•ด์•ผํ•œ๋‹ค.

๋ฆฌ๋ทฐ์˜ ๋งˆ์ง€๋ง‰์— ํ˜ธ๋ˆ…์Šค๊ฐ€ commit์— ๋Œ€ํ•œ ์–˜๊ธฐ๋ฅผ ํ•ด์คฌ์Šต๋‹ˆ๋‹ค. commit์€ ์ž์‹ ์ด ๋˜๋Œ์•„๊ฐˆ ์ˆ˜ ์žˆ๋Š” save point์ž…๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ํ•ด๋‹น ์ปค๋ฐ‹์—์„œ ๋ฌด์Šจ ์ž‘์—…์„ ํ–ˆ๋Š”์ง€ ํ•œ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•ฉ๋‹ˆ๋‹ค.

atomic ์ปค๋ฐ‹์€ ์œ„์™€ ๊ฐ™์€ ์‚ฌํ•ญ์„ ์ž˜ ์ค€์ˆ˜ํ•ฉ๋‹ˆ๋‹ค. ์ตœ๋Œ€ํ•œ ์ž‘์€ ๋‹จ์œ„๋กœ ์ปค๋ฐ‹์„ ์ชผ๊ฐœ๋ฉด ์ปค๋ฐ‹ ๋ฉ”์‹œ์ง€์— ๋‹ด๊ธฐ๋Š” ๋‚ด์šฉ์ด ํ’๋ถ€ํ•ด์ง‘๋‹ˆ๋‹ค. ํ˜ธ๋ˆ…์Šค๋Š” ๋ฉ”์†Œ๋“œ ๋‹จ์œ„๋กœ ์ปค๋ฐ‹์„ ์ชผ๊ฐœ๋Š” ๊ฑธ ์ถ”์ฒœํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ฒŒ๊นŒ์ง€ ์ž‘๊ฒŒ ์ชผ๊ฐœ๋Š” ๊ฒŒ ๋งž๋Š”๊ฐ€ ์‹ถ์—ˆ์ง€๋งŒ, ์ƒ๊ฐํ•ด๋ณด๋ฉด ๋งž๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

ํ•˜๋‚˜์˜ PR์—๋Š” ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ปค๋ฐ‹์ด ๋‹ด๊น๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  commit์„ ๋ณด๊ณ  ์–ด๋–ค ์ž‘์—…์„ ์–ด๋–ป๊ฒŒ ์ ‘๊ทผํ–ˆ๋Š”์ง€ ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ๊ฒŒ๋ฉ๋‹ˆ๋‹ค. ํฐ ๋ฉ์–ด๋ฆฌ๋กœ ์ปค๋ฐ‹์„ ๋‚ ๋ฆฌ๊ฒŒ ๋˜๋ฉด ์ปค๋ฐ‹์— ๋‹ด๊ธด ์˜๋ฏธ๊ฐ€ ๋ชจํ˜ธํ•ด์ ธ ๋‚˜์ค‘์— ํ™•์ธํ•  ๋•Œ ํž˜๋“ค ์ˆ˜ ์žˆ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์ด ๋“ค์—ˆ์Šต๋‹ˆ๋‹ค.

์ตœ๋Œ€ํ•œ ์ปค๋ฐ‹์„ ์ชผ๊ฐœ๋ฉด์„œ ๊ฐœ๋ฐœํ•˜๋Š” ์Šต๊ด€์„ ๋“ค์—ฌ์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

3. ์‚ฌ๋žŒ ์ค‘์‹ฌ์˜ ์ฝ”๋“œ

๋น„๋ก ์งง์€ ์‹œ๊ฐ„์ด์ง€๋งŒ, ์—ฌํƒœ ๊ณต๋ถ€ํ•˜๋ฉด์„œ ๋“ค์—ˆ๋˜ ๋ง๋“ค, ๊ทธ๋ฆฌ๊ณ  ๋ฏธ์…˜์˜ ๋ฆฌ๋ทฐ๋ฅผ ํ†ตํ•ด ์ข‹์€ ์ฝ”๋“œ๋ž€ ๋ฌด์—‡์ธ์ง€ ๋‹ค์‹œ ํ•œ๋ฒˆ ์ƒ๊ฐํ•ด๋ณด๊ฒŒ ๋์Šต๋‹ˆ๋‹ค.

ํ•œ ๋ฌธ์žฅ์œผ๋กœ ์š”์•ฝํ•˜์ž๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

๋‹ค๋ฅธ ์‚ฌ๋žŒ์ด ๋‚ด ์ฝ”๋“œ๋ฅผ ๋ณผ ๋•Œ ๊ธฐ๋Šฅ์„ ํ•œ๋ˆˆ์— ํŒŒ์•…ํ•  ์ˆ˜ ์žˆ์–ด์•ผํ•œ๋‹ค.

์ฝ”๋“œ๋Š” ๋‚˜ํƒ€๋‚˜๋Š” ๋ฐ”๊ฐ€ ๋ช…ํ™•ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— ์ž‘์„ฑ๋œ ํ•จ์ˆ˜๋“ค์€ ๊ธฐ๋Šฅ์ด ๊ฐ„๊ฒฐํ•ด์•ผํ•˜๊ณ  ๋ณต์žกํ•œ ๋ถ€๋ถ„๋“ค์„ ๋ถ„๋ฆฌ ๊ณผ์ •์„ ํ†ตํ•ด ์ ์ ˆํ•œ ์ถ”์ƒํ™” ๊ณ„์ธต์„ ์ œ๊ณตํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด ์กฐ๊ฑด๋ฌธ์˜ ์กฐ๊ฑด์—์„œ password ์œ ํšจ์„ฑ์„ ๊ฒ€์ฆํ•˜๋Š” ๋กœ์ง์„ ์ž‘์„ฑํ•˜๋Š” ๊ฒŒ ์•„๋‹Œ, ์œ ํšจ์„ฑ ๊ฒ€์ฆ์„ ๋”ฐ๋กœ ๋ฉ”์†Œ๋“œ๋กœ ๋ถ„๋ฆฌํ•ด ์กฐ๊ฑด ์•ˆ์—์„œ ํ˜ธ์ถœํ•˜๋Š” ๋ฐฉ์‹, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ์— ๊ธฐ๋ช… ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹, ๋งค์ง๋„˜๋ฒ„๋ฅผ ์ƒ์ˆ˜๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐฉ์‹ ๋“ฑ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

๋˜ํ•œ ํฌ๋กฑ์ด Early return๊ณผ ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ์˜ ์—ฐ๊ด€์„ฑ์— ๋Œ€ํ•ด ๋งํ•ด์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค.

if (๋ณต์žกํ•œ ์กฐ๊ฑด) {
	...๋‹ค์–‘ํ•œ ๋กœ์ง๋“ค
} else {
  return;
}

์œ„์™€ ๊ฐ™์€ ํ˜•ํƒœ๋กœ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•  ๊ฒฝ์šฐ ์‚ฌ๋žŒ์€ ๋กœ์ง์„ ๋ณผ ๋•Œ ์กฐ๊ฑด์„ ๊ณ„์† ์ƒ๊ฐํ•˜๋ฉด์„œ ๋กœ์ง์„ ๋ด์•ผํ•ฉ๋‹ˆ๋‹ค.

if (!๋ณต์žกํ•œ ์กฐ๊ฑด) {
	return;
} 

...๋‹ค์–‘ํ•œ ๋กœ์ง๋“ค

ํ•˜์ง€๋งŒ return์ด ๋˜๋Š” ์กฐ๊ฑด์„ ๋จผ์ € ๊ฒ€์‚ฌํ•œ๋‹ค๋ฉด ๋กœ์ง์„ ๋ณผ ๋•Œ ์กฐ๊ฑด์ด ๋จธ๋ฆฌ์—์„œ ์ฐจ์ง€ํ•˜๋Š” ๋ถ€๋ถ„์ด ์ค„์–ด๋“ญ๋‹ˆ๋‹ค. ๋ช…ํ™•ํ•˜๊ฒŒ ์„ค๋ช…ํ•  ์ˆ˜๋Š” ์—†์ง€๋งŒ ์‹ค์ œ๋กœ๋„ ๊ทธ๋ ‡๊ฒŒ ๋Š๊ปด์ง€๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

์ฝ”๋“œ์˜ ๋™์ž‘์— ์ง‘์ค‘ํ•˜๋Š” ๊ฒŒ ์•„๋‹Œ ์ฝ๊ธฐ ์‰ฌ์šด ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์— ์ค‘์ ์„ ๋‘์–ด์•ผ ํ•  ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

4. ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜์˜ ์ด๋ฆ„

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

๊ทธ๋ฆฌ๊ณ  ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜ ์ด๋ฆ„์˜ ๊ธธ์ด์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์˜๋ฏธ๋ฅผ ๋‚˜ํƒ€๋‚ด๊ธฐ ์œ„ํ•ด ์•„์ฃผ ๊ธด ์ด๋ฆ„์ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ๋„ ๊ดœ์ฐฎ์€์ง€์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์ €๋Š” ๊ดœ์ฐฎ๋‹ค๊ณ  ๊ฒฐ๋ก ์„ ๋‚ด๋ ธ์Šต๋‹ˆ๋‹ค.

๋ฌผ๋ก  ์ถฉ๋ถ„ํ•œ ์ƒ๊ฐ์„ ๊ฑฐ์นœ ํ›„ ์ •๋ง ๊ทธ๋ ‡๊ฒŒ ๊ธด ์ด๋ฆ„์ด ์‚ฌ์šฉ๋˜์–ด์•ผ ํ•  ๋•Œ๋งŒ ์‚ฌ์šฉํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ์ตœ๋Œ€ํ•œ ์ฝ”๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ”๊ฐ€ ํ’๋ถ€ํ•ด์•ผํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

๐Ÿ‘ ํ›„๊ธฐ

๋ฏธ์…˜์„ ์ฒ˜์Œ ๋ฐ›์•˜์„ ๋•Œ๋Š” ๋„ˆ๋ฌด ์‰ฝ๋‹ค๊ณ  ์ƒ๊ฐํ–ˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๊ทธ๊ฒƒ์€ ์ž๋งŒ์ด์—ˆ๊ณ , ์ด๋ฒˆ ๋ฏธ์…˜์„ ํ†ตํ•ด ์—ญ๋Ÿ‰์˜ ๋ถ€์กฑํ•จ์„ ๋ผˆ์ €๋ฆฌ๊ฒŒ ๋Š๋‚„ ์ˆ˜ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ๐Ÿ˜ฆ

๋‹จ์ˆœ์ด ์ž‘๋™๋งŒ ํ•˜๋Š” ์ฝ”๋“œ์—์„œ ๋” ๋‚˜์•„๊ฐ€ ์ข‹์€ ์ฝ”๋“œ์— ๋Œ€ํ•œ ๊ณ ๋ฏผ์„ ํ•˜๋ฉด์„œ ์ฝ”๋”ฉ์„ ํ•˜๋Š” ๊ฒŒ ์–ผ๋งˆ๋‚˜ ํž˜๋“  ์ž‘์—…์ธ์ง€, ๋‹ค๋ฅธ ์บ ํผ๋“ค์˜ ๊ตฌํ˜„์„ ๋ณด๋ฉด์„œ ๊ฐ์ž๊ฐ€ ๊ธฐ๋Šฅ์„ ๋ฐ”๋ผ๋ณด๋Š” ์‹œ์„ ์˜ ์ฐจ์ด๊ฐ€ ์–ผ๋งˆ๋‚˜ ํฐ์ง€ ์•Œ์•˜์Šต๋‹ˆ๋‹ค.

์ด๋ ‡๊ฒŒ ๊ด€์ ์ด ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค๋ผ๋ฆฌ ๋ชจ์—ฌ ํ˜‘์—…์„ ์ง„ํ–‰ํ•˜๋ฉด ๋ณธ์ธ์ด ์ž‘์„ฑํ•œ ์ฝ”๋“œ๊ฐ€ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฐ”๊ฐ€ ๋ช…ํ™•ํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ฐ€๋…์„ฑ ์ข‹์€ ์ฝ”๋“œ, ๊ณต์œ  ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ์— ๋Œ€ํ•ด ํ•ญ์ƒ ์ƒ๊ฐํ•˜๋ฉฐ ๋‹ค์Œ ์ฃผ ๋ฏธ์…˜์— ์ž„ํ•ด์•ผ๊ฒ ์Šต๋‹ˆ๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž๋กœ ๊ฑธ์–ด๊ฐ€๋Š” ์ค‘์ž…๋‹ˆ๋‹ค.

1๊ฐœ์˜ ๋Œ“๊ธ€

comment-user-thumbnail
2022๋…„ 7์›” 14์ผ

๋งŽ์ด ๋ฐฐ์šฐ๊ณ ๊ฐ‘๋‹ˆ๋‹ค ์ฃผ์•”๋‹˜!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ